編輯導語：我們下載一個APP、登錄一個網站往往都需要進行註冊或者登錄，由此可見，註冊登錄功能的設計有多麼重要。本文作者對此進行了全面的邏輯分析，看看註冊登錄功能如何設計才能提升用户的體驗感吧。
很多to B端平台，由於用户量不大，對註冊登錄功能也就不太重視。
就我而言，在沒研究註冊登錄功能時，覺得它很簡單，想着幾乎每個應用都有，能有多難。就算運用中有疑問，也只會針對當前問題分析，也因此沒有一個系統的概念和認知。
通過這幾天的深入挖掘，發現做好登錄註冊界面真的沒有想象中簡單。本文主要以pc端界面為案例分析註冊登錄，相比註冊，登錄寫的不那麼全面。
1. 註冊常見的註冊共有2種，分別是手機號註冊和郵箱註冊。邀請碼註冊登錄通常在產品內測階段啓用，用户名註冊幾乎已經銷聲匿跡。
目前大部分APP都採用手機號為主要註冊登錄的方案，主要是因為手機號本身的特性，手機號具有高滲透率、唯一性、真實性（實名認證）、可聯絡性，手機號不僅可以確認用户身份，還可以在必要時聯繫用户、通過通訊錄導入社交關係等。
1.1.1 分步和非分步註冊
註冊界面一般設計表現形式有兩種，分步註冊和非分步註冊。
據facebook數據統計，分步註冊的用户留存率大大高於非分步註冊。當然也不能一概而論，但是分步註冊確實能屏蔽干擾信息，讓用户按照引導順序來操作，減少了用户犯錯率，不過分步步驟最好不要超過3步，否則會讓用户感覺操作複雜。
註冊分類思維導圖如下，測試了花瓣、ui中國、站酷、bilibili、人人都是產品經理、京東、天貓等web網站發現前三種註冊方式都有，關於設置登錄名/暱稱、支付方式的註冊輸入項這裏暫不提及。
1.1.2 註冊流程圖
忽略“下一步顯示”或“觸發顯示”這些交互，“分步”和“非分步-全部顯示”流程相同，全部顯示中沒有驗證安全碼而點擊”獲取短信驗證碼”會報錯，“非分步-全部顯示”同“分步”：
1.1.3 toast提示
toast提示應該簡單明瞭，一般用於錯誤發生時。
比如：輸入信息不完全、輸入錯誤（登錄）、輸入不合法（註冊）、已註冊/未註冊（手機號）等，註冊操作中，最好能實時提醒，不要等到用户輸入所有信息後，再提示錯誤。
提示明細如下：
郵箱註冊屬於pc時代的常見做法，現在多見於國外網站註冊，比方説dribbble、twitter、facebook。如果用户是第一次使用郵箱註冊登錄，那麼會發送郵箱驗證碼或是驗證鏈接到郵箱，然後需要用户到郵箱中進行操作，這樣用户體驗會非常差。
不少企業從pc時代一路走過來，會考慮沒有綁定手機號的老用户，而設置郵箱/密碼登錄方式。
1.2.1 分步和非分步註冊
以上測試的幾款web網站中，只有天貓設置了郵箱註冊方式，還是在手機號被佔用的情況下，通過提示鏈接中進入。同類電商京東並沒提供郵箱註冊方式，只是提示手機號已超過關聯上限數量，請更換。
由此可見，郵箱註冊已被大多數國內企業棄用。
這裏分類分步和非分步是基於忽略激活步驟的前提下，思維導圖如下：
激活郵件常用的有兩種：鏈接和數字驗證碼兩種，如下圖：
1.2.2 註冊流程圖
相比手機號註冊，郵箱註冊多了郵箱激活過程，這讓它的註冊流程相對偏複雜，這裏通過流程圖特意説明下。
1.2.3 toast提示
目前主流的登錄方式是短信登錄和第三方授權登錄，手機端和web端都有其特有登錄方式，手機端中的一鍵快速登錄、手勢密碼、指紋登錄，web端的二維碼登錄。
登錄操作有很多應用會在點擊登錄button時才提示錯誤信息，當然個別諸如安全碼類的提示會第一時間反饋。下表中整理的提示信息登錄方式為密碼登錄、短信登錄。
在測試中，發現有的平台同時為用户提供了兩種登錄界面：獨立界面和彈窗；獨立界面跳轉方式有兩種，本頁打開方式、新開窗口。
- 只提供一種：參考站酷，跳轉登錄註冊界面使用在本頁打開方式，登錄成功後自動跳轉到登錄操作前所瀏覽的界面。
- 提供兩種：視頻播放類平台bilibili，在首頁觸發登錄時新開窗口打開獨立界面，在播放界面觸發登錄時打開彈窗。
註冊登錄過程中涉及的要素通常是五種，分別是手機號、郵箱、安全碼、短信驗證碼、密碼，這些要素都有其作用和優化方案。
掌握並運用得當，會大大的節省用户操作時間，提高賬户的安全性和用户體驗。
3.2.1 輸入框提示
輸入框提示語是必不可少的，措辭要簡潔，現在普遍做法是輸入框中提示，獲取焦點時提示消失，如果輸入項少，這種做法是可取的。
當然最好是在輸入的過程中保留提示，如下圖3種方式。後兩種比較炫，每行輸入後，提示會上移顯示，其開發難度也會稍大。
簡單標註補充説明：大多數用户是產品小白，*表示必填項只有高段位用户才理解。
因此，在設計表單界面過程中，選填項、必填項最好用文字標註。簡短的操作説明也建議使用文字表述，圖標隱藏説明文字雖然視覺效果好，但一定程度消耗了用户體驗。
一方面，圖標類提示得點擊圖標後才顯示，增加了用户操作步驟；另一方面，圖標也容易被用户忽略。
3.2.2 短信驗證碼
系統下發的短信一般會設定有效期，有效期設定在5-10分鐘為宜，短信碼獲取間隔為1分鐘，短信碼若有必要，可設定一天下發次數驗證，或者在有效期內用户多次點擊時下發相同驗證碼。
這樣不僅可以節省成本（下發短信需要付費），也不會因為同時受到多條短信而分不清。
3.2.3 安全碼
3.2.3.1 驗證碼目前主要有四種
滑動驗證、按圖片提示選字、圖形驗證碼、旋轉圖片；目的是為了確認是人為註冊，防止軟件惡意註冊。圖片碼支持隨時刷新切換，不做次數限制。
3.2.3.2 驗證順序説明
發送短信驗證碼之前用安全碼驗證，通常有以下3種順序：
- 先隱藏，點擊“發送短信驗證碼”時顯示並驗證，驗證成功後，提示發送短信成功，或點擊“發送驗證碼”獲取短信，此種安全碼多以彈窗顯示。如：左1—滑動驗證（上）、左2-按提示選字或圖片；
- 先顯示並隱藏短信驗證碼行，驗證通過後顯示“短信驗證碼”輸入欄，如：左1—滑動驗證（下）；
- 顯示並驗證，若未驗證，點擊“發送短信驗證碼”時提示“請輸入驗證碼”，如左3，這種方式大型網站很少見了。
3.2.3.3 安全碼界面樣式
有非彈窗和彈窗兩種，非彈窗安全碼樣式如下：
彈窗類安全碼，看圖選圖/選字、滑動、旋轉安全碼這三種類型均有，觸發條件為點擊“發送短信驗證碼”或者如下圖。
3.2.4 用户協議
用户協議出現在註冊界面的情況居多，早期一般是默認被選中狀態或是點擊註冊即視為同意協議條款。
但是支付寶新聞事件提醒我們，用户協議最好是需要用户自己去點擊確認，現在很多應用也開始這樣做，如下右圖，未勾選協議前，下一步按鈕不可點。
3.2.5 密碼眼睛開合
出於使用場景考慮，比如：用户在註冊時身邊有人，為了保護用户的密碼隱私，可以在輸入密碼時關閉眼睛icon。開啓眼睛是為了讓用户清楚的看見自己密碼，避免密碼輸入錯誤。
3.2.6 一鍵刪除賬户名/密碼
這個功能是給用户在註冊登錄頁面輸入有誤或是切換賬户時使用，可以有效減少用户點擊次數，提升用户體驗。
3.2.7 保留賬户名數據
如果用户曾登錄過，可以保留用户的賬户名數據，這樣用户重新登錄時只需輸入密碼或者驗證碼即可。當然，用户如果想重新輸入賬户名，一鍵刪除數據的功能就顯得很有必要，例如：QQ郵箱登錄。
3.2.8 多賬户之間的登錄切換
在登錄時可以選擇多個賬號，這個功能在to C端應用比較少，一般是to B類應用可能會用到，因為企業可能會擁有多個賬號，這個功能就顯得很重要。
3.2.9 去除雞肋操作
註冊登錄過程中，一些雞肋的操作會影響用户體驗，從而導致用户流失，比方説密碼重複輸入，完善個人資料等。這些操作可以放在個人中心或是設置中讓用户自行填寫，在註冊登錄頁面只保留必填的內容。
圖片來自網絡或截圖，僅供學習交流。
本文由 @windy 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自 Pexels，基於 CC0 協議