作者對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后逐漸消失，如下圖所示：

若有網絡鏈接，則提交用戶所填寫的郵箱地址與密碼，進行后端驗證：

登錄成功：

若此郵箱地址存在于后端數據庫并且用戶所提交密碼與之匹配，則登錄成功，并獲取用戶信息，返回上級頁面。

登錄失?。?/p>

• 郵箱地址不存在于后端數據庫；
• 郵箱地址存在于后端數據庫，但用戶所提交的密碼與之不匹配。

則登錄失敗，紅色文字提示”用戶名或密碼輸入錯誤，請重新輸入“，如下圖所示：

⑥ 手機登錄及注冊

點擊跳轉至”手機登錄與注冊“頁面。

補充說明：斷網條件下，可正常顯示此頁面。

⑦&⑧ 第三方登錄

需求描述：

點擊⑦微信 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協議