一、APP登錄注冊

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

1.2 移動設(shè)備隨身攜帶，隨時隨地在變換位置，網(wǎng)絡(luò)狀況不穩(wěn)定因素很多；

1.3 移動設(shè)備顯示區(qū)域均較小，登錄注冊頁面通常都會有3個頁面（M站通常在一個頁面），需要用戶填寫的內(nèi)容要精簡；

1.4 移動設(shè)備輸入更多是手指觸屏操作，人機交互有其獨特性，例如虛擬鍵盤的設(shè)計，特效的設(shè)計等。

二、關(guān)于APP登錄注冊設(shè)計前的思考

在開始設(shè)計產(chǎn)品之前，一定要先想清楚：

為誰設(shè)計登錄注冊？

是否一定要登錄注冊？

是否需要獨立的賬戶體系？

哪些操作需要用戶登錄？

三、登錄注冊的設(shè)計步驟

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

第一步：梳理腦圖，梳理現(xiàn)有的登錄模式和信息結(jié)構(gòu)；（一般會用xmind，操作簡單易用，最主要是免費......）

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

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

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

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

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

四、設(shè)計的細節(jié)問題

由于每個頁面都要設(shè)計很耗費時間和精力，所以我只做簡單地總結(jié)。

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

1.賬號

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

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

1.3 手機號碼的數(shù)字如何呈現(xiàn)？哪種格式？

2.驗證碼

2.1 驗證碼的格式，是四/六位數(shù)字驗證碼，還是英文+數(shù)字驗證碼，英文是否區(qū)分大小寫？

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

2.3 倒計時如何設(shè)置？button還是label ？用哪個好？為什么好（好在哪里）？如何設(shè)計？

2.4 驗證碼的倒計時一般默認采用60秒的居多，但是一般驗證碼的有效期為5分鐘。之所以設(shè)置60秒是因為在絕大多數(shù)情況下，60秒內(nèi)驗證碼是能夠發(fā)出的，如獲取不到，讓用戶所等待的時間又不至于太長，降低用戶焦慮，提升體驗。

3.密碼

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

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

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

4.錯誤提示

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

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

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

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

5.異常提示

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

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

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

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

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

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驗證碼?！綳XX】。

6.3 驗證碼的字數(shù)限制，一般為6位純數(shù)字。

7.邀請碼

7.1 注冊是否為邀請注冊？如是邀請注冊，邀請碼格式如何設(shè)計？

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

8.注冊成功后的提示、狀態(tài)變更及頁面跳轉(zhuǎn)

8.1 注冊成功后同時切換為登錄狀態(tài)，登錄狀態(tài)賬號密碼保存是否設(shè)置期限？

8.2 給予注冊成功的提示并跳轉(zhuǎn)到相應(yīng)頁面，目標頁面狀態(tài)如何是否有緩存，是否需要緩存？

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

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

五、其他注意事項

1. 輸入框

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

對輸入手機號的判斷，首數(shù)字必須以1 開頭，非1字符及提示錯誤，第二位數(shù)字必須在3到9之間（包括3到9），不在范圍即提示錯誤等等

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

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

2.按鈕

1.1 按鈕設(shè)計，提交按鈕和文字按鈕的位置和主次布局設(shè)計；

1.2 按鈕狀態(tài)的設(shè)計，不同的狀態(tài)操作都要考慮，默認置灰和高亮的條件，按鈕置灰的意義何在？

1.3 按鈕提交反饋，點擊操作要給出響應(yīng)或反饋。

3.驗證碼

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

3.2 驗證碼的有效時間，根據(jù)不同的產(chǎn)品設(shè)計不同的有效時間，在有效時間內(nèi)的驗證碼操作需要給出明確的反饋；

3.3 驗證碼的獲取次數(shù)上限，技術(shù)限制和產(chǎn)品設(shè)s計限制同步，避免被無限制獲?。?/p>

3.4 驗證碼獲取時間，一般為第三方發(fā)送，但時間最好限定在5秒內(nèi)讓用戶獲取到

3.5 驗證碼是怎么觸發(fā)得到的？為什么有些設(shè)計為點擊那妞頁面跳轉(zhuǎn)時獲取，有些頁面跳轉(zhuǎn)后再次點擊才能獲?。繛槭裁从胁煌?？

3.6 觸發(fā)后倒計時狀態(tài)有何變化？重新獲取驗證碼后，原驗證碼如何處理？

3.7 短時間內(nèi)多次獲取驗證碼是否還要給用戶發(fā)送驗證碼？還是提示驗證碼已發(fā)送請輸入？

4.返回按鈕

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

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

4.3 點擊返回后，當前頁面和目標頁面狀態(tài)是否變化？例如手機號碼是置空還是顯示已輸入的手機號碼？

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

六、總結(jié)

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

?-END-