近期我潜心研究了一些APP，发现同一个功能在不同的产品中往往具有不同的表现，评估一个功能的好坏也应基于具体产品具体场景展开，本文研究的登录注册也不例外。我收集了一些资料，结合个人的经验总结了一些内容，希望对从事产品的人有帮助，也希望前辈们不吝赐教。
一、设计前的思考
登录注册的目的是获取用户信息，在开始设计产品之前，一定要先想清楚。
- 是否一定要登录注册；
- 是否需要独立的账户体系；
- 为谁设计登录注册；
- 哪些操作需要用户登录？
二、登录及注册的设计步骤
本节内容将通过实战演练给大家展示
01 登录及注册的基本类型
02 登录及注册业务流程图
把每一项任务操作都流程化，并做好各项异常情况处理方案设计。
（1）登录流程图
（2）注册流程图
（3）功能流程图：
03 登录及注册页面原型
（1）登录主页面
（2）密码设置页
（3）注册页
04 页面交互设计
详细设计页面元素、页面跳转、操作反馈、异常处理、按钮和页面的各种状态等。
（1）输入框状态
（2）登录逻辑
（3）获取验证码
（4）密码设置逻辑
A.找回密码
验证顺序：密码是否合法>验证码验证>账号是否已注册
a.密码不合法，弹窗提示“请输入6位以上数字或字母组合的密码”
b.验证码不正确，弹窗提示“验证码不正确”
c.账号已经注册，正常重置密码；账号未注册，直接为用户注册
B.微信授权
验证顺序：密码是否合法>验证码验证>账号是否已注册
a.密码不合法，弹窗提示“请输入6位以上数字或字母组合的密码”
b.验证码不正确，弹窗提示“验证码不正确”
c.手机号未注册，直接为用户绑定；手机号已注册，但未绑定微信，为该用户绑定该微信号，个人资料修改为用户微信资料，重置密码为当前密码；手机已注册且已绑定另一微信，弹窗提示用户“此账号已注册，并绑定微信，是否去登录”
（5）注册逻辑
A.按钮状态
当所有输入内容合法时，注册按钮从置灰恢复至正常状态
B.逻辑判断
验证顺序：验证码验证>密码是否合法>账号是否已注册
a.密码不合法，弹窗提示“请输入6位以上数字或字母组合的密码”
b.验证码不正确，弹窗提示“验证码不正确”
c.账号已经注册，弹窗提示“此账号已注册，是否登录”；点击否留在原有页面，点击是返回登录页面
05 自检测试
对线框图和交互设计进行自检，建立自己的自检清单，此处仅列举一些常见细节。
（1）账号
账号是否有格式要求，纯数字形式还是英文+数字组合，如果账号是手机号码，前端是否需要验证手机号码的有效性？手机号码为纯数字，是否弹出纯数字键盘方便用户快速填写及避免用户来回切换？
（2）密码
字符设置规则，如“请输入6-10位数字”？密码是否要限制特殊字符？如“空格”，为什么要限制？密码设置好后，注册按钮前后如何变化？
（3）验证码
验证码的格式是四/六位数字验证码，还是英文+数字验证码，英文是否区分大小写？还是语音验证码？按钮默认显示状态、用户输入信息前后按钮颜色变化效果，该如何设计比较好？倒计时如何设置？button还是label 以及具体如何设计。
（4）注册成功的提示、状态变更及页面跳转
注册成功后前端如何提示，同时切换为登录状态，登录状态账号密码保存是否设置期限？页面跳转到哪个页面？
06 输出PRD、交互设计稿
三、如何考虑登录及注册
01 产品类型
不同的产品类型，对登录注册模块功能的需求不同。
（1）纯工具类产品：计算器、相机等，不需要用户登录注册就可以使用产品的绝大部分甚至全部功能，这类产品就没有必要添加登录注册模块；
（2）电商类产品如淘宝，京东等涉及到交易、用户信息等比较私密的信息，就必须单独添加登录注册模块，确保用户的个人信息的真实性以及安全性；
02 目标用户
一款产品面对的目标用户群不同，对应的登录注册的方式也有偏差。
（1）目标用户群是b端用户，采用邮箱注册的方式会更好；
（2）目标用户群是c端用户，可能采用手机号码注册的方式会更加稳妥。
03 业务逻辑
考虑清楚是否需要登录注册功能，接下来就该考虑怎么设计登录注册模块。
不同的业务逻辑，需要的登录注册的方式、流程也不同；不同的功能模块，对登录节点的需求也不同，梳理逻辑功能，画出流程图。
04 功能细节
前面步骤完成后，考虑异常逻辑及提示，保证模块逻辑的合理性以及流程的通畅性。
05 新人如何设计?
登录、注册，市面上已经有成熟的产品可借鉴，作者认为没必要自己摸索创造，可以借鉴市场上现有的产品或竞品的登录注册模块。
1）选取自己熟悉领域的相关产品，分析其登录注册模块的详细流程、逻辑；
2）梳理登录注册模块的相关功能逻辑、流程，作一个横向对比；
3）从产品类型、目标用户、业务逻辑结合自己产品的现状，完善设计自己产品的登录注册模块并不断做出调整。
