很多人認(rèn)為注冊(cè)登錄是一件很簡單的事情，只需要你輸入信息，然后確認(rèn)就可以了。卻不知道其實(shí)這個(gè)操作，并有你想的那么簡單。本文主要講解為新產(chǎn)品的注冊(cè)登錄，并且側(cè)重于PC端的產(chǎn)品設(shè)計(jì)。

之前看了很多人在聊產(chǎn)品的用戶注冊(cè)登錄模塊，要么講解的太粗糙，要么不全面，最近閑來無事，系統(tǒng)性的研究下新產(chǎn)品的注冊(cè)登錄設(shè)計(jì)。

文中以下的內(nèi)容講解主要為新產(chǎn)品的注冊(cè)登錄，并且側(cè)重于PC端的產(chǎn)品設(shè)計(jì)。

一、用戶注冊(cè)

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

注冊(cè)的流程其實(shí)很簡單，用戶只需要填寫手機(jī)號(hào)或郵箱號(hào)、設(shè)置密碼并填寫驗(yàn)證碼即可完成注冊(cè)任務(wù)，在此免去那些繁瑣的信息填寫項(xiàng)。

很多人試圖通過在注冊(cè)流程中采集用戶信息，殊不知大部分的用戶是沒有耐心一個(gè)個(gè)完善信息的，只會(huì)徒增注冊(cè)門檻，讓用戶望而卻步。

注冊(cè)信息填完完畢后，點(diǎn)擊注冊(cè)按鈕完成注冊(cè)。如果以上3個(gè)信息中有一項(xiàng)沒有填寫或填寫錯(cuò)誤均不能完成注冊(cè)，系統(tǒng)會(huì)進(jìn)行錯(cuò)誤提示，這個(gè)時(shí)候用戶辛苦了半天，卻發(fā)現(xiàn)不能注冊(cè)，心中難免有些許惱火，甚至?xí)斐蓾撛谟脩舻牧魇е苯臃艞壛俗?cè)。

所以我們是不是該思考下，用戶輸入的每一個(gè)信息盡量提前做出判斷，如果用戶輸入錯(cuò)誤第一時(shí)間告知用戶，并告訴用戶錯(cuò)在哪里，并在產(chǎn)品設(shè)計(jì)細(xì)節(jié)上避免用戶犯錯(cuò)。

我這里的思路是當(dāng)用戶輸入完一項(xiàng)信息后，輸入焦點(diǎn)切換至下一行時(shí)，此時(shí)系統(tǒng)對(duì)上一行的輸入信息作出判斷檢測，并反饋用戶錯(cuò)誤結(jié)果。

對(duì)于注冊(cè)信息的填寫系統(tǒng)如何進(jìn)行判斷？每一項(xiàng)信息判斷后，系統(tǒng)給出的反饋提示內(nèi)容是什么？

下面的通過思維導(dǎo)圖進(jìn)行了詳細(xì)了說明：

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

• 號(hào)碼為空，提示：請(qǐng)輸入手機(jī)號(hào)；
• 號(hào)碼已被注冊(cè)，提示：賬號(hào)已被注冊(cè)；
• 號(hào)碼錯(cuò)誤，提示：請(qǐng)輸入正確的手機(jī)號(hào)碼；
• 郵箱號(hào)填寫錯(cuò)誤的情況及相關(guān)提示語；
• 賬號(hào)為空，提示：請(qǐng)輸入郵箱賬號(hào)；
• 賬號(hào)已被注冊(cè)，提示：賬號(hào)已被注冊(cè)；
• 郵箱號(hào)錯(cuò)誤，提示：請(qǐng)輸入正確的郵箱賬號(hào)，如example@163.com。

密碼填寫錯(cuò)誤的情況及相關(guān)提示語

• 密碼為空，提示：請(qǐng)?jiān)O(shè)置密碼；
• 密碼錯(cuò)誤，提示：請(qǐng)輸入6~16位的字母或數(shù)字；
• 短信驗(yàn)證碼錯(cuò)誤的情況及相關(guān)提示語；
• 驗(yàn)證碼為空，提示：請(qǐng)?zhí)顚戲?yàn)證碼；
• 驗(yàn)證碼錯(cuò)誤，提示：請(qǐng)輸入正確的驗(yàn)證碼；
• 驗(yàn)證碼過期，提示：驗(yàn)證碼已過期，請(qǐng)重新獲取。

圖片驗(yàn)證碼錯(cuò)誤的情況及相關(guān)提示語

• 驗(yàn)證碼為空，提示：請(qǐng)?zhí)顚戲?yàn)證碼；
• 驗(yàn)證碼錯(cuò)誤，提示：請(qǐng)輸入爭取的驗(yàn)證碼；
• 驗(yàn)證碼過期，提示：驗(yàn)證碼已過期，請(qǐng)刷新重新獲取。

補(bǔ)充說明：圖片碼和短信碼的有效期為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)盡可能的簡單直接，去掉任何影響用戶注冊(cè)的干擾信息，防止用戶跳出流程，在這個(gè)頁面中只有一個(gè)任務(wù)，就是引導(dǎo)幫助用戶快速完成注冊(cè)。

所以界面中只需要讓用戶輸入賬號(hào)、密碼即可，密碼也無需重復(fù)確認(rèn)輸入。當(dāng)用戶每輸入結(jié)束一個(gè)信息時(shí)，如果出現(xiàn)問題，在第一時(shí)間告訴用戶錯(cuò)誤結(jié)果，不提倡所有的信息判斷都通過注冊(cè)按鈕來觸發(fā)，這樣會(huì)挑戰(zhàn)用戶的耐心。

二、用戶登錄

在登錄模塊的設(shè)計(jì)上，考慮到各種用戶場景環(huán)境，盡可能的提供多種登錄方式方便用戶隨時(shí)登錄。

PC端的登錄設(shè)計(jì)了賬號(hào)登錄、短信碼登錄、二維碼登錄和第三方登錄四種登錄方式；二維碼登錄需要配合手機(jī)端使用，實(shí)現(xiàn)多終端的互動(dòng)。因此在手機(jī)端中是沒有二維碼登錄的，同樣登錄過程中用戶輸入的信息，系統(tǒng)都會(huì)在點(diǎn)擊登錄按鈕前做出判斷并反饋提示。

下圖為PC端的登錄流程圖：

下面我們?cè)趤碜屑?xì)看下登錄界面中的產(chǎn)品信息，以及相應(yīng)的信息規(guī)則。

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

• 賬號(hào)為空，提示：請(qǐng)輸入賬號(hào)；
• 賬號(hào)錯(cuò)誤，提示：賬號(hào)不存在，請(qǐng)重新輸入；
• 密碼為空，提示：請(qǐng)輸入密碼；
• 密碼錯(cuò)誤，提示：密碼與賬戶名不匹配，請(qǐng)檢查密碼。

短信碼登錄相關(guān)錯(cuò)誤信息的提示語

• 號(hào)碼為空，提示：請(qǐng)輸入手機(jī)號(hào)碼；
• 號(hào)碼錯(cuò)誤，提示：請(qǐng)輸入正確的11位手機(jī)號(hào)碼；
• 短信碼為空，提示：請(qǐng)?zhí)顚戲?yàn)證碼；
• 短信碼錯(cuò)誤，提示：請(qǐng)輸入正確的驗(yàn)證碼；
• 短信碼過期，提示：驗(yàn)證碼已過期，請(qǐng)重新獲取。

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

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

設(shè)計(jì)思路總結(jié)

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

本文由 @kevin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels ，基于 CC0 協(xié)議