之前看了很多人在聊產(chǎn)品的用戶(hù)注冊(cè)登錄模塊敢靡，要么講解的太粗糙，要么不全面夜惭，最近閑來(lái)無(wú)事姻灶，系統(tǒng)性的研究下新產(chǎn)品的注冊(cè)登錄設(shè)計(jì)。文中以下的內(nèi)容講解主要為新產(chǎn)品的注冊(cè)登錄诈茧，并且側(cè)重于PC端的產(chǎn)品設(shè)計(jì)产喉。不說(shuō)廢話了，直接說(shuō)正經(jīng)事敢会。
一曾沈、用戶(hù)注冊(cè)
下面是用戶(hù)注冊(cè)的業(yè)務(wù)流程圖，注冊(cè)的方式分為手機(jī)號(hào)鸥昏、郵箱號(hào)兩種方式注冊(cè)塞俱。
注冊(cè)的流程其實(shí)很簡(jiǎn)單，用戶(hù)只需要填寫(xiě)手機(jī)號(hào)或郵箱號(hào)吏垮、設(shè)置密碼并填寫(xiě)驗(yàn)證碼即可完成注冊(cè)任務(wù)敛腌，在此免去那些繁瑣的信息填寫(xiě)項(xiàng)。很多人試圖通過(guò)在注冊(cè)流程中采集用戶(hù)信息惫皱，殊不知大部分的用戶(hù)是沒(méi)有耐心一個(gè)個(gè)完善信息的像樊，只會(huì)徒增注冊(cè)門(mén)檻，讓用戶(hù)望而卻步旅敷。
注冊(cè)信息填完完畢后生棍，點(diǎn)擊注冊(cè)按鈕完成注冊(cè)，如果以上3個(gè)信息中有一項(xiàng)沒(méi)有填寫(xiě)或填寫(xiě)錯(cuò)誤均不能完成注冊(cè)媳谁，系統(tǒng)會(huì)進(jìn)行錯(cuò)誤提示涂滴，這個(gè)時(shí)候用戶(hù)辛苦了半天，卻發(fā)現(xiàn)不能注冊(cè)晴音，心中難免有些許惱火柔纵，甚至?xí)斐蓾撛谟脩?hù)的流失直接放棄了注冊(cè)。所以我們是不是該思考下锤躁，用戶(hù)輸入的每一個(gè)信息盡量提前做出判斷搁料，如果用戶(hù)輸入錯(cuò)誤第一時(shí)間告知用戶(hù)，并告訴用戶(hù)錯(cuò)在哪里系羞，并在產(chǎn)品設(shè)計(jì)細(xì)節(jié)上避免用戶(hù)犯錯(cuò)郭计。我這里的思路是當(dāng)用戶(hù)輸入完一項(xiàng)信息后，輸入焦點(diǎn)切換至下一行時(shí)椒振，此時(shí)系統(tǒng)對(duì)上一行的輸入信息作出判斷檢測(cè)昭伸，并反饋用戶(hù)錯(cuò)誤結(jié)果。
對(duì)于注冊(cè)信息的填寫(xiě)系統(tǒng)如何進(jìn)行判斷澎迎，每一項(xiàng)信息判斷后庐杨，系統(tǒng)給出的反饋提示內(nèi)容是什么选调？下面的架構(gòu)圖詳細(xì)進(jìn)行了說(shuō)明。
手機(jī)號(hào)碼填寫(xiě)錯(cuò)誤的情況及相關(guān)提示語(yǔ)
號(hào)碼為空灵份，提示：請(qǐng)輸入手機(jī)號(hào)
號(hào)碼已被注冊(cè)仁堪，提示：賬號(hào)已被注冊(cè)
號(hào)碼錯(cuò)誤，提示：請(qǐng)輸入正確的手機(jī)號(hào)碼
郵箱號(hào)填寫(xiě)錯(cuò)誤的情況及相關(guān)提示語(yǔ)
賬號(hào)為空各吨，提示：請(qǐng)輸入郵箱賬號(hào)
賬號(hào)已被注冊(cè)，提示：賬號(hào)已被注冊(cè)
郵箱號(hào)錯(cuò)誤袁铐，提示：請(qǐng)輸入正確的郵箱賬號(hào)揭蜒，如example@163.com
密碼填寫(xiě)錯(cuò)誤的情況及相關(guān)提示語(yǔ)
密碼為空，提示：請(qǐng)?jiān)O(shè)置密碼
密碼錯(cuò)誤剔桨，提示：請(qǐng)輸入6~16位的字母或數(shù)字
短信驗(yàn)證碼錯(cuò)誤的情況及相關(guān)提示語(yǔ)
驗(yàn)證碼為空屉更，提示：請(qǐng)?zhí)顚?xiě)驗(yàn)證碼
驗(yàn)證碼錯(cuò)誤，提示：請(qǐng)輸入正確的驗(yàn)證碼
驗(yàn)證碼過(guò)期洒缀，提示：驗(yàn)證碼已過(guò)期瑰谜，請(qǐng)重新獲取
圖片驗(yàn)證碼錯(cuò)誤的情況及相關(guān)提示語(yǔ)
驗(yàn)證碼為空，提示：請(qǐng)?zhí)顚?xiě)驗(yàn)證碼
驗(yàn)證碼錯(cuò)誤树绩，提示：請(qǐng)輸入爭(zhēng)取的驗(yàn)證碼
驗(yàn)證碼過(guò)期萨脑，提示：驗(yàn)證碼已過(guò)期，請(qǐng)刷新重新獲取
補(bǔ)充說(shuō)明：圖片碼和短信碼的有效期為5分鐘饺饭，短信碼的獲取間隔為1分鐘渤早，圖片碼支持隨時(shí)刷新切換；短信碼每個(gè)賬號(hào)每天最多獲取5次瘫俊，圖片碼不做限制（根據(jù)系統(tǒng)性能及相關(guān)費(fèi)用預(yù)算靈活調(diào)整鹊杖，使用第三方短信碼下發(fā)畢竟是收費(fèi)的）
設(shè)計(jì)思路總結(jié)：新產(chǎn)品的注冊(cè)流程應(yīng)盡可能的簡(jiǎn)單直接，去掉任何影響用戶(hù)注冊(cè)的干擾信息扛芽，防止用戶(hù)跳出流程骂蓖，在這個(gè)頁(yè)面中只有一個(gè)任務(wù)，就是引導(dǎo)幫助用戶(hù)快速完成注冊(cè)川尖，所以界面中只需要讓用戶(hù)輸入賬號(hào)登下、密碼即可，密碼也無(wú)需重復(fù)確認(rèn)輸入叮喳。當(dāng)用戶(hù)每輸入結(jié)束一個(gè)信息時(shí)庐船，如果出現(xiàn)問(wèn)題，在第一時(shí)間告訴用戶(hù)錯(cuò)誤結(jié)果嘲更，不提倡所有的信息判斷都通過(guò)注冊(cè)按鈕來(lái)觸發(fā)筐钟，這樣會(huì)挑戰(zhàn)用戶(hù)的耐心。
二赋朦、用戶(hù)登錄
在登錄模塊的設(shè)計(jì)上篓冲，考慮到各種用戶(hù)場(chǎng)景環(huán)境李破，盡可能的提供多種登錄方式方便用戶(hù)隨時(shí)登錄。PC端的登錄設(shè)計(jì)了賬號(hào)登錄壹将、短信碼登錄嗤攻、二維碼登錄和第三方登錄四種登錄方式。二維碼登錄需要配合手機(jī)端使用诽俯，實(shí)現(xiàn)多終端的互動(dòng)妇菱。因此在手機(jī)端中是沒(méi)有二維碼登錄的。同樣登錄過(guò)程中用戶(hù)輸入的信息暴区，系統(tǒng)都會(huì)在點(diǎn)擊登錄按鈕前做出判斷并反饋提示闯团。下圖為PC端的登錄流程圖：
下面我們?cè)趤?lái)仔細(xì)看下登錄界面中的產(chǎn)品信息，以及相應(yīng)的信息規(guī)則仙粱。
賬號(hào)登錄方式相關(guān)錯(cuò)誤信息的提示語(yǔ)
賬號(hào)為空房交，提示：請(qǐng)輸入賬號(hào)
賬號(hào)錯(cuò)誤，提示：賬號(hào)不存在伐割，請(qǐng)重新輸入
密碼為空候味，提示：請(qǐng)輸入密碼
密碼錯(cuò)誤，提示：密碼與賬戶(hù)名不匹配隔心，請(qǐng)檢查密碼
短信碼登錄相關(guān)錯(cuò)誤信息的提示語(yǔ)
號(hào)碼為空白群，提示：請(qǐng)輸入手機(jī)號(hào)碼
號(hào)碼錯(cuò)誤，提示：請(qǐng)輸入正確的11位手機(jī)號(hào)碼
短信碼為空硬霍，提示：請(qǐng)?zhí)顚?xiě)驗(yàn)證碼
短信碼錯(cuò)誤川抡，提示：請(qǐng)輸入正確的驗(yàn)證碼
短信碼過(guò)期，提示：驗(yàn)證碼已過(guò)期须尚，請(qǐng)重新獲取
二維碼登錄相關(guān)信息提示（PC端）
手機(jī)端未登錄的情況下崖堤，利用手機(jī)掃碼，手機(jī)端跳轉(zhuǎn)至登錄界面耐床，PC端提示：登錄失敗
手機(jī)端已登錄密幔，掃碼失敗的情況下，PC端提示：登錄失敗撩轰，刷新二維碼胯甩；手機(jī)端提示：掃碼失敗，重新掃描
手機(jī)端登錄已登錄堪嫂，掃碼成功偎箫，PC端提示：登錄成功，手機(jī)端確認(rèn)登錄皆串，登錄成功
第三方登錄的相關(guān)信息呈現(xiàn)淹办，首先系統(tǒng)檢測(cè)本地是否已登錄賬號(hào)：
本地未登錄，輸入賬號(hào)密碼并授權(quán)進(jìn)行登錄
本地已登錄恶复，直接授權(quán)登錄
設(shè)計(jì)思路總結(jié)：登錄流程的設(shè)計(jì)中應(yīng)充分考慮到用戶(hù)的各類(lèi)場(chǎng)景與環(huán)境怜森，給用戶(hù)提供更多的登錄方式速挑，怎么方便怎么來(lái)。同時(shí)還要綜合考慮賬號(hào)的安全因素副硅，比如這里當(dāng)用戶(hù)連續(xù)3次輸錯(cuò)密碼時(shí)候姥宝，增加驗(yàn)證碼流程。
