TapTap标注:登录及注册篇

作家闭于TapTap的登岸及备案过程进行标注,后续将持续瓜分。

码人网mrw.so缩短网址文章图片

一、文档概括

1.1 文档建改记录

码人网mrw.so缩短网址文章图片

1.2 运用情况证明

码人网mrw.so缩短网址文章图片

二、产品引睹

简介:TapTap是心动搜集旗下,是一个举荐高本质手游的手游瓜分社区,及时共步寰球各大运用商场游戏排行榜,与寰球玩家一齐调换并掘掘高本质手游。

slogan:创造好游戏

2.1 产品功效构造图

码人网mrw.so缩短网址文章图片

2.2 产品信息构造图

码人网mrw.so缩短网址文章图片

三、全部证明

3.1 功效权力

3.2 登录模块

3.2.1 功效列表

码人网mrw.so缩短网址文章图片

3.2.2 功效刻画

3.2.2.1 功效点1:手机登录及备案

1)用户场景

用户在未登录状况下,须要登录时:

  • 点打部分核心主页头像登录,跳转至此页面
  • 点打其权力外的功效模块时,跳转至此页面

2)功效刻画

用户进行登录安排时,默认开始展示手机登录及备案页面。

3)输出/前置前提

需要前提:用户为未登录状况。

4)需要证明

码人网mrw.so缩短网址文章图片

(TapTap手机登录及备案页面)

① 闭闭

点打闭闭所有登录页面,并返回至之前欣赏页面。

② 采用国度与地区

表露已选中的国度大概地区区号。字段表露规则为:国度大概地区缩写+其区号,如CN+86。

点打跳转至“采用国度和地区”页面,如下图:

码人网mrw.so缩短网址文章图片

(采用国度和地区页面)

需要刻画:

  • 点打,返回至之前页面;
  • 国度和地区采用列表。

用户点打选中列表中的国度和地区,变为选中状况,并返反击机登录及备案页面,区号调换为所选区号。

选中状况:

码人网mrw.so缩短网址文章图片

未选中状况:

码人网mrw.so缩短网址文章图片

国度和地区采用列表由常用国度和地区列表及理想国度和地区列表构成:

  • 常用国度和地区列表规则如图所示,也可由经营人员自行增添排序;
  • 理想国度和地区列表规则:国度和地区的汉语拼音首字母,依照从A到Z的程序,顺序分类排序。

A-Z字母条滑动检索:

用户点打大概滑动字幕条停至某个字母时,自动顶置理想国度和地区列表中此字母发端的国度和地区列表。

规则证明:

依照从A到Z的程序,顺序排序,因为收录国度发端暂无”I、O、Q、U、V”的字母,所以将其简略。

补充证明:

  • 默认选中华夏(CN);
  • 断网情景下,无法表露“采用国度和地区”的页面信息。

③ 手机号码输出框

无字符时,输出框灰色笔墨指示“请输发端机号码”,输出框有字符时,笔墨指示消逝,并展示“输出公布符”以及“清空”按钮,如下图所示:

码人网mrw.so缩短网址文章图片

点打输出框中的“清空”按钮可清空输出框理想实质。

点打输出框,底部弹出数字键盘。

④ 用户协议

需要刻画:

  • 笔墨指示“登录即代表扶助《用户协议》和《秘密策略》”;
  • 点打“《用户协议》”笔墨链接跳转至用户协议页面(H5);
  • 点打“《秘密策略》”笔墨链接跳转至秘密策略页面(H5)。

补充证明:

断网情景下,无法表露“用户协议”与“秘密策略”的页面信息。

⑤ 登录

需要刻画:

手机号码输出框无字符时,登录按钮变灰且无法点打。

若有字符输出时,登录按钮变亮即可点打(前端校验)。

校验手机号码是否满脚以下乞求:

  • a. 手机方法位11位(前端校验);
  • b. 手机号非陆地手机号码(后端校验);
  • c. 2小时内,用户所接收到的考订码短信数目不堪过10条(后端校验)。

若满脚上述3个前提,则向用户所提接的手机号码以短信的办法发送6位数字的考订码,考订码灵验期为15分钟,并在屏幕核心弹出考订码悬浮框。

考订码短信实质示比方下:

【TapTap】111111(考订码用于登录)15分钟内灵验,如非本人安排请大概。

若懊悔脚a/b任一前提时,用户点打登录按钮,文本框变红,并加以血色笔墨指示“请输出精确的手机号,非陆地手机请填写地区码”,如下图所示:

码人网mrw.so缩短网址文章图片

若懊悔脚c,点打登录时,用户登录波折,无法下一步安排,而且文本框变红,并加以血色笔墨指示,指示用户姑且还需等待的时间,笔墨指示“安排过于一再,请等待180s后再次点打登录按钮”,如下图所示:

码人网mrw.so缩短网址文章图片

补充证明:

用户接收到的考订码短信胜过10条且等待180s后,其登录节制沉置。

格外 格外状况证明:

若手机处在断网状况下,点打登录按钮,底部悬浮指示“请查瞅搜集对接,而后沉试”,悬浮3s后渐渐消逝,如下图所示:

码人网mrw.so缩短网址文章图片

⑥ 邮箱登录

需要刻画:点打跳转至邮箱登录页面。

补充证明:断网前提下,可平常跳转至邮箱登录页面。

⑦&⑧ 第三方登录

需要刻画:

点打⑦微信 icon:

  • 若为已受权微信账号,则自动登录,并获得用户身份信息,返回之前页面,登录成功;
  • 若为未受权微信账号,则跳转至微信受权登录页面,用户受权登录后,获得新用户身份信息并创造新用户账号,返回之前欣赏页面,登录成功。

(确定参照微信接口文档

点打⑧QQ icon:

  • 点打加入QQ受权登录页面,点打“QQ受权登录”。若为已受权QQ账号,并获得用户身份信息,返回之前页面,登录成功。若为未受权QQ账号,用户点打“QQ受权登录“后,获得新用户身份信息并创造新用户账号,返回之前欣赏页面,登录成功。
  • 点打加入QQ受权登录页面。

(确定参照QQ挪动运用接入乞求

⑨ 考订码悬浮框

码人网mrw.so缩短网址文章图片

(考订码悬浮框)

功效刻画:用户输出所接收到的6位数字考订码,进行考订码的考订,考订经过则登录成功。

接互证明:

考订码悬浮框弹出时,背景暗化,视觉上超过考订码悬浮框(灯箱效验),共时在页面底部弹出数字键盘。

(注:考订码悬浮框不行遮拦LOGO)

a. 闭闭

需要刻画:点打,闭闭考订码悬浮框,灯箱效验消逝,返回至手机登录及备案页面。

b. 手机考订码输出框

需要刻画:点打手机考订码输出框,在多数字键盘的情景下,可从手机底部再次弹出数字键盘。

用户在输出字符时,必定按程序从左至右顺序输出6个数字,而且会赋予用户姑且所输出字符的地位指示,如图所示:

码人网mrw.so缩短网址文章图片

用户输出完6位数字后,且有搜集对接,后端校验,是否符合前提:

  • a. 用户输出的考订码与所发送的考订码短信内的考订码普遍
  • b. 用户所输出的考订码,隔绝迩来一次所发送的考订码时间隔毫不堪过15分钟。

若懊悔脚a/b二者前提,则6个输出框边框全变血色,并以血色笔墨指示用户“考订码缺点”,如下图所示:

码人网mrw.so缩短网址文章图片

若满脚前提,则后盾校验用户身份:

  • 若为已备案用户,登录成功,获得用户信息,返回至上级页面;
  • 若为未备案用户,则自动备案,录入新用户信息(头像、ID、称呼)并登录,返回至上级页面。

补充证明:

  • 仅可输出数字,每个文本框仅可输出1个数字;
  • 断网状况下,无法进行考订码校验,提接波折,底部悬浮指示”请查瞅搜集对接,而后沉试“,悬浮3s后渐渐消逝;
  • 用户运用数字键盘中的驱除功效时,将会驱除文本框内十脚数字。

c. 用户手机号码信息指示

功效刻画:向用户指示短信考订码所发送的手机号码,便于用户进行手机号码的二次确认。

信息指示:

字符指示用户考订码已发送至其手机号,方法为”短信考订码已发送至xxxxx“。

示例:“短信考订码已发送至+8611111111111”。

规则节制:

个中,标记数字为用户所提接的国度/地区区号与手机号构成(后端提取)。

d. 倒计时指示

指示用户隔绝下次获得考订码的实常常间,不可点打,示例:

码人网mrw.so缩短网址文章图片

倒计时中断后笔墨指示变为“再次发送”,可点打,点打”再次发送“,将会再次发送一条新的考订码短信给用户,倒计时中断后:

码人网mrw.so缩短网址文章图片

规则节制:

假如已发送至用户的考订码短信为X条:

  • 当X<=10时,向用户每发送一条短信考订码,用户需等待60s,倒计时中断之后,用户点打”再次发送“,则再次向用户发送一条新的考订码短信。
  • 当X>10时,向用户每发送一条短信考订码,用户需等待(X-10)*60s+60s , 倒计时中断之后,用户点打”再次发送“,则再次向用户发送一条新的考订码短信。

向用户发送胜过10条短信的8小时之后,沉置发送考订码短信的时间节制。

3.2.2.2 功效点2:邮箱登录

1)用户场景

用户在未登录状况下,须要进行邮箱登录时。

2)功效刻画

用户输出邮箱地方账号及登录暗号进行登录。

断网情景下,可平常跳转、察瞅此页面。

3)输出/前置前提

需要前提:用户为未登录状况。

点打手机号登录及备案页面中的邮箱登录,跳转至此页面。

4)需要证明

码人网mrw.so缩短网址文章图片

① 闭闭

点打,闭闭所有登录页面,并返回至之前欣赏页面。

② 邮箱地方输出框

需要刻画:

文本框无字符时,文本框笔墨指示:请输出邮箱地方,如下图所示:

码人网mrw.so缩短网址文章图片

点打文本框,底部弹出英文键盘。

文本框有字符时,表露“清空文本框”按钮 ,若文本框无字符时则湮没此按钮。点打”清空文本框“按钮可清空文本框实质,如下图所示:

码人网mrw.so缩短网址文章图片

规则节制:邮箱地方方法乞求:登录名@主机名.域名。

③ 登录暗号

需要刻画:点打文本框,若手机自戴暗号输出的宁靖键盘,则底部弹出宁靖键盘,若无则弹出英文键盘。

文本框无字符时,文本框笔墨指示”请输出登录暗号“,如下图所示:

码人网mrw.so缩短网址文章图片

用户输出字符时,笔墨指示消逝,如下图所示:

码人网mrw.so缩短网址文章图片

点打“大概”可切换文本框内字符不瞅来/瞅来状况。

代表文本框内的字符为不瞅来状况,一个斑点代表一个字符,如下图所示:

码人网mrw.so缩短网址文章图片

代表文本框内的字符为瞅来状况,如下图所示:

码人网mrw.so缩短网址文章图片

规则节制:文本框默认为不瞅来状况。

④ 忘怀暗号

点打“忘怀暗号?”,底部弹出“欣赏器”采用页面。

用户采用欣赏器,跳转至“https://www.taptap.com/password/email”。

⑤ 邮箱登录

前端校验:

  • 邮箱地方符合邮箱地方方法乞求(方法乞求:登录名@主机名.域名);
  • 暗号文本框不为空。

符合以上乞求,登录按钮亮起,即可点打。不符合以上乞求,登录按钮变灰,不可点打。

不吻及方法乞求的登录按钮,不可点打状况:

码人网mrw.so缩短网址文章图片

吻及方法乞求的登录按钮,可点打状况:

码人网mrw.so缩短网址文章图片

若用户无搜集对接,点打登录,底部悬浮笔墨指示”登录波折请查瞅搜集对接,而后沉试”,停留3s后渐渐消逝,如下图所示:

码人网mrw.so缩短网址文章图片

若有搜集链接,则提接用户所填写的邮箱地方与暗号,进行后端考订:

登录成功:

若此邮箱地方存留于后端数据库而且用户所提接暗号与之配合,则登录成功,并获得用户信息,返回上级页面。

登录波折:

  • 邮箱地方不存留于后端数据库;
  • 邮箱地方存留于后端数据库,然而用户所提接的暗号与之不配合。

则登录波折,血色笔墨指示”用户名大概暗号输出缺点,请沉新输出“,如下图所示:

码人网mrw.so缩短网址文章图片

⑥ 手机登录及备案

点打跳转至”手机登录与备案“页面。

补充证明:断网前提下,可平常表露此页面。

⑦&⑧ 第三方登录

需要刻画:

点打⑦微信 icon:

  • 若为已受权微信账号,则自动登录,并获得用户身份信息,返回之前页面,登录成功;
  • 若为未受权微信账号,则跳转至微信受权登录页面,用户受权登录后,获得新用户身份信息并创造新用户账号(天生随机头像、随机用户名,创造用户ID),返回之前欣赏页面,登录成功。

(确定参照微信接口文档

点打⑧QQ icon

  • 点打加入QQ受权登录页面,点打“QQ受权登录”。若为已受权QQ账号,自动获得用户身份信息,返回之前页面,登录成功。
  • 若为未受权QQ账号,点打“QQ受权登录“后,获得新用户身份信息并创造新用户账号(天生随机头像、随机用户名,创造用户ID),返回之前欣赏页面,登录成功。

(确定参照QQ挪动运用接入乞求

补充证明:

  • 断网前提下,点打⑦微信登录跳转时,等待20s,底部悬浮框指示”搜集对接不可用,请稍后再试“,悬浮5秒后,渐渐消逝;
  • 断网前提下,点打⑧QQ登录跳转时,等待20s,底部悬浮框指示”搜集对接不可用,请稍后再试“,悬浮5秒后,渐渐消逝。

登录模块倡导:

在第一次且断网状况下加入TapTap加入登录页面时,跳转至TapTap的邮箱登录页面时,安置比较凌乱,如:断网前提下,Facebook,Line等第三方登录安置凌乱。

码人网mrw.so缩短网址文章图片

邮箱登录页面,用户忘怀暗号时须要运用欣赏器进行跳转,倡导将此页面以H5的办法放入TapTap APP中,无需运用欣赏器跳转。

用户运用第三方登录,在断网前提下,用户等待时间过长才给到指示,以至偶尔无指示表露。

  • 运用微信登录还好,微信最后会有相闭指示,然而等待时间仍旧过长。
  • 运用QQ登录,断网前提下,若用户不登录QQ,则不会有相闭指示,只会直接跳转至QQ app的登录页面。

这便须要TapTap自己需完备指示规则:

  • 指示所需时间合理中断;
  • 检测何以偶尔无指示。

PS:憧憬大佬们能指出尔这篇标注的问题地方。

 

本文由 @想转产品lu 本创发布于大众都是产品经理。未经答应,遏止转载。

题图来自unsplash,基于CC0协议