注册登录作为App应用中必不可少的环节，不少应用打开第一步可能就是注册/登录；App的第一印象就在此时留下。

本文目的：本文主要给新人产品经理作为参考，提供一些产品设计思路及文档书写思路，老同学可以发表一下自己更好的思路、观点。

形式：以常见APP举例并加以说明。本文参考App为：Keep  ios  6.45.0

内容：简单的设计思路、交互思路、交互逻辑；

---

一、产品设计

1.首次打开App

1）作用：该页面主要是用于说明用户信息的收集、存储、使用；

2）相关政策：工信部已经明确的整改内容：“违规收集个人信息。重点整治APP、SDK未告知用户收集个人信息的目的、方式、范围且未经用户同意，私自收集用户个人信息的行为。” 其他整改内容不是本期重点这里不做展开；

3）其他拓展：系统权限授权，一般App在登录后会需要一些权限，比如：位置信息、存储权限、相机权限、麦克风权限等等；以前很多App是直接在进入首页后去拉起这些权限授权，直接弹出手机系统自带的授权提示。现在一般的做法都是在这个“欢迎”页面以及在业务涉及到相关权限时来做；这个页面可以列出所需权限，说明权限的用途（这个在很多应用市场也是如此要求的），用户同意后拉起系统授权。

2.注册/登录页

1）注册：手机号注册；

2）登录：验证码登录、密码登录、三方账号登录

3）注册和验证码登录合并：前端页面合成一个，并且将验证码作为主要的登录方式；

产品设计思路分析：

1）注册和验证码登录虽然是两个流程，但是在前端的操作上都是一样的，输入手机号→获取验证码→输入验证码→下一步；合并之后操作上减少了一步，不用先选择注册或登录。而且选择减少，用户需要思考的更少了；

2）验证码作为主要登录方式：A.减少用户记忆（不重要的App，用户大概率会忘记密码）B.手机端应用（PC端应用可能出现手机不在身边等情况，真有用其他手机号的，辅以密码登录）；

3）协议：政策相关要求，用户协议、隐私协议必须有；且协议不可默认勾选（老梗新说之支付宝默认授权事件）；

---

二、交互设计

交互设计思路

1.国际区号：

   默认”+86”可更改；如果App本身支持国外的手机号注册这一项是必不可少的；如果仅支持国内手机号注册，建议这一项可以是默认“+86”，不可更改；有国际区号给用户的感觉会更正规、减少山寨感。

2.手机号输入框：

1)提示：“输入手机号码”，输入内容后提示消失；  很多App做了一半，在获取焦点的时候提示就消失了。

2)获取焦点时自动拉起数字键盘，协议一栏上移至“获取验证码”下方；协议上移是一个比较细的设计，我也是在这里学到的。

3)失去焦点时收取键盘；

4)格式、长度限制：Keep未做格式、长度限制；    如果仅针对国内：可以限制输入数字、长度11位。

3.获取验证码按钮：

1)默认为的暗绿色，输入达到5位时为亮绿色；暗绿色不可点击，亮绿色可点击；

2)点击之后校验手机号格式、长度及协议勾选状态；

思考拓展：很多初学者产品经理喜欢在这里这么设计：不足11位以及未勾选协议时，“获取验证码”按钮不亮起；我在初学阶段也喜欢这样来设计，但是这样设计有明显的缺陷，后来类似这种场景的设计我都Pass掉了这种方案。（大家可以给我留言发表自己的观点）

4.验证码输入：

    1.单独页面；将输入手机号及验证码分开是为了让用户专注于当前的操作；因为用户看到的越多、选择越多，需要思考的也就越多。

    2. 展示手机号； 防止用户忘记验证码发送至哪个手机号了。

    3.默认获取验证码输入焦点，拉起数字键盘；

    4.验证码输入框以4个数字框的形式呈现；  这样能明确验证码位数、输入更准确；

本次先分享到此。

第一次写文章，本来注册/登录需要分析的东西也很多，但是本次主要针对想入门的同学和初学者，所以在产品层面没有深入去分析，更多的是表面的东西。

后续再给大家分享更多的东西，并且做一个注册登录的原型+文档供大家参考。

关注公众号：清风不扰，留言：注册登录原型，可领取Axure原型文档。

附录：