自己挖的坑一定要讓別人給填好！

一、登錄（從PC端到移動端）

移動端的登錄沿襲了很多PC端的經驗，但也有其獨特的演變，我收集了一些資料，結合個人的經驗總結了一些內容，希望都從事產品的人有幫助，也希望前輩們不吝賜教。

1.PC端：

1.1 ?PC具有公共屬性，輸入密碼是私密性的，需要在登錄注冊時給予適當保護；

1.2 ?PC端臺式機一般固定在特定的位置，無法隨意移動，筆記本可以移動但使用場景相對固定，網絡狀況與移動設備相比穩定；

1.3 ?PC顯示區域比較大，登錄注冊通常只有1個頁面，需要填寫的所有內容都會呈現。

1.4 ?PC端的輸入設備有鼠標和鍵盤，人機交互和可輸入速度要快很多；

2.移動端：

2.1 ?移動設備屬于個人私密性較高的設備，用戶在進行操作時，可對輸入密碼進行有效的保護；

2.2 ?移動設備隨身攜帶，隨時隨地在變換位置，網絡狀況不穩定等不確定因素很多；

2.3 ?移動設備顯示區域均較小，登錄的注冊頁面通常都會有3個頁面（M站通常在一個頁面），需要用戶填寫的內容要精簡；

2.4 ?移動設備輸入更多是手指觸屏操作，人機交互有其獨特性，例如虛擬鍵盤的設計。

了解這些之后，需要清楚的甄別兩者之間的關聯和區別。

二、設計前的思考

在開始設計產品之前，一定要先想清楚：

• 為誰設計登錄注冊
• 是否一定要登錄注冊
• 是否需要獨立的賬戶體系
• 哪些操作需要用戶登錄？

三、登錄注冊的設計步驟

假設前面的問題都搞清楚了。那么我們來設計登錄注冊。

第一步：梳理腦圖，梳理現有的登錄模式和信息結構；

第二步：梳理業務流程，把每一步操作都流程化，做好各種情況的處理方案（梳理流程非常非常非常重要）；

第三步：畫出草圖/線框圖，對頁面元素和布局進行初步設計；

第四步：交互設計，對每一項頁面元素、頁面跳轉、操作反饋、異常處理、按鈕和頁面的各種狀態等做出設計；

第五步：自檢測試，對線框圖和交互設計進行自檢，最好是用Axure等交互軟件進行交互設計操作，建立自己的自檢清單；

第六步：輸出PRD、線框圖和交互設計稿。

四、設計范例

由于每個頁面都要設計很耗費時間和精力，所以我只做簡單地總結。（主要是我最近太忙了，沒時間一點點的做）

以注冊為例，注冊通用流程是：填寫手機號碼——獲取驗證碼——填寫密碼

1.賬號

1.1??賬號有無格式的要求，如果只是手機號碼，前端是否需要驗證手機號碼的有效性？

1.2??手機號碼為純數字，是否彈出純數字鍵盤方便用戶快速填寫及避免用戶來回切換？

1.3??手機號碼的數字如何呈現？哪種格式？

2.驗證碼

2.1?驗證碼的格式，是四/六位數字驗證碼，還是英文+數字驗證碼，英文是否區分大小寫？

2.2?按鈕默認顯示狀態、用戶輸入信息后按鈕顏色變化效果，該如何設計比較好？

2.3?倒計時如何設置？button還是label?？用哪個好？如何設計？

3.密碼

3.1??最少和最多字符設置，提示文字為“位”還是“字符”？如“請輸入6-16位字母或數字”？

3.2??密碼是否要限制特殊字符？如“空格”、“/”等，為什么要限制？有沒有安全方面的考慮？

3.3??密碼設置好后，注冊按鈕如何變化？點擊“注冊”后，在網絡較慢的情況下，頁面和按鈕如何響應，是否要加鎖屏浮層+緩沖提示語？

4.錯誤提示

4.1 ?錯誤時的報錯提示文字是什么，提示格式是彈窗、Toast、還是在當前頁面文字顯示？

4.2??Toast是沒有焦點的，而且Toast顯示的時間有限，過一定的時間就會自動消失。

4.3??彈框會阻斷用戶操作，需要手動點擊確認以后才會消失。

4.4??在當前頁面文字顯示的話，提示文字擺放的位置，頁面格式根據提示文字的變化，需要有怎樣的視覺效果

5.異常提示

5.1??點擊【獲取驗證碼】，檢測手機號已被注冊，如無置灰設置，輸入框為空，手機號碼無效的情況，故需提示：

5.1.1 ?手機號已被注冊，是否提示用戶登錄？

5.1.2??手機號不能為空，多次為空狀態點擊是否給出頻繁操作提示？

5.1.3??手機號碼不正確，“請輸入正確的手機號碼”是不是比“手機號碼錯誤”好些？

5.2???點擊【注冊】時，可能會有輸入框為空，驗證碼無效等情況，如無置灰設置，故需提示：

5.2.1??短信驗證碼不能為空

5.2.2??驗證碼已被使用，然后給出什么操作呢？

5.2.3??驗證碼已過期，過期了給出彈窗嗎？在彈窗直接獲取驗證碼？

5.2.4??驗證碼錯誤，弱提示？

5.2.5??驗證碼已達到最大嘗試次數，最大是多少次？

6.短信驗證碼

6.1 ?短信驗證碼一般通過第三方通道發送，在技術側做規避，還需要在產品規則上做一定限制；

6.2 ?驗證碼的格式需要簡單明了，如“885267，XX驗證碼?！綳XX】”

6.3 ?驗證碼的字數限制，4位或者6位純數字？

7.邀請碼

7.1 ?注冊是否為邀請注冊？如是邀請注冊，邀請碼格式如何設計？

7.2 ?邀請碼錯誤提示？填寫了邀請的用戶和沒填的用戶，在注冊成功后有何區別？有邀請碼的用戶是否有獎勵？

8.注冊成功后的提示、狀態變更及頁面跳轉

8.1??注冊成功后同時切換為登錄狀態，登錄狀態賬號密碼保存是否設置期限？

8.2??給予注冊成功的提示并跳轉到相應頁面，目標頁面狀態如何是否有緩存，是否需要緩存？

8.3??之前是在需要token的頁面跳轉到注冊頁面的話，注冊成功后需自動跳轉回之前的頁面

8.4??注冊之前有第三方登錄，用戶注冊后還需要用戶綁定第三方賬號嗎？

五、其他注意事項：

1.?輸入框

1.1??手機號碼輸入框，手機號碼顯示一般是344格式，這樣便于用戶檢查號碼是否正確，如：138 ?8888 ? 8888；

1.2??驗證碼輸入框，長度一般比較短；

1.3??密碼輸入框，默認一般為密文顯示，為了更好的交互可以設置明文顯示按鈕，最好只設置1次密碼，為什么這樣？

1.4??其他輸入框，如郵箱、邀請碼、昵稱、個人信息等根據使用場景的不同自行設計；

1.5??不同的輸入框需要有不同的提示內容和顯示狀態。

2.按鈕

1.1??按鈕設計，提交按鈕和文字按鈕的位置和主次布局設計；

1.2??按鈕狀態的設計，不同的狀態操作都要考慮，默認置灰和高亮的條件，按鈕置灰的意義何在？

1.3??按鈕提交反饋，點擊操作要給出響應或反饋。

3.驗證碼

3.1??驗證碼的格式，字母、數字、字符等，一般為數字4位或者6位；

3.2??驗證碼的有效時間，根據不同的產品設計不同的有效時間，在有效時間內的驗證碼操作需要給出明確的反饋；

3.3??驗證碼的獲取次數上限，技術限制和產品設計限制同步，避免被無限制獲??；

3.4??驗證碼獲取時間，一般為第三方發送，但時間最好限定在5.5秒內讓用戶獲取到（不要問我為什么是5.5秒，因為我也不知道）

3.5??驗證碼是怎么觸發得到的？為什么有些設計為點擊下一步或者獲取驗證碼后在頁面跳轉時就獲取，有些頁面跳轉后再次點擊按鈕才能獲??？為什么有不同？

3.6??觸發后倒計時狀態有何變化？重新獲取驗證碼后，原驗證碼如何處理？

3.7??短時間內多次獲取驗證碼，是否還要給用戶發送驗證碼？還是提示驗證碼已發送請輸入？

4.返回按鈕

4.1??在注冊、找回密碼、第三方登錄等操作流程中，返回時需要特別注意點擊返回后的操作提示；比如注冊手機的修改，驗證碼提交后設置密碼等。

4.2??點擊返回時，干擾了正常流程的操作一般需要強提示，提示彈窗注意文案和按鈕文字怎么設計好？

4.3??點擊返回后，當前頁面和目標頁面狀態是否變化？例如從填寫驗證碼返回到填寫手機號碼頁面，手機號碼是置空還是顯示已輸入過的手機號碼？

4.4 ?瀏覽應用過程中進入登錄頁面，登錄頁面是否需要有返回按鈕？

5.虛擬鍵盤

5.1??虛擬鍵盤何時彈出？觸發條件是什么？

5.2??彈出的虛擬鍵盤是什么類型的？數字鍵盤、字母鍵盤？系統自帶輸入法還是第三方輸入法？

5.3??鍵盤上的”Go”按鈕是否有變化？變成”完成“或者”登陸“等后點擊有何交互？

5.4??鍵盤如何隱藏？怎么觸發？自動隱藏？按鍵隱藏？

5.5??鍵盤上的刪除按鈕和一鍵清除按鈕是否有區別？有何區別？有無必要設計一鍵清除？

6.異常提示

6.1??登錄時，賬戶是否在其他設備登錄，是否允許多端同時登陸？不允許同時登陸，之前登錄設備的賬戶是否要下線？給出怎樣的提示？

6.2?密碼第一次錯誤給出什么提示？第二次仍然輸入錯誤，錯誤提示是否需要強提示并給出找回密碼的按鈕？在彈窗點擊找回密碼，手機號碼在新頁面是否需要重新填寫？密碼連續多次輸入錯誤是否要做出禁用限制？

6.3?注冊流程中，檢測到手機號碼已經注冊，是否可以繼續獲取驗證碼？或者驗證后直接登錄免去頁面跳轉和輸入密碼？

6.4??找回密碼和重置密碼都有哪些區別？

6.5.網絡狀態不好，都該給出怎樣的反饋或提示？

6.5.1??用戶所處環境網絡信號不好（用戶向服務器請求超時），是否需要檢查用戶的網絡狀態？還是只給出提示？

6.5.2??服務器沒有正常接收請求或沒有回復，給出怎樣的提示較好？

6.5.3??手機停機，驗證碼、數據傳輸如何處理？

6.5.4??手機沒開wifi或者流量，如何指導用戶進行設置？

7.第三方登錄

7.1??昵稱的長度設置，不同平臺的賬戶昵稱的長度要求不同，該如何獲??？

7.2??綁定多個第三方賬戶，公開信息如何獲??？公開信息不同如何處理？

7.3 ?用戶注冊前使用過第三方登錄，是否還有綁定手機號碼？

7.4 ?用戶在PC網頁和APP分別進行第三方登錄，是否有1個第三方賬號生成2個本地賬號的情況？

And so on……

六、總結

登錄注冊的設計涉及到很多方面，是最常見也是最容易被設計者忽視的地方。每一個元素的設計都要獨立思考，不能照搬全抄，也不能異想天開，需要提前理解和思考，多想幾個為什么，多問自己幾個為什么？而在實際設計的過程中，需要重點考慮實際的應用場景。

暫時就寫這么多吧，累死本座了，敲打這么多字，死了不少腦細胞。

七、蘋果手機鎖屏機制：

前面5次：前面5次輸入錯誤密碼時，手機會震動并提示密碼不正確，但是可以繼續輸入，而且不需要任何等待時間。

第6次：第6次輸錯密碼時，會顯示“iPhone已停用，請1分鐘后再輸入一次”。在接下來的一分鐘內，手機處于鎖定狀態，即使想輸入正確密碼，也無法輸入。

第7次：第7次輸錯密碼，顯示“iPhone已停用，請5分鐘后再輸入一次”，5分鐘內無法操作；

第8次：第8次輸錯密碼，15分鐘內無法操作；

第9次：第9次輸錯密碼，60分鐘內無法操作；

第10次：第10次輸錯密碼，顯示“iPhone已停用，連接iTunes”。這種情況下，無論等待多長時間都沒有機會再出現密碼框，哪怕是一萬年也不行。

（如果你不相信這一條，請親自驗證一下。嘿嘿）

本文由 @醉花心（微信公眾號 ： PD-zhx） 原創授權發布于人人都是產品經理?，未經許可，禁止轉載。

本人發布的任何內容除特別聲明和單獨授權外以外，均禁止紙媒，即以印刷形式發行、傳播的一切媒體，以及屬于紙媒的數字形式衍生品的轉載、摘編、引用。其他媒體轉載需注明出處、公眾帳號中/英文名稱、不得修改原文，不允許部分引用，并在最終發表內容中明確注明禁止任何轉載。