编辑导语：我们在使用很多产品时，首先都会经历的就是注册登录这一步，从以前的手机号、邮箱等方式，到现在的第三方直接授权登录，也是用户登录系统的一种转变；本文作者分享了关于注册登录找回密码模块的设计构思，我们一起来了解一下。

一、注册模块的设计构思

用户登陆注册系统分为两大类，一类是自建用户系统（例如：手机号、用户名、邮箱），另一类是第三方账号授权用户系统（例如：微信、支付宝、淘宝等）。

1. 手机号注册账号

设计说明：

1）输入手机号、验证码、密码（均为必填）

• 输入密码：输入密码时输入框右侧出现“显示/隐藏icon”，默认密码显示状态，点击可切换隐藏状态；
• 输入手机号、验证码：输入手机号、验证码时输入框右侧出现“清空icon”，点击清空按钮后将已输入的内容清空；
• 输入框字数限制：手机号：11位；密码：大于等于8位，不超过20位；
• 输入手机号、验证码时唤起数字键盘；输入密码时唤起全键盘；
• 两次密码输入不一致：两次输入的密码不一致，请重新输入。

2）手机号、验证码、密码校验：

• 手机号格式错误：提示用户“请输入正确的手机号”；
• 手机号重复注册：提示用户“该手机号码已被注册“；
• 密码格式错误：提示用户“密码至少八位，同时包含数字以及字母”；
• 未填写手机号，获取验证码按钮置灰，不允许点击；
• 点击验证码按钮，自动发送短信验证码并提示用户“验证码已发送，5分钟内输入有效”；
• 验证码不正确：提示用户“验证码不正确，请重新输入”。

3）勾选用户服务协议：未勾选用户服务协议不允许注册，提示用户“请阅读并勾选用户服务协议”。

4）单个手机号，单日接收验证码的次数和频率限制：

• 验证码接收次数：1h内不得超过5次,若超过5次，用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限，请一个小时后再试”；
• 获取验证码的时间间隔为60s,有效期5min，点击获取验证码按钮后，按钮文字变为“重新获取（59s）”并倒计时；
• 若多次获取验证码，仅最后一次获取的验证码有效。

5）注册成功后自动登录，跳转至“xxxxx”界面（或返回至原页面，若用户在“我的”页面触发登录，则登录成功后返回至“我的”页面）。

2. 用户名注册账号

在自建用户系统中，用户名 + 密码的这种注册方式已经很少见了，这种方式有很大的弊端，若用户忘记用户名或密码就找不回账号了；通常会将用户名+密码与手机号或邮箱结合，忘记密码可以通过手机号或邮箱找回，将文中提到的手机号注册账号或邮箱注册账号加个“用户名”字段即可，该文章就不详细讲解。

3. 邮箱注册账号（无需验证邮箱的注册方式）

设计说明：

1）输入邮箱、密码（均为必填）

• 输入邮箱：输入邮箱时输入框右侧出现“清空icon”，点击清空按钮后将已输入的内容清空；
• 输入密码：输入密码时输入框右侧出现“显示/隐藏icon”，默认密码显示状态，点击可切换隐藏状态；
• 输入框字数限制：密码：大于等于8位，不超过20位；
• 输入邮箱、密码时唤起全键盘；
• 两次密码输入不一致：两次输入的密码不一致，请重新输入。

2）邮箱、密码校验：

• 邮箱格式错误：提示用户“请输入正确的邮箱”；
• 邮箱重复注册：提示用户“该邮箱已被注册“；
• 密码格式错误：提示用户“密码至少八位，同时包含数字以及字母”；

3）勾选用户服务协议：未勾选用户服务协议不允许注册，提示用户“请阅读并勾选用户服务协议”。

4）注册成功后自动登录，跳转至“xxxxx”界面（或返回至原页面，若用户在“我的”页面触发登录，则登录成功后返回至“我的”页面）。

4. 邮箱注册账号（需验证邮箱的注册方式）

由于无需验证邮箱的注册方式存在着可能乱填写邮箱，或邮箱填写错误的情况，导致忘记密码后无法找回账号或邮箱真正的主人无法注册，所以最好是在注册时进行邮箱验证。

设计说明：

1）输入邮箱、验证码、密码（均为必填）

• 输入邮箱、验证码：输入邮箱、验证码时输入框右侧出现“清空icon”，点击清空按钮后将已输入的内容清空；
• 输入密码：输入密码时输入框右侧出现“显示/隐藏icon”，默认密码显示状态，点击可切换隐藏状态；
• 输入框字数限制：密码：大于等于8位，不超过20位；
• 输入验证码时唤起数字键盘；输入邮箱、密码时唤起全键盘。

2）邮箱、验证码、密码校验：

• 邮箱格式错误：提示用户“请输入正确的邮箱”；
• 邮箱重复注册：提示用户“该邮箱已被注册“；
• 密码格式错误：提示用户“密码至少八位，同时包含数字以及字母”；
• 未填写邮箱，获取验证码按钮置灰，不允许点击；
• 点击验证码按钮，自动发送邮箱验证码并提示用户“验证码已发送，5分钟内输入有效”；
• 验证码不正确：提示用户“验证码不正确，请重新输入”。

3）勾选用户服务协议：未勾选用户服务协议不允许注册，提示用户“请阅读并勾选用户服务协议”。

4）单个邮箱，单日接收验证码的次数和频率限制：

• 验证码接收次数：1h内不得超过5次,若超过5次，用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限，请一个小时后再试”；
• 获取验证码的时间间隔为60s,有效期5min，点击获取验证码按钮后，按钮文字变为“重新获取（59s）”并倒计时；
• 若多次获取验证码，仅最后一次获取的验证码有效。

5）注册成功后自动登录，跳转至“xxxxx”界面（或返回至原页面，若用户在“我的”页面触发登录，则登录成功后返回至“我的”页面）。

5. 第三方账号授权

通过第三方账号授权的方式进行登录并获取用户信息（openid、头像、昵称、地区、性别、手机号），省去用户注册步骤，以下以“微信授权”为例子讲述。

• 用户点击“微信授权登录”，打开微信app，调起授权用户微信个人信息页面，用户点击同意/拒绝；
• 点击拒绝则登录失败；
• 点击同意则登录成功。

二、登录模块的设计构思

1. 用户名+密码登录

1）输入用户名、密码，点击登录；未输入用户名和密码时，“登录”按钮置灰，不允许点击；已输入用户名和密码，“登录”按钮为可点击状态；输入用户名、密码时，唤起全键盘；输入用户名、密码时，输入框右侧出现“清空icon”，点击清空按钮后将已输入的内容清空；密码输入框右侧设计“显示/隐藏icon”，默认密码隐藏状态。

2）用户名、密码校验：密码或用户名不存在/不匹配，则提示用户“用户名与密码不匹配，请重新输入”。

3）账号被停用：提示用户“账号已被停用，请联系管理员！”。

4）登录成功后进入首页。

5）退出登录：点击退出登录按钮后则退出到登录页。

2. 手机号+密码/验证码

手机号+验证码登录方式：

1）输入手机号、验证码，点击登录；未输入手机号和验证码时，“登录”按钮置灰，不允许点击；未输入手机号时，“发送验证码”按钮置灰，不允许点击；已输入手机号和验证码，“登录”按钮为可点击状态；输入手机号和验证码时，唤起数字键盘；输入手机号、验证码时，输入框右侧出现“清空icon”，点击清空按钮后将已输入的内容清空。

2）用户点击“发送验证码”按钮后，提示“验证码已发送”。

3）验证码校验：输入的验证码错误，提示“验证码不正确，请重新输入”。

4）单个手机号，单日接收验证码的次数和频率限制：

• 验证码接收次数：1h内不得超过5次,若超过5次，用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限，请一个小时后再试！”；
• 获取验证码的时间间隔为60s,有效期5min，点击获取验证码按钮后，按钮文字变为“重新获取（59s）”；
• 若多次获取验证码，仅最后一次获取的验证码有效；

5）手机号格式错误或手机号不存在：提示用户“请输入正确的手机号”。

6）账号被停用：提示用户“账号已被停用，请联系管理员！”。

7）登录成功后进入首页。

8）退出登录：点击退出登录按钮后则退出到登录页。

手机号+密码登录方式：

1）输入手机号、密码，点击登录；未输入手机号和密码时，“登录”按钮置灰，不允许点击；已输入手机号和密码，“登录”按钮为可点击状态；输入手机号，唤起数字键盘；输入密码时，唤起全键盘；输入手机号、密码时，输入框右侧出现“清空icon”，点击清空按钮后将已输入的内容清空；密码输入框右侧设计“显示/隐藏icon”，默认密码隐藏状态。

2）手机号格式错误：提示用户“请输入正确的手机号”。

3）手机号、密码校验：密码或手机号不存在/不匹配，则提示用户“手机号与密码不匹配，请重新输入”。

4）账号被停用：提示用户“账号已被停用，请联系管理员！”。

5）登录成功后进入首页。

6）退出登录：点击退出登录按钮后则退出到登录页。

3. 邮箱+密码

1）输入邮箱、密码，点击登录；未输入邮箱和密码时，“登录”按钮置灰，不允许点击；已输入用户名和密码，“登录”按钮为可点击状态；输入用户名、密码时，唤起全键盘；输入邮箱、密码时，输入框右侧出现“清空icon”，点击清空按钮后将已输入的内容清空；密码输入框右侧设计“显示/隐藏icon”，默认密码隐藏状态。

2）邮箱、密码校验：密码或邮箱不存在/不匹配，则提示用户“邮箱与密码不匹配，请重新输入”。

3）账号被停用：提示用户“账号已被停用，请联系管理员！”。

4）登录成功后进入首页。

5）退出登录：点击退出登录按钮后则退出到登录页。

4. 第三方账号授权登录

前面注册那块已讲述，这里不再进行讲述

5. 游客登录

让用户在先体验后登录，需在一些点击后需登录的页面做触发登录的标记，即一些页面可供用户免登录即可浏览，而有些页面则需要登录后才可以浏览。

三、找回密码模块的设计构思

1. 手机号找回密码

1）输入手机号、验证码、密码、再次输入密码（均为必填）：

• 输入密码:输入密码时输入框右侧出现“显示/隐藏icon”，默认密码隐藏状态；
• 输入手机号、验证码、密码时输入框右侧出现“清空icon”，点击清空按钮后将已输入的内容清空；
• 输入框字数限制：手机号：11位；密码：大于等于6位，不超过20位；

2）手机号、密码、短信验证码校验：

• 手机号格式错误或手机号不存在：提示用户“请输入正确的手机号！”；
• 未填写手机号，获取验证码按钮置灰，不允许点击；
• 点击验证码按钮，自动发送短信验证码并提示用户“验证码已发送，5min内输入有效”；
• 短信验证码不正确：提示用户“短信验证码不正确，请重新输入！”；
• 密码格式错误：提示用户“请输入6-20个字符的密码”；
• 两次密码输入不一致：两次输入的密码不一致，请重新输入；

3）单个手机号，单日接收验证码的次数和频率限制：

• 验证码接收次数：1h内不得超过5次,若超过5次，用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限，请一个小时后再试！”；
• 获取验证码的时间间隔为60s,有效期5min，点击获取验证码按钮后，按钮文字变为“重新获取（59s）”；
• 若多次获取验证码，仅最后一次获取的验证码有效；

4）找回密码成功：提示用户“密码重置成功！”，并跳转至“xxx”页面。

5）手机号已停用，联系客服：用户在手机号已停用的情况下，可以点击联系客服，点击“联系客服”弹出“手机号码”弹窗，点击呼叫则唤醒手机拨号。

注：在手机号已停用等，接收不了验证码的情况下，可联系客服验证身份，客服在后台修改密码。

2. 邮箱找回密码

1）输入邮箱、验证码、密码、再次输入密码（均为必填）：

• 输入密码:输入密码时输入框右侧出现“显示/隐藏icon”，默认密码隐藏状态；
• 输入邮箱、验证码、密码时输入框右侧出现“清空icon”，点击清空按钮后将已输入的内容清空；
• 输入框字数限制：密码：大于等于6位，不超过20位；

2）邮箱、密码、短信验证码校验：

• 邮箱格式错误或手机号不存在：提示用户“请输入正确的邮箱”；
• 未填写邮箱，获取验证码按钮置灰，不允许点击；
• 点击验证码按钮，自动发送短信验证码并提示用户“验证码已发送，5分钟内输入有效”；
• 邮箱验证码不正确：提示用户“验证码不正确，请重新输入”；
• 密码格式错误：提示用户“请输入6-20个字符的密码”；
• 两次密码输入不一致：提示用户“两次输入的密码不一致，请重新输入”；

3）单个邮箱，单日接收验证码的次数和频率限制：

• 验证码接收次数：1h内不得超过5次,若超过5次，用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限，请一个小时后再试”；
• 获取验证码的时间间隔为60s,有效期5min，点击获取验证码按钮后，按钮文字变为“重新获取（59s）”；
• 若多次获取验证码，仅最后一次获取的验证码有效；

4）找回密码成功：提示用户“密码重置成功”，并跳转至“xxx”页面。

5）邮箱已停用，联系客服：用户在手机号已停用的情况下，可以点击联系客服，点击“联系客服”弹出“手机号码”弹窗，点击呼叫则唤醒手机拨号。

注：在邮箱已停用等，接收不了验证码的情况下，可联系客服验证身份，客服在后台修改密码。

四、注销账号模块的设计构思

1、用户端注销账号界面，告知用户注销账号的风险（例如下图）

1）该账号用户个人资料将被情况：头像、昵称、实名认证…

2）该账号绑定的第三方账号、银行卡、信用卡…

3）该账号关联的订单记录、浏览记录、优惠券记录、消息记录…

4）该账号的余额等资金信息…

5）其他关联信息

2、用户点击“已清楚风险，确定注销”后，弹出二次确认弹窗

3、用户点击“立即注销”，需校验账号是否存在未完成订单，余额是否大于或等于0等等

1）若账号存在未完成状态的订单，提示用户“注销申请提交失败，您存在未完成的订单！”

2）若账号余额小于0，则提示用户“注销申请提交失败，您的余额为负
数，请先充值余额！”

3、校验通过，则进入下一步，身份验证，这里采用手机号+验证码验证的方式

4、手机号验证通过，点击“确认注销”，根据项目情况进行考虑，可确认注销后直接注销；也可设置冻结期，例如几天后自动注销，期间可以撤销，以防用户后悔。

1）注销成功

2）设置冻结期

5、注销成功后的数据处理

个人信息

1）头像：账号已被注销的用户头像，变更为默认头像

2）昵称：变更为“账号已注销”

3）个人动态：清除，显示用户已注销，不展示任何信息

4）与其他用户/在平台上的互动痕迹：保留

5）该账号绑定的第三方账号

金融信息

1）该账号绑定的银行卡、信用卡等：解除绑定

2）该账号的余额：清空

订单记录、浏览记录、优惠券记录、公告记录等

1）后台的用户注册记录：保留，若用户注销则在用户账号旁边括号备注“用户已注销”，用户后续重新使用同一个手机号进行注册，则给该账号重新赋予一个新的ID，重新生成注册记录。

2）订单记录：保留，若用户注销则在用户账号旁边括号备注“用户已注销”。

3）浏览记录、优惠券记录、公告记录：清空。

本文由 @水蜜桃 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。