起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品感獲取：抖音注冊登錄流程組件模仿
本文筆者將對抖音注冊登錄流程的原型和需求文檔進行還原，向大家展現整個注冊登陸全流程，以及其中一些容易被人們忽略的細節問題。
前段時間有幸看到純銀大大微博發出的一份產品經理入門指南，通過學習模仿產品的各個組件來了解并獲得產品感。
對比十款知名產品之后，個人感覺抖音的注冊登錄流程體驗不錯，故選擇抖音的注冊登錄流程作原型及需求文檔的還原。以學習為目的，故僅加入了功能需求模塊，有不足之處還請各位不吝賜教。
一、 功能結構及業務流程圖
偷個懶略了。
二、 功能需求
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位數字即可進入下一步操作，是否是抖音團隊考慮到了用戶較少輸入錯號碼，且在沒有收到驗證碼的情況下會迅速發現這些問題；
- 密碼登錄功能：除了第三方登錄在綁定手機號時會強行設置登錄密碼，在其他注冊環節，使用過程中，包括第三方登錄跳過手機號綁定，都不會觸發提示設置登錄密碼。設置登錄密碼在“我-更多-設置-賬號與安全-抖音密碼”，四級列表中，用戶基本不會發現。在有了語音驗證碼應對收不到短信驗證碼的情況下，密碼登錄功能顯得雞肋；
- 第三方登錄：這應該是一個用戶體驗和賬戶信息之間的抉擇，若沒有綁定手機號，會出現過多通過第三方登錄形成的賬戶，拖累系統并影響信息收集。
抖音在注冊登錄流程中諸多細節做得太好了，第一次體驗，獲益良多。
本文由@安 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自網絡。
評論
為啥輸入框感覺肥了一圈