本文笔者将对抖音注册登录流程的原型和需求文档进行还原，向大家展现整个注册登陆全流程，以及其中一些容易被人们忽略的细节问题。

前段时间有幸看到纯银大大微博发出的一份产品经理入门指南，通过学习模仿产品的各个组件来了解并获得产品感。

对比十款知名产品之后，个人感觉抖音的注册登录流程体验不错，故选择抖音的注册登录流程作原型及需求文档的还原。以学习为目的，故仅加入了功能需求模块，有不足之处还请各位不吝赐教。

一、 功能结构及业务流程图

偷个懒略了。

二、 功能需求 1. 手机号注册登录页

触发入口：

用户在使用抖音个人账户相关功能时（关注、消息、我、上传、点赞、+关注、评论、转发），触发跳转至注册登录页。

需求及交互说明：

1. 用户通过输入手机号，获取验证码并输入验证码，系统通过识别账号是否已注册。若已注册则登录完成，跳转至登录状态前的页面，未注册则进行注册流程，跳转至完善个人资料页面。
2. 点击输入手机号码框，弹出数字键盘，只支持数字输入。
3. 自动间隔（我不知道规则是什么…正确号码会是344的分布）。
4. 号码框输入数字后，切换掉其他登录方式入口，由图3.1.1变为3.1.2。
5. 号码输入是11位时，判断号码输入正确，获取验证码按钮高亮可选，其他情况皆灰掉不可选（抖音这个对号码是否正确判断不够呀）。
6. 发送验证码后，获取验证码按钮不可选，并有60s倒计时，倒计时结束变为“重新发送”。
7. 若20s（具体时间不清楚）没有填写验证码，系统判断用户接收验证码有误，下方弹出“获取语音验证码”，如图3.1.3。
8. 60s未完成登录，下方弹出“登录遇到问题？”，如图3.1.3。
9. 点击输入验证码框，弹出数字键盘，并不支持其他符号输入。
10. 4位数字验证码输入，下方的√高亮可选，进入下一步操作，其他情况下灰色不可选。

异常情况：

1. 验证码错误，提示“验证码错误，请重试”；
2. 验证码过期（应该有一个规则），提示“验证码过期，请重试”；
3. X分钟内多次发送验证码，判断为发送验证码频繁（不知道具体时间），提示“验证码发送太频繁，请稍后再试”；
4. “请勾选用户协议”。

2. 完善资料页

触发入口：

未注册过号码经过正确的验证过程后，自动跳转至完善资料页面。

需求说明：

1. 未注册的用户在这里进行个人资料完善，包括头像、昵称、出生日期、性别，可跳过，在产品使用过程中补充个人资料。
2. 头像，本地相册上传及拍摄两个方式。选择本地相册上传，调用相册时自动筛掉短视频（这个在体验过程中没有注意到），拍摄可调用系统相机及第三方拍摄产品，拍摄完毕进行圆形头像裁剪（尺寸）。
3. 昵称，弹出常用输入键盘，支持汉字、数字、英文（等等），限制昵称最长14字符，汉字、数字、英文字母、中英文符号均算1字符（这个规则不清楚…），输入过长自动取前14个字符。
4. 出生日期，设置年月日滚轮，最新日期设置为用户注册当天年月日，用户通过滚动选择日期。
5. 性别，两个选项，选择确定。
6. 全部设置完成后，下方的“√”高亮可选，跳转至触发注册前的页面，其他情况灰色不可选。

3. 密码登录及找回密码

触发入口：

如图3.1.1，3.1.2，3.1.3，在验证码登录页，用户点击右上方“密码登录”按钮，跳转至密码登录页。若没有设置账号密码，或忘记密码点击找回密码，则跳转至找回密码页，通过短信验证码设置新密码。

需求说明：

1. 用户通过此页面进行账号密码登录，并可以通过找回密码来重置新密码。
2. 跳转至密码登录页，光标自动聚焦到输入手机号码框，并弹出数字键盘。
3. 该栏只允许输入数字，且号码自动间隔（344）。
4. 输入账号密码，弹出英文键盘（我是小米手机，自动弹出了小米安全键盘，英文+数字）。
5. 输入密码，下方“√”高亮可选，登录完成跳转至触发登录前的页面。（这里抖音没有对手机号码及密码格式进行检测，甚至10位数字+任意一位密码都可以触发下一步）。
6. 输入11位手机号码（数字），“找回密码”按钮高亮可选，其他情况不可选。
7. 跳转至找回密码页，光标自动聚焦到输入验证码栏并弹出数字键盘，系统自动发送验证码，发送验证码栏开始60s倒计时并不可选，倒计时结束显示“重新发送”，可选。
8. 倒计时20s左右（时间不确定），下方弹出“获取语音验证码”。
9. 设置新密码，8-20位，至少包含****2种组合，数字、字母、中英文字符均算一位，超过20位无法输入，并提示“密码8-20位，至少包含****2种组合”。
10. 设置完成，下方“右箭头”高亮可选，无误则“找回密码”操作完成，跳转至触发登录操作前的页面。

异常情况：

1. 手机号格式错误，提示“手机号码格式错误”，（两次不一样，还有一次“账号或密码错误”）。
2. 号码或密码错误，提示“账号或密码错误”，并在弹出框里给出选项“找回密码”。
3. 该账户未设置登录密码，提示“账号或密码错误”，同上。
4. 验证码错误，提示“验证码错误，请重试”。
5. 验证码过期（应该有一个规则），提示“验证码过期，请重试”。
6. X分钟内多次发送验证码，判断为发送验证码频繁（不知道具体时间），提示“验证码发送太频繁，请稍后再试”。
7. 密码设置不足8位，下方“右箭头”灰色无法选中。
8. 密码为纯数字/字母/符号，提示“密码8-20位，至少包含****2种组合”。

4. 第三方登录及手机号码绑定

触发入口：

如图3.1.1，用户在注册登录页点击下方“使用其他方式登录”，可选择头条、QQ、微信、微博四种第三方账号进行登录，后跳转至第三方平台进行账号授权。已登录账号直接进入授权阶段，未登录需要先登录账号，授权完毕跳转至抖音登录页面进行手机号绑定操作。（QQ微信因为众所周知的原因被限制使用登录抖音，抖音会提示。）

需求说明：

1. 用户通过第三方登录获取第三方账户的个人资料，建立新账户，可选择绑定手机号来确保用户账号的唯一性。
2. 用户选择第三方平台登录后，唤醒该平台并进入授权操作，授权完成后获得第三方的个人资料，包括昵称、头像等，并建立新账户。
3. 第三方授权完成后跳转至手机绑定页，可跳过，光标自动聚焦在输入手机号码框内，并自动弹出数字键盘，只允许输入数字。
4. 号码自动间隔（正确号码344分隔）。
5. 输入11位数字，下方“右箭头”高亮可选，点击进入下一步操作，其他情况灰色不可选。
6. 跳转至验证码页后，系统自动发送验证码，自动弹出数字键盘，只允许输入数字。
7. 发送验证码后，右方按钮进行60s倒计时，灰色不可选，倒计时结束显示“重新发送”，可选进行重新发送操作。
8. 设置密码，弹出英文键盘，8-20位，至少包含****2种组合，数字、字母、中英文字符均算一位，超过20位无法输入，并提示“密码8-20位，至少包含****2种组合”。
9. 设置完成，下方“右箭头”高亮可选，点击完成绑定手机号操作，跳转至进入登录页面前的页面。

异常情况：

1. 验证码错误，提示“验证码错误，请重试”。
2. 验证码过期（应该有一个规则），提示“验证码过期，请重试”。
3. X分钟内多次发送验证码，判断为发送验证码频繁（不知道具体时间），提示“验证码发送太频繁，请稍后再试”。
4. 密码设置不足8位，下方“右箭头”灰色无法选中。
5. 密码为纯数字/字母/符号，提示“密码8-20位，至少包含****2种组合”。
6. 若手机号码已绑定其他账户，提示“绑定失败”，并给出解决方案“换个手机号试试”和“查看详情”。

三、 其他

在还原流程的过程中，还有其他一些点需要做一下记录：

• 手机号码格式验证不足：除了在密码登录进行下一步操作时收到了提示，其余情况均无提示，11位数字即可进入下一步操作，是否是抖音团队考虑到了用户较少输入错号码，且在没有收到验证码的情况下会迅速发现这些问题；
• 密码登录功能：除了第三方登录在绑定手机号时会强行设置登录密码，在其他注册环节，使用过程中，包括第三方登录跳过手机号绑定，都不会触发提示设置登录密码。设置登录密码在“我-更多-设置-账号与安全-抖音密码”，四级列表中，用户基本不会发现。在有了语音验证码应对收不到短信验证码的情况下，密码登录功能显得鸡肋；
• 第三方登录：这应该是一个用户体验和账户信息之间的抉择，若没有绑定手机号，会出现过多通过第三方登录形成的账户，拖累系统并影响信息收集。

抖音在注册登录流程中诸多细节做得太好了，第一次体验，获益良多。

    以上就是本篇文章【产品感获取：抖音注册登录流程组件模仿】的全部内容了，欢迎阅览 ！ 文章地址：http://lianchengexpo.xrbh.cn/news/11371.html 
     资讯      企业新闻      行情      企业黄页      同类资讯      首页      网站地图      返回首页 迅博思语资讯移动站 http://lianchengexpo.xrbh.cn/mobile/ , 查看更多