UI界面設(shè)計

如何設(shè)計App 的注冊和登錄頁面呢？

16022

注冊登錄一直是應(yīng)用中必不可少的一環(huán)，用戶打開應(yīng)用可能第一步就是登錄頁面，這相當于一款應(yīng)用的臉面，也是用戶使用產(chǎn)品的源頭。當然也是因為不常被用到所以更最容易被忽視，它作為一項基礎(chǔ)功能，使用場景一般是用戶初次使用應(yīng)用或者退出登錄，又或是大版本更新和登錄過期才會使用到。注冊登錄的意義就在于給用戶獨有的個人中心，包括數(shù)據(jù)的同步，或是用戶注冊后會通過用戶已完善的資料進行相關(guān)的內(nèi)容推薦。

登錄相對而言屬于高頻次的操作，注冊、修改密碼等屬于相對低頻次的操作，但是他們都會關(guān)聯(lián)到產(chǎn)品內(nèi)的個人資料和設(shè)置模塊。幾乎所有的社交應(yīng)用都是需要注冊登錄的，用戶擁有了個人賬號才能繼續(xù)使用產(chǎn)品。

當然也有一些系統(tǒng)的應(yīng)用是不需要注冊登錄就可以使用的，比如系統(tǒng)自帶的計算器、日歷、天氣等或是一些第三方的輕應(yīng)用，這里就不多贅述了，下面主要還是說說需要用到注冊登錄功能的情況。

還是先來看一下整體結(jié)構(gòu)：

（以下圖片來源于應(yīng)用截圖，僅作為學習交流使用）

一、注冊登錄的方式

1.只使用第三方賬號注冊登錄

這種方式比較少但是無疑是最快捷的方式，相信大家平時應(yīng)該用這種方式也比較多，因為可以避免使用手機注冊帶來的繁瑣步驟，可以節(jié)約很多時間，你在第三方應(yīng)用中進行授權(quán)后產(chǎn)品會直接調(diào)用接口，生成ID登錄后，你的頭像、昵稱等個人信息甚至可能同時會獲取你的好友列表，讓你知道還有哪些好友也在使用產(chǎn)品，可以有效地減少對產(chǎn)品的陌生感，同時也便于應(yīng)用在第三方中進行分享。

當然這種方式對產(chǎn)品也很有利，因為相信很多用戶在不了解產(chǎn)品的情況下，用戶可能只是想初步了解一下產(chǎn)品，但是又不想進行手機注冊那么麻煩，所以就直接使用第三方進行注冊吧，待進入應(yīng)用初步使用了解后，再通過產(chǎn)品的用戶引導（比如紅點標記或是局部引導等）功能再進行手機號/郵箱/微信/微博等賬號的綁定，這樣做對新用戶的產(chǎn)生有積極作用。

我遇到過當已經(jīng)使用了第三方應(yīng)用注冊登錄了之后，會立即出現(xiàn)讓用戶綁定手機號的頁面，這樣做是想快速產(chǎn)生新用戶，出發(fā)點是好的，但是我覺得用戶在不了解產(chǎn)品的情況下，綁定手機號的可能性很低，所以最好可以在綁定手機號頁面有“跳過”功能，給用戶選擇的余地，不要強制用戶，待初步了解產(chǎn)品后再通過引導進行綁定，這樣做最佳。

2.只使用手機號注冊登錄

使用手機號獲取驗證碼是目前最常用的注冊登錄方式，這種方式的優(yōu)勢不必多說，相信大家都很熟悉流程，通過發(fā)送短信獲取驗證碼在60-90秒內(nèi)進行注冊登錄，這么做是為了確認用戶擁有該手機號的使用權(quán)。手機號+密碼是用戶常用的方式，而手機號+驗證碼是比較簡便的方式。這里注意一點的是在輸入手機號后，為了讓用戶查看是否輸入正確，建議手機號顯示樣式為3-4-4模式（比如156 1815 5555），這些都是細微之處，雖然無關(guān)大雅，但是可以看出一個產(chǎn)品的用心之處，比如下圖可以對比一下，明顯圖二更優(yōu)。

手機號也是商家進行用戶維護的有效手段，畢竟手機都是隨身攜帶，可以在節(jié)假日發(fā)送祝福或是促銷短信，也可以在你長期未使用產(chǎn)品，進行短信提示，避免你將產(chǎn)品遺忘，但是過度的短信轟炸則會讓用戶感到反感。另外使用手機號注冊登錄，需要做一個判斷，是否是第一次登錄，是的話就跳轉(zhuǎn)引導頁，不是的話就跳轉(zhuǎn)至首頁。

這里插一句題外話，你們有沒有遇到過在已經(jīng)注冊成功后但是還需要重新輸入賬號密碼登錄的情況，其實這種做法個人覺得是比較多余的，可能2次輸入賬號密碼可以加強用戶的記憶，但是可能很多人用手機號注冊都是用的一個同密碼，因為現(xiàn)在的應(yīng)用可選擇的余地實在是太多了，如果每個應(yīng)用都使用不同的密碼可能很難記得住。

3.使用手機號/第三方賬號注冊登錄

這種樣式是最常見的，也是上面兩種樣式的結(jié)合，這種樣式給用戶留有選擇的余地，自愿使用手機號或是第三方。但是一般這樣的組合方式多數(shù)是希望用戶使用手機號注冊，所以手機注冊登錄比較突出，第三方注冊會置于頁面底部，相對弱化。

但是還有一類是希望用戶使用第三方登錄，弱化手機號注冊登錄的情況：BAT旗下的眾多應(yīng)用，會使用一個賬號或是進行賬號關(guān)聯(lián)，比如阿里旗下的應(yīng)用閑魚、菜鳥裹裹等，登錄時為了用戶數(shù)據(jù)之間連接，會推薦用戶使用淘寶賬號進行登錄，從而弱化了手機號注冊登錄，這是出于產(chǎn)品屬性或是戰(zhàn)略需求考慮，無可厚非。

4.使用郵箱注冊登錄

使用郵箱進行注冊登錄也是比較常用的方式，多數(shù)用于pc端，郵箱容易記憶，便于頻繁使用的產(chǎn)品，注冊后郵箱會收到驗證鏈接，驗證成功后會自動跳轉(zhuǎn)進入該網(wǎng)頁首頁。因為web端屏幕較大，還是和移動端有點差別，需要填寫的表單可能也會比較多。

當然移動端也有使用郵箱注冊的，可能是國外的應(yīng)用居多，比如facebook、twitter、dribbble…或是國內(nèi)的應(yīng)用同時擁有網(wǎng)頁和移動端，可以將用戶數(shù)據(jù)進行同步。

5.先體驗后注冊登錄

這種方式也很多見，一般多為閱讀類、游戲類或是電商類產(chǎn)品，用戶多為游客狀態(tài)，可能只是進來逛逛，可能暫時還沒有使用到添加、收藏、關(guān)注、評論、購買等功能，如果使用這些功能就必須要進行注冊登錄了，注意在完成注冊登錄后記得頁面要回到之前瀏覽的頁面，而不是回到首頁。

6.短信注冊

比較少見的一種方式，通過編輯短信發(fā)送至XXX后，可獲取賬號和密碼。這種方式屬于早期的一種方式，現(xiàn)在基本用不到了，就不多說了。

二、注冊登錄頁面要點

1.簡潔風 VS logo+輸入框

iOS 11更新帶動了新的設(shè)計趨勢，大標題+留白被廣泛使用，注冊登錄也不例外，現(xiàn)在很多產(chǎn)品都使用相對簡潔的設(shè)計（下面左圖），僅使用大標題和必要的線框和提示語，讓用戶只聚焦注冊登錄本身，去除多余的干擾元素，可以節(jié)省用戶的時間。相對早期的設(shè)計手法是在頁面中加入logo（下面右圖），好處是可以進一步強化用戶對產(chǎn)品品牌的記憶點。兩種方式各有優(yōu)點，沒有對錯，產(chǎn)品可以酌情使用。

2.分步驟注冊登錄

現(xiàn)在有很多應(yīng)用是采用分步驟進行注冊的，比如先輸入手機號，點擊“下一步”的同時，系統(tǒng)查詢該手機號是否可以注冊，通過的話則進入輸入驗證碼頁面，這樣做的好處是可以及時反饋給用戶，避免了用戶在輸完手機號和驗證碼之后出現(xiàn)錯誤toast的情況。需要注意的是步驟不宜過多，建議3步以內(nèi)，如果你的產(chǎn)品對用戶來說不是非用不可，可能會有很多用戶會放棄注冊。

3.注冊登錄合二為一

這種方式和分步驟注冊類似，將注冊和登錄合到一起，不管你是否有注冊，只要輸入手機號再填寫驗證碼，成功后即可使用產(chǎn)品，比如小黃車就是使用這一方式。

4.輸入框提示語

輸入框提示語是必不可少的，措詞需要簡潔，大部分的做法是點擊輸入框后提示語自動消失，這樣做也是可以，畢竟需要填寫的選項不是很多，用戶不易忘記；當然更好的做法是保留提示語，比如星巴克的登錄頁面，在點擊輸入框后，提示語會上移，依舊保留，只是這樣的開發(fā)成本可能會稍大一點。

5.忘記密碼

忘記密碼的功能一般都是放在登錄頁面，因為兩者有較強的關(guān)聯(lián)性。使用忘記密碼功能一般是通過手機號發(fā)送驗證碼，驗證通過后再進行新密碼的設(shè)置；如果起初是用郵箱注冊登錄的話就要到郵箱中進行驗證，驗證通過后再進行新密碼的設(shè)置。

6.toast提示

這里的toast提示一般用于有錯誤發(fā)生的情況下，比如賬號不存在、賬號已被占用、密碼錯誤、驗證碼錯誤等，及時的反饋給用戶注冊登錄不成功的地方在哪里，以免用戶摸不著頭腦，憤而離開應(yīng)用。

三、其他要點

1.安全碼

出于安全考慮，有些應(yīng)用會讓用戶輸入圖形驗證碼、字符驗證碼、旋轉(zhuǎn)圖片、滑動驗證等方式，目的是確認是人為注冊而非軟件惡意注冊。

2.用戶協(xié)議

用戶協(xié)議看似非常的不起眼，用戶也很少會去點擊查看，出現(xiàn)在注冊頁面的情況居多。早期一般是默認被選中狀態(tài)或是點擊注冊即視為同意協(xié)議條款（圖一），用戶填完賬戶密碼之后點擊注冊就完成了。但是前去年支付寶默認用戶協(xié)議被選中導致的一系列新聞提醒我們，用戶協(xié)議最好需要用戶自己去點擊確認，現(xiàn)在很多應(yīng)用也開始這么做，在沒有勾選用戶協(xié)議之前，“注冊”button是無法點擊的（圖二）。