之前看了很多人在聊產品的用戶注冊登錄模塊，要么講解的太粗糙，要么不全面，最近閑來無事，系統性的研究下新產品的注冊登錄設計。文中以下的內容講解主要為新產品的注冊登錄，并且側重于PC端的產品設計。不說廢話了，直接說正經事。
一、用戶注冊
下面是用戶注冊的業務流程圖，注冊的方式分為手機號、郵箱號兩種方式注冊。
注冊的流程其實很簡單，用戶只需要填寫手機號或郵箱號、設置密碼并填寫驗證碼即可完成注冊任務，在此免去那些繁瑣的信息填寫項。很多人試圖通過在注冊流程中采集用戶信息，殊不知大部分的用戶是沒有耐心一個個完善信息的，只會徒增注冊門檻，讓用戶望而卻步。
注冊信息填完完畢后，點擊注冊按鈕完成注冊，如果以上3個信息中有一項沒有填寫或填寫錯誤均不能完成注冊，系統會進行錯誤提示，這個時候用戶辛苦了半天，卻發現不能注冊，心中難免有些許惱火，甚至會造成潛在用戶的流失直接放棄了注冊。所以我們是不是該思考下，用戶輸入的每一個信息盡量提前做出判斷，如果用戶輸入錯誤第一時間告知用戶，并告訴用戶錯在哪里，并在產品設計細節上避免用戶犯錯。我這里的思路是當用戶輸入完一項信息后，輸入焦點切換至下一行時，此時系統對上一行的輸入信息作出判斷檢測，并反饋用戶錯誤結果。
對于注冊信息的填寫系統如何進行判斷，每一項信息判斷后，系統給出的反饋提示內容是什么？下面的架構圖詳細進行了說明。
手機號碼填寫錯誤的情況及相關提示語
號碼為空，提示：請輸入手機號
號碼已被注冊，提示：賬號已被注冊
號碼錯誤，提示：請輸入正確的手機號碼
郵箱號填寫錯誤的情況及相關提示語
賬號為空，提示：請輸入郵箱賬號
賬號已被注冊，提示：賬號已被注冊
郵箱號錯誤，提示：請輸入正確的郵箱賬號，如example@163.com
密碼填寫錯誤的情況及相關提示語
密碼為空，提示：請設置密碼
密碼錯誤，提示：請輸入6~16位的字母或數字
短信驗證碼錯誤的情況及相關提示語
驗證碼為空，提示：請填寫驗證碼
驗證碼錯誤，提示：請輸入正確的驗證碼
驗證碼過期，提示：驗證碼已過期，請重新獲取
圖片驗證碼錯誤的情況及相關提示語
驗證碼為空，提示：請填寫驗證碼
驗證碼錯誤，提示：請輸入爭取的驗證碼
驗證碼過期，提示：驗證碼已過期，請刷新重新獲取
補充說明：圖片碼和短信碼的有效期為5分鐘，短信碼的獲取間隔為1分鐘，圖片碼支持隨時刷新切換；短信碼每個賬號每天最多獲取5次，圖片碼不做限制（根據系統性能及相關費用預算靈活調整，使用第三方短信碼下發畢竟是收費的）
設計思路總結：新產品的注冊流程應盡可能的簡單直接，去掉任何影響用戶注冊的干擾信息，防止用戶跳出流程，在這個頁面中只有一個任務，就是引導幫助用戶快速完成注冊，所以界面中只需要讓用戶輸入賬號、密碼即可，密碼也無需重復確認輸入。當用戶每輸入結束一個信息時，如果出現問題，在第一時間告訴用戶錯誤結果，不提倡所有的信息判斷都通過注冊按鈕來觸發，這樣會挑戰用戶的耐心。
二、用戶登錄
在登錄模塊的設計上，考慮到各種用戶場景環境，盡可能的提供多種登錄方式方便用戶隨時登錄。PC端的登錄設計了賬號登錄、短信碼登錄、二維碼登錄和第三方登錄四種登錄方式。二維碼登錄需要配合手機端使用，實現多終端的互動。因此在手機端中是沒有二維碼登錄的。同樣登錄過程中用戶輸入的信息，系統都會在點擊登錄按鈕前做出判斷并反饋提示。下圖為PC端的登錄流程圖：
下面我們在來仔細看下登錄界面中的產品信息，以及相應的信息規則。
賬號登錄方式相關錯誤信息的提示語
賬號為空，提示：請輸入賬號
賬號錯誤，提示：賬號不存在，請重新輸入
密碼為空，提示：請輸入密碼
密碼錯誤，提示：密碼與賬戶名不匹配，請檢查密碼
短信碼登錄相關錯誤信息的提示語
號碼為空，提示：請輸入手機號碼
號碼錯誤，提示：請輸入正確的11位手機號碼
短信碼為空，提示：請填寫驗證碼
短信碼錯誤，提示：請輸入正確的驗證碼
短信碼過期，提示：驗證碼已過期，請重新獲取
二維碼登錄相關信息提示（PC端）
手機端未登錄的情況下，利用手機掃碼，手機端跳轉至登錄界面，PC端提示：登錄失敗
手機端已登錄，掃碼失敗的情況下，PC端提示：登錄失敗，刷新二維碼；手機端提示：掃碼失敗，重新掃描
手機端登錄已登錄，掃碼成功，PC端提示：登錄成功，手機端確認登錄，登錄成功
第三方登錄的相關信息呈現，首先系統檢測本地是否已登錄賬號：
本地未登錄，輸入賬號密碼并授權進行登錄
本地已登錄，直接授權登錄
設計思路總結：登錄流程的設計中應充分考慮到用戶的各類場景與環境，給用戶提供更多的登錄方式，怎么方便怎么來。同時還要綜合考慮賬號的安全因素，比如這里當用戶連續3次輸錯密碼時候，增加驗證碼流程。
