一、APP登錄注冊
APP：
2.1 移動設備屬于個人私密性較高的設備，用戶在進行操作時，可對輸入密碼進行有效的保護；
2.2 移動設備隨身攜帶，隨時隨地在變換位置，網(wǎng)絡狀況不穩(wěn)定因素很多；
2.3 移動設備顯示區(qū)域均較小，登錄注冊頁面通常都會有3個頁面（M站通常在一個頁面），需要用戶填寫的內(nèi)容要精簡；
2.4 移動設備輸入更多是手指觸屏操作，人機交互有其獨特性，例如虛擬鍵盤的設計，特效的設計等。
二、關(guān)于APP登錄注冊設計前的思考
在開始設計產(chǎn)品之前，一定要先想清楚：
為誰設計登錄注冊？
是否一定要登錄注冊？
是否需要獨立的賬戶體系？
哪些操作需要用戶登錄？
三、登錄注冊的設計步驟
假設前面的問題都搞清楚了。
那么我們來設計登錄注冊。
第一步：梳理腦圖，梳理現(xiàn)有的登錄模式和信息結(jié)構(gòu)；（一般會用xmind，操作簡單易用，最主要是免費......）
第二步：梳理業(yè)務流程，把每一步操作都流程化，做好各種情況的處理方案（梳理流程非常非常非常重要）；
第三步：畫出草圖/線框圖，對頁面元素和布局進行初步設計；
第四步：交互設計，對每一項頁面元素、頁面跳轉(zhuǎn)、操作反饋、異常處理、按鈕和頁面的各種狀態(tài)等做出設計；
第五步：自檢測試，對線框圖和交互設計進行自檢，最好是用Axure等交互軟件進行交互設計操作，建立自己的自檢清單；
第六步：輸出PRD、線框圖和交互設計稿。
四、設計的細節(jié)問題
由于每個頁面都要設計很耗費時間和精力，所以我只做簡單地總結(jié)。
以注冊為例，注冊通用流程：是填寫手機號碼——獲取驗證碼——填寫密碼
1.賬號
1.1 賬號有無格式的要求，如果只是手機號碼，前端是否需要驗證手機號碼的有效性？
1.2 手機號碼為純數(shù)字，是否彈出純數(shù)字鍵盤方便用戶快速填寫及避免用戶來回切換？
1.3 手機號碼的數(shù)字如何呈現(xiàn)？哪種格式？
2.驗證碼
2.1 驗證碼的格式，是四/六位數(shù)字驗證碼，還是英文+數(shù)字驗證碼，英文是否區(qū)分大小寫？
2.2 按鈕默認顯示狀態(tài)、用戶輸入信息后按鈕顏色變化效果，該如何設計比較好？
2.3 倒計時如何設置？button還是label ？用哪個好？為什么好（好在哪里）？如何設計？
3.密碼
3.1 最少和最多字符設置，提示文字為“位”還是“字符”？如“請輸入6-16位字母或數(shù)字”
3.2 密碼是否要限制特殊字符？如“空格”、“/”等，為什么要限制？有沒有安全方面的考慮？
3.3 密碼設置好后，注冊按鈕如何變化？點擊“注冊”后，在網(wǎng)絡較慢的情況下，頁面和按鈕如何響應，是否要加鎖屏浮層+緩沖提示語？
4.錯誤提示
4.1 錯誤時的報錯提示文字是什么，提示格式是彈窗、Toast、還是在當前頁面文字顯示？
4.2 Toast是沒有焦點的，而且Toast顯示的時間有限，過一定的時間就會自動消失。
4.3 彈框會阻斷用戶操作，需要手動點擊確認以后才會消失。
4.4 在當前頁面文字顯示的話，提示文字擺放的位置，頁面格式根據(jù)提示文字的變化，需要有怎樣的視覺效果
5.異常提示：
5.1 點擊【獲取驗證碼】，檢測手機號已被注冊，如無置灰設置，輸入框為空，手機號碼無效的情況，故需提示：
5.1.1 手機號已被注冊，是否提示用戶登錄？
5.1.2 手機號不能為空，多次為空狀態(tài)點擊是否給出頻繁操作提示？
5.1.3 手機號碼不正確，“請輸入正確的手機號碼”是不是比“手機號碼錯誤”好些？
5.2 點擊【注冊】時，可能會有輸入框為空，驗證碼無效等情況，如無置灰設置，故需提示：
5.2.1 短信驗證碼不能為空
5.2.2 驗證碼已被使用，然后給出什么操作呢？
5.2.3 驗證碼已過期，過期了給出彈窗嗎？在彈窗直接獲取驗證碼？
5.2.4 驗證碼錯誤，弱提示？
5.2.5 驗證碼已達到最大嘗試次數(shù)，最大是多少次？
6.短信驗證碼
6.1 短信驗證碼一般通過第三方通道發(fā)送，在技術(shù)側(cè)做規(guī)避，還需要在產(chǎn)品規(guī)則上做一定限制；
6.2 驗證碼的格式需要簡單明了，如“880207，XX驗證碼。【XXX】。
6.3 驗證碼的字數(shù)限制，一般為6位純數(shù)字。
7.邀請碼
7.1 注冊是否為邀請注冊？如是邀請注冊，邀請碼格式如何設計？
7.2 邀請碼錯誤提示，填寫了邀請的用戶和沒填的用戶，在注冊成功后有何區(qū)別？有邀請碼的用戶是否有獎勵？
8.注冊成功后的提示、狀態(tài)變更及頁面跳轉(zhuǎn)
8.1 注冊成功后同時切換為登錄狀態(tài)，登錄狀態(tài)賬號密碼保存是否設置期限？
8.2 給予注冊成功的提示并跳轉(zhuǎn)到相應頁面，目標頁面狀態(tài)如何是否有緩存，是否需要緩存？
8.3 之前是在需要token的頁面跳轉(zhuǎn)到注冊頁面的話，注冊成功后需自動跳轉(zhuǎn)回之前的頁面
8.4 注冊之前有第三方登錄，用戶注冊后還需要用戶綁定第三方賬號嗎？
五、其他注意事項
1. 輸入框
1.1 手機號碼輸入框，手機號碼顯示一般是344格式，這樣便于用戶檢查號碼是否正確，如：188 8888 8888；
? ? ? 對輸入手機號的判斷，首數(shù)字必須以1 開頭，非1字符及提示錯誤，第二位數(shù)字必須在3到8之間（包括3到8），不在范圍即提示錯誤等等
1.2 驗證碼輸入框，長度一般比較短；
1.3 密碼輸入框，默認一般為密文顯示，為了更好的交互可以設置明文顯示按鈕，最好只設置一次密碼，為什么這樣？
2.按鈕
1.1 按鈕設計，提交按鈕和文字按鈕的位置和主次布局設計；
1.2 按鈕狀態(tài)的設計，不同的狀態(tài)操作都要考慮，默認置灰和高亮的條件，按鈕置灰的意義何在？
1.3 按鈕提交反饋，點擊操作要給出響應或反饋。
3.驗證碼
3.1 驗證碼的格式，字母、數(shù)字、字符等，一般為數(shù)字4位或者6位；
3.2 驗證碼的有效時間，根據(jù)不同的產(chǎn)品設計不同的有效時間，在有效時間內(nèi)的驗證碼操作需要給出明確的反饋；
3.3 驗證碼的獲取次數(shù)上限，技術(shù)限制和產(chǎn)品設s計限制同步，避免被無限制獲??；
3.4 驗證碼獲取時間，一般為第三方發(fā)送，但時間最好限定在5秒內(nèi)讓用戶獲取到
3.5 驗證碼是怎么觸發(fā)得到的？為什么有些設計為點擊那妞頁面跳轉(zhuǎn)時獲取，有些頁面跳轉(zhuǎn)后再次點擊才能獲??？為什么有不同？
3.6 觸發(fā)后倒計時狀態(tài)有何變化？重新獲取驗證碼后，原驗證碼如何處理？
3.7 短時間內(nèi)多次獲取驗證碼是否還要給用戶發(fā)送驗證碼？還是提示驗證碼已發(fā)送請輸入？
4.返回按鈕
4.1 在注冊、找回密碼、第三方登錄等操作流程中，返回時需要特別注意點擊返回后的操作提示；比如注冊手機的修改，驗證碼提交后設置密碼等。
4.2 點擊返回時，干擾了正常流程的操作一般需要強提示，提示彈窗注意文案和按鈕文字設計
4.3 點擊返回后，當前頁面和目標頁面狀態(tài)是否變化？例如手機號碼是置空還是顯示已輸入的手機號碼？
4.4 瀏覽應用過程中進入登錄頁面，登錄頁面是否需要有返回按鈕？
六、總結(jié)
登錄注冊的設計涉及到很多方面，是最常見也是最容易被設計者忽視的地方。每一個元素的設計都要獨立思考，不能照搬全抄，也不能異想天開，需要提前理解和思考，多想幾個為什么，多問自己幾個為什么？而在實際設計的過程中，需要重點考慮實際的應用場景。
歡迎關(guān)注微信公眾號：微言拙見（rrdsPM），一個有趣、有用、有態(tài)度的公眾號
