编辑导语：我们下载一个APP、登录一个网站往往都需要进行注册或者登录，由此可见，注册登录功能的设计有多么重要。本文作者对此进行了全面的逻辑分析，看看注册登录功能如何设计才能提升用户的体验感吧。

很多to B端平台，由于用户量不大，对注册登录功能也就不太重视。

就我而言，在没研究注册登录功能时，觉得它很简单，想着几乎每个应用都有，能有多难。就算运用中有疑问，也只会针对当前问题分析，也因此没有一个系统的概念和认知。

通过这几天的深入挖掘，发现做好登录注册界面真的没有想象中简单。本文主要以pc端界面为案例分析注册登录，相比注册，登录写的不那么全面。

1. 注册

常见的注册共有2种，分别是手机号注册和邮箱注册。邀请码注册登录通常在产品内测阶段启用，用户名注册几乎已经销声匿迹。

1.1 手机号注册

目前大部分APP都采用手机号为主要注册登录的方案，主要是因为手机号本身的特性，手机号具有高渗透率、唯一性、真实性（实名认证）、可联络性，手机号不仅可以确认用户身份，还可以在必要时联系用户、通过通讯录导入社交关系等。

1.1.1 分步和非分步注册

注册界面一般设计表现形式有两种，分步注册和非分步注册。

据facebook数据统计，分步注册的用户留存率大大高于非分步注册。当然也不能一概而论，但是分步注册确实能屏蔽干扰信息，让用户按照引导顺序来操作，减少了用户犯错率，不过分步步骤最好不要超过3步，否则会让用户感觉操作复杂。

注册分类思维导图如下，测试了花瓣、ui中国、站酷、bilibili、人人都是产品经理、京东、天猫等web网站发现前三种注册方式都有，关于设置登录名/昵称、支付方式的注册输入项这里暂不提及。

1.1.2 注册流程图

忽略“下一步显示”或“触发显示”这些交互，“分步”和“非分步-全部显示”流程相同，全部显示中没有验证安全码而点击”获取短信验证码”会报错，“非分步-全部显示”同“分步”：

1.1.3 toast提示

toast提示应该简单明了，一般用于错误发生时。

比如：输入信息不完全、输入错误（登录）、输入不合法（注册）、已注册/未注册（手机号）等，注册操作中，最好能实时提醒，不要等到用户输入所有信息后，再提示错误。

提示明细如下：

1.2 邮箱注册

邮箱注册属于pc时代的常见做法，现在多见于国外网站注册，比方说dribbble、twitter、facebook。如果用户是第一次使用邮箱注册登录，那么会发送邮箱验证码或是验证链接到邮箱，然后需要用户到邮箱中进行操作，这样用户体验会非常差。

不少企业从pc时代一路走过来，会考虑没有绑定手机号的老用户，而设置邮箱/密码登录方式。

1.2.1 分步和非分步注册

以上测试的几款web网站中，只有天猫设置了邮箱注册方式，还是在手机号被占用的情况下，通过提示链接中进入。同类电商京东并没提供邮箱注册方式，只是提示手机号已超过关联上限数量，请更换。

由此可见，邮箱注册已被大多数国内企业弃用。

这里分类分步和非分步是基于忽略激活步骤的前提下，思维导图如下：

激活邮件常用的有两种：链接和数字验证码两种，如下图：

1.2.2 注册流程图

相比手机号注册，邮箱注册多了邮箱激活过程，这让它的注册流程相对偏复杂，这里通过流程图特意说明下。

1.2.3 toast提示

1.3 注册成功后流程图

2. 登录

目前主流的登录方式是短信登录和第三方授权登录，手机端和web端都有其特有登录方式，手机端中的一键快速登录、手势密码、指纹登录，web端的二维码登录。

2.1 toast提示

登录操作有很多应用会在点击登录button时才提示错误信息，当然个别诸如安全码类的提示会第一时间反馈。下表中整理的提示信息登录方式为密码登录、短信登录。

2.2 切换登录界面

在测试中，发现有的平台同时为用户提供了两种登录界面：独立界面和弹窗；独立界面跳转方式有两种，本页打开方式、新开窗口。

• 只提供一种：参考站酷，跳转登录注册界面使用在本页打开方式，登录成功后自动跳转到登录操作前所浏览的界面。
• 提供两种：视频播放类平台bilibili，在首页触发登录时新开窗口打开独立界面，在播放界面触发登录时打开弹窗。

3. 交互要点

3.1 表单交互要点

注册登录过程中涉及的要素通常是五种，分别是手机号、邮箱、安全码、短信验证码、密码，这些要素都有其作用和优化方案。

掌握并运用得当，会大大的节省用户操作时间，提高账户的安全性和用户体验。

3.2 其它交互要点或概念剖析

3.2.1 输入框提示

输入框提示语是必不可少的，措辞要简洁，现在普遍做法是输入框中提示，获取焦点时提示消失，如果输入项少，这种做法是可取的。

当然最好是在输入的过程中保留提示，如下图3种方式。后两种比较炫，每行输入后，提示会上移显示，其开发难度也会稍大。

简单标注补充说明：大多数用户是产品小白，*表示必填项只有高段位用户才理解。

因此，在设计表单界面过程中，选填项、必填项最好用文字标注。简短的操作说明也建议使用文字表述，图标隐藏说明文字虽然视觉效果好，但一定程度消耗了用户体验。

一方面，图标类提示得点击图标后才显示，增加了用户操作步骤；另一方面，图标也容易被用户忽略。

3.2.2 短信验证码

系统下发的短信一般会设定有效期，有效期设定在5-10分钟为宜，短信码获取间隔为1分钟，短信码若有必要，可设定一天下发次数验证，或者在有效期内用户多次点击时下发相同验证码。

这样不仅可以节省成本（下发短信需要付费），也不会因为同时受到多条短信而分不清。

3.2.3 安全码

3.2.3.1 验证码目前主要有四种

滑动验证、按图片提示选字、图形验证码、旋转图片；目的是为了确认是人为注册，防止软件恶意注册。图片码支持随时刷新切换，不做次数限制。

3.2.3.2 验证顺序说明

发送短信验证码之前用安全码验证，通常有以下3种顺序：

1. 先隐藏，点击“发送短信验证码”时显示并验证，验证成功后，提示发送短信成功，或点击“发送验证码”获取短信，此种安全码多以弹窗显示。如：左1—滑动验证（上）、左2-按提示选字或图片；
2. 先显示并隐藏短信验证码行，验证通过后显示“短信验证码”输入栏，如：左1—滑动验证（下）；
3. 显示并验证，若未验证，点击“发送短信验证码”时提示“请输入验证码”，如左3，这种方式大型网站很少见了。

3.2.3.3 安全码界面样式

有非弹窗和弹窗两种，非弹窗安全码样式如下：

弹窗类安全码，看图选图/选字、滑动、旋转安全码这三种类型均有，触发条件为点击“发送短信验证码”或者如下图。

3.2.4 用户协议

用户协议出现在注册界面的情况居多，早期一般是默认被选中状态或是点击注册即视为同意协议条款。

但是支付宝新闻事件提醒我们，用户协议最好是需要用户自己去点击确认，现在很多应用也开始这样做，如下右图，未勾选协议前，下一步按钮不可点。

3.2.5 密码眼睛开合

出于使用场景考虑，比如：用户在注册时身边有人，为了保护用户的密码隐私，可以在输入密码时关闭眼睛icon。开启眼睛是为了让用户清楚的看见自己密码，避免密码输入错误。

3.2.6 一键删除账户名/密码

这个功能是给用户在注册登录页面输入有误或是切换账户时使用，可以有效减少用户点击次数，提升用户体验。

3.2.7 保留账户名数据

如果用户曾登录过，可以保留用户的账户名数据，这样用户重新登录时只需输入密码或者验证码即可。当然，用户如果想重新输入账户名，一键删除数据的功能就显得很有必要，例如：QQ邮箱登录。

3.2.8 多账户之间的登录切换

在登录时可以选择多个账号，这个功能在to C端应用比较少，一般是to B类应用可能会用到，因为企业可能会拥有多个账号，这个功能就显得很重要。

3.2.9 去除鸡肋操作

注册登录过程中，一些鸡肋的操作会影响用户体验，从而导致用户流失，比方说密码重复输入，完善个人资料等。这些操作可以放在个人中心或是设置中让用户自行填写，在注册登录页面只保留必填的内容。

图片来自网络或截图，仅供学习交流。

本文由 @windy 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Pexels，基于 CC0 协议