实例分析拆解：如何设计登录注册？

最近对我们的APP的账户体系进行了改版，研究了各类产品的设计。账户体系虽然几乎是通用标配功能，但是各APP的都有差别，都是针对当前的产品形态、发展阶段和用户量级做出了符合自己的设计。账户体系的关键点在登录注册流程上。登录注册流程看似简单，实际考量设计功力。网上关于登录注册的综述有很多了，但是从零到一整合分析的很少，以下，将以实际的产品为例，精细分析如何设计账户体系。

一、立项背景

我们的产品第一版账户体系由于历史原因，做的比较生硬。

初期主攻社交，希望可以沉淀用户信息，手机账号会是第一优先选择，当时的方案是手机号注册+账号密码登录/第三登录+立刻绑定手机账号。

如你日常体验那样，第三方登录+立刻绑定手机的方式，直接抵消了第三方登录的便利，比直接手机号注册更麻烦。而且，设计上，手机号注册需要设置两次密码，密码需要一致；设置之后，还得进入登录界面，再次填写账号密码，正确匹配才可以进入APP。

总的来说，用户进入APP的路径相当长，步骤多，用户体验低分。

近况是，产品方向探索，将重点落在商城上。完成交易的流程本身就多步骤，再叠加原来的登录注册，路径过深，对拉新损耗大，急需改进。

二、需求分析

从业务发展趋势来看，微信会是重要的用户来源，后续会布局更多的微信运营活动，和商城小程序，设计引流到APP，需重点突出微信登录。

而商城交易需要保证安全性，同时兼容老用户，手机注册密码登录必不可少。考虑到用户文化水平，和互联网产品使用习惯，需要在常规的基础上做简化。

第三方登录需要在关键点绑定，商城推广员提现时变更银行卡，需加以验证身份。

新用户刚进来，可以先浏览熟悉产品内容，在需要身份信息时，再进行引导登录。

三、功能点梳理

登录注册流程：微信/QQ第三方登录、验证码登录/注册、密码登录、找回密码。

账户体系配套：关键点引导绑定手机、关键点强制绑定手机、验证码验证账号、账号相互绑定。

细节功能点见下方的账户体系功能点梳理图。

四、流程图（登录注册）

未登录用户，到达需要获取用户身份信息的界面（为了平衡效率和体验，一般是除一级界面以外的），则触发注册登录流程。用户完成注册登录之后，才可使用和操作绝大部分的功能。

本流程图需要配合页面交互原型理解。

五、关键页面交互设计

登录注册体系将包含五个部分，主界面、验证码登录/注册、密码登录、忘记密码和新用户注册，在实际流程操作中会根据用户的选择，和系统的判断进行切换。账户体系的配套将会略过，以下是登录注册的页面交互设计、设计考量和功能点介绍。

1.主界面

• 布局：主界面集合三种登录方式，将微信登录作为主方式。

• 前提：成功登录的前提条件是必须先勾选同意用户协议，否则报错。

• 授权：第三方的登录，点击微信orQQ，授权成功后，即可登录进入APP，自动获取用户的昵称性别头像信息填充社交页。

2.验证码登录/注册

（1）设计解析

• 手机账号登录，考虑简单又快速进行，突出验证码快速登录/注册，辅以密码注册。

• 密码注册的弊端是很容易忘记密码，忘记之后，找回密码流程也繁琐。

• 验证码登录，虽然对频繁换手机的用户是个噩耗，短信也有达到率的问题，但考虑到效率跟成本，特别在拉新环节，还是作为主方式。

其实基于验证码到达率和安全性，我考虑过换移动认证，就是手机号码一键登录，无需密码跟验证码。可惜实际接洽的时候行不通，而放弃了，文本会介绍下这个事情。

（2）设计点

• 验证码登录：登录注册界面为验证码登录，附以密码登录。

• 按钮：登录注册的按钮合二为一。也就是说，用户不需要选择是登录还是注册，将判断交给了后台。只要用户的手机号码还在，直接凭验证码进入即可。比起选择密码登录之后忘记密码，或者是干脆就不记得自己是否注册过，在错误的界面输入信息之后来回切换，二合一的方式更加友好，也是本次设计的一个亮点。

• 手机号码：采用更加清晰的的3-3- 4 数值格式，输入框末尾配清除按钮，错误输入后可一键清除。手机号码输入框也有记忆功能，可获取前一次登录的手机账号，可以获取同一次登录注册已填过的账号信息。

• 验证码：手机号码位数输入正确类型和位数之后，才激活验证码功能。否则点击会报错。之后，验证码的激活以变色表现，这是个视觉指示。输入完成第一行，人眼会自然而言的落在第二行的开头，如无例外，用户需要寻找一番，才会觉知过来，去点击获取验证码。

• 加载指示：数据传输到服务端，判断对错，再返回结果。这个流程费些时间，用加载小菊花，表示后台正在处理，舒缓下等待的焦急。