点击点击标记登录和注册

2020-01-21 14:03 来源:科创网

原标题:TapTap标注:登录和注册

作者标注了Tap的登录和注册过程,以后将继续分享。

935a106919534fcc8a175a258a14d13a.jpeg

1,文档概览1.1文档修改记录

55c9b5cbd4cb40c3b3503979c31cbe42.png

1.2用户环境描述

9eff6d05cc4b47359318e4f7af3e8cc9.png

2,产品描述

简介:TapTap是一个推荐高质量手游的手游共享社区。它实时同步世界主要应用市场的游戏排名,并与全球玩家交流,探索高质量的手游。

口号:发现好游戏

2.1产品功能结构

d60ad451426447019220ce70cc7fe4cb.png

2.2产品信息结构

c80ad8af822249f5844308ace452bd99.jpeg

3,全局描述3.1功能权限3.2登录模块

3.2.1 功能列表

df405b5b8bfe498ca9ee7a3efc5c0591.png

3.2.2 功能描述

3.2.2.1 功能点1:手机登录及注册

1)用户场景

当用户未登录且需要登录时:

2)功能描述

3)输入/前置条件

4)需求说明

① 关闭

② 选择国家与地区

(点击“点击手机登录和注册页面”)

③ 手机号码输入框

点击关闭整个登录页面并返回上一个浏览页面。

④ 用户协议

显示选定的国家代码。字段显示规则是:国家或地区缩写其区号,如CN 86。

点击跳转到“选择国家和地区”页面,如下图所示:

5da47be5f9644ccc9d765541e2f6e1f2.png

(选择国家和地区页面)

需求描述:

用户点击所选列表中的国家和地区,更改为所选状态,返回手机登录和注册页面,并将区号更改为所选号码。

选定状态:

未选中状态:

国家和地区选择列表由共同的国家和地区列表以及所有国家和地区列表组成:

A-Z字母栏滑动搜索:

当用户单击或滑动标题栏以停止到某个字母时,将自动设置所有国家和地区列表中以该字母开头的国家和地区列表。

规则描述:

按从A到z的顺序排序。因为在国家的开头没有字母“I,O,Q,U,V”,所以它被删除。

补充说明:

单击返回上一页。国家和地区选择列表。

⑤ 登录

当没有字符时,输入框中的灰色文本会提示“请输入手机号码”。当输入框中有字符时,文本提示消失,“输入指示器”和“空”按钮出现,如下图所示:

0cfc8a007cf24232a64abeb979b1a98a.png

点击输入框中的“空”按钮清空输入框的全部内容。

⑥ 邮箱登录

需求描述:

补充说明:

网络断开时无法显示“用户协议”和“隐私策略”的页面信息。

⑦⑧ 第三方登录

需求描述:

当手机号码输入框中没有字符时,登录按钮变为灰色,无法点击。

如果有字符输入,登录按钮将被点亮,您可以点击(前检查)。

检查手机号码是否满足以下要求:

文本提示“登录意味着同意《用户协议》和《隐私政策》”;单击“《用户协议》”文本链接跳转到用户协议页面(H5);单击“《隐私政策》”文本链接跳转到隐私策略页面(H5)。

如果满足上述三个条件,以短信的形式向用户提交的手机号码发送一个6位验证码。验证码的有效期为15分钟,屏幕中央会弹出一个验证码悬挂框。

验证码短信内容的一个例子如下:

[TAPPAP]111111(验证码用于登录)将在15分钟内有效,如果不是自己操作,请忽略。

如果不满足任何一个a/b条件,用户点击登录按钮,文本框变为红色,红色文字提示“请输入正确的手机号码,请填写非大陆手机的区号”,如下图所示:

ee223a18b0ae40ac9e35ee189c558b72.png

如果不满足C,点击登录时,用户无法登录,无法进行下一步操作,文本框变为红色,红色文字提示表示用户仍需等待的时间。文本提示“操作太频繁,请等待180秒后再点击登录按钮”,如下图所示:

111762776e63441fb257c4478dfcfdb7.png

补充说明:

用户收到10条以上验证码信息并等待180秒后,其登录限制被重置。

异常状态描述:

如果手机处于断开状态,点击登录按钮,3秒钟暂停后底部的暂停提示“请检查网络连接并重试”将逐渐消失,如下图所示:

41afc8098d9c40348da2bd99a2bc1d91.png

⑨ 验证码悬浮框

需求描述:点击跳转到邮箱登录页面。

补充说明:在网络断开的情况下,通常可以跳转到邮箱登录页面。

60s

需求描述:

点击⑦图标:

(详情请参考界面文档)

点击⑧ QQ图标:

(详情请参考QQ移动应用访问需求)

(X-10)*60s+60s

37dc950d7b9c44a6ab604a4bb85420e1.png

(验证码暂停框)

功能描述:用户输入接收到的6位验证码验证验证码,验证通过后登录成功。

交互式描述:

当验证码悬浮框弹出时,背景变暗并在视觉上高亮验证码悬浮框(灯箱效果),而数字键盘弹出在页面底部。

(注:验证码悬浮框不能覆盖标识)

A .关闭

要求描述:点击关闭验证码悬浮框,灯箱效果消失,返回手机登录注册页面。

b .手机验证码输入框

需求描述:点击手机验证码输入框,在没有数字键盘的手机底部再次弹出数字键盘。

输入字符时,用户必须从左到右依次输入6个数字,系统会提示用户输入当前输入字符的位置。如图所示:

b9004feafcd84106af1e883a058b03a9.png

用户输入6个数字后,有网络连接,后端检查是否满足条件:

如果两个a/b条件都不满足,6个输入框的边框将全部变为红色,并提示用户红色文本“验证码错误”。如下图所示:

27b7ae9ff7bf4ace91728ae32e929117.png

补充说明:

补充说明:

C .用户手机号码信息提示

功能描述:提示用户输入短信验证码发送的手机号码,方便用户两次确认手机号码。

消息提示:

字符以“短信验证码已发送至xxxxx”的格式提示用户验证码已发送至其手机号码。

示例:“短信验证码已发送至86111111111111”。

规则限制:

其中,符号号由用户提交的国家/地区区号和手机号码组成(从后端提取)。

提示用户下次获取验证码的实时时间之前不要点击。例如:

68728b3e1c6d4a92ae303a724114853f.png

倒计时结束后,文本提示变为“再次发送”。点击,点击“再次发送”,新的验证码短信将再次发送给用户。倒计时结束后:

dc93f5ccbdc142ab8473dc73c81a2604.png

规则限制:

假设已向用户发送了X条验证码短信:

在向用户发送10条以上短信后8小时,重置发送验证码短信的时间限制。当

3.2.2.2 功能点2:邮箱登录

1)用户场景

用户需要登录邮箱而不登录时。

2)功能描述

用户输入电子邮件地址、帐号和登录密码登录。

当网络断开时,您可以正常跳转并查看此页面。

3)输入/前置条件

必需:用户未登录。

单击手机号码登录和注册页面中的邮箱登录,跳转到此页面。单击

4)需求说明

39a51ef0fd2942a19e0bad7c30914d78.png

① 关闭

关闭整个登录页面并返回上一个浏览页面。

② 邮箱地址输入框

需求说明:当

文本框没有字符时,文本框文字提示:请输入电子邮件地址,如下图所示:

95c23e5b6ded4a2a9f4171b2792616cb.png

文本框有字符,将显示“空文本框”按钮,如果文本框没有字符,按钮将被隐藏。点击“清空文本框”按钮清空文本框内容,如下图所示:

6cb1b9b8c78d402d8db5565a2b13b5a7.png

规则限制:邮箱地址格式要求:登录名

③ 登录密码

④ 忘记密码

需求描述:点击文本框。如果手机有自己的安全键盘输入密码,安全键盘会弹出在底部;如果没有,英文键盘将会弹出。当

文本框没有字符时,文本框文本提示“请输入登录密码”,如下图所示:

3be0878a728a43a7b2f8624d3c9b4c20.png

当用户输入字符时,文本提示消失,如下图所示:

a901dae088c943f8b8c944b1ce6b3464.png

单击“或”切换文本框中字符的不可见/可见状态。

表示文本框中的字符不可见,黑点表示字符,如下图所示:

dc872dc14ffd4fc2b95f3a422058f287.png

表示文本框中的字符可见,如下图所示:

fab6e8b2c75a42baac2e1a9ed528e7ac.png

⑤ 邮箱登录

⑥ 手机登录及注册

单击“忘记密码?”底部会弹出“浏览器”选择页面。

⑦⑧ 第三方登录

010-59000

前端验证:

满足上述要求,登录按钮亮起,可点击。不符合上述要求,登录按钮呈灰色,无法点击。

对于不符合格式要求的登录按钮,不能点击状态:

对于符合格式要求的登录按钮,可以点击状态:

如果用户没有网络连接,点击登录,停留3秒钟后,底部浮动文本提示“请检查网络连接再试”,如下图所示:

e8567fe4584c400289201cee24ceb981.png

如果有网络连接,提交用户填写的电子邮件地址和密码。进行后端验证:

登录成功:

如果该电子邮件地址存在于后端数据库中,并且用户提交的密码与之匹配,则登录成功,获取用户信息并返回上级页面。

登录失败:

登录失败,红色文本提示“用户名或密码不正确,请重新输入”,如下图所示:

010-59000

010-59000

点击跳转到“手机登录注册”页面。

010-59000

需求说明:当

需求描述:

如果是未经授权的帐户,请跳转到授权登录页面。用户授权登录后,获取新的用户身份信息并创建新的用户帐户(生成随机头像、随机用户名和创建用户标识)。返回上一个浏览页面并成功登录。

(详情请参考界面文档)

点击⑧QQ图标

单击进入“QQ授权登录”页面,然后单击“QQ授权登录”。如果是授权的QQ帐户,将自动获取用户的身份信息,并返回上一页。登录将会成功。如果是未经授权的QQ帐户,请单击“QQ授权登录”获取新用户的身份信息并创建新用户帐户(生成随机头像、随机用户名、创建用户标识),返回上一个浏览页面并成功登录。

补充说明:

断开连接的情况下,点击⑦登录并跳转时,等待20秒,底部的悬浮框表示“网络连接不可用,请稍后再试”。悬浮5秒钟后,它逐渐消失。在网络断开的情况下,点击⑧QQ登录跳转,等待20秒,底部的悬浮框表示“网络连接不可用,请稍后再试”,悬浮5秒后逐渐消失。

登录模块建议:

首次进入Tap登录页面时,在断开状态下,跳转TAP的邮箱登录页面时布局混乱,例如,在断开状态下,脸谱、线路等第三方登录布局混乱。

8b80253ddf7d4b45866f5c6b61f6f4e1.png

邮箱登录页面需要浏览器在用户忘记密码时跳转。建议将此页面以H5的形式放在taptaptap APP中,不要使用浏览器跳转。

用户使用第三方登录。在网络断开的情况下,用户等待提示的时间太长,有时不显示提示。

这需要TAPTAPTAP来改进它自己的提示规则:

PS:我希望大哥们能指出我注释的问题。

这篇文章最初是由

想要转移lu发表的。每个人都是产品经理。未经允许禁止复制。unsplash的主题图,基于CC0协议

标签: 用户 TapTap 地区