作者对TapTap的登陆及注册流程进行标注，后续将继续分享。

一、文档概述

1.1 文档修改记录

1.2 使用环境说明

二、产品介绍

简介：TapTap是心动网络旗下，是一个推荐高品质手游的手游分享社区,实时同步全球各大应用市场游戏排行榜,与全球玩家共同交流并发掘高品质手游。

slogan：发现好游戏

2.1 产品功能结构图

2.2 产品信息结构图

三、全局说明

3.1 功能权限

3.2 登录模块

3.2.1 功能列表

3.2.2 功能描述

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

1）用户场景

用户在未登录状态下，需要登录时：

• 点击个人中心主页头像登录，跳转至此页面
• 点击其权限外的功能模块时，跳转至此页面

2）功能描述

用户进行登录操作时，默认首先展现手机登录及注册页面。

3）输入/前置条件

必要条件：用户为未登录状态。

4）需求说明

（TapTap手机登录及注册页面）

① 关闭

点击关闭整个登录页面，并返回至之前浏览页面。

② 选择国家与地区

显示已选中的国家或地区区号。字段显示规则为：国家或地区缩写+其区号，如CN+86。

点击跳转至“选择国家和地区”页面，如下图：

（选择国家和地区页面）

需求描述：

• 点击，返回至之前页面；
• 国家和地区选择列表。

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

选中状态：

未选中状态：

国家和地区选择列表由常用国家和地区列表及全部国家和地区列表组成：

• 常用国家和地区列表规则如图所示，也可由运营人员自行添加排序；
• 全部国家和地区列表规则：国家和地区的汉语拼音首字母，按照从A到Z的顺序，依次分类排序。

A-Z字母条滑动检索：

用户点击或滑动字幕条停至某个字母时，自动顶置全部国家和地区列表中此字母开头的国家和地区列表。

规则说明：

按照从A到Z的顺序，依次排序，由于收录国家开头暂无”I、O、Q、U、V”的字母，所以将其删除。

补充说明：

• 默认选中中国（CN）；
• 断网情况下，无法显示“选择国家和地区”的页面信息。

③ 手机号码输入框

无字符时，输入框灰色文字提示“请输入手机号码”，输入框有字符时，文字提示消失，并出现“输入指示符”以及“清空”按钮，如下图所示：

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

点击输入框，底部弹出数字键盘。

④ 用户协议

需求描述：

• 文字提示“登录即代表同意《用户协议》和《隐私政策》”；
• 点击“《用户协议》”文字链接跳转至用户协议页面(H5）；
• 点击“《隐私政策》”文字链接跳转至隐私政策页面(H5）。

补充说明：

断网情况下，无法显示“用户协议”与“隐私政策”的页面信息。

⑤ 登录

需求描述：

手机号码输入框无字符时，登录按钮变灰且无法点击。

若有字符输入时，登录按钮变亮即可点击（前端校验）。

校验手机号码是否满足以下要求：

• a. 手机格式位11位（前端校验）；
• b. 手机号非大陆手机号码（后端校验）；
• c. 2小时内，用户所接收到的验证码短信数量没有超过10条（后端校验）。

若满足上述3个条件，则向用户所提交的手机号码以短信的方式发送6位数字的验证码，验证码有效期为15分钟，并在屏幕中央弹出验证码悬浮框。

验证码短信内容示例如下：

【TapTap】111111（验证码用于登录）15分钟内有效，如非本人操作请忽略。

若不满足a/b任一条件时，用户点击登录按钮，文本框变红，并加以红色文字提示“请输入正确的手机号，非大陆手机请填写地区码”，如下图所示：

若不满足c，点击登录时，用户登录失败，无法下一步操作，并且文本框变红，并加以红色文字提示，提示用户目前还需等待的时间，文字提示“操作过于频繁，请等待180s后再次点击登录按钮”，如下图所示：

补充说明：

用户接收到的验证码短信超过10条且等待180s后，其登录限制重置。

异常状态说明：

若手机处在断网状态下，点击登录按钮，底部悬浮提示“请检查网络连接，然后重试”，悬浮3s后逐渐消失，如下图所示：

⑥ 邮箱登录

需求描述：点击跳转至邮箱登录页面。

补充说明：断网条件下，可正常跳转至邮箱登录页面。

⑦&⑧ 第三方登录

需求描述：

点击⑦微信 icon：

• 若为已授权微信账号，则自动登录，并获取用户身份信息，返回之前页面，登录成功；
• 若为未授权微信账号，则跳转至微信授权登录页面，用户授权登录后，获取新用户身份信息并创建新用户账号，返回之前浏览页面，登录成功。

（详情参考微信接口文档）

点击⑧QQ icon：

• 点击进入QQ授权登录页面，点击“QQ授权登录”。若为已授权QQ账号，并获取用户身份信息，返回之前页面，登录成功。若为未授权QQ账号，用户点击“QQ授权登录“后，获取新用户身份信息并创建新用户账号，返回之前浏览页面，登录成功。
• 点击进入QQ授权登录页面。

（详情参考QQ移动应用接入要求）

⑨ 验证码悬浮框

（验证码悬浮框）

功能描述：用户输入所接收到的6位数字验证码，进行验证码的验证，验证通过则登录成功。

交互说明：

验证码悬浮框弹出时，背景暗化，视觉上突出验证码悬浮框(灯箱效果），同时在页面底部弹出数字键盘。

（注：验证码悬浮框不能遮挡LOGO）

a. 关闭

需求描述：点击，关闭验证码悬浮框，灯箱效果消失，返回至手机登录及注册页面。

b. 手机验证码输入框

需求描述：点击手机验证码输入框，在无数字键盘的情况下，可从手机底部再次弹出数字键盘。

用户在输入字符时，必须按顺序从左至右依次输入6个数字，并且会给予用户当前所输入字符的位置提示，如图所示：

用户输入完6位数字后，且有网络连接，后端校验，是否符合条件：

• a. 用户输入的验证码与所发送的验证码短信内的验证码一致
• b. 用户所输入的验证码，距离最近一次所发送的验证码时间间隔不超过15分钟。

若不满足a/b两者条件，则6个输入框边框全变红色，并以红色文字提示用户“验证码错误”，如下图所示：

若满足条件，则后台校验用户身份：

• 若为已注册用户，登录成功，获取用户信息，返回至上级页面；
• 若为未注册用户，则自动注册，录入新用户信息（头像、ID、名称）并登录，返回至上级页面。

补充说明：

• 仅可输入数字，每个文本框仅可输入1个数字；
• 断网状态下，无法进行验证码校验，提交失败，底部悬浮提示”请检查网络连接，然后重试“，悬浮3s后逐渐消失；
• 用户使用数字键盘中的清除功能时，将会清除文本框内所有数字。

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

功能描述：向用户提示短信验证码所发送的手机号码，便于用户进行手机号码的二次确认。

信息提示：

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

示例：“短信验证码已发送至+8611111111111”。

规则限制：

其中，符号数字为用户所提交的国家/地区区号与手机号组成（后端提取）。

d. 倒计时提示

提示用户距离下次获取验证码的实时时间，不可点击，示例：

倒计时结束后文字提示变为“再次发送”，可点击，点击”再次发送“，将会再次发送一条新的验证码短信给用户，倒计时结束后：

规则限制：

假设已发送至用户的验证码短信为X条：

• 当X<=10时，向用户每发送一条短信验证码，用户需等待60s，倒计时结束之后，用户点击”再次发送“，则再次向用户发送一条新的验证码短信。
• 当X>10时，向用户每发送一条短信验证码，用户需等待(X-10)*60s+60s ， 倒计时结束之后，用户点击”再次发送“，则再次向用户发送一条新的验证码短信。

向用户发送超过10条短信的8小时之后，重置发送验证码短信的时间限制。

3.2.2.2 功能点2：邮箱登录

1）用户场景

用户在未登录状态下，需要进行邮箱登录时。

2）功能描述

用户输入邮箱地址账号及登录密码进行登录。

断网情况下，可正常跳转、查看此页面。

3）输入/前置条件

必要条件：用户为未登录状态。

点击手机号登录及注册页面中的邮箱登录，跳转至此页面。

4）需求说明

① 关闭

点击，关闭整个登录页面，并返回至之前浏览页面。

② 邮箱地址输入框

需求描述：

文本框无字符时，文本框文字提示：请输入邮箱地址，如下图所示：

点击文本框，底部弹出英文键盘。

文本框有字符时，显示“清空文本框”按钮 ,若文本框无字符时则隐藏此按钮。点击”清空文本框“按钮可清空文本框内容,如下图所示：

规则限制：邮箱地址格式要求：登录名@主机名.域名。

③ 登录密码

需求描述：点击文本框，若手机自带密码输入的安全键盘，则底部弹出安全键盘，若无则弹出英文键盘。

文本框无字符时，文本框文字提示”请输入登录密码“，如下图所示：

用户输入字符时，文字提示消失，如下图所示：

点击“或”可切换文本框内字符不可见/可见状态。

代表文本框内的字符为不可见状态，一个黑点代表一个字符，如下图所示：

代表文本框内的字符为可见状态，如下图所示：

规则限制：文本框默认为不可见状态。

④ 忘记密码

点击“忘记密码？”，底部弹出“浏览器”选择页面。

用户选择浏览器，跳转至“https://www.taptap.com/password/email”。

⑤ 邮箱登录

前端校验：

• 邮箱地址符合邮箱地址格式要求（格式要求：登录名@主机名.域名）；
• 密码文本框不为空。

符合以上要求，登录按钮亮起，即可点击。不符合以上要求，登录按钮变灰，不可点击。

不符合格式要求的登录按钮，不可点击状态：

符合格式要求的登录按钮，可点击状态：

若用户无网络连接，点击登录，底部悬浮文字提示”登录失败请检查网络连接，然后重试”，停留3s后逐渐消失，如下图所示：

若有网络链接，则提交用户所填写的邮箱地址与密码，进行后端验证：

登录成功：

若此邮箱地址存在于后端数据库并且用户所提交密码与之匹配，则登录成功，并获取用户信息，返回上级页面。

登录失败：

• 邮箱地址不存在于后端数据库；
• 邮箱地址存在于后端数据库，但用户所提交的密码与之不匹配。

则登录失败，红色文字提示”用户名或密码输入错误，请重新输入“，如下图所示：

⑥ 手机登录及注册

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

补充说明：断网条件下，可正常显示此页面。

⑦&⑧ 第三方登录

需求描述：

点击⑦微信 icon：

• 若为已授权微信账号，则自动登录，并获取用户身份信息，返回之前页面，登录成功；
• 若为未授权微信账号，则跳转至微信授权登录页面，用户授权登录后，获取新用户身份信息并创建新用户账号（生成随机头像、随机用户名，创建用户ID），返回之前浏览页面，登录成功。

（详情参考微信接口文档）

点击⑧QQ icon

• 点击进入QQ授权登录页面，点击“QQ授权登录”。若为已授权QQ账号，自动获取用户身份信息，返回之前页面，登录成功。
• 若为未授权QQ账号，点击“QQ授权登录“后，获取新用户身份信息并创建新用户账号（生成随机头像、随机用户名，创建用户ID），返回之前浏览页面，登录成功。

（详情参考QQ移动应用接入要求）

补充说明：

• 断网条件下，点击⑦微信登录跳转时，等待20s，底部悬浮框提示”网络连接不可用，请稍后再试“，悬浮5秒后，逐渐消失；
• 断网条件下，点击⑧QQ登录跳转时，等待20s，底部悬浮框提示”网络连接不可用，请稍后再试“，悬浮5秒后，逐渐消失。

登录模块建议：

在第一次且断网状态下进入TapTap进入登录页面时，跳转至TapTap的邮箱登录页面时，布局比较杂乱，如：断网条件下，Facebook，Line等第三方登录布局杂乱。

邮箱登录页面，用户忘记密码时需要使用浏览器进行跳转，建议将此页面以H5的形式放入TapTap APP中，无需使用浏览器跳转。

用户使用第三方登录，在断网条件下，用户等待时间过长才给到提示，甚至有时无提示显示。

• 使用微信登录还好，微信最终会有相关提示，但等待时间还是过长。
• 使用QQ登录，断网条件下，若用户没有登录QQ，则不会有相关提示，只会直接跳转至QQ app的登录页面。

这就需要TapTap自身需完善提示规则：

• 提示所需时间合理缩短；
• 检测为何有时无提示。

PS：希望大佬们能指出我这篇标注的问题所在。

本文由 @想转产品lu 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自unsplash，基于CC0协议