快好知 kuaihz

产品感获取:抖音注册登录流程组件模仿

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

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

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

偷个懒略了。

二、 功能需求

1. 手机号注册登录

触发入口:

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

需求及交互说明:

用户通过输入手机号,获取验证码并输入验证码,系统通过识别账号是否已注册。若已注册则登录完成,跳转至登录状态前的页面,未注册则进行注册流程,跳转至完善个人资料页面。

点击输入手机号码框,弹出数字键盘,只支持数字输入。

自动间隔(我不知道规则是什么…正确号码会是344的分布)。

号码框输入数字后,切换掉其他登录方式入口,由图3.1.1变为3.1.2。

号码输入是11位时,判断号码输入正确,获取验证码按钮高亮可选,其他情况皆灰掉不可选(抖音这个对号码是否正确判断不够呀)。

发送验证码后,获取验证码按钮不可选,并有60s倒计时,倒计时结束变为“重新发送”。

若20s(具体时间不清楚)没有填写验证码,系统判断用户接收验证码有误,下方弹出“获取语音验证码”,如图3.1.3。

60s未完成登录,下方弹出“登录遇到问题?”,如图3.1.3。

点击输入验证码框,弹出数字键盘,并不支持其他符号输入。

4位数字验证码输入,下方的√高亮可选,进入下一步操作,其他情况下灰色不可选。

异常情况:

验证码错误,提示“验证码错误,请重试”;

验证码过期(应该有一个规则),提示“验证码过期,请重试”;

X分钟内多次发送验证码,判断为发送验证码频繁(不知道具体时间),提示“验证码发送太频繁,请稍后再试”;

“请勾选用户协议”。

2. 完善资料页

触发入口:

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

需求说明:

未注册的用户在这里进行个人资料完善,包括头像、昵称、出生日期、性别,可跳过,在产品使用过程中补充个人资料。

头像,本地相册上传及拍摄两个方式。选择本地相册上传,调用相册时自动筛掉短视频(这个在体验过程中没有注意到),拍摄可调用系统相机及第三方拍摄产品,拍摄完毕进行圆形头像裁剪(尺寸)。

昵称,弹出常用输入键盘,支持汉字、数字、英文(等等),限制昵称最长14字符,汉字、数字、英文字母、中英文符号均算1字符(这个规则不清楚…),输入过长自动取前14个字符。

出生日期,设置年月日滚轮,最新日期设置为用户注册当天年月日,用户通过滚动选择日期。

性别,两个选项,选择确定。

全部设置完成后,下方的“√”高亮可选,跳转至触发注册前的页面,其他情况灰色不可选。

3. 密码登录及找回密码

触发入口:

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

需求说明:

用户通过此页面进行账号密码登录,并可以通过找回密码来重置新密码。

跳转至密码登录页,光标自动聚焦到输入手机号码框,并弹出数字键盘。

该栏只允许输入数字,且号码自动间隔(344)。

输入账号密码,弹出英文键盘(我是小米手机,自动弹出了小米安全键盘,英文+数字)。

输入密码,下方“√”高亮可选,登录完成跳转至触发登录前的页面。(这里抖音没有对手机号码及密码格式进行检测,甚至10位数字+任意一位密码都可以触发下一步)。

输入11位手机号码(数字),“找回密码”按钮高亮可选,其他情况不可选。

跳转至找回密码页,光标自动聚焦到输入验证码栏并弹出数字键盘,系统自动发送验证码,发送验证码栏开始60s倒计时并不可选,倒计时结束显示“重新发送”,可选。

倒计时20s左右(时间不确定),下方弹出“获取语音验证码”。

设置新密码,8-20位,至少包含**/**/**2种组合,数字、字母、中英文字符均算一位,超过20位无法输入,并提示“密码8-20位,至少包含**/**/**2种组合”。

设置完成,下方“右箭头”高亮可选,无误则“找回密码”操作完成,跳转至触发登录操作前的页面。

异常情况:

手机号格式错误,提示“手机号码格式错误”,(两次不一样,还有一次“账号或密码错误”)。

号码或密码错误,提示“账号或密码错误”,并在弹出框里给出选项“找回密码”。

该账户未设置登录密码,提示“账号或密码错误”,同上。

验证码错误,提示“验证码错误,请重试”。

验证码过期(应该有一个规则),提示“验证码过期,请重试”。

X分钟内多次发送验证码,判断为发送验证码频繁(不知道具体时间),提示“验证码发送太频繁,请稍后再试”。

密码设置不足8位,下方“右箭头”灰色无法选中。

密码为纯数字/字母/符号,提示“密码8-20位,至少包含**/**/**2种组合”。

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

触发入口:

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

需求说明:

用户通过第三方登录获取第三方账户的个人资料,建立新账户,可选择绑定手机号来确保用户账号的唯一性。

用户选择第三方平台登录后,唤醒该平台并进入授权操作,授权完成后获得第三方的个人资料,包括昵称、头像等,并建立新账户。

第三方授权完成后跳转至手机绑定页,可跳过,光标自动聚焦在输入手机号码框内,并自动弹出数字键盘,只允许输入数字。

号码自动间隔(正确号码344分隔)。

输入11位数字,下方“右箭头”高亮可选,点击进入下一步操作,其他情况灰色不可选。

跳转至验证码页后,系统自动发送验证码,自动弹出数字键盘,只允许输入数字。

发送验证码后,右方按钮进行60s倒计时,灰色不可选,倒计时结束显示“重新发送”,可选进行重新发送操作。

设置密码,弹出英文键盘,8-20位,至少包含**/**/**2种组合,数字、字母、中英文字符均算一位,超过20位无法输入,并提示“密码8-20位,至少包含**/**/**2种组合”。

设置完成,下方“右箭头”高亮可选,点击完成绑定手机号操作,跳转至进入登录页面前的页面。

异常情况:

验证码错误,提示“验证码错误,请重试”。

验证码过期(应该有一个规则),提示“验证码过期,请重试”。

X分钟内多次发送验证码,判断为发送验证码频繁(不知道具体时间),提示“验证码发送太频繁,请稍后再试”。

密码设置不足8位,下方“右箭头”灰色无法选中。

密码为纯数字/字母/符号,提示“密码8-20位,至少包含**/**/**2种组合”。

若手机号码已绑定其他账户,提示“绑定失败”,并给出解决方案“换个手机号试试”和“查看详情”。

三、 其他

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

手机号码格式验证不足:除了在密码登录进行下一步操作时收到了提示,其余情况均无提示,11位数字即可进入下一步操作,是否是抖音团队考虑到了用户较少输入错号码,且在没有收到验证码的情况下会迅速发现这些问题;

密码登录功能:除了第三方登录在绑定手机号时会强行设置登录密码,在其他注册环节,使用过程中,包括第三方登录跳过手机号绑定,都不会触发提示设置登录密码。设置登录密码在“我-更多-设置-账号与安全-抖音密码”,四级列表中,用户基本不会发现。在有了语音验证码应对收不到短信验证码的情况下,密码登录功能显得鸡肋;

第三方登录:这应该是一个用户体验和账户信息之间的抉择,若没有绑定手机号,会出现过多通过第三方登录形成的账户,拖累系统并影响信息收集。

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:组件  组件词条  模仿  模仿词条  获取  获取词条  流程  流程词条  登录  登录词条  
设计

 25个出众的web表单范例

表单可能成为网站至关重要的组成部分。从非常简单直接的表单到花哨、多彩和创意的表单,每个网站都会呈现一种表单风格。当考虑站点的界面设计时,这必定是你应该关注的元素...(展开)

设计

 PLEASE!别再让用户一进网站...

如果您点开这篇文章,说明您已经对不仅仅只关注设计的是否“好看”了,还在设法强化自己的作品让它们“好用”!不管如何,你发现没,现在99%的网站/应用/服务在一开始...(展开)