的萨芬撒打发斯蒂芬

我们会骂 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 和移动终端都用的一套结构，也就是我们所说的响应式布局，本博客就使用了响应式布局，缩小窗口可以看到效果，响应式布局是为了让不同的移动终端也能得到同样的优质体验，可是很多开发者却忽略了横屏时的效果。下面是常见的几个移动终端的像素比例：

Mobile	px rate
Iphone5	320*568
Iphone4	320*480
Galaxy S 3/4	360*640
Lumia 920	384*640
iPad	768*1024

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

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

转载于:https://www.cnblogs.com/teddyzhang/p/4090083.html