之前看了很多人在聊產(chǎn)品的用戶注冊登錄模塊，要么講解的太粗糙，要么不全面，現(xiàn)在作者將自己在系統(tǒng)性的研究下新產(chǎn)品的注冊登錄設(shè)計(jì)，分享給大家。

本文中以下的內(nèi)容講解主要為新產(chǎn)品的注冊登錄，并且側(cè)重于PC端的產(chǎn)品設(shè)計(jì)。不說廢話了，直接說正經(jīng)事。

一、用戶注冊

下面是用戶注冊的業(yè)務(wù)流程圖，注冊的方式分為手機(jī)號、郵箱號兩種方式注冊。

注冊的流程其實(shí)很簡單，用戶只需要填寫手機(jī)號或郵箱號、設(shè)置密碼并填寫驗(yàn)證碼即可完成注冊任務(wù)，在此免去那些繁瑣的信息填寫項(xiàng)。很多人試圖通過在注冊流程中采集用戶信息，殊不知大部分的用戶是沒有耐心一個(gè)個(gè)完善信息的，只會(huì)徒增注冊門檻，讓用戶望而卻步。

注冊信息填完完畢后，點(diǎn)擊注冊按鈕完成注冊，如果以上3個(gè)信息中有一項(xiàng)沒有填寫或填寫錯(cuò)誤均不能完成注冊，系統(tǒng)會(huì)進(jìn)行錯(cuò)誤提示，這個(gè)時(shí)候用戶辛苦了半天，卻發(fā)現(xiàn)不能注冊，心中難免有些許惱火，甚至?xí)斐蓾撛谟脩舻牧魇е苯臃艞壛俗?。所以我們是不是該思考下，用戶輸入的每一個(gè)信息盡量提前做出判斷，如果用戶輸入錯(cuò)誤第一時(shí)間告知用戶，并告訴用戶錯(cuò)在哪里，并在產(chǎn)品設(shè)計(jì)細(xì)節(jié)上避免用戶犯錯(cuò)。我這里的思路是當(dāng)用戶輸入完一項(xiàng)信息后，輸入焦點(diǎn)切換至下一行時(shí)，此時(shí)系統(tǒng)對上一行的輸入信息作出判斷檢測，并反饋用戶錯(cuò)誤結(jié)果。

對于注冊信息的填寫系統(tǒng)如何進(jìn)行判斷，每一項(xiàng)信息判斷后，系統(tǒng)給出的反饋提示內(nèi)容是什么？下面的架構(gòu)圖詳細(xì)進(jìn)行了說明。

手機(jī)號碼填寫錯(cuò)誤的情況及相關(guān)提示語

• 號碼為空，提示：請輸入手機(jī)號
• 號碼已被注冊，提示：賬號已被注冊
• 號碼錯(cuò)誤，提示：請輸入正確的手機(jī)號碼
• 郵箱號填寫錯(cuò)誤的情況及相關(guān)提示語
• 賬號為空，提示：請輸入郵箱賬號
• 賬號已被注冊，提示：賬號已被注冊
• 郵箱號錯(cuò)誤，提示：請輸入正確的郵箱賬號，如example@163.com
• 密碼填寫錯(cuò)誤的情況及相關(guān)提示語
• 密碼為空，提示：請?jiān)O(shè)置密碼
• 密碼錯(cuò)誤，提示：請輸入6~16位的字母或數(shù)字
• 短信驗(yàn)證碼錯(cuò)誤的情況及相關(guān)提示語
• 驗(yàn)證碼為空，提示：請?zhí)顚戲?yàn)證碼
• 驗(yàn)證碼錯(cuò)誤，提示：請輸入正確的驗(yàn)證碼
• 驗(yàn)證碼過期，提示：驗(yàn)證碼已過期，請重新獲取
• 圖片驗(yàn)證碼錯(cuò)誤的情況及相關(guān)提示語
• 驗(yàn)證碼為空，提示：請?zhí)顚戲?yàn)證碼
• 驗(yàn)證碼錯(cuò)誤，提示：請輸入爭取的驗(yàn)證碼
• 驗(yàn)證碼過期，提示：驗(yàn)證碼已過期，請刷新重新獲取

補(bǔ)充說明：圖片碼和短信碼的有效期為5分鐘，短信碼的獲取間隔為1分鐘，圖片碼支持隨時(shí)刷新切換；短信碼每個(gè)賬號每天最多獲取5次，圖片碼不做限制（根據(jù)系統(tǒng)性能及相關(guān)費(fèi)用預(yù)算靈活調(diào)整，使用第三方短信碼下發(fā)畢竟是收費(fèi)的）
設(shè)計(jì)思路總結(jié)：新產(chǎn)品的注冊流程應(yīng)盡可能的簡單直接，去掉任何影響用戶注冊的干擾信息，防止用戶跳出流程，在這個(gè)頁面中只有一個(gè)任務(wù)，就是引導(dǎo)幫助用戶快速完成注冊，所以界面中只需要讓用戶輸入賬號、密碼即可，密碼也無需重復(fù)確認(rèn)輸入。當(dāng)用戶每輸入結(jié)束一個(gè)信息時(shí)，如果出現(xiàn)問題，在第一時(shí)間告訴用戶錯(cuò)誤結(jié)果，不提倡所有的信息判斷都通過注冊按鈕來觸發(fā)，這樣會(huì)挑戰(zhàn)用戶的耐心。

二、用戶登錄

在登錄模塊的設(shè)計(jì)上，考慮到各種用戶場景環(huán)境，盡可能的提供多種登錄方式方便用戶隨時(shí)登錄。PC端的登錄設(shè)計(jì)了賬號登錄、短信碼登錄、二維碼登錄和第三方登錄四種登錄方式。二維碼登錄需要配合手機(jī)端使用，實(shí)現(xiàn)多終端的互動(dòng)。因此在手機(jī)端中是沒有二維碼登錄的。同樣登錄過程中用戶輸入的信息，系統(tǒng)都會(huì)在點(diǎn)擊登錄按鈕前做出判斷并反饋提示。下圖為PC端的登錄流程圖：

下面我們在來仔細(xì)看下登錄界面中的產(chǎn)品信息，以及相應(yīng)的信息規(guī)則。

賬號登錄方式相關(guān)錯(cuò)誤信息的提示語

• 賬號為空，提示：請輸入賬號
• 賬號錯(cuò)誤，提示：賬號不存在，請重新輸入
• 密碼為空，提示：請輸入密碼
• 密碼錯(cuò)誤，提示：密碼與賬戶名不匹配，請檢查密碼
• 短信碼登錄相關(guān)錯(cuò)誤信息的提示語
• 號碼為空，提示：請輸入手機(jī)號碼
• 號碼錯(cuò)誤，提示：請輸入正確的11位手機(jī)號碼
• 短信碼為空，提示：請?zhí)顚戲?yàn)證碼
• 短信碼錯(cuò)誤，提示：請輸入正確的驗(yàn)證碼
• 短信碼過期，提示：驗(yàn)證碼已過期，請重新獲取

二維碼登錄相關(guān)信息提示（PC端）

• 手機(jī)端未登錄的情況下，利用手機(jī)掃碼，手機(jī)端跳轉(zhuǎn)至登錄界面，PC端提示：登錄失敗
• 手機(jī)端已登錄，掃碼失敗的情況下，PC端提示：登錄失敗，刷新二維碼；手機(jī)端提示：掃碼失敗，重新掃描
• 手機(jī)端登錄已登錄，掃碼成功，PC端提示：登錄成功，手機(jī)端確認(rèn)登錄，登錄成功
• 第三方登錄的相關(guān)信息呈現(xiàn)，首先系統(tǒng)檢測本地是否已登錄賬號：
• 本地未登錄，輸入賬號密碼并授權(quán)進(jìn)行登錄
• 本地已登錄，直接授權(quán)登錄

設(shè)計(jì)思路總結(jié)：登錄流程的設(shè)計(jì)中應(yīng)充分考慮到用戶的各類場景與環(huán)境，給用戶提供更多的登錄方式，怎么方便怎么來。同時(shí)還要綜合考慮賬號的安全因素，比如這里當(dāng)用戶連續(xù)3次輸錯(cuò)密碼時(shí)候，增加驗(yàn)證碼流程。

作者：努力拼搏的80后

來源：簡書

鏈接：http://www.jianshu.com/p/106db5b9f87c

本文由 @努力拼搏的80后 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。