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

一、登錄從PC端到移動(dòng)端

移動(dòng)端的登錄沿襲了很多PC端的經(jīng)驗(yàn)颖低，但也有其獨(dú)特的演變。

1.PC端：

1.1 ?PC具有公共屬性弧烤，輸入密碼是私密性的忱屑，需要在登錄注冊(cè)時(shí)給予適當(dāng)保護(hù)；

1.2 ?PC端臺(tái)式機(jī)一般固定在特定的位置暇昂，無(wú)法隨意移動(dòng)莺戒，筆記本可以移動(dòng)但使用場(chǎng)景相對(duì)固定，網(wǎng)絡(luò)狀況與移動(dòng)設(shè)備相比穩(wěn)定急波；

1.3 ?PC顯示區(qū)域比較大从铲，登錄注冊(cè)通常只有1個(gè)頁(yè)面，需要填寫(xiě)的內(nèi)容都會(huì)呈現(xiàn)澄暮。

1.4 ?PC端的輸入設(shè)備有鼠標(biāo)和鍵盤(pán)名段，人機(jī)交互和可輸入速度要快很多；

2.移動(dòng)端：

2.1 ?移動(dòng)設(shè)備屬于個(gè)人私密性較高的設(shè)備泣懊，用戶(hù)在進(jìn)行操作時(shí)伸辟，可對(duì)輸入密碼進(jìn)行有效的保護(hù)；

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

2.3 ?移動(dòng)設(shè)備顯示區(qū)域均較小渠退，登錄注冊(cè)頁(yè)面通常都會(huì)有3個(gè)頁(yè)面（M站通常在一個(gè)頁(yè)面）忙迁，需要用戶(hù)填寫(xiě)的內(nèi)容要精簡(jiǎn)；

2.4 ?移動(dòng)設(shè)備輸入更多是手指觸屏操作碎乃，人機(jī)交互有其獨(dú)特性姊扔，例如虛擬鍵盤(pán)的設(shè)計(jì)。

了解這些之后梅誓，需要清楚的甄別兩者之間的關(guān)聯(lián)和區(qū)別恰梢。

二、設(shè)計(jì)前的思考

在開(kāi)始設(shè)計(jì)產(chǎn)品之前梗掰，一定要先想清楚：為誰(shuí)設(shè)計(jì)登錄注冊(cè)嵌言，是否一定要登錄注冊(cè)，是否需要獨(dú)立的賬戶(hù)體系及穗，哪些操作需要用戶(hù)登錄摧茴？

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

假設(shè)前面的問(wèn)題都搞清楚了埂陆。那么我們來(lái)設(shè)計(jì)登錄注冊(cè)苛白。

第一步：梳理腦圖娃豹，梳理現(xiàn)有的登錄模式和信息結(jié)構(gòu)；

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

第三步：畫(huà)出草圖/線框圖躏率，對(duì)頁(yè)面元素和布局進(jìn)行初步設(shè)計(jì)躯畴；

第四步：交互設(shè)計(jì)，對(duì)每一項(xiàng)頁(yè)面元素薇芝、頁(yè)面跳轉(zhuǎn)私股、操作反饋、異常處理恩掷、按鈕和頁(yè)面的各種狀態(tài)等做出設(shè)計(jì)倡鲸；

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

第六步：輸出PRD逼争、線框圖和交互設(shè)計(jì)稿优床。

四、設(shè)計(jì)范例

由于每個(gè)頁(yè)面都要設(shè)計(jì)很耗費(fèi)時(shí)間和精力誓焦，所以我只做簡(jiǎn)單地總結(jié)胆敞。（主要是我最近太忙了，沒(méi)時(shí)間一點(diǎn)點(diǎn)的做）

以注冊(cè)為例杂伟，注冊(cè)通用流程：是填寫(xiě)手機(jī)號(hào)碼——獲取驗(yàn)證碼——填寫(xiě)密碼

1.賬號(hào)

1.1??賬號(hào)有無(wú)格式的要求移层，如果只是手機(jī)號(hào)碼，前端是否需要驗(yàn)證手機(jī)號(hào)碼的有效性赫粥？

1.2??手機(jī)號(hào)碼為純數(shù)字观话，是否彈出純數(shù)字鍵盤(pán)方便用戶(hù)快速填寫(xiě)及避免用戶(hù)來(lái)回切換？

1.3??手機(jī)號(hào)碼的數(shù)字如何呈現(xiàn)越平？哪種格式频蛔？

2.驗(yàn)證碼

2.1?驗(yàn)證碼的格式，是四/六位數(shù)字驗(yàn)證碼秦叛，還是英文+數(shù)字驗(yàn)證碼晦溪，英文是否區(qū)分大小寫(xiě)？

2.2?按鈕默認(rèn)顯示狀態(tài)挣跋、用戶(hù)輸入信息后按鈕顏色變化效果三圆，該如何設(shè)計(jì)比較好？

2.3?倒計(jì)時(shí)如何設(shè)置？button還是label?嫌术？用哪個(gè)好？如何設(shè)計(jì)牌借？

3.密碼

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

3.2??密碼是否要限制特殊字符膨报？如“空格”磷籍、“/”等，為什么要限制现柠？有沒(méi)有安全方面的考慮院领？

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

4.錯(cuò)誤提示

4.1 ?錯(cuò)誤時(shí)的報(bào)錯(cuò)提示文字是什么，提示格式是彈窗湾笛、Toast饮怯、還是在當(dāng)前頁(yè)面文字顯示？

4.2??Toast是沒(méi)有焦點(diǎn)的嚎研，而且Toast顯示的時(shí)間有限蓖墅，過(guò)一定的時(shí)間就會(huì)自動(dòng)消失。

4.3??彈框會(huì)阻斷用戶(hù)操作临扮，需要手動(dòng)點(diǎn)擊確認(rèn)以后才會(huì)消失论矾。

4.4??在當(dāng)前頁(yè)面文字顯示的話(huà)，提示文字?jǐn)[放的位置杆勇，頁(yè)面格式根據(jù)提示文字的變化拇囊，需要有怎樣的視覺(jué)效果

5.異常提示：

5.1??點(diǎn)擊【獲取驗(yàn)證碼】，檢測(cè)手機(jī)號(hào)已被注冊(cè)靶橱，如無(wú)置灰設(shè)置寥袭，輸入框?yàn)榭眨謾C(jī)號(hào)碼無(wú)效的情況关霸，故需提示：

5.1.1 ?手機(jī)號(hào)已被注冊(cè)传黄，是否提示用戶(hù)登錄？

5.1.2??手機(jī)號(hào)不能為空队寇，多次為空狀態(tài)點(diǎn)擊是否給出頻繁操作提示膘掰？

5.1.3??手機(jī)號(hào)碼不正確，“請(qǐng)輸入正確的手機(jī)號(hào)碼”是不是比“手機(jī)號(hào)碼錯(cuò)誤”好些？

5.2???點(diǎn)擊【注冊(cè)】時(shí)识埋，可能會(huì)有輸入框?yàn)榭辗惨粒?yàn)證碼無(wú)效等情況，如無(wú)置灰設(shè)置窒舟，故需提示：

5.2.1??短信驗(yàn)證碼不能為空

5.2.2??驗(yàn)證碼已被使用系忙，然后給出什么操作呢？

5.2.3??驗(yàn)證碼已過(guò)期惠豺，過(guò)期了給出彈窗嗎银还？在彈窗直接獲取驗(yàn)證碼？

5.2.4??驗(yàn)證碼錯(cuò)誤洁墙，弱提示蛹疯？

5.2.5??驗(yàn)證碼已達(dá)到最大嘗試次數(shù)，最大是多少次热监？

6.短信驗(yàn)證碼

6.1 ?短信驗(yàn)證碼一般通過(guò)第三方通道發(fā)送捺弦，在技術(shù)側(cè)做規(guī)避，還需要在產(chǎn)品規(guī)則上做一定限制孝扛；

6.2 ?驗(yàn)證碼的格式需要簡(jiǎn)單明了羹呵，如“880207，XX驗(yàn)證碼疗琉「曰叮【XXX】”氧急，請(qǐng)記住880207這個(gè)數(shù)字潮饱，這個(gè)很重要。（因?yàn)檫@是我的生日攒钳，當(dāng)我生日的時(shí)候記得給我送禮物）

6.3 ?驗(yàn)證碼的字?jǐn)?shù)限制柠贤，4位或者6位純數(shù)字香浩。

7.邀請(qǐng)碼

7.1 ?注冊(cè)是否為邀請(qǐng)注冊(cè)？如是邀請(qǐng)注冊(cè)臼勉，邀請(qǐng)碼格式如何設(shè)計(jì)邻吭？

7.2 ?邀請(qǐng)碼錯(cuò)誤提示，填寫(xiě)了邀請(qǐng)的用戶(hù)和沒(méi)填的用戶(hù)宴霸，在注冊(cè)成功后有何區(qū)別囱晴？有邀請(qǐng)碼的用戶(hù)是否有獎(jiǎng)勵(lì)？

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

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

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

8.3??之前是在需要token的頁(yè)面跳轉(zhuǎn)到注冊(cè)頁(yè)面的話(huà)，注冊(cè)成功后需自動(dòng)跳轉(zhuǎn)回之前的頁(yè)面

8.4??注冊(cè)之前有第三方登錄千所，用戶(hù)注冊(cè)后還需要用戶(hù)綁定第三方賬號(hào)嗎狂魔？

五、其他注意事項(xiàng)：

1.?輸入框

1.1??手機(jī)號(hào)碼輸入框淫痰，手機(jī)號(hào)碼顯示一般是344格式最楷，這樣便于用戶(hù)檢查號(hào)碼是否正確，如：186 ?1571 ?6306黑界，請(qǐng)記住此手機(jī)號(hào)碼管嬉，當(dāng)我生日那天皂林，你要送我禮物的時(shí)候朗鸠，你會(huì)用到；

1.2??驗(yàn)證碼輸入框础倍，長(zhǎng)度一般比較短烛占；

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

1.4??其他輸入框芽卿，如郵箱、邀請(qǐng)碼胳搞、昵稱(chēng)卸例、個(gè)人信息等根據(jù)使用場(chǎng)景的不同自行設(shè)計(jì)；

1.5??不同的輸入框需要有不同的提示內(nèi)容和顯示狀態(tài)肌毅。

2.按鈕

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

1.2??按鈕狀態(tài)的設(shè)計(jì)悬而，不同的狀態(tài)操作都要考慮呜舒，默認(rèn)置灰和高亮的條件，按鈕置灰的意義何在笨奠？

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

3.驗(yàn)證碼

3.1??驗(yàn)證碼的格式般婆，字母呻袭、數(shù)字、字符等腺兴，一般為數(shù)字4位或者6位左电；

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

3.3??驗(yàn)證碼的獲取次數(shù)上限段誊，技術(shù)限制和產(chǎn)品設(shè)s計(jì)限制同步，避免被無(wú)限制獲日煌稀连舍；

3.4??驗(yàn)證碼獲取時(shí)間，一般為第三方發(fā)送涩哟，但時(shí)間最好限定在5.5秒內(nèi)讓用戶(hù)獲取到（不要問(wèn)我為什么是5.5秒索赏，因?yàn)槲乙膊恢溃?/p>

3.5??驗(yàn)證碼是怎么觸發(fā)得到的？為什么有些設(shè)計(jì)為點(diǎn)擊那妞頁(yè)面跳轉(zhuǎn)時(shí)獲取贴彼，有些頁(yè)面跳轉(zhuǎn)后再次點(diǎn)擊才能獲惹蹦濉？為什么有不同器仗？

3.6??觸發(fā)后倒計(jì)時(shí)狀態(tài)有何變化融涣？重新獲取驗(yàn)證碼后，原驗(yàn)證碼如何處理精钮？

3.7??短時(shí)間內(nèi)多次獲取驗(yàn)證碼是否還要給用戶(hù)發(fā)送驗(yàn)證碼威鹿？還是提示驗(yàn)證碼已發(fā)送請(qǐng)輸入？

4.返回按鈕

4.1??在注冊(cè)轨香、找回密碼忽你、第三方登錄等操作流程中，返回時(shí)需要特別注意點(diǎn)擊返回后的操作提示臂容；比如注冊(cè)手機(jī)的修改科雳，驗(yàn)證碼提交后設(shè)置密碼等。

4.2??點(diǎn)擊返回時(shí)策橘，干擾了正常流程的操作一般需要強(qiáng)提示炸渡，提示彈窗注意文案和按鈕文字設(shè)計(jì)

4.3??點(diǎn)擊返回后，當(dāng)前頁(yè)面和目標(biāo)頁(yè)面狀態(tài)是否變化丽已？例如手機(jī)號(hào)碼是置空還是顯示已輸入的手機(jī)號(hào)碼蚌堵？

4.4 ?瀏覽應(yīng)用過(guò)程中進(jìn)入登錄頁(yè)面，登錄頁(yè)面是否需要有返回按鈕沛婴？

5.虛擬鍵盤(pán)

5.1??虛擬鍵盤(pán)合適彈出吼畏？觸發(fā)條件是什么？

5.2??彈出的虛擬鍵盤(pán)是什么類(lèi)型的嘁灯？數(shù)字鍵盤(pán)泻蚊、字母鍵盤(pán)？系統(tǒng)自帶輸入法還是第三方輸入法丑婿？

5.3??鍵盤(pán)上的"Go"按鈕是否有變化性雄？變成”完成“或者”登陸“等后點(diǎn)擊有何交互没卸？

5.4??鍵盤(pán)如何隱藏？怎么觸發(fā)秒旋？自動(dòng)隱藏约计？按鍵隱藏？

5.5??鍵盤(pán)上的刪除按鈕和一鍵清除按鈕是否有區(qū)別迁筛？有何區(qū)別煤蚌？

6.異常提示

6.1??登錄時(shí)，賬戶(hù)是否在其他設(shè)備登錄细卧，是否允許多端同時(shí)登陸尉桩？不允許同時(shí)登陸，之前登錄設(shè)備的賬戶(hù)是否要下線贪庙？給出怎樣的提示蜘犁？

6.2?密碼第一次錯(cuò)誤怎么給出提示？第二次仍然輸入錯(cuò)誤提示是否需要強(qiáng)提示插勤，給出找回密碼的按鈕沽瘦？在彈窗點(diǎn)擊找回密碼革骨，手機(jī)號(hào)碼在新頁(yè)面是否需要重新填寫(xiě)农尖？密碼連續(xù)多次輸入錯(cuò)誤是否做出禁用限制？

6.3?注冊(cè)流程中良哲，檢測(cè)到手機(jī)號(hào)碼已經(jīng)注冊(cè)盛卡，是否可以繼續(xù)獲取驗(yàn)證碼？然后驗(yàn)證直接登錄免去頁(yè)面跳轉(zhuǎn)和輸入密碼筑凫？

6.4??找回密碼和重置密碼都有哪些區(qū)別滑沧？

6.5.網(wǎng)絡(luò)狀態(tài)不好，都該給出怎樣的反饋或提示巍实？

6.5.1??用戶(hù)所處環(huán)境網(wǎng)絡(luò)信號(hào)不好（用戶(hù)向服務(wù)器請(qǐng)求超時(shí)）滓技，是否需要檢查用戶(hù)的網(wǎng)絡(luò)狀態(tài)？還是只給出提示棚潦？

6.5.2??服務(wù)器沒(méi)有正常接收請(qǐng)求或沒(méi)有回復(fù)令漂，給出怎樣的提示較好？

6.5.3??手機(jī)停機(jī)丸边，驗(yàn)證碼叠必、數(shù)據(jù)傳輸如何處理？

6.5.4??手機(jī)沒(méi)開(kāi)wifi或者流量妹窖，如何指導(dǎo)用戶(hù)進(jìn)行設(shè)置纬朝？

7.第三方登錄

7.1??昵稱(chēng)的長(zhǎng)度設(shè)置，不同平臺(tái)的賬戶(hù)昵稱(chēng)的長(zhǎng)度要求不同骄呼，該如何獲裙部痢判没？

7.2??綁定多個(gè)第三方賬戶(hù)，公開(kāi)信息如何獲扔缇ァ哆致？公開(kāi)信息不同如何處理？

7.3 ?用戶(hù)使用第三方登錄患膛，是否還有綁定手機(jī)號(hào)碼摊阀？

And so on……

六、總結(jié)

登錄注冊(cè)的設(shè)計(jì)涉及到很多方面踪蹬，是最常見(jiàn)也是最容易被設(shè)計(jì)者忽視的地方胞此。每一個(gè)元素的設(shè)計(jì)都要獨(dú)立思考，不能照搬全抄跃捣，也不能異想天開(kāi)漱牵，需要提前理解和思考，多想幾個(gè)為什么疚漆，多問(wèn)自己幾個(gè)為什么酣胀？而在實(shí)際設(shè)計(jì)的過(guò)程中，需要重點(diǎn)考慮實(shí)際的應(yīng)用場(chǎng)景娶聘。

暫時(shí)就寫(xiě)這么多吧闻镶，累死本座了，敲打這么多字丸升，死了不少腦細(xì)胞铆农。

七、蘋(píng)果手機(jī)鎖屏機(jī)制：

前面5次：前面5次輸入錯(cuò)誤密碼時(shí)狡耻，手機(jī)會(huì)震動(dòng)并提示密碼不正確墩剖，但是可以繼續(xù)輸入，而且不需要任何等待時(shí)間夷狰。

第6次：第6次輸錯(cuò)密碼時(shí)岭皂，會(huì)顯示“iPhone已停用，請(qǐng)1分鐘后再輸入一次”沼头。在接下來(lái)的一分鐘內(nèi)爷绘，手機(jī)處于鎖定狀態(tài)，即使想輸入正確密碼瘫证，也無(wú)法輸入揉阎。

第7次：第7次輸錯(cuò)密碼，顯示“iPhone已停用背捌，請(qǐng)5分鐘后再輸入一次”毙籽，5分鐘內(nèi)無(wú)法操作；

第8次：第8次輸錯(cuò)密碼毡庆，15分鐘內(nèi)無(wú)法操作坑赡；

第9次：第9次輸錯(cuò)密碼烙如，60分鐘內(nèi)無(wú)法操作；

第10次：第10次輸錯(cuò)密碼毅否，顯示“iPhone已停用亚铁，連接iTunes”。這種情況下螟加，無(wú)論等待多長(zhǎng)時(shí)間都沒(méi)有機(jī)會(huì)再出現(xiàn)密碼框徘溢，哪怕是一萬(wàn)年也不行。（如果你不相信這一條捆探，請(qǐng)親自驗(yàn)證一下然爆。嘿嘿）