用户注册/登录模块实践

前言

最近负责的网站项目正式进入开发阶段，首先面临的当然就是用户登录模块的设计与实现了。说起来自己虽然不是第一次进行类似模块的开发，但这次作为项目的负责人，突然就感觉有必要对以后交付的产品进行一次深度打磨，毕竟产品就是咱最好的名片嘛，哈哈，以后吃饭喝粥就靠它了。那么问题来了，一个设计美观大方，功能完善，用户体验舒适的登录模块究竟是如何实现的呢？我用两个小时搜集了一些信息，这一搜，却还真搜出了个三四五六，且听我细细道来。

需求分析

一个操作繁琐，设计糟糕的用户注册模块，往往是我们在将访客转化为注册用户过程中最不希望见到的东西
首先，咱们来理一理，一个完整的用户注册/登录模块究竟需要哪些功能。

用户信息表格 (User Sign-Up Form)

用户信息表格是网站收集用户信息的最重要的入口，从用户访问网站开始直至整个用户行为的结束，80%以上的信息都来自用户初次注册时所填的表单，因此在设计该表单时，我们必须从需求上厘清信息的必要性，也即是，什么信息在后续业务中至关重要，必须要求用户填写（有些应用会考虑通过后续激励来诱导用户添加信息，但显然在注册时完成这一步骤更加简单），以及什么信息可以暂时忽略，等等。
常见的用户信息包括:

• 用户名
• 邮箱
• 手机号码
• 密码
• 密码确认
• 手机验证码确认

等， 对于英文网站，First Name 和 Last Name 也是常见的必填选项。

下面是一个中规中矩的注册页面，考虑到业务需求，该页面特别地将信息进行了分类，并通过图标区分开来。它的设计上则是采用简单的浅背景色+朴素的灰/蓝色，很多JQuery 模板插件都以这种形式出现。

再来看看谷歌的注册页，纯白背景加无边框的Material Design设计显然清爽了许多，我们可以看到页面两边进行了刻意的留白，通过左边的 Icon 和 Banner 填补视觉上的空缺，整个页面看起来简洁大方。但不得不吐槽的一点是，谷歌娘要求填写的信息实在太多了，而且验证机制也不够人性化，大概是店大不愁客吧 :P。

讲完注册咱们再讲讲登录，登录表格嘛，大家都知道，一个用户名/邮箱/手机，一个密码，一个验证码，完事儿，但真有那么简单嘛？细心的朋友们可能会发现，由于现在大多数流行的APP都提供本地储存，用户打开APP之后很少需要重复登录。那么显然，当一个用户被引导到注册页的时候，很可能是他第一次使用这个应用，因而作为产品的设计者，我们则应把用户对页面布局的不熟悉而出现误填操作的情况考虑进去，对登录页和注册页进行明显的区分。
以下是一个典型的反例：

同样的配色加上同样的布局，让人误填信息的概率大大增加，从而给用户造成不良体验。

接下来咱们再讲讲登录信息的反馈，当用户登录失败时，我们有必要返回相应的原因，从而推动用户进行进一步操作。 简单来说就是，当用户误填用户名时，要及时通知“该用户名不存在”，或者“该用户已被锁定”，而当密码输入错误时，则应提示“用户名与密码不匹配”等等。更进一步地，当提示框弹出时，我们还可以在其中加入对应操作的链接，引导用户点击跳转进行相应处理。

邮件激活 （Email Activation）

在现代应用中，邮件激活与绑定已经成为非常普遍的场景了，甚至不少应用直接使用邮箱作为唯一用户名，那么在这方面我们可以做些什么样的改进呢？
首先，避免用户的重复输入。
很多应用喜欢在邮件栏下方添加一个确认邮件的输入框，这种做法本意是好的，希望藉此避免用户误填信息，但实际上有研究发现，用户在遇到此类文本框时，更加倾向于使用密码管理器或是复制黏贴解决问题，因此在现代应用设计中，我们应尽量避免无意义的内容，只保留一个文本框即可。
从用户体验的角度出发，文本框周围应提供足够的提示信息
激活邮件是否已经发送？发送地址是什么？用户最慢需要多长时间才能收到邮件？这些都是我们可以考虑加入提示的内容，下图为一个简单的邮件提示效果。

手机短信验证 （SNS）

短信验证与邮件验证的设计十分类似，一个比较好的优化是，允许用户指定短信的发送目的国家和地区，从而实现相应的号码表单验证。
微信这点上做的很好，丢个例子，在此不加赘述。

人机测试（CAPTCHAS）

人机测试的类别五花八门，但核心的需求却是相同的——防止恶意注册。一个优秀的人机测试设计，是能在不影响用户体验的基础上，给用户带来一定乐趣。
这里罗列几种常见的人机测试手段：

1. 文字识别类
   
2. 问答类
   
3. 交互类
   
   这几种验证码各有所长，具体可以根据网页风格和自身需求进行相应设计。

第三方登录

第三方登录是在常规登录基础上的一种延伸手段，同时也方便网站获取用户的个人信息，因此往往被许多网站采用。常见的第三方登录接口有微信，QQ，网易邮箱，新浪微博，facebook, gmail等等，需要注意的是第三方登录最好能同时出现在登录页和注册页，方便用户随时进行选择。