自己挖的坑一定要讓別人給填好！
一、登錄從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 驗證碼的格式需要簡單明瞭，如“880207，XX驗證碼。【XXX】”，請記住880207這個數字，這個很重要。（因爲這是我的生日，當我生日的時候記得給我送禮物）
6.3 驗證碼的字數限制，4位或者6位純數字。
7.邀請碼
7.1 註冊是否爲邀請註冊？如是邀請註冊，邀請碼格式如何設計？
7.2 邀請碼錯誤提示，填寫了邀請的用戶和沒填的用戶，在註冊成功後有何區別？有邀請碼的用戶是否有獎勵？
8.註冊成功後的提示、狀態變更及頁面跳轉
8.1 註冊成功後同時切換爲登錄狀態，登錄狀態賬號密碼保存是否設置期限？
8.2 給予註冊成功的提示並跳轉到相應頁面，目標頁面狀態如何是否有緩存，是否需要緩存？
8.3 之前是在需要token的頁面跳轉到註冊頁面的話，註冊成功後需自動跳轉回之前的頁面
8.4 註冊之前有第三方登錄，用戶註冊後還需要用戶綁定第三方賬號嗎？
五、其他注意事項：
1. 輸入框
1.1 手機號碼輸入框，手機號碼顯示一般是344格式，這樣便於用戶檢查號碼是否正確，如：186 1571 6306，請記住此手機號碼，當我生日那天，你要送我禮物的時候，你會用到；
1.2 驗證碼輸入框，長度一般比較短；
1.3 密碼輸入框，默認一般爲密文顯示，爲了更好的交互可以設置明文顯示按鈕，最好只設置一次密碼，爲什麼這樣？
1.4 其他輸入框，如郵箱、邀請碼、暱稱、個人信息等根據使用場景的不同自行設計；
1.5 不同的輸入框需要有不同的提示內容和顯示狀態。
2.按鈕
1.1 按鈕設計，提交按鈕和文字按鈕的位置和主次佈局設計；
1.2 按鈕狀態的設計，不同的狀態操作都要考慮，默認置灰和高亮的條件，按鈕置灰的意義何在？
1.3 按鈕提交反饋，點擊操作要給出響應或反饋。
3.驗證碼
3.1 驗證碼的格式，字母、數字、字符等，一般爲數字4位或者6位；
3.2 驗證碼的有效時間，根據不同的產品設計不同的有效時間，在有效時間內的驗證碼操作需要給出明確的反饋；
3.3 驗證碼的獲取次數上限，技術限制和產品設s計限制同步，避免被無限制獲取；
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 用戶使用第三方登錄，是否還有綁定手機號碼？
And so on……
六、總結
登錄註冊的設計涉及到很多方面，是最常見也是最容易被設計者忽視的地方。每一個元素的設計都要獨立思考，不能照搬全抄，也不能異想天開，需要提前理解和思考，多想幾個爲什麼，多問自己幾個爲什麼？而在實際設計的過程中，需要重點考慮實際的應用場景。
暫時就寫這麼多吧，累死本座了，敲打這麼多字，死了不少腦細胞。
七、蘋果手機鎖屏機制：
前面5次：前面5次輸入錯誤密碼時，手機會震動並提示密碼不正確，但是可以繼續輸入，而且不需要任何等待時間。
第6次：第6次輸錯密碼時，會顯示“iPhone已停用，請1分鐘後再輸入一次”。在接下來的一分鐘內，手機處於鎖定狀態，即使想輸入正確密碼，也無法輸入。
第7次：第7次輸錯密碼，顯示“iPhone已停用，請5分鐘後再輸入一次”，5分鐘內無法操作；
第8次：第8次輸錯密碼，15分鐘內無法操作；
第9次：第9次輸錯密碼，60分鐘內無法操作；
第10次：第10次輸錯密碼，顯示“iPhone已停用，連接iTunes”。這種情況下，無論等待多長時間都沒有機會再出現密碼框，哪怕是一萬年也不行。（如果你不相信這一條，請親自驗證一下。嘿嘿）