那些打动人的“注册登录”细节

那些打动人的“注册登录”细节

Devils in the details

"魔鬼存在于细节中",这句格言在设计中更是如此。相信很多人都知道在 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 只是让注册登录表单体验更加良好的加分项,而非全部。

LittleBigDetails用户体验交互设计
下载极客公园客户端
iOS下载
反馈