August 28, 2016

【解构ui】登陆&注册表单设计

前两天我们讨论了表单的设计，而注册和登陆页面是一个非常典型的表单形式。作为几乎每一个App都会涉及到的设计部分，登陆和注册表单的设计很大程度上掌控着用户的留存。今天我们来总结归纳一下这些设计~

登陆&注册方式

就我看到的登陆注册方式做了一个归纳：

注册方式

输入用户名/邮件地址/手机号，设置密码-注册
输入用户名/邮件地址-输入手机号-接收短信验证-注册
输入手机号-接收短信-注册
通过第三方平台无需注册直接登陆

登陆方式

输入用户名/邮件地址/手机号-输入密码-登陆
输入用户名/邮件地址-输入手机号-接收短信验证-登陆
输入手机号-接收短信-登陆
通过第三方平台直接登陆

由此可以看到的是登陆和注册的页面内容其实差不多，没有说有一定的好坏，很多时候还是要取决于app的性质，比如我们现在看到越来越多的应用支持第三方平台的登陆，通常这种方式会用在一些娱乐性的应用上，如果银行手机端的app也用这种方式可能就有点不合适了。

当然通过第三方平台登录的方式也有其弊端，由于信息是自动导入的，这就会有隐私顾虑，不是每个人都愿意的，因此在第三方登录之外可以再加上传统的登录方式。

再来，假设就作为一个普通的社交或者工具性的应用，可能以上的几种方式都可以，但是很显然的是第三种和第四种注册或登录方式最省事，因为他们都没有要求填入密码。而密码真是一个让人头大的事儿，不要让我特地记住真是太贴心了。而大部分传统的app还是会要求你去输入用户名密码，而上面的第二种方式还要你接受短信填写验证，多出了一步，相比其他几种方式就有点逊色。

当然登陆或者注册界面的设计方式不止这几种，但很重要的一点就是不要让用户填写太多信息，比如生日信息，地区信息等，这些信息可以在注册完之后再再必要的时候让用户补充完整。

忘记密码

这里顺便再把密码忘记的情形先说掉，忘记密码这事儿也是常有发生，通常填写超过2次就开始产生严重的自我怀疑了，没耐心的用户对于不是必须得现在用上的应用估计就走人了。因此顺畅的忘记密码设置体验也要给用户服侍得好好的。

在这里也总结一些看到的忘记密码设置流程。

点击忘记密码后：

发送设置密码的邮件到用户的邮箱-通过邮箱连接设置密码
直接让用户重设密码，然后去邮箱里确认
输入收到的手机验证码-重设密码
发送新密码到用户的邮箱/手机

有没有发现，其实如果用户通过第三方登陆或者通过接受手机验证码登陆就能避免用户忘记密码的情况，也不需要用户去重设什么密码。但如果你的app从一开始就是要求用户设置了一个密码的话，如何帮助他们找回，重设，是需要我们揣摩的。

上面的四种方式，有没有觉着在手机端的话使用接受验证码然后重设的方式最简单。就第一种方式让用户去邮箱点击链接重设的方式来说，势必用户最终会打开的会是一个网页界面，这对应用的一致性体验就不大好，一号店就有着这样的体验，点击忘记密码后，它带你去到的是网页界面，让你重设。如果这时网页界面的排布和客户端的页面排布不一致的话，用户还得再重新定位。

第二种方式让用户重设密码后去邮箱确认，这种方式还是得劳驾用户打开自己的邮箱，转移了用户的注意力。像我这种下一秒不知上一秒自己在做什么的用户估计就忙着查看邮件，忘记去设置密码了。

而发送新密码到用户的邮箱/手机给到用户存在的问题是，机器随机给的密码估计很难记，用户也记不住，估计下一次登陆的时候还是会忘记。

因此选择良好的登陆/注册方式能帮助用户更快的看到他们想要的内容，从而提高用户留存率。当然在手机端，用户注册好之后就不要没事儿把他们给踢出去了。

这里再提示一点，在用户点击忘记密码之前通常他们已经将他们的邮箱地址或者手机号填写过了，因此在忘记密码页面设计上就不要让他们再填写一遍了。

登陆表单设计

唠叨这么多关于登陆和注册界面的设计方式，接下来总结一下表单的设计注意点。

这个问题只出现在英文里，由于英文里的Sign in 和Sign up 长得实在像，但含义又完全不同，用户在上网的时候基本都是扫视的，没有人有空停下来去仔细辨别，不要让用户动脑子，因此用Register代替Sign up效果会好很多。

当然也可以通过颜色进一步去区分两者的区别。

尽可能减少输入内容

就像我之前提到的不要让用户输入太多内容，这里再提到一个就是很多应用会让用户设置好密码之后再输入以一遍，表示确认。

将你真正需要的信息列出来让用户输入就足够了

删除再次确认密码输入框。如果怕用户输错密码，可以在输入框旁边添加一个密码可视的icon，让用户自我检查。

不要提供可填可不填的选项。如果这么确定，就不要浪费用户的时间，但是如果实在需要，就一定要写清楚。

区分注册和登陆

有些网站的登陆和注册页面长得十分相似，这让用户难以区分。

我们可以试着通过颜色外观等不同的设置来对登陆和注册界面加以区分，比如下图Twitter的界面。

允许用户看到他们的密码

就像之前说到再次输入密码的时候有提到，让用户看到他们的密码能帮助他们正确的填写。通常有两种方式，一种就是加上一个眼睛的icon，一种用多选框来开启可见密码功能。

手机号输入

用手机登陆或输入手机号码的时候，要考虑到区号，比如下面的应用就用国旗来代表国家区号，点击后选择国家区号，但个人认为可以直接自动检测用户所在地，自动输入区号，因为国旗这个图标和区号的含义还是不是很明确，如果区号不符合，用户会自主修改。

提供指导性提示语

在输入有误的时候，你应该立刻告知用户。不要只告诉用户他们错了，要他们那里错了，并且如何修正。

有些时候输入的密码会有一大堆的要求，但是在输入的时候让用户考虑那么多，并不很合适。我们可以试着通过视觉告知用户输入的内容是不是都符合了。

比如下图，当用户没完成一项的时候就将提示语变淡表示已完成。

如果对自己的隐私有所担心，可以加上一句话说明。

实时的验证反馈，能告诉用户是否填写正确。用较为突出的颜色告诉用户他们的输入是否正确。就比如当要求用户输入一些没有注册过的用户名和复杂的密码的时候，实时的验证反馈是很有必要的。

使用用户名的问题

之前我们有提到使用手机号登陆注册的速度会更快，而使用用户名有着一大缺点，就是已经被其他用户使用掉的名字，新用户不能用了。即便我们实时反馈给用户他们的用户名已经被注册了，让他们用一个新的用户名，用户也得苦思冥想一会儿，而且这个新想出来的名字估计也不好记。（难怪我有n多网名。。。）

不要一上来就让用户注册/登陆

当用户第一次下载后打开你的app的时候尽量不要一上来就让他们登陆注册。这种尚未建立起任何信任之前的方式有着一定的风险，调查显示，如果一上来就强迫用户注册，会造成85%用户放弃继续使用。只有用户在熟悉你的产品后他们才会想到去注册，而且也不要让注册页面时不时就跳出来，而是要在需要的时候，比如用户要操作上传编辑等内容的时候再跳出来让用户注册/登陆。