登录注册交互设计细节全解析

大家好~

今天这篇文章主要总结了我们在设计APP/网页登录注册时需要了解的相关知识、情景，帮助大家在设计具体项目时可以找到相应的理论支撑和案例参考，为项目选择最合适的登录注册方式和流程。

本文目录：

一：用户账号和用户账号体系是什么？

二：7种账号密码组合方式

三：登录注册触发场景分析

四：9个细节问题

---

1 

账号和账号体系

账号是用户通过账号向APP/网页后台系统进行身份验证，获取进入权限的通行账号。同时，为了用户账号的数据安全、数据收集、资源整理，我们还需要一个密码或其他证明来登录该账号。我们本文主要讨论的内容就是登录注册流程中涉及到的各种交互场景和设计细节。

首先一个账号，内容通常包括：

· 用户名（Username）

由用户自定义或系统生成，一般由英文字母、数字或两者组合而成，在系统中具有唯一性，一般设置一次后不可更改，如：阿里云账号

· 用户昵称（Nickname）

用户自定义或系统生成，可自由设置或编辑，一般为公开信息，比如微博的微博昵称。

· 用户账号（User Account）

是一个集合的概念，是用户的外部标识，包括用户名、手机号、邮箱，并且与UserID绑定，有唯一性。

· 账号密码（Password）

注册时设置的密码，可自定义，一些场景下也会由系统生成临时的账号和密码，一般为字母/数字结合，此外要考虑特殊字符的限制。

· 第三方账号（OpenID）

将第三方账号绑定到自身产品上的方式，当查询到用户第三方的账号已经绑定了平台的某个UserID时，直接登录对应的账号，实现一键注册与登录。常见的有微信、微博、QQ、等第三方常用社交账号登录。

账号体系区别于账号，比账号囊括的概念更大，我们本文讨论的登录注册是进入该体系所必经的第一个环节，有了账号才可以有建立账号体系的基础。那我们所说的账号体系到底是什么？这里看一下资料定义：

账号体系是满足用户对产品的其他功能的持续性需求的支持性体系。账号体系不是用户需求，而是业务需求，它的核心价值是用户识别，通过记录用户自身各类数据，将用户利益关联在其账号下，提供可持续的服务。

我们可以通过三个价值说明建立账号体系的价值和意义：

(1) 核心价值

方便研究用户的活跃情况，如果仅仅是设备ID登录，会造成同一用户换手机或其他设备后，变为新用户的场景。

(2) 运营价值

构建账号体系，可以围绕用户账号做很多运营工作，收集更精准的用户数据，比如手机用户基本信息、行为习惯，为同类型用户提供更个性、定制化的内容，他是用户成长体系的基础，有利于用户精细化运营，让数据指导迭代设计。

(3)商业价值

有利于公司后期多条产品线的构建，老带新等产品整合，实现一个账号登录，节约用户使用成本，有利于商业变现。 

2

7种账号密码组合方式

接下来进入正题，该部分我们就几种账号组合方式及前台、后台数据交互作出说明。我们经常接触到的账号组合方式有七种，分别是：

· 用户名&密码

· 手机号&+验证码

· 邮箱&密码

· 第三方账号

· 手机&密码&验证码

· 游客登录

· 后台分配固定权限账号登录（后台系统常见）

我们分别看一下每种组合方式对应的特点及常见流程：

（1）用户名+密码

此种方式现已比较少见，总体来说有以下缺点：

· 会出现用一用户更换不同用户名创建很多账号的情况

· 增加后台重复账号校验的工作量

· 无法获取到更有价值的用户信息，不利于用户精细运营和数据统计

· 用户名容易遗忘

 流程可能出现的交互异常场景及交互提示：

（2）手机号+验证码

目前手机时代最常见的组合方式，有操作简单、安全性高、减轻用户记忆成本、降低恶意注册几率的优点，但此种方式也有以下缺点：

· 手机号存在换号、回收、再投放的情况，因此要考虑真实性校验及解绑问题

· 短信验证码需要用户等待

· 信号差时接收不到验证码，无法顺利验证 

流程可能出现的交互异常场景及交互提示：

（3）邮箱+密码

PC时代常见的一种注册方式，目前多见于网站及企业端的应用，缺点有：

· 同一用户可以多邮箱注册

· 邮箱变多后容易遗忘

· 邮箱验证需要登录邮箱打开邮件，操作过程繁琐，邮箱登录不方便，容易造成用户流失

流程可能出现的交互异常场景及交互提示：

（4）第三方账号登录

此种方式是国内互联网巨头对外扩张影响后，对外开放的账号平台，有操作简单，一键登录，快速导入平台账号资料，省去编辑资料的优点，但同时有以下缺点：

· 用户常用来试用APP，快速注册后，留存率不高

· 加大了账号体系管理的难度

· 受限于第三方，若第三方有更改，会使产品陷入困境，当然这种几率比较小 

（5）手机+密码+验证码

该方式既具有手机号注册的好处，又解决了手机验证码方式的缺点，但是无形间增加了注册流程。 

（6）游客登录

此种方式多见于游戏及一些允许“先体验后注册”方式的APP中，对使用需求较弱的或抱着尝试心态的产品可以采用该种方式，当然不利于触发注册流程，也不利于用户留存及数据收集。

（7）后台分配固定权限账号登录（后台系统常见）

该种登录注册方式不常见，常在一些TO B的后台系统中应用，由后台配置可登陆的账号，并配有默认的登录密码，有一定的安全性风险，所以一般提示进入后台后及时修改登录密码，并可以在后台将异常账号停用、删除。

 

流程可能出现的交互异常场景及交互提示：

3

登录注册触发场景

虽然登录注册的流程相对固定，但是不同性质的产品往往适合不同的触发登录注册的条件，并不见得必须登录后才可以访问产品的内容，总体来说有以下几种应用场景：

(1)先注册登录，再体验产品

对于一些用户具有强烈的使用意愿和使用需求的产品，往往要求用户先注册登录再使用，比如微信、支付宝，其次这样的流程也符合法律法规实名制的要求。

(2)先体验产品，再登录注册

对于一些电商、游戏类产品，往往希望用户先体验产品的内容，激发用户的兴趣再引发登录注册的流程，而不是一上来就将用户挡在门外，是一种类似先自然体验再引发付费注册的模式。

(3)先体验或是先注册登录无所谓

对于一些用户具有强烈使用意愿但需求比较弱的产品来说，先使用或先注册都行，比如强烈想观看直播的用户愿意忍受注册耽误的时间、游戏即使开始不注册到一定程度以后用户也会乐于注册。

4

9个细节问题

（1）按钮注册或登录时没有填完必填项时按钮为禁用状态，不可点，防止用户误操作；填完后按钮变亮，提示用户可以进行下一步操作。

（2）流程化（分场景）注册/登录流程需要填写的表单过多时可以分页分步骤展现，也可以采用流程化进度条，让用户有种清晰的目标感，减少因为需要一次性填写过多信息而给用户带来的压力感，提高注册率。

（3）操作反馈

· 在页面某个固定位置出现提示文字，比如 logo 正下方或者按钮左侧、上方位置，该提醒方式相对来说最好；

·  Toast，位于页面中间或偏下位置，3 s 左右消失。属于轻操作，不会打扰用户，也不影响现流程，但可能显示时间太短用户没看清；

· 一些涉及到跳转页面、跳出产品或比较重要的提醒使用对话框，让用户明确的确认。

（4）过程过渡

注册或登录提交后加载注册结果有时需要有过渡动画，提示用户“正在进行中”，以免用户感觉莫名其妙；验证码发送后距离下一次重新发送期间需要有倒计时，以提示用户尽快操作和当前进度。当前APP越来越简单轻便化，一般不会在登录注册阶段添加此种设计，过渡页更多的会在APP实际使用过程中出现。

（5）密码可见

设置密码或者输入重复密码时，可以有“小眼睛”按钮，使用户可以即时看到输入密码的情况，避免误输入。

（6）不同状态颜色

除了按钮需要设置不同状态的颜色，文字也可以考虑加入“已输入”和“正在输入”两种状态的颜色，还有提示类文字一般为灰色，输入后变黑色，提示类问题用红色，链接比如用户协议等支持跳转的文字可以用蓝色，最大程度增强各种状态的可识别性。

（7）焦点

焦点要明显，让用户明确知道自己在填写哪一行，以免填错位置。

（8）控件

弹出软键盘时画面中的输入框、按钮要整体上移，以便用户操作。

（9）默认选项

· 用户协议/服务条款：在注册时产品出于减少纠纷的考虑通常会默认勾选用户协议/服务条款，如果条款比较重要则需要用户阅读完成后进行勾选，视重要性決定。

· 记住密码：登录时为了方便用户、减少重复操作通常会默认勾选记住密码。

· 自动登录：在 pc 端登录比较常用，如 QQ 开机自动登录，通常默认不勾选，是一种方便于用户的功能。

· 权限：比如默认勾选“访问你的详细资料”、“获得你的好友关系”等。

---

END

本次主要是总结了账号和账号体系的基本定义、组成部分及在登录注册，流程中常见的交互细节，希望能对大家有所帮助。

欢迎大家关注我的公众号：山蛙设计

共同学习，共同进步~