十大打动人的注册与登录页面细节设计

　　[核心提示]& 10大打动人的注册与登录页面细节设计

　　"魔鬼存在于细节中"，这句格言在设计中更是如此。相信很多人都知道在 tumblr 有一个叫做 littlebigdetails 的网站，专门记录一些很多人可能不易觉察的界面交互细节。今天我们摘选了部分注册与登录表单例子。

　　对一个 web 网站或移动应用来说，注册和登录是用户接触该产品的第一步，如果这一步的界面以及交互设计在一些细节上有新意的话，能够让用户感到眼前一亮的话，可以大大提高产品的用户转化率。

　　注册登录两不误

　　1. 上图为 tumblr 注册页面，点击 start 在注册的同时就登录上去。下图中旧版wunderlist 亦是如此。

　　2. 而另外一个比较另类的 amazon 为了达到“让注册用户易登录，让新用户易注册”的目的，将注册用户和新用户合二为一，如下图。

　　密码安全提示

　　3. geeklist 在注册页面输入密码的时候右侧会提示破解该密码需要的时间。

　　类似的还有 tumblr 的注册页面以及 twitter 注册页面，只不过将具体时间改为了条状与颜色提示，红色表示危险，绿色表示安全。

　　4. gmail 登录页面输入旧密码会提示用户上次更改密码的时间。

　　5. facebook 在密码提示这一点上做得也不错，不仅可以像 google 那样当输入旧密码会提示上次更改密码的时间，还会将用户名栏直接变成用户的帐号基本信息，想借此给你一点提示。

　　动态效果/实时反馈

　　6. 在 kickstart 的注册页面中，当用户邮箱后缀输入错误时(如将 gmail 敲成 gmaill 或 gmaiil)它会给用户实时纠正提示。

　　8. quora 的登录页面输入邮箱后会实时加载该邮箱对应的账户信息(用户名及头像)，提示用户是否输入正确。

　　9. path 网页版(旧版)上的注册按钮点击后在跳转过程会呈现一个笑脸，类似效果的还有cloudapp 的登录页面，下图所示。

　　10. 乐高旗下的一款游戏 lego universe(已关闭)的登录界面更是有趣，在用户输入密码的时候下方的乐高机器人会从正常状态(左侧所示)变为捂住自己眼睛状态，太有爱了。

　　除了上面这些外，还有很多常见的优秀细节体验，如在注册页面填写邮箱后自动获取邮箱后缀前部分(一般为用户昵称或常用 id)并自动填入下方用户名栏，这里就不一一列举了。当然这里还需要说明的就是，上面这些 littlebigdetails 只是让注册登录表单体验更加良好的加分项，而非全部。