做WEB前端的同学知道,登录框是一个网站的必须板块,好的登录框不光能实现简单的登录验证功能,还可以体现好的交互设计。从我自己的经验和网上的一些资料,介绍下如何设计一套好的登录框:
总的来说,一个好的登录框应该考虑到以下几点:
- 基本功能
- 输入效率
- 安全和图灵验证
- 反馈和找回用户名或密码
- 多账户
- 设计风格
下面分别介绍 ———————————————————————————————————————————————————————————————————————————
- 基本功能
一般来说,登录框的功能不外乎这几个功能:1.登录验证输入。2.忘记密码。3.记住帐号和密码。4.多帐号登录。5.注册。基本的登录功能,要在注册时限制帐号和密码的格式和长度,在登录框处可以不做具体验证格式问题,可以直接提交服务器验证。忘记密码可以做成一个链接,到另一个版面找回密码;可选择用邮箱或者手机验证修改密码(我比较倾向与邮箱验证)。记住帐号和密码,需要在脚本中设置cookies的生命时长。多帐号登录,许多网站都可以多个帐号登录,如人人网,新浪邮箱等,可以用邮箱/手机/姓名/昵称/作为登录帐号;另外也可以从腾讯和新浪等公司得到接口,用QQ和微博帐号验证也是可行的。注册功能一般比较突出的位置,链接到注册界面。
2.输入效率
现阶段大多数用户登录均要求用户使用传统的键盘进行输入,这里就涉及一个问题–击键效率或称为输入效率。有许多解决输入效率的方法,如,
使用统一账户,许多互联网服务允许使用OpenID,新浪、腾讯、Facebook、twitter…等等,像知乎允许使用新浪微博的账号登录,这样就减少了用户进行注册或登录时的输入成本。
记住用户名及密码,这样可避免用户下次再进行输入,但用户清空cookie或安全级别要求高的互联网服务就悲剧了。
在输入过程中给予用户帮助,例子:新浪微博使用邮箱做为登录名(如图1),用户在输入@ 后,将会出现输入建议,输入建议里有常用邮箱的后缀以辅助输入。
图1
另外,还有一些细节,如,在用户输入完用户名或密码后,焦点重新切换回用户名或密码的输入框,应该是全选已输入内容呢还是输入焦点位于已输入文字的后面?用户名及密码正确,仅验证码出错的情况下应该如何处理?
解决方案:使用OpenID,或使你的账户成为OpenID(对于国内巨头这是句废话),允许用户记住账户及密码(默认项给勾上),给予用户输入辅助,记住用户输入过的历史记录(可别记密码)并在适当的触发条件下显示出来。ps.以上仅为部分,还需要区域Web端及移动端。
3.安全和图灵验证
邮箱、数字证书、密保卡、U盾等,对应不同的安全级别,各有利弊。(鄙人不懂安全,不班门弄斧)
验证码是登录框中大有可为的一环
只要有登录框的网站就一定有图灵验证,也就是验证码,为了防止机器攻击的伟大发明。这个也是让我但疼了无数次的功能。为了判断是否属于正常登录而非恶意的侵犯或骚扰,这对于真正的用户来说,验证码没有必要出现,所以仅在登录时触发某些条件再显示验证码吧(像登录错 误次数等)。难以识别的的验证码对于用户来说是沉重的压力,有的0和O难以区分、1和l难以区分,还有支付宝原来的字母O和数字0的问题,糟糕的验证码设计只会一次次将用户阻 挡在服务之外。
(知乎上的这个真心看不懂)
如实在无法绕过验证码这个环节,是否可以考虑为验证码增加一些实际意义,像reCAPTCHA: Stop Spam, Read Books 项目(已被google收购),利用验证码技术来帮助典籍数字化的进行,这个计划将由书本扫描下来无法准确的被光学文字辨识技术(OCR)识别的文字显示在验证码问题中,让用户在回答验证码时用人脑加以识别(如图3),一举两得。
![](https://i-blog.csdnimg.cn/blog_migrate/f8423d524eb9402edd482a6d7fb1660b.jpeg)
![](http://p2.zhimg.com/1b/4c/1b4c52aa15a1f2a6ceae65ecf10486a6_m.jpg)
PS. 其实中文的识别比英文要难得多,为什么不闹个汉字的OCR改进计划呢?利用用户输入验证码的精度校正汉字的OCR。
解决方案:主要是解决验证码的识别问题,像End the CAPTCHA Agony利用游戏的方式进行验证。或像SolveMedia(Engagement Advertising Technology),在验证码内嵌入容易识别的广告。国内已经有类似的公司做这样的事情,相对于提供免费服务的网站来说,这样做也无可厚非,如豆瓣可以尝试在验证码环节加入自己的FM pro广告。如下图
关于验证码部分,这个博客说的很详细http://www.comingx.com/blog-html/2242.html
PS:也可以用验证码限制注册用户,如德问网的验证码是一段代码。(这个有点狠)
4.反馈和找回帐号密码
这包括在用户登录过程中所需要的各种反馈,如:
输入框选中的反馈,明确用户当前所在位置。
输入过程中的反馈,上面输入效率及输入模式中提到的点。
提交验证过程反馈,给个loading效果让用户知道目前处于等待状态,是否允许在提交过程中取消登录?
验证出错后的反馈,提示用户哪个环节出现了错误,密码是保留还是清空?
![](https://i-blog.csdnimg.cn/blog_migrate/2f1aa263c05c34819b563ffdc282723d.jpeg)
图4
解决方案:明确登录过程中的各种反馈,并将这些反馈进行细化,使之具有意义,方便用户理解。如,OSx 及 iCloud的登录框在出错后,都会抖动提示验证出错。恰当的动效在这里得到的很好的体现,抖动的效果与人类摇头的效果一致。
现在应用及服务太多,而且大都需要用户进行注册,(最近总忘密码,但再次疼了一下)用户也难免会遗忘(使用统一的OpenID可解决很大一部分问题)。遗忘密码可在登录区域明显的放置,也可采用一些巧妙的方式进行提示(图6)。
图6
解决方案:这里提一下忘记密码流程上需要注意的点吧,尽量少使用安全问答,不安全,现阶段个人信息在网上近乎透明;用户遗忘密码时不要强行给用户设置一个新密码;通过邮件让用户自行重置密码;对于安全级别要求高的服务采用多种方式重置密码,如,手机+邮件+U盾+人工等
5.多账户
某些应用及服务允许多账户,如桌面端的QQ、Chrome、Win操作系统等。涉及账户的选择、登录的时机等。举个反例,Mac端的QQ,当用户打开 Mac版QQ时,第一时间显示的是单个账户,没有明确提示用户选择其它账户或添加其它账户的入口,导致很多用户只能在不断试错后才知道点击头像进行选择 (图5左)。ps.MacQQ打开后,默认焦点停留在QQ号码输入区域并全选,这是想闹哪样?如果用户登录过了,默认焦点应该在密码输入区域啊,反馈过也 没见改进... -_-'图5
解决方案:系统支持多账户,给出足够明显的提示,方便用户切换账户(图5右),并尽可能以选择代替输入,成本较低,注意一下选择账户后光标的默认位置(这里可能还涉及记住密码的问题)。
6.设计风格
鄙人不懂设计,不多发言。不过个人比较推荐极简的设计风格。
几个好的登录框设计:
知乎登录验证
(豆瓣)
(icloud)
参考博客:http://www.comingx.com/blog-html/2242.html
http://www.woshipm.com/ucd/17812.html
参考了知乎MoonMonster的回答http://www.zhihu.com/question/19857723