网页登录页面的设计

这是某某中学综合管理平台，的一个原版用户登录界面，现在需要在原有基础上做一个改版设计。此时我们可以运用以用户为中心的设计方法大大提升原有登录界面的用户体验。

注：本案例仅提供一种优化方案，介绍运用以用户为中心的设计思维来改版网站的方法，还有其他方案请大家自己去发挥。

第一步：理解原有版本的界面功能。

做改版之前有可能会发现原版的很多问题，此时切不可立马陷入视觉的细节，应当对原有界面功能进行系统的整理，进而画出线稿。

第二步：以用户的思维寻找原版中操作的主要问题。

（1）用户名的输入框中应当输入什么。

（2）如果忘记密码不知道何去何从。

（3）重置的功能容易误解为密码重置或个人信息重置，经笔者操作后发现其实是取消输入框信息的功能。

（4）小提示“首次登录需要更改您的密码”容易被忽略。

（5）IE 6.0浏览器在国内已基本被淘汰，此处提示的意义不大。

第三步：逐一解决主要功能问题

（1）默认状态下给用户名填写提示。如填写“请输入学号或工号”。

（2）密码下方应当有一个提示，忘记密码时可以单击链接，重新设置密码。

（3）“重置”的标识文字改为“取消”。

（4）小提示“首次登录需要更改您的密码”从页面底部上挪到登录按钮下方，顺应用户的浏览顺序，方便用户登录时更改密码。

（5）去掉底部“本系统需要运行在IE 6.0以上版本”的提示，页面上应当尽量保持简洁，不需要的东西就应去掉，不去打扰用户阅读。

第四步：优化界面的交互功能

（1）完善密码功能。为了界面的友好，登录界面默认状态下无验证码，但出于对学校管理系统安全性的考虑建议无“记住密码”的功能，若连续3次以上密码输入错误，使用验证码。

（2）区分不同功能之间的间距，如输入框和按钮之间的距离较之两个输入框之间的间隙要略大，一来是为了区分功能区域，二来是为填写错误后的提示信息留有区域。

（3）扩大可操作区域的空间。如输入框的高度增大，按钮的单击面积扩大，都是为了方便用户操作单击。

第五步：优化视觉细节。

（1）界面布局优化，界面左上角添加了学校的Logo与学校名称区域，登录框水平居中处于视觉重点区域。

（2）精简有效信息。小提示的图标[插图]就有警醒提示的作用，因此图标[插图]和“小提示”可以二选其一。

（3）视觉风格更改。本系统平台的用户为中学的师生及家长，因此视觉风格应当吻合中学生朝气蓬勃的特征。改版后的界面选用了蓝天下的向日葵作为背景素材，为了不抢夺登录框的焦点，特地加以模糊效果来烘托出充满生机、阳光向上的氛围。

（4）色调确定。从背景图片中提取颜色，蓝色为主，黄色为辅。

（5）界面元素符合Web页面显示规则，最好有一套设计规范文档，用来标注文字字体样式、大小、图标大小、色彩色值、对齐方式等，便于团队合作。

（6）考虑到界面的交互状态，此处供设计了两张效果图，一是默认状态下的登录页面，二是含有交互效果的登录页面。切记每一个有交互状态的地方都需要有些视觉变化以暗示用户目前所处的状态。最典型的如按钮就设计了3个状态，未选中、选中或悬停、选中并单击的效果，还有正在输入的输入框其轮廓会变为蓝色，忘记密码选中或悬停就会出现下画线，而填写错误后会有相应的提示。