什么样的登录框才算是优秀的？

　　做WEB前端的同学知道，登录框是一个网站的必须板块，好的登录框不光能实现简单的登录验证功能，还可以体现好的交互设计。从我自己的经验和网上的一些资料，介绍下如何设计一套好的登录框：

总的来说，一个好的登录框应该考虑到以下几点：

1. 基本功能
2. 输入效率
3. 安全和图灵验证
4. 反馈和找回用户名或密码
5. 多账户
6. 设计风格

下面分别介绍 ———————————————————————————————————————————————————————————————————————————

1. 基本功能

一般来说，登录框的功能不外乎这几个功能：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)，一举两得。

(这验证码曾让我想砸电脑 -_-’)（这个真心听不懂～）

　　

PS. 其实中文的识别比英文要难得多，为什么不闹个汉字的OCR改进计划呢?利用用户输入验证码的精度校正汉字的OCR。

解决方案：主要是解决验证码的识别问题，像End the CAPTCHA Agony利用游戏的方式进行验证。或像SolveMedia(Engagement Advertising Technology)，在验证码内嵌入容易识别的广告。国内已经有类似的公司做这样的事情，相对于提供免费服务的网站来说，这样做也无可厚非，如豆瓣可以尝试在验证码环节加入自己的FM pro广告。如下图

  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

关于验证码部分，这个博客说的很详细http://www.comingx.com/blog-html/2242.html

PS：也可以用验证码限制注册用户，如德问网的验证码是一段代码。（这个有点狠）

4.反馈和找回帐号密码

这包括在用户登录过程中所需要的各种反馈，如：

输入框选中的反馈，明确用户当前所在位置。

输入过程中的反馈，上面输入效率及输入模式中提到的点。

提交验证过程反馈，给个loading效果让用户知道目前处于等待状态，是否允许在提交过程中取消登录?

验证出错后的反馈，提示用户哪个环节出现了错误，密码是保留还是清空?

　　图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