產(chǎn)品感獲?。憾兑糇?cè)登錄流程組件模仿
本文筆者將對(duì)抖音注冊(cè)登錄流程的原型和需求文檔進(jìn)行還原,向大家展現(xiàn)整個(gè)注冊(cè)登陸全流程,以及其中一些容易被人們忽略的細(xì)節(jié)問題。
前段時(shí)間有幸看到純銀大大微博發(fā)出的一份產(chǎn)品經(jīng)理入門指南,通過學(xué)習(xí)模仿產(chǎn)品的各個(gè)組件來了解并獲得產(chǎn)品感。
對(duì)比十款知名產(chǎn)品之后,個(gè)人感覺抖音的注冊(cè)登錄流程體驗(yàn)不錯(cuò),故選擇抖音的注冊(cè)登錄流程作原型及需求文檔的還原。以學(xué)習(xí)為目的,故僅加入了功能需求模塊,有不足之處還請(qǐng)各位不吝賜教。
一、 功能結(jié)構(gòu)及業(yè)務(wù)流程圖
偷個(gè)懶略了。
二、 功能需求
1. 手機(jī)號(hào)注冊(cè)登錄頁
觸發(fā)入口:
用戶在使用抖音個(gè)人賬戶相關(guān)功能時(shí)(關(guān)注、消息、我、上傳、點(diǎn)贊、+關(guān)注、評(píng)論、轉(zhuǎn)發(fā)),觸發(fā)跳轉(zhuǎn)至注冊(cè)登錄頁。
需求及交互說明:
- 用戶通過輸入手機(jī)號(hào),獲取驗(yàn)證碼并輸入驗(yàn)證碼,系統(tǒng)通過識(shí)別賬號(hào)是否已注冊(cè)。若已注冊(cè)則登錄完成,跳轉(zhuǎn)至登錄狀態(tài)前的頁面,未注冊(cè)則進(jìn)行注冊(cè)流程,跳轉(zhuǎn)至完善個(gè)人資料頁面。
- 點(diǎn)擊輸入手機(jī)號(hào)碼框,彈出數(shù)字鍵盤,只支持?jǐn)?shù)字輸入。
- 自動(dòng)間隔(我不知道規(guī)則是什么…正確號(hào)碼會(huì)是344的分布)。
- 號(hào)碼框輸入數(shù)字后,切換掉其他登錄方式入口,由圖3.1.1變?yōu)?.1.2。
- 號(hào)碼輸入是11位時(shí),判斷號(hào)碼輸入正確,獲取驗(yàn)證碼按鈕高亮可選,其他情況皆灰掉不可選(抖音這個(gè)對(duì)號(hào)碼是否正確判斷不夠呀)。
- 發(fā)送驗(yàn)證碼后,獲取驗(yàn)證碼按鈕不可選,并有60s倒計(jì)時(shí),倒計(jì)時(shí)結(jié)束變?yōu)椤爸匦掳l(fā)送”。
- 若20s(具體時(shí)間不清楚)沒有填寫驗(yàn)證碼,系統(tǒng)判斷用戶接收驗(yàn)證碼有誤,下方彈出“獲取語音驗(yàn)證碼”,如圖3.1.3。
- 60s未完成登錄,下方彈出“登錄遇到問題?”,如圖3.1.3。
- 點(diǎn)擊輸入驗(yàn)證碼框,彈出數(shù)字鍵盤,并不支持其他符號(hào)輸入。
- 4位數(shù)字驗(yàn)證碼輸入,下方的√高亮可選,進(jìn)入下一步操作,其他情況下灰色不可選。
異常情況:
- 驗(yàn)證碼錯(cuò)誤,提示“驗(yàn)證碼錯(cuò)誤,請(qǐng)重試”;
- 驗(yàn)證碼過期(應(yīng)該有一個(gè)規(guī)則),提示“驗(yàn)證碼過期,請(qǐng)重試”;
- X分鐘內(nèi)多次發(fā)送驗(yàn)證碼,判斷為發(fā)送驗(yàn)證碼頻繁(不知道具體時(shí)間),提示“驗(yàn)證碼發(fā)送太頻繁,請(qǐng)稍后再試”;
- “請(qǐng)勾選用戶協(xié)議”。
2. 完善資料頁
觸發(fā)入口:
未注冊(cè)過號(hào)碼經(jīng)過正確的驗(yàn)證過程后,自動(dòng)跳轉(zhuǎn)至完善資料頁面。
需求說明:
- 未注冊(cè)的用戶在這里進(jìn)行個(gè)人資料完善,包括頭像、昵稱、出生日期、性別,可跳過,在產(chǎn)品使用過程中補(bǔ)充個(gè)人資料。
- 頭像,本地相冊(cè)上傳及拍攝兩個(gè)方式。選擇本地相冊(cè)上傳,調(diào)用相冊(cè)時(shí)自動(dòng)篩掉短視頻(這個(gè)在體驗(yàn)過程中沒有注意到),拍攝可調(diào)用系統(tǒng)相機(jī)及第三方拍攝產(chǎn)品,拍攝完畢進(jìn)行圓形頭像裁剪(尺寸)。
- 昵稱,彈出常用輸入鍵盤,支持漢字、數(shù)字、英文(等等),限制昵稱最長(zhǎng)14字符,漢字、數(shù)字、英文字母、中英文符號(hào)均算1字符(這個(gè)規(guī)則不清楚…),輸入過長(zhǎng)自動(dòng)取前14個(gè)字符。
- 出生日期,設(shè)置年月日滾輪,最新日期設(shè)置為用戶注冊(cè)當(dāng)天年月日,用戶通過滾動(dòng)選擇日期。
- 性別,兩個(gè)選項(xiàng),選擇確定。
- 全部設(shè)置完成后,下方的“√”高亮可選,跳轉(zhuǎn)至觸發(fā)注冊(cè)前的頁面,其他情況灰色不可選。
3. 密碼登錄及找回密碼
觸發(fā)入口:
如圖3.1.1,3.1.2,3.1.3,在驗(yàn)證碼登錄頁,用戶點(diǎn)擊右上方“密碼登錄”按鈕,跳轉(zhuǎn)至密碼登錄頁。若沒有設(shè)置賬號(hào)密碼,或忘記密碼點(diǎn)擊找回密碼,則跳轉(zhuǎn)至找回密碼頁,通過短信驗(yàn)證碼設(shè)置新密碼。
需求說明:
- 用戶通過此頁面進(jìn)行賬號(hào)密碼登錄,并可以通過找回密碼來重置新密碼。
- 跳轉(zhuǎn)至密碼登錄頁,光標(biāo)自動(dòng)聚焦到輸入手機(jī)號(hào)碼框,并彈出數(shù)字鍵盤。
- 該欄只允許輸入數(shù)字,且號(hào)碼自動(dòng)間隔(344)。
- 輸入賬號(hào)密碼,彈出英文鍵盤(我是小米手機(jī),自動(dòng)彈出了小米安全鍵盤,英文+數(shù)字)。
- 輸入密碼,下方“√”高亮可選,登錄完成跳轉(zhuǎn)至觸發(fā)登錄前的頁面。(這里抖音沒有對(duì)手機(jī)號(hào)碼及密碼格式進(jìn)行檢測(cè),甚至10位數(shù)字+任意一位密碼都可以觸發(fā)下一步)。
- 輸入11位手機(jī)號(hào)碼(數(shù)字),“找回密碼”按鈕高亮可選,其他情況不可選。
- 跳轉(zhuǎn)至找回密碼頁,光標(biāo)自動(dòng)聚焦到輸入驗(yàn)證碼欄并彈出數(shù)字鍵盤,系統(tǒng)自動(dòng)發(fā)送驗(yàn)證碼,發(fā)送驗(yàn)證碼欄開始60s倒計(jì)時(shí)并不可選,倒計(jì)時(shí)結(jié)束顯示“重新發(fā)送”,可選。
- 倒計(jì)時(shí)20s左右(時(shí)間不確定),下方彈出“獲取語音驗(yàn)證碼”。
- 設(shè)置新密碼,8-20位,至少包含**/**/**2種組合,數(shù)字、字母、中英文字符均算一位,超過20位無法輸入,并提示“密碼8-20位,至少包含**/**/**2種組合”。
- 設(shè)置完成,下方“右箭頭”高亮可選,無誤則“找回密碼”操作完成,跳轉(zhuǎn)至觸發(fā)登錄操作前的頁面。
異常情況:
- 手機(jī)號(hào)格式錯(cuò)誤,提示“手機(jī)號(hào)碼格式錯(cuò)誤”,(兩次不一樣,還有一次“賬號(hào)或密碼錯(cuò)誤”)。
- 號(hào)碼或密碼錯(cuò)誤,提示“賬號(hào)或密碼錯(cuò)誤”,并在彈出框里給出選項(xiàng)“找回密碼”。
- 該賬戶未設(shè)置登錄密碼,提示“賬號(hào)或密碼錯(cuò)誤”,同上。
- 驗(yàn)證碼錯(cuò)誤,提示“驗(yàn)證碼錯(cuò)誤,請(qǐng)重試”。
- 驗(yàn)證碼過期(應(yīng)該有一個(gè)規(guī)則),提示“驗(yàn)證碼過期,請(qǐng)重試”。
- X分鐘內(nèi)多次發(fā)送驗(yàn)證碼,判斷為發(fā)送驗(yàn)證碼頻繁(不知道具體時(shí)間),提示“驗(yàn)證碼發(fā)送太頻繁,請(qǐng)稍后再試”。
- 密碼設(shè)置不足8位,下方“右箭頭”灰色無法選中。
- 密碼為純數(shù)字/字母/符號(hào),提示“密碼8-20位,至少包含**/**/**2種組合”。
4. 第三方登錄及手機(jī)號(hào)碼綁定
觸發(fā)入口:
如圖3.1.1,用戶在注冊(cè)登錄頁點(diǎn)擊下方“使用其他方式登錄”,可選擇頭條、QQ、微信、微博四種第三方賬號(hào)進(jìn)行登錄,后跳轉(zhuǎn)至第三方平臺(tái)進(jìn)行賬號(hào)授權(quán)。已登錄賬號(hào)直接進(jìn)入授權(quán)階段,未登錄需要先登錄賬號(hào),授權(quán)完畢跳轉(zhuǎn)至抖音登錄頁面進(jìn)行手機(jī)號(hào)綁定操作。(QQ微信因?yàn)楸娝苤脑虮幌拗剖褂玫卿浂兑?,抖音?huì)提示。)
需求說明:
- 用戶通過第三方登錄獲取第三方賬戶的個(gè)人資料,建立新賬戶,可選擇綁定手機(jī)號(hào)來確保用戶賬號(hào)的唯一性。
- 用戶選擇第三方平臺(tái)登錄后,喚醒該平臺(tái)并進(jìn)入授權(quán)操作,授權(quán)完成后獲得第三方的個(gè)人資料,包括昵稱、頭像等,并建立新賬戶。
- 第三方授權(quán)完成后跳轉(zhuǎn)至手機(jī)綁定頁,可跳過,光標(biāo)自動(dòng)聚焦在輸入手機(jī)號(hào)碼框內(nèi),并自動(dòng)彈出數(shù)字鍵盤,只允許輸入數(shù)字。
- 號(hào)碼自動(dòng)間隔(正確號(hào)碼344分隔)。
- 輸入11位數(shù)字,下方“右箭頭”高亮可選,點(diǎn)擊進(jìn)入下一步操作,其他情況灰色不可選。
- 跳轉(zhuǎn)至驗(yàn)證碼頁后,系統(tǒng)自動(dòng)發(fā)送驗(yàn)證碼,自動(dòng)彈出數(shù)字鍵盤,只允許輸入數(shù)字。
- 發(fā)送驗(yàn)證碼后,右方按鈕進(jìn)行60s倒計(jì)時(shí),灰色不可選,倒計(jì)時(shí)結(jié)束顯示“重新發(fā)送”,可選進(jìn)行重新發(fā)送操作。
- 設(shè)置密碼,彈出英文鍵盤,8-20位,至少包含**/**/**2種組合,數(shù)字、字母、中英文字符均算一位,超過20位無法輸入,并提示“密碼8-20位,至少包含**/**/**2種組合”。
- 設(shè)置完成,下方“右箭頭”高亮可選,點(diǎn)擊完成綁定手機(jī)號(hào)操作,跳轉(zhuǎn)至進(jìn)入登錄頁面前的頁面。
異常情況:
- 驗(yàn)證碼錯(cuò)誤,提示“驗(yàn)證碼錯(cuò)誤,請(qǐng)重試”。
- 驗(yàn)證碼過期(應(yīng)該有一個(gè)規(guī)則),提示“驗(yàn)證碼過期,請(qǐng)重試”。
- X分鐘內(nèi)多次發(fā)送驗(yàn)證碼,判斷為發(fā)送驗(yàn)證碼頻繁(不知道具體時(shí)間),提示“驗(yàn)證碼發(fā)送太頻繁,請(qǐng)稍后再試”。
- 密碼設(shè)置不足8位,下方“右箭頭”灰色無法選中。
- 密碼為純數(shù)字/字母/符號(hào),提示“密碼8-20位,至少包含**/**/**2種組合”。
- 若手機(jī)號(hào)碼已綁定其他賬戶,提示“綁定失敗”,并給出解決方案“換個(gè)手機(jī)號(hào)試試”和“查看詳情”。
三、 其他
在還原流程的過程中,還有其他一些點(diǎn)需要做一下記錄:
- 手機(jī)號(hào)碼格式驗(yàn)證不足:除了在密碼登錄進(jìn)行下一步操作時(shí)收到了提示,其余情況均無提示,11位數(shù)字即可進(jìn)入下一步操作,是否是抖音團(tuán)隊(duì)考慮到了用戶較少輸入錯(cuò)號(hào)碼,且在沒有收到驗(yàn)證碼的情況下會(huì)迅速發(fā)現(xiàn)這些問題;
- 密碼登錄功能:除了第三方登錄在綁定手機(jī)號(hào)時(shí)會(huì)強(qiáng)行設(shè)置登錄密碼,在其他注冊(cè)環(huán)節(jié),使用過程中,包括第三方登錄跳過手機(jī)號(hào)綁定,都不會(huì)觸發(fā)提示設(shè)置登錄密碼。設(shè)置登錄密碼在“我-更多-設(shè)置-賬號(hào)與安全-抖音密碼”,四級(jí)列表中,用戶基本不會(huì)發(fā)現(xiàn)。在有了語音驗(yàn)證碼應(yīng)對(duì)收不到短信驗(yàn)證碼的情況下,密碼登錄功能顯得雞肋;
- 第三方登錄:這應(yīng)該是一個(gè)用戶體驗(yàn)和賬戶信息之間的抉擇,若沒有綁定手機(jī)號(hào),會(huì)出現(xiàn)過多通過第三方登錄形成的賬戶,拖累系統(tǒng)并影響信息收集。
抖音在注冊(cè)登錄流程中諸多細(xì)節(jié)做得太好了,第一次體驗(yàn),獲益良多。
本文由@安 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自網(wǎng)絡(luò)。
為啥輸入框感覺肥了一圈