注冊登錄一直是應用中必不可(kě)少(shǎo)的一環，用戶打開(kāi)應用可(kě)能第一步就是登錄頁面，這相當于一款應用的臉面，也是用戶使用産品的源頭。當然也是因為(wèi)不常被用到所以更容易被忽視(shì)，它作(zuò)為(wèi)一項基礎功能，使用場(chǎng)景一般是用戶初次使用應用或者退出登錄，又或是大(dà)版本更新和(hé)登錄過期才會(huì)使用到。注冊登錄的意義就在于給用戶獨有(yǒu)的個(gè)人(rén)中心，包括數(shù)據的同步，或是用戶注冊後會(huì)通(tōng)過用戶已完善的資料進行(xíng)相關的內(nèi)容推薦。

登錄相對而言屬于高(gāo)頻次的操作(zuò)，注冊、修改密碼等屬于相對低(dī)頻次的操作(zuò)，但(dàn)是他們都會(huì)關聯到産品內(nèi)的個(gè)人(rén)資料和(hé)設置模塊。幾乎所有(yǒu)的社交應用都是需要注冊登錄的，用戶擁有(yǒu)了個(gè)人(rén)賬号才能繼續使用産品。

當然也有(yǒu)一些(xiē)系統的應用是不需要注冊登錄就可(kě)以使用的，比如系統自帶的計(jì)算(suàn)器(qì)、日曆、天氣等或是一些(xiē)第三方的輕應用，這裏就不多(duō)贅述了，下面主要還(hái)是說說需要用到注冊登錄功能的情況。

注冊/登錄整體(tǐ)結構：

△ 以下圖片來(lái)源于應用截圖，僅作(zuò)為(wèi)學習交流使用

一、注冊登錄的方式

1. 隻使用第三方賬号注冊登錄

這種方式比較少(shǎo)但(dàn)是無疑是最快捷的方式，相信大(dà)家(jiā)平時(shí)應該用這種方式也比較多(duō)，因為(wèi)可(kě)以避免使用手機注冊帶來(lái)的繁瑣步驟，可(kě)以節約很(hěn)多(duō)時(shí)間(jiān)，你(nǐ)在第三方應用中進行(xíng)授權後産品會(huì)直接調用接口，生(shēng)成ID登錄後，你(nǐ)的頭像、昵稱等個(gè)人(rén)信息甚至可(kě)能同時(shí)會(huì)獲取你(nǐ)的好友(yǒu)列表，讓你(nǐ)知道(dào)還(hái)有(yǒu)哪些(xiē)好友(yǒu)也在使用産品，可(kě)以有(yǒu)效地減少(shǎo)對産品的陌生(shēng)感，同時(shí)也便于應用在第三方中進行(xíng)分享。

當然這種方式對産品也很(hěn)有(yǒu)利，因為(wèi)相信很(hěn)多(duō)用戶在不了解産品的情況下，用戶可(kě)能隻是想初步了解一下産品，但(dàn)是又不想進行(xíng)手機注冊那(nà)麽麻煩，所以就直接使用第三方進行(xíng)注冊吧(ba)，待進入應用初步使用了解後，再通(tōng)過産品的用戶引導（比如紅點标記或是局部引導等）功能再進行(xíng)手機号/郵箱/微信/微博等賬号的綁定，這樣做(zuò)對新用戶的産生(shēng)有(yǒu)積極作(zuò)用。

我遇到過當已經使用了第三方應用注冊登錄了之後，會(huì)立即出現讓用戶綁定手機号的頁面，這樣做(zuò)是想快速産生(shēng)新用戶，出發點是好的，但(dàn)是我覺得(de)用戶在不了解産品的情況下，綁定手機号的可(kě)能性很(hěn)低(dī)，所以最好可(kě)以在綁定手機号頁面有(yǒu)「跳(tiào)過」功能，給用戶選擇的餘地，不要強制(zhì)用戶，待初步了解産品後再通(tōng)過引導進行(xíng)綁定，這樣做(zuò)最佳。

2. 隻使用手機号注冊登錄

使用手機号獲取驗證碼是目前最常用的注冊登錄方式，這種方式的優勢不必多(duō)說，相信大(dà)家(jiā)都很(hěn)熟悉流程，通(tōng)過發送短(duǎn)信獲取驗證碼在60- 90 秒(miǎo)內(nèi)進行(xíng)注冊登錄，這麽做(zuò)是為(wèi)了确認用戶擁有(yǒu)該手機号的使用權。手機号+密碼是用戶常用的方式，而手機号+驗證碼是比較簡便的方式。這裏注意一點的是在輸入手機号後，為(wèi)了讓用戶查看是否輸入正确，建議手機号顯示樣式為(wèi)3-4- 4 模式（比如156 1815 5555），這些(xiē)都是細微之處，雖然無關大(dà)雅，但(dàn)是可(kě)以看出一個(gè)産品的用心之處，比如下圖可(kě)以對比一下，明(míng)顯圖二更優。

手機号也是商家(jiā)進行(xíng)用戶維護的有(yǒu)效手段，畢竟手機都是随身攜帶，可(kě)以在節假日發送祝福或是促銷短(duǎn)信，也可(kě)以在你(nǐ)長期未使用産品，進行(xíng)短(duǎn)信提示，避免你(nǐ)将産品遺忘，但(dàn)是過度的短(duǎn)信轟炸則會(huì)讓用戶感到反感。另外使用手機号注冊登錄，需要做(zuò)一個(gè)判斷，是否是第一次登錄，是的話(huà)就跳(tiào)轉引導頁，不是的話(huà)就跳(tiào)轉至首頁。

這裏插一句題外話(huà)，你(nǐ)們有(yǒu)沒有(yǒu)遇到過在已經注冊成功後但(dàn)是還(hái)需要重新輸入賬号密碼登錄的情況，其實這種做(zuò)法個(gè)人(rén)覺得(de)是比較多(duō)餘的，可(kě)能 2 次輸入賬号密碼可(kě)以加強用戶的記憶，但(dàn)是可(kě)能很(hěn)多(duō)人(rén)用手機号注冊都是用的一個(gè)同密碼，因為(wèi)現在的應用可(kě)選擇的餘地實在是太多(duō)了，如果每個(gè)應用都使用不同的密碼可(kě)能很(hěn)難記得(de)住。

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

這種樣式是最常見的，也是上(shàng)面兩種樣式的結合，這種樣式給用戶留有(yǒu)選擇的餘地，自願使用手機号或是第三方。但(dàn)是一般這樣的組合方式多(duō)數(shù)是希望用戶使用手機号注冊，所以手機注冊登錄比較突出，第三方注冊會(huì)置于頁面底部，相對弱化。 

但(dàn)是還(hái)有(yǒu)一類是希望用戶使用第三方登錄，弱化手機号注冊登錄的情況：BAT旗下的衆多(duō)應用，會(huì)使用一個(gè)賬号或是進行(xíng)賬号關聯，比如阿裏旗下的應用閑魚、菜鳥裹裹等，登錄時(shí)為(wèi)了用戶數(shù)據之間(jiān)連接，會(huì)推薦用戶使用淘寶賬号進行(xíng)登錄，從而弱化了手機号注冊登錄，這是出于産品屬性或是戰略需求考慮，無可(kě)厚非。

4. 使用郵箱注冊登錄

使用郵箱進行(xíng)注冊登錄也是比較常用的方式，多(duō)數(shù)用于 pc端，郵箱容易記憶，便于頻繁使用的産品，注冊後郵箱會(huì)收到驗證鏈接，驗證成功後會(huì)自動跳(tiào)轉進入該網頁首頁。因為(wèi) web端屏幕較大(dà)，還(hái)是和(hé)移動端有(yǒu)點差别，需要填寫的表單可(kě)能也會(huì)比較多(duō)。

當然移動端也有(yǒu)使用郵箱注冊的，可(kě)能是國外的應用居多(duō)，比如 facebook、twitter、dribbble……或是國內(nèi)的應用同時(shí)擁有(yǒu)網頁和(hé)移動端，可(kě)以将用戶數(shù)據進行(xíng)同步。

5. 先體(tǐ)驗後注冊登錄

這種方式也很(hěn)多(duō)見，一般多(duō)為(wèi)閱讀類、遊戲類或是電(diàn)商類産品，用戶多(duō)為(wèi)遊客狀态，可(kě)能隻是進來(lái)逛逛，可(kě)能暫時(shí)還(hái)沒有(yǒu)使用到添加、收藏、關注、評論、購買等功能，如果使用這些(xiē)功能就必須要進行(xíng)注冊登錄了，注意在完成注冊登錄後記得(de)頁面要回到之前浏覽的頁面，而不是回到首頁。

6. 短(duǎn)信注冊

比較少(shǎo)見的一種方式，通(tōng)過編輯短(duǎn)信發送至XXX後，可(kě)獲取賬号和(hé)密碼。這種方式屬于早期的一種方式，現在基本用不到了，就不多(duō)說了。

二、注冊登錄頁面要點

1. 簡潔風 VS logo+輸入框iOS 

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

2. 分步驟注冊登錄

現在有(yǒu)很(hěn)多(duō)應用是采用分步驟進行(xíng)注冊的，比如先輸入手機号，點擊「下一步」的同時(shí)，系統查詢該手機号是否可(kě)以注冊，通(tōng)過的話(huà)則進入輸入驗證碼頁面，這樣做(zuò)的好處是可(kě)以及時(shí)反饋給用戶，避免了用戶在輸完手機号和(hé)驗證碼之後出現錯誤 toast 的情況。需要注意的是步驟不宜過多(duō)，建議 3 步以內(nèi)，如果你(nǐ)的産品對用戶來(lái)說不是非用不可(kě)，可(kě)能會(huì)有(yǒu)很(hěn)多(duō)用戶會(huì)放棄注冊。

3. 注冊登錄合二為(wèi)一

這種方式和(hé)分步驟注冊類似，将注冊和(hé)登錄合到一起，不管你(nǐ)是否有(yǒu)注冊，隻要輸入手機号再填寫驗證碼，成功後即可(kě)使用産品，比如小(xiǎo)黃車(chē)就是使用這一方式。

4. 輸入框提示語

輸入框提示語是必不可(kě)少(shǎo)的，措詞需要簡潔，大(dà)部分的做(zuò)法是點擊輸入框後提示語自動消失，這樣做(zuò)也是可(kě)以，畢竟需要填寫的選項不是很(hěn)多(duō)，用戶不易忘記；當然更好的做(zuò)法是保留提示語，比如星巴克的登錄頁面，在點擊輸入框後，提示語會(huì)上(shàng)移，依舊(jiù)保留，隻是這樣的開(kāi)發成本可(kě)能會(huì)稍大(dà)一點。

5. 忘記密碼忘記密碼的功能一般都是放在登錄頁面，因為(wèi)兩者有(yǒu)較強的關聯性。使用忘記密碼功能一般是通(tōng)過手機号發送驗證碼，驗證通(tōng)過後再進行(xíng)新密碼的設置；

如果起初是用郵箱注冊登錄的話(huà)就要到郵箱中進行(xíng)驗證，驗證通(tōng)過後再進行(xíng)新密碼的設置。

6. toast 提示

這裏的 toast 提示一般用于有(yǒu)錯誤發生(shēng)的情況下，比如賬号不存在、賬号已被占用、密碼錯誤、驗證碼錯誤等，及時(shí)的反饋給用戶注冊登錄不成功的地方在哪裏，以免用戶摸不着頭腦(nǎo)，憤而離開(kāi)應用。 

三、其他要點

1. 安全碼

出于安全考慮，有(yǒu)些(xiē)應用會(huì)讓用戶輸入圖形驗證碼、字符驗證碼、旋轉圖片、滑動驗證等方式，目的是确認是人(rén)為(wèi)注冊而非軟件惡意注冊。

2. 用戶協議

用戶協議看似非常的不起眼，用戶也很(hěn)少(shǎo)會(huì)去點擊查看，出現在注冊頁面的情況居多(duō)。早期一般是默認被選中狀态或是點擊注冊即視(shì)為(wèi)同意協議條款（圖一），用戶填完賬戶密碼之後點擊注冊就完成了。但(dàn)是前去年支付寶默認用戶協議被選中導緻的一系列新聞提醒我們，用戶協議最好需要用戶自己去點擊确認，現在很(hěn)多(duō)應用也開(kāi)始這麽做(zuò)，在沒有(yǒu)勾選用戶協議之前，「注冊」button 是無法點擊的（圖二）。

3. 密碼眼睛開(kāi)合

出于使用場(chǎng)景考慮，比如在戶外或是注冊登錄時(shí)身邊有(yǒu)人(rén)，為(wèi)了有(yǒu)效保護用戶的密碼隐私，可(kě)在輸入密碼時(shí)關閉眼睛 icon，隻顯示密碼點；開(kāi)啓眼睛 icon 時(shí)是為(wèi)了讓用戶清楚的看見自己的密碼，避免密碼輸入錯誤。

4. 一鍵删除

賬戶名/密碼這個(gè)功能是給用戶在注冊登錄頁面輸入有(yǒu)誤或是切換賬戶時(shí)使用，可(kě)以有(yǒu)效減少(shǎo)用戶的點擊次數(shù)，提升用戶體(tǐ)驗。

5. 保留賬戶名數(shù)據

在用戶曾登錄過的情況下，應該保留用戶的賬戶名數(shù)據，這樣用戶重新登錄時(shí)隻需填寫密碼或驗證碼即可(kě)。當然，用戶如果想重新輸入賬戶名，一鍵删除數(shù)據的功能也顯得(de)很(hěn)有(yǒu)必要。

還(hái)有(yǒu)一點是多(duō)賬戶之間(jiān)的登錄切換，在登錄時(shí)可(kě)以選擇多(duō)個(gè)賬号，這個(gè)功能在 to C類應用比較少(shǎo)，一般是 to B類應用可(kě)能會(huì)用到，因為(wèi)企業可(kě)能會(huì)擁有(yǒu)多(duō)個(gè)賬号，這個(gè)功能就會(huì)顯得(de)很(hěn)有(yǒu)必要。

6. 賬号後綴關聯

這種針對使用郵箱注冊，比如說在用戶填寫賬戶名輸入@的同時(shí)，關聯出@qq.com、@163.com等，可(kě)以減少(shǎo)用戶的輸入，體(tǐ)驗也會(huì)更好。

7. 去除雞肋操作(zuò)

在注冊登錄時(shí)也會(huì)有(yǒu)一些(xiē)比較多(duō)餘的操作(zuò)，比如二次确認密碼、完善個(gè)人(rén)資料等，這些(xiē)操作(zuò)最好是放置在個(gè)人(rén)中心或是設置裏讓用戶自行(xíng)填寫，在注冊登錄頁面隻保留必須填寫的內(nèi)容。

總結綜上(shàng)所述，注冊登錄看似是很(hěn)簡單的頁面布局，并且容易忽視(shì)，但(dàn)是它的地位是不可(kě)忽視(shì)的，其中的交互方式和(hé)細微之處還(hái)需要我們多(duō)多(duō)考慮，不同的産品需要根據自己的屬性來(lái)選擇符合自己的方式。