登录注册功能实现思路

编辑导语:我们经常需要注册或者登录来下载一个APP，登录一个网站。由此可见注册和登录功能的设计是多么重要。笔者对此进行了全面的逻辑分析，并着眼于如何设计注册登录功能来提升用户体验。

很多to B平台，由于用户数量少，不太注重注册登录的功能。

就我个人而言，在没有研究注册登录这个功能的时候，我觉得很简单，想着几乎每个应用都有它能有多难。即使在应用中有疑问，也只是根据目前的问题来分析，所以没有系统的概念和认知。

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

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

1.1手机号注册目前大部分app都采用手机号作为主要的注册登录方案，主要是因为手机号的特点，具有高普及率、唯一性、真实性(实名认证)、可接触性。手机号不仅可以确认用户身份，必要时还可以联系用户，通过通讯录导入社交关系。

1.1.1分步和非分步注册

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

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

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

1.1.2注册流程

忽略“下一次显示”或“触发显示”的交互。“一步一步”和“非一步全显示”的流程是一样的，但是在所有显示中点击“获取短信验证码”会出错，“非一步全显示”和“一步一步”是一样的:

敬酒小贴士

吐司提示应该简单明了，一般在出现错误的时候使用。

比如:输入信息不完整、输入错误(登录)、非法输入(注册)、注册/未注册(手机号)等。注册操作过程中，最好实时提醒用户，不要等到用户输入全部信息后才提示错误。

小费详情如下:

1.2电子邮件注册在个人电脑时代，电子邮件注册是一种常见的做法。现在在国外网站比较常见，比如dribbble，twitter，facebook。如果用户第一次用邮箱注册登录，会发送邮箱验证码或者验证邮箱的链接，然后要求用户在邮箱中操作，用户体验会很差。

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

1.2.1分步和非分步注册

上面测试的网站中，只有天猫设置了邮箱注册方式，或者在手机号被占用时通过提示链接进入。JD.COM，一个类似的电子商务，没有提供电子邮件注册，但只表明手机号码已超过相关上限。请换一下。

可见邮箱注册已经被国内大部分企业放弃了。

这里分步和非分步的分类是以忽略激活步骤为前提的。思维导图如下:

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

1.2.2注册流程

相比手机号注册，邮箱注册有更多的邮箱激活过程，使得其注册过程相对复杂。这里通过流程图特别说明一下。

敬酒小贴士

1.3注册成功后的流程图

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

2.1 toast提示登录操作很多应用只有在点击登录按钮时才会提示错误信息。当然有些提示比如安全码也会第一时间反馈。下表提示信息为密码登录和短信登录。

2.2切换登录界面在测试过程中，发现有些平台同时为用户提供两种登录界面:独立界面和弹窗；有两种独立的界面跳转模式:打开本页面和打开新窗口。

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

3.互动点3.1表单互动点注册登录过程中通常涉及五个要素，分别是手机号、邮箱、安全码、短信验证码、密码。所有这些元素都有其功能和优化方案。

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

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

输入框提示词必不可少，用词要简洁。现在普遍的做法是在输入框进行提示，得到焦点后提示消失。如果输入项很少，这种做法是可取的。

当然，输入的过程中最好保持提示，如下图3所示。后两种更耀眼。每输入一行后，提示会向上显示，其开发难度会稍微大一点。

注:大部分用户为白色产品，*表示只有高等级用户才能了解所需物品。

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

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

3.2.2短信验证码

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

这样既节省了成本(发短信需要付费)，又不会因为同时收到多条短信而混淆。

安全代码

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

验证，根据图片提示选词，图形验证码，旋转图片；目的是确认是人为注册，防止恶意注册软件。代码支持随时刷新切换，次数不限。

3.2.3.2验证序列描述

短信验证码在发送前会经过安全码验证，通常有以下3个顺序:

先隐藏，点击“发送短信验证码”显示验证。验证成功后，会提示发送短信成功，或者点击“发送验证码”获取短信。这种安全代码大多显示在弹出窗口中。例如:左1-幻灯片验证(上)，左2-根据提示选择文字或图片；先显示和隐藏短信验证码行，验证后显示“短信验证码”输入栏，如:左1-滑动验证(下)；并显示验证。如果未验证，点击“发送短信验证码”，系统会提示“请输入验证码”，如左起第三个。这种方式对于大型网站来说比较少见。3.2.3.3安全代码界面样式

有两种类型的非弹出窗口和弹出窗口。非弹出窗口的安全代码样式如下:

弹出式安全码有三种类型:选择图片/字符、滑动和旋转安全码。触发条件是点击“发送短信验证码”或者如下图。

用户协议

大多数用户的协议出现在注册界面。在早期阶段，他们通常默认选择或点击注册，以被视为同意协议的条款。

但是，支付宝新闻事件提醒我们，用户最好点击确认用户协议。现在很多应用也开始这么做了，如下右图所示。在检查协议之前，不能单击“下一步”按钮。

3.2.5密码眼的开启和关闭

出于使用场景的考虑，比如用户注册的时候，周围有人。为了保护用户密码的隐私，输入密码时可以关闭眼睛图标。睁眼的目的是让用户看清自己的密码，避免密码输入错误。

3.2.6一键删除帐户名/密码

该功能供用户在登录页面出错或切换账号时使用，可以有效减少用户点击次数，提高用户体验。

3.2.7保留账户名称数据。

如果用户之前登录过，可以保留用户的帐户名数据，这样用户再次登录时只需要输入密码或验证码。当然，如果用户想重新输入帐户名，就需要一键删除数据，例如:QQ邮箱登录。

3.2.8多个账户之间的登录切换

登录时，您可以选择多个帐户。这个函数很少用在to C端，一般可能会被to B应用使用。因为企业可能有多个账户，所以这个功能非常重要。

3.2.9鸡肋去除操作

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

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

本文由@windy原创发布。每个人都是产品经理。未经许可，禁止复制。

题目来自PEPEPELS，基于CC0协议。