登陆、注册设计

​注册登录功能看似简单，容易被产品经理忽视。但登录和注册不旦是所有线上平台都拥有的功能模块，也是用户最早能够接触到的平台功能。

虽然业务流程大部人都用过，而且界面也不超过5个。但有时在访问一些产品时，就是登录和注册，有的做的行云流水，有的则沟沟坎坎、雷坑遍布。

不但如此，如果万一在登陆注册环节出现意料之外的状况发生，诸如：短信被恶意盗刷、多个用户系统无法合并等，那么对产品影响通常是大的。

登录、注册为什么在产品中不可少？

也许是建立用户体系的需要，也许是收集用户信息的需要，也许是用户运营的需要，不论因为什么，实现“登录和注册”对于业务都有着至关重要的作用，且会对很多业务功能产生重大影响，需要产品经理认真、慎重的进行设计。

登录注册的核心业务

登录，是提供用户某种user interface，即用户接口，让用户填入某些信息匹配系统中已有数据进行身份验证，当验证身份后，就能够对用户角色分配权限。

登录设计时，核心内容是需要设计唯一表明用户的身份信息，例如通过引导用户输入独特的字符串、电话、身份证、电子信箱等。

注册，是将用户的信息保存在系统中，为用户登录时做信息匹配。产品要保存哪些用户信息？在进行注册设计时，产品经理应考虑清楚。

登录、注册流程

                         

其他功能

用户访问热点和行为监控：这个绝对是核弹级别的增值功能，虽然对于用户不可见，但是对于产品经理了解无法见面用户的使用行为是一个必不可少的功能。通过采集用户在页面上的各种行为，产品经理可以获取到用户的浏览习惯，作为优化产品的重要数据支撑。

第三方登录：登录和注册是任何平台阻碍用户的一座大山，如何能够降低登录和注册的难度，如何能够减少登录和注册的步骤，如何能够提高登录和注册的效率，值得仔细思考。

幸运的是，现在各大流量入口平台逐步开放，纷纷提供了第三方登录的接入，可以帮助用户快速的翻过注册的大山来享用我们提供的服务。

重置密码或者找回密码：这个功能则是为用户登录时可能存在的遗忘密码提供了一个处理渠道。不要小看这个功能，在严谨的业务流程中留出一个异常处理天窗，不会让用户在使用业务功能时掉入死胡同或者“功能黑洞”。

详细设计规范（仅共参考）

登陆功能设计

1.1基本规范

1. 注册方式仅设计一种：手机号注册。

2. 用户服务协议默认选中。

3. 设计在页面上半部分，输入面板不能遮盖输入框、按钮。

4. 输入框未获取过焦点，或输入框失去焦点判断出错误时，注册按钮禁用。

5. 用户正确填写本页面，且点击注册按钮，即视为注册完成。

6. 注册完成后，自动登录，跳转到注册前浏览页面，若无则跳转到主页。跳出后，无法返回到此页面。

1.2具体规范

1.2.1手机号输入框设计规范

1. 手机号输入框获取焦点，弹出九宫格数字输入键盘。

2. 对手机号码进行3 4 4的分布。

3. 输入框右侧设计“清空icon”，可一键清空填写的手机号。

4. 输入框失去焦点时，对填写的手机号进行判断，如有错误，在输入框外，右上角位置做出文本提示，如判断通过，在输入框外右侧用对钩提示。

1.2.2短信验证码设计规范

1. 获取短信验证码按钮有两种文字显示效果，“获取验证码”、“60s”倒计时、“请1h后再试”。

2. 短信验证码为6位数字，获取时间间隔60s，有效期5min。

3. 若多次获取短信验证码，仅最后一次获取的验证码有效。

4. 1h内最多可获取5次，超过五次，获取验证码按钮文字变为“请1h后再试”，不可点击。

5. 输入框获取焦点，弹出九宫格数字输入键盘。

6. 输入框失去焦点，对输入验证码进行判断，如有错误，在输入框外，右上角位置做出文本提示，如判断通过，在输入框外右侧用对钩提示。

1.2.3密码输入框设计规范

1. 密码输入框文字提示“6~16位数字、英文”

2. 密码输入框获取焦点，弹出英文输入键盘。

3. 不要设计成输入两次密码。

4. 输入框右侧设计“显示/隐藏icon”，默认密码显示状态。

5. 输入框失去焦点时，对填写的密码进行判断，如有错误，在输入框外，右上角位置做出文本提示，如判断通过，在输入框外右侧用对钩提示。

登录功能设计

2.1基本规范

1. 登录方式可设计三种：仅手机号登录、仅第三方登录、手机号第三方均可登录。

2. 设计在页面上半部分，输入面板不能遮盖输入框、按钮。

3. 输入框未获取过焦点，或输入框失去焦点判断出错误时，登录按钮禁用。

4. 1h内，最多允许5次密码错误，超出5次，冻结该帐号1h，冻结期间内无法登录，重置密码自动解除冻结状态。

5. 登录后，跳转到注册前浏览页面，若无则跳转到主页。跳出后，无法返回到此页面。

6. 登录状态本地保存，PC端有效期为2周，APP、H5端永久保存，直到用户手动退出或清理cookis。

7. 若手机号与第三方均可登录，用户第一次使用第三方登陆，授权后必须进行手机号注册或手机号账户绑定。

 

2.2具体规范

2.2.1手机号输入框设计规范

1. 手机号输入框获取焦点，弹出九宫格数字输入键盘。

2. 对手机号码进行3 4 4的分布。

3. 输入框右侧设计“清空icon”，可一键清空填写的手机号。

4. 输入框失去焦点时，对填写的手机号进行判断，如有错误，在输入框外，右上角位置做出文本提示，如判断通过，在输入框外右侧用对钩提示。

2.2.2短信验证码设计规范

1. 获取短信验证码按钮有两种文字显示效果，“获取验证码”、“60s”倒计时、“请1h后再试”。

2. 短信验证码为6位数字，获取时间间隔60s，有效期5min。

3. 若多次获取短信验证码，仅最后一次获取的验证码有效。

4. 1h内最多可获取5次，超过五次，获取验证码按钮文字变为“请1h后再试”，不可点击。

5. 输入框获取焦点，弹出九宫格数字输入键盘。

6. 输入框失去焦点，对输入验证码进行判断，如有错误，在输入框外，右上角位置做出文本提示，如判断通过，在输入框外右侧用对钩提示。

2.2.3密码输入框设计规范

1. 密码输入框获取焦点，弹出英文输入键盘。

2. 输入框右侧设计“显示/隐藏icon”，默认密码显示状态。

3. 输入框失去焦点时，判断是否填写，若未填写，在输入框外，右上角位置做出文本提示，如判断通过，在输入框外右侧用对钩提示。

2.2.4登录按钮设计规范

1. 点击登录按钮，后台进行用户验证，若验证通过，则登录。

2. 后台验证分2步，查询帐号冻结状态→验证密码。

3. 若验证不通过，清空填写的密码，在登录按钮正上方位置做出文本提示。

2.2.5第三方登录设计规范

第一次使用第三方登录，授权后必须进行手机号注册或手机号账户绑定。设计规范参考注册功能设计规范，已在下图将差异流程标识清楚。

重置密码功能设计

1. 设计规范参考注册功能设计规范，“注册”按钮改为“重置密码”。

2. 正确填写，点击重置密码后，跳转到登录页面，让用户重新输入新密码以便加深记忆。

尽管登陆、注册看了很多，埋在其中的坑还是层出不穷，接下来就看一看设计登陆、注册时要注意的问题：

用户一进网站就注册？

有些产品一进来就要注册才能浏览，要求游客注册成为其用户。但产品经理必须清楚的是，相当一部人遇到一进网站就得注册的，都选择不注册直接离开。

产品什么时侯提示用户注册，非注册用户给与什么权限？产品经理应当考量在什么情况下允许用户浏览，操作哪些功能时需要提醒用户注册或是登录。

别设置太多重复填写相同内容

有不少网站注册时要求填写邮箱地址两次或重复输入密码两次。

这些重复填写的内容是否是注册时的标配？用户通常记得自己常用邮箱和密码，而且在流程设计中邮箱、密码输入有误时给予实时反馈。因此，对于不同类型的产品，必须考虑是否需要反复重复相同内容的填写，适量简化能提高用户操作的流畅。

突出必填项

如果在注册表单里面有可选字段，那么就要强调必填字段。通常一个小标志例如星号*就足够了。它可以让用户自觉发现并填写必须填的字段。

输入时自动填充、自动读取常用账号

登录/注册时，经常需要输入账号和密码。要简化或缩短用户输入时间就可以让输入框带自动联想功能，提示用户常用帐号，以简化交互操作。

手机客户端提供密码切换可见性

输入密码时，有没有手抖输错密码还不自知？密码输入默认为加密状态，但在输入过程中，特别是手机输入环境中，由于键盘较小，易出现误操作的情况，这时，设计切换密码可见性就能够为用户提供检查密码输入对错的帮助。

提供第三方快捷登录

我们更想用第三方快捷的登录，不是吗？因此采用第三方授权登录的方式非常的高效。

实时反馈

实时的信息验证能够给予用户及时的提醒，减少用户提交表单时报错带来的挫败感。