全栈工程师?
嗯.....目前并不是!

產品感獲取:抖音註冊登錄流程組件模仿

本文筆者將對抖音註冊登錄流程的原型和需求文檔進行還原,向大家展現整個註冊登陸全流程,以及其中一些容易被人們忽略的細節問題。

前段時間有幸看到純銀大大微博發出的一份產品經理入門指南,通過學習模仿產品的各個組件來了解並獲得產品感。

對比十款知名產品之後,個人感覺抖音的註冊登錄流程體驗不錯,故選擇抖音的註冊登錄流程作原型及需求文檔的還原。以學習為目的,故僅加入了功能需求模塊,有不足之處還請各位不吝賜教。

一、 功能結構及業務流程圖

偷個懶略了。

二、 功能需求

1. 手機號註冊登錄頁

01 | 抖音註冊登錄流程組件模仿

觸發入口:

用戶在使用抖音個人賬戶相關功能時(關注、消息、我、上傳、點贊、+關注、評論、轉發),觸發跳轉至註冊登錄頁。

需求及交互說明:

  1. 用戶通過輸入手機號,獲取驗證碼並輸入驗證碼,系統通過識別賬號是否已註冊。若已註冊則登錄完成,跳轉至登錄狀態前的頁面,未註冊則進行註冊流程,跳轉至完善個人資料頁面。
  2. 點擊輸入手機號碼框,彈出數字鍵盤,只支持數字輸入。
  3. 自動間隔(我不知道規則是什麼…正確號碼會是344的分佈)。
  4. 號碼框輸入數字后,切換掉其他登錄方式入口,由圖3.1.1變為3.1.2。
  5. 號碼輸入是11位時,判斷號碼輸入正確,獲取驗證碼按鈕高亮可選,其他情況皆灰掉不可選(抖音這個對號碼是否正確判斷不夠呀)。
  6. 發送驗證碼后,獲取驗證碼按鈕不可選,並有60s倒計時,倒計時結束變為“重新發送”。
  7. 若20s(具體時間不清楚)沒有填寫驗證碼,系統判斷用戶接收驗證碼有誤,下方彈出“獲取語音驗證碼”,如圖3.1.3。
  8. 60s未完成登錄,下方彈出“登錄遇到問題?”,如圖3.1.3。
  9. 點擊輸入驗證碼框,彈出數字鍵盤,並不支持其他符號輸入。
  10. 4位數字驗證碼輸入,下方的√高亮可選,進入下一步操作,其他情況下灰色不可選。

異常情況:

  1. 驗證碼錯誤,提示“驗證碼錯誤,請重試”;
  2. 驗證碼過期(應該有一個規則),提示“驗證碼過期,請重試”;
  3. X分鐘內多次發送驗證碼,判斷為發送驗證碼頻繁(不知道具體時間),提示“驗證碼發送太頻繁,請稍後再試”;
  4. “請勾選用戶協議”。

2. 完善資料頁

01 | 抖音註冊登錄流程組件模仿

觸發入口:

未註冊過號碼經過正確的驗證過程后,自動跳轉至完善資料頁面。

需求說明:

  1. 未註冊的用戶在這裡進行個人資料完善,包括頭像、昵稱、出生日期、性別,可跳過,在產品使用過程中補充個人資料。
  2. 頭像,本地相冊上傳及拍攝兩個方式。選擇本地相冊上傳,調用相冊時自動篩掉短視頻(這個在體驗過程中沒有注意到),拍攝可調用系統相機及第三方拍攝產品,拍攝完畢進行圓形頭像裁剪(尺寸)。
  3. 昵稱,彈出常用輸入鍵盤,支持漢字、數字、英文(等等),限制昵稱最長14字符,漢字、數字、英文字母、中英文符號均算1字符(這個規則不清楚…),輸入過長自動取前14個字符。
  4. 出生日期,設置年月日滾輪,最新日期設置為用戶註冊當天年月日,用戶通過滾動選擇日期。
  5. 性別,兩個選項,選擇確定。
  6. 全部設置完成後,下方的“√”高亮可選,跳轉至觸發註冊前的頁面,其他情況灰色不可選。

3. 密碼登錄及找回密碼

01 | 抖音註冊登錄流程組件模仿

觸發入口:

如圖3.1.1,3.1.2,3.1.3,在驗證碼登錄頁,用戶點擊右上方“密碼登錄”按鈕,跳轉至密碼登錄頁。若沒有設置賬號密碼,或忘記密碼點擊找回密碼,則跳轉至找回密碼頁,通過短信驗證碼設置新密碼。

需求說明:

  1. 用戶通過此頁面進行賬號密碼登錄,並可以通過找回密碼來重置新密碼。
  2. 跳轉至密碼登錄頁,光標自動聚焦到輸入手機號碼框,並彈出數字鍵盤。
  3. 該欄只允許輸入數字,且號碼自動間隔(344)。
  4. 輸入賬號密碼,彈出英文鍵盤(我是小米手機,自動彈出了小米安全鍵盤,英文+數字)。
  5. 輸入密碼,下方“√”高亮可選,登錄完成跳轉至觸發登錄前的頁面。(這裡抖音沒有對手機號碼及密碼格式進行檢測,甚至10位數字+任意一位密碼都可以觸發下一步)。
  6. 輸入11位手機號碼(數字),“找回密碼”按鈕高亮可選,其他情況不可選。
  7. 跳轉至找回密碼頁,光標自動聚焦到輸入驗證碼欄並彈出數字鍵盤,系統自動發送驗證碼,發送驗證碼欄開始60s倒計時並不可選,倒計時結束顯示“重新發送”,可選。
  8. 倒計時20s左右(時間不確定),下方彈出“獲取語音驗證碼”。
  9. 設置新密碼,8-20位,至少包含**/**/**2種組合,數字、字母、中英文字符均算一位,超過20位無法輸入,並提示“密碼8-20位,至少包含**/**/**2種組合”。
  10. 設置完成,下方“右箭頭”高亮可選,無誤則“找回密碼”操作完成,跳轉至觸發登錄操作前的頁面。

異常情況:

  1. 手機號格式錯誤,提示“手機號碼格式錯誤”,(兩次不一樣,還有一次“賬號或密碼錯誤”)。
  2. 號碼或密碼錯誤,提示“賬號或密碼錯誤”,並在彈出框里給出選項“找回密碼”。
  3. 該賬戶未設置登錄密碼,提示“賬號或密碼錯誤”,同上。
  4. 驗證碼錯誤,提示“驗證碼錯誤,請重試”。
  5. 驗證碼過期(應該有一個規則),提示“驗證碼過期,請重試”。
  6. X分鐘內多次發送驗證碼,判斷為發送驗證碼頻繁(不知道具體時間),提示“驗證碼發送太頻繁,請稍後再試”。
  7. 密碼設置不足8位,下方“右箭頭”灰色無法選中。
  8. 密碼為純數字/字母/符號,提示“密碼8-20位,至少包含**/**/**2種組合”。

4. 第三方登錄及手機號碼綁定

01 | 抖音註冊登錄流程組件模仿

觸發入口:

如圖3.1.1,用戶在註冊登錄頁點擊下方“使用其他方式登錄”,可選擇頭條、QQ、微信、微博四種第三方賬號進行登錄,后跳轉至第三方平台進行賬號授權。已登錄賬號直接進入授權階段,未登錄需要先登錄賬號,授權完畢跳轉至抖音登錄頁面進行手機號綁定操作。(QQ微信因為眾所周知的原因被限制使用登錄抖音,抖音會提示。)

需求說明:

  1. 用戶通過第三方登錄獲取第三方賬戶的個人資料,建立新賬戶,可選擇綁定手機號來確保用戶賬號的唯一性。
  2. 用戶選擇第三方平台登錄后,喚醒該平台並進入授權操作,授權完成後獲得第三方的個人資料,包括昵稱、頭像等,並建立新賬戶。
  3. 第三方授權完成後跳轉至手機綁定頁,可跳過,光標自動聚焦在輸入手機號碼框內,並自動彈出數字鍵盤,只允許輸入數字。
  4. 號碼自動間隔(正確號碼344分隔)。
  5. 輸入11位數字,下方“右箭頭”高亮可選,點擊進入下一步操作,其他情況灰色不可選。
  6. 跳轉至驗證碼頁后,系統自動發送驗證碼,自動彈出數字鍵盤,只允許輸入數字。
  7. 發送驗證碼后,右方按鈕進行60s倒計時,灰色不可選,倒計時結束顯示“重新發送”,可選進行重新發送操作。
  8. 設置密碼,彈出英文鍵盤,8-20位,至少包含**/**/**2種組合,數字、字母、中英文字符均算一位,超過20位無法輸入,並提示“密碼8-20位,至少包含**/**/**2種組合”。
  9. 設置完成,下方“右箭頭”高亮可選,點擊完成綁定手機號操作,跳轉至進入登錄頁面前的頁面。

異常情況:

  1. 驗證碼錯誤,提示“驗證碼錯誤,請重試”。
  2. 驗證碼過期(應該有一個規則),提示“驗證碼過期,請重試”。
  3. X分鐘內多次發送驗證碼,判斷為發送驗證碼頻繁(不知道具體時間),提示“驗證碼發送太頻繁,請稍後再試”。
  4. 密碼設置不足8位,下方“右箭頭”灰色無法選中。
  5. 密碼為純數字/字母/符號,提示“密碼8-20位,至少包含**/**/**2種組合”。
  6. 若手機號碼已綁定其他賬戶,提示“綁定失敗”,並給出解決方案“換個手機號試試”和“查看詳情”。

三、 其他

在還原流程的過程中,還有其他一些點需要做一下記錄:

  • 手機號碼格式驗證不足:除了在密碼登錄進行下一步操作時收到了提示,其餘情況均無提示,11位數字即可進入下一步操作,是否是抖音團隊考慮到了用戶較少輸入錯號碼,且在沒有收到驗證碼的情況下會迅速發現這些問題;
  • 密碼登錄功能:除了第三方登錄在綁定手機號時會強行設置登錄密碼,在其他註冊環節,使用過程中,包括第三方登錄跳過手機號綁定,都不會觸發提示設置登錄密碼。設置登錄密碼在“我-更多-設置-賬號與安全-抖音密碼”,四級列表中,用戶基本不會發現。在有了語音驗證碼應對收不到短信驗證碼的情況下,密碼登錄功能顯得雞肋;
  • 第三方登錄:這應該是一個用戶體驗和賬戶信息之間的抉擇,若沒有綁定手機號,會出現過多通過第三方登錄形成的賬戶,拖累系統並影響信息收集。

抖音在註冊登錄流程中諸多細節做得太好了,第一次體驗,獲益良多。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《產品感獲取:抖音註冊登錄流程組件模仿》
文章链接:https://www.pmbear.com/archives/9327
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们