首页 > 代码库 > 阿阿斯顿发沙发是地方撒旦法

阿阿斯顿发沙发是地方撒旦法

我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登陆框为入口,谈一谈如何完善自己的程序。

在很多人眼里,前端就是 DIV+CSS+JQuery,甚至还有些人停留在 table 布局的迷雾当中(这些人应该跟 IE6 一样,随着历史渐渐被尘封)。但,前端绝不是你所看到的那样。举个例子,登录页面几乎是每一个系统不可或缺的模块,很多娴熟的人可以在一刻钟之内写好一个登录页面,两个 input,一个提交 button,万事 OK。

Username: <input type="text" /><br />Password: <input type="password" /><br /><input type="sbumit" />

当然,作为一个完成登录验证的页面,这几个元素完全可以胜任,但我只能说你完成了一个可以用的页面,这种页面完全没有用户体验可言,完全不符合一个具有的严谨的思维的程序员的作风!

本文地址:http://www.cnblogs.com/hustskyking/p/user-exprience-in-login-box.html

一、一切以良好用户体验为基础

1. 视觉效果

界面的设计就不用多说了,一般情况这个属于美工的活儿,这里要谈的是几个最基础的点。

第一,你的页面兼容性如何?各个元素的长宽、行高等在不同浏览器上是否表现一致,如果这个都没有保证,那一定是不合格的。

第二,移动终端上的体验问题,如今很多页面 PC 和移动终端都用的一套结构,也就是我们所说的响应式布局,本博客就使用了响应式布局,缩小窗口可以看到效果,响应式布局是为了让不同的移动终端也能得到同样的优质体验,可是很多开发者却忽略了横屏时的效果。下面是常见的几个移动终端的像素比例:

Mobilepx rate
Iphone5320*568
Iphone4320*480
Galaxy S 3/4360*640
Lumia 920384*640
iPad768*1024

照顾用户的响应式布局除了要考虑这些屏幕的横屏,还得把竖屏考虑进去。我简单的做了一个登陆页面:

正确的账号是:barret,密码是:123,你可以用错误的信息先去测试下~

阿阿斯顿发沙发是地方撒旦法