编辑导语：下载APP和登录网站时，我们经常需要注册或登录。由此可见注册和登录功能的设计是多么重要。本文作者进行了全面的逻辑分析，看看如何设计注册和登录功能以增强用户的体验。

许多to B端平台，由于用户数量较少，很少关注注册和登录功能。

就我而言，当我没有研究登录功能时，我认为它非常简单，认为几乎每个应用程序都有它，它可以有多难。即使在应用中有疑问，也只会分析当前的问题，因此没有系统的概念和认知。

通过这几天的深入挖掘，我发现做好登录和注册界面真的没有我想象的那么简单。本文主要以pc端界面为例进行注册和登录。与注册相比，登录没有那么全面。

1.常见的注册类型有两种，即手机号码注册和电子邮件注册。邀请码注册通常在产品内测阶段启用，用户名注册几乎已经消失。

1.1手机号码注册目前大多数app都以手机号码为主要登录方案，主要是因为手机号码本身的特点，具有较高的穿透性、唯一性、真实性（实名认证）和可接触性。手机号码不仅可以确认用户的身份，

必要时还可以联系用户，通过通讯录导入社交关系等等。

1.1.1分步和非分步注册

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

据facebook统计，分步注册的用户留存率远高于非分步注册。当然不能一概而论，但分步注册确实可以屏蔽干扰信息，让用户按照开机顺序操作，降低用户的出错率，但最好不要超过三步。

否则，用户会觉得操作复杂。

注册分类的思维导图如下。网站如花瓣、ui中国、站酷、JD.COM、天猫、哔哩哔哩、人人都是产品经理等。发现前三种注册方式都可以，关于设置登录名/昵称和支付方式的注册输入项这里暂时不提。

注册流程图

忽略“下一次显示”或“触发显示”的交互，“逐步”和“非逐步-全部显示”的过程相同，在所有显示中未验证安全码的情况下单击“获取短信验证码”会出错，“非逐步-全部显示”与“逐步”相同：

敬酒小贴士

Toast提示应该简单明了，通常在发生错误时使用。

例如：输入信息不完整、输入错误（登录）、非法输入（注册）、已注册/未注册（手机号码）等。在注册操作过程中，最好实时提醒您，不要等到用户输入所有信息后才提示错误。

提示详情如下：

1.2电子邮件注册电子邮件注册是pc时代的常见做法，现在在国外网站注册中也比较常见，如dribbble、twitter和facebook。如果用户第一次注册并登录邮箱，

然后邮件验证码或验证链接会发送到邮箱，然后用户需要在邮箱中操作，所以用户体验会很差。

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

1.2.1分步和非分步注册

在上面测试的几个网站中，只有天猫设置了电子邮件注册方式，或者在手机号码被占用时通过提示链接进入。类似的电子商务公司JD.COM没有提供电子邮件注册方法，只是建议手机号码已超过关联上限，请更换。

可以看出，电子邮件注册已被大多数国内企业放弃。

分步和不分步的分类是在忽略激活步骤的前提下进行的，思维导图如下：

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

注册流程图

与手机号码注册相比，电子邮件注册有更多的电子邮件激活过程，这使其注册过程相对复杂。这里通过流程图具体说明。

敬酒小贴士

1.3注册成功后的流程图

2.目前主流的登录方式有短信登录和第三方授权登录。手机和网页都有自己独特的登录方式，例如手机中的一键快速登录、手势密码登录和指纹登录以及网页中的二维码登录。

2.1 toast提示登录操作许多应用程序只有在单击登录按钮时才会提示错误信息，当然安全码等个别提示也会在第一时间反馈。下表中的提示信息通过密码或短信登录。

2.2切换登录界面在测试过程中，发现部分平台同时为用户提供两种登录界面：独立界面和弹窗；跳转到独立界面有两种方式：打开此页面和打开新窗口。

只提供一种类型：参考站很酷，在此页面打开跳转登录注册界面。登录成功后，会自动跳转到登录操作前浏览过的界面。视频播放平台有两种：哔哩哔哩，当主页触发登录时，它会打开一个新窗口打开一个独立的界面。

当播放界面触发登录时打开弹出窗口。

3.互动点3.1表单互动点注册和登录过程中通常涉及五个要素，即手机号码、电子邮件地址、安全码、短信验证码和密码，它们都有其功能和优化方案。

掌握并正确使用它将大大节省用户的操作时间，并提高帐户的安全性和用户体验。

3.2其他交互点或概念分析3.2.1输入框提示

输入框中的提示是必不可少的，措辞应该简洁。目前常见的做法是在输入框中进行提示，获得焦点后提示消失。如果输入项很少，这种做法是可取的。

当然，输入过程中最好保持提示，如以下三种方式所示。后两者更加耀眼。每输入一行后，提示符将上移并显示，其开发难度会稍大一些。

简单标注补充说明：大部分用户是产品，*表示必填项只有高级别用户才懂。

因此，在设计表单界面的过程中，最好用文字标记可选项和必选项。简短的操作说明也建议用文字表达。虽然图标隐藏指令的视觉效果不错，但在一定程度上消耗了用户体验。

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

3.2.2短信验证码

一般系统发送的短信会设置有效期，有效期设置在5-10分钟为宜，获取短信码的间隔为1分钟。如有必要，可以每天多次发送短信代码进行验证，或者在有效期内用户多次点击时发送相同的验证码。

这样不仅可以节省成本（发送短信需要付费），还可以避免同时收到多条短信造成混乱。

安全代码

目前有四种主要类型的3.2.3.1验证码。

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

3.2.3.2 验证顺序说明

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

先隐藏，点击“发送短信验证码”时显示并验证，验证成功后，提示发送短信成功，或点击“发送验证码”获取短信，此种安全码多以弹窗显示。

如：左1—滑动验证（上）、左2-按提示选字或图片；先显示并隐藏短信验证码行，验证通过后显示“短信验证码”输入栏，如：左1—滑动验证（下）；显示并验证，若未验证，

点击“发送短信验证码”时提示“请输入验证码”，如左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 协议