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

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

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

注册登录两不误

　　1. 上图为 Tumblr 注册页面，点击 Start 在注册的同时就登录上去。下图中旧版Wunderlist 亦是如此。yixieshi.com

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

　　密码安全提示 yixieshi.com

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

　　类似的还有 Tumblr 的注册页面以及 Twitter 注册页面，只不过将具体时间改为了条状与颜色提示，红色表示危险，绿色表示安全。 互联网的一些事

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

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

　　动态效果/实时反馈

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

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

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

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

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