在滿足產(chǎn)品需求的前提下，讓注冊(cè)登錄有一個(gè)清晰的操作流程；良好的交互細(xì)節(jié)；美觀的視覺設(shè)計(jì)，是做好注冊(cè)登錄頁的葵花寶典。

作為產(chǎn)品的設(shè)計(jì)人員，每天都在考慮用戶需要什么，怎么樣的產(chǎn)品功能能解決用戶的需求，這個(gè)點(diǎn)很重要。但是我們也都知道，僅僅做到這點(diǎn)也是不夠的，因?yàn)橛脩粼谑褂卯a(chǎn)品時(shí)不止會(huì)遇到正常的流程。還會(huì)遇到?jīng)]網(wǎng)、沒內(nèi)容、服務(wù)器異常、內(nèi)容加載失敗、token失效、加載時(shí)間過長(zhǎng)等等一系列的問題。這些只占產(chǎn)品20%的特殊情況，一旦處理不當(dāng)，就會(huì)降低用戶體驗(yàn)，從而影響到公司利益。這也是我決定要寫《特殊情況下的APP設(shè)計(jì)》系列文章的原因，想站在交互設(shè)計(jì)師的立場(chǎng)，以用戶體驗(yàn)為設(shè)計(jì)為理念，來試圖系統(tǒng)性的解決這些問題。

第一篇寫的是如何設(shè)計(jì)注冊(cè)登錄頁。

朋友說某個(gè)APP不錯(cuò)，下載后正準(zhǔn)備好好體驗(yàn)一番，卻被糟糕的注冊(cè)登錄頁面弄的精疲力竭，無奈最終只能放棄。注冊(cè)登錄流程能讓用戶扭頭就走，也能讓產(chǎn)品獲得新用戶的芳心。

一個(gè)合格的注冊(cè)登錄頁面，應(yīng)該是具有清晰的操作流程，良好的交互細(xì)節(jié)和美觀的視覺設(shè)計(jì)。

一、清晰的操作流程

APP的注冊(cè)登錄有三種流程:

1.無需注冊(cè)登錄

常見于系統(tǒng)自帶的工具類APP，像經(jīng)常使用的鬧鐘、日歷、計(jì)算器等等；一些簡(jiǎn)單的第三方APP：樂流，榫卯等。

這些APP的特點(diǎn)都是功能相對(duì)單一，比較“輕”，不需要記錄用戶信息或行為歷史。

計(jì)算器&榫卯

2.非強(qiáng)制登錄

有注冊(cè)登錄的流程，但是用戶不需要注冊(cè)登錄也能使用產(chǎn)品的部分功能，也就是所謂的支持游客模式。

內(nèi)容類、購物類、娛樂類等都會(huì)使用這種形式。

非強(qiáng)制登錄又有兩種設(shè)計(jì)流程，一種是先展現(xiàn)出注冊(cè)登錄頁，但是允許用戶跳過。

網(wǎng)易云音樂&豆瓣

另一種是直接展示產(chǎn)品功能，當(dāng)用戶想深入使用某些功能時(shí)用戶得選擇注冊(cè)登錄。

開眼&same

3.強(qiáng)制登錄

用戶必須先進(jìn)行注冊(cè)登錄，才能正常使用產(chǎn)品功能。社交類、2B類、工作類的產(chǎn)品會(huì)使用這種流程。

強(qiáng)制注冊(cè)登錄的流程會(huì)影響用戶的轉(zhuǎn)化率，所以產(chǎn)品不是嚴(yán)重依賴于賬號(hào)系統(tǒng)的話，盡量采用非強(qiáng)制登錄的方式。

path&企業(yè)微信

二、不同的注冊(cè)登錄方式

1.郵箱

最開始的時(shí)候注冊(cè)登錄是基于PC的，也就是基于網(wǎng)頁，PC時(shí)代的互聯(lián)網(wǎng)產(chǎn)品多使用郵箱作為唯一ID。所以郵箱注冊(cè)成為主流，而且注冊(cè)過程中需要驗(yàn)證郵箱也很方便，用戶直接在PC端就可以完成所有操作。

現(xiàn)在很多APP依然保持著郵箱注冊(cè)的方式。

2.手機(jī)號(hào)

隨著移動(dòng)互聯(lián)網(wǎng)的到來，人們觸網(wǎng)的主要設(shè)備已經(jīng)從PC逐漸轉(zhuǎn)移到智能手機(jī)。

加上手機(jī)號(hào)碼的實(shí)名制、全球通業(yè)務(wù)的普及，使得手機(jī)號(hào)碼也具有了唯一標(biāo)示性。而且在移動(dòng)互聯(lián)網(wǎng)時(shí)代，用手機(jī)號(hào)碼作為登錄ID，并用短信驗(yàn)證碼的形式來驗(yàn)證ID，這些操作流程都基于手機(jī)端，特別方便快捷。所以手機(jī)號(hào)碼逐漸取代郵箱成為APP注冊(cè)登錄的主流方式。

3.用戶名

早期用戶名注冊(cè)登錄還很常見，但是隨著第三方登錄的普及，以及用戶名登錄自身的缺陷：“只能區(qū)別用戶的ID，并不能獲取到用戶的聯(lián)系信息”，用戶名注冊(cè)登錄的方式已經(jīng)退出主流。目前很多產(chǎn)品會(huì)將用戶名作為昵稱來用，而不是作為注冊(cè)登錄的ID來使用。

4.第三方賬號(hào)

郵箱、手機(jī)號(hào)、用戶名，都屬于自建賬號(hào)體系的方式，除此之外還有一種方式：第三方賬號(hào)登錄。用戶不需要輸入注冊(cè)登錄信息，直接選擇第三方賬號(hào)就能完成登錄。國內(nèi)常見的第三方賬號(hào)有微博、微信、QQ、豆瓣、人人等，國外常見的第三方賬號(hào)有Facebook，Twitter，Google等。

現(xiàn)在國內(nèi)除了超級(jí)APP之外的APP基本都支持第三方賬號(hào)登錄，這樣能簡(jiǎn)化用戶注冊(cè)登錄的流程，提高APP的用戶轉(zhuǎn)化率。

這四種方式各有優(yōu)劣，但總的來講，通過手機(jī)號(hào)注冊(cè)登錄會(huì)更方便，通過獲取驗(yàn)證碼輸入四位或六位數(shù)字就能完成注冊(cè)登錄。

三、注重交互細(xì)節(jié)

APP的優(yōu)秀與否，由很多因素決定，而良好的交互細(xì)節(jié)是每一個(gè)優(yōu)秀APP的共同品質(zhì)。只有從用戶場(chǎng)景出發(fā)，并從用戶的視角來思考產(chǎn)品，才能設(shè)計(jì)出打動(dòng)人心的APP。

1.用顯示/隱藏icon代替輸入兩遍密碼

為了確保密碼輸入正確，很多APP需要用戶輸入兩遍密碼來確定密碼輸入無誤，但這無疑增加了用戶的工作量。替代方案是在密碼輸入框右側(cè)增加一個(gè)“顯示/隱藏icon”，讓用戶在輸入完一遍密碼后可以選擇點(diǎn)開“顯示/隱藏icon”來確保密碼輸入無誤，減少用戶的工作量。

issuu&in

2.彈出相對(duì)應(yīng)的輸入鍵盤

• 點(diǎn)開郵箱輸入框，彈出帶有@的英文輸入鍵盤。
• 點(diǎn)開手機(jī)號(hào)輸入框，彈出九宮格數(shù)字輸入鍵盤。
• 點(diǎn)開密碼輸入框，彈出英文輸入鍵盤。

這是很小的細(xì)節(jié)，雖然用戶可能不知道哪里不對(duì)，但是他能體會(huì)到好不好用。一個(gè)APP注意了這點(diǎn)，那用戶就會(huì)覺得這個(gè)APP好用。而另一個(gè)APP沒有做到這點(diǎn)，無論點(diǎn)擊哪個(gè)輸入框彈出的都是九宮格中文輸入鍵盤，用戶就會(huì)覺得這個(gè)APP不太好用。

作為設(shè)計(jì)師，要知道用戶覺得不好用的原因是什么，這樣才能對(duì)癥下藥，改善用戶體驗(yàn)。

3.對(duì)手機(jī)號(hào)碼進(jìn)行3 4 4的分布。

這個(gè)規(guī)則不僅適用于手機(jī)號(hào)碼，包括銀行賬號(hào)、轉(zhuǎn)賬金額等等。

這是因?yàn)槿说亩唐谟洃浭怯邢薜?，即一次只能記住有限的東西，如果強(qiáng)制記住很長(zhǎng)的東西，短期記憶就很容易出錯(cuò)。

所以將數(shù)字以4或者3為單位分組，有利于用戶閱讀、編輯、校對(duì)手機(jī)號(hào)碼。

淘寶&Facebook

4.登錄時(shí)增加一鍵清空icon。

在登錄的時(shí)候偶爾會(huì)出現(xiàn)輸入錯(cuò)誤，如果沒有這個(gè)清除的icon，用戶只能按鍵盤中的清除按鈕，需要一直按住直到輸入框?yàn)榭铡?/p>

一個(gè)是只需要點(diǎn)一次就能清空，一個(gè)需要長(zhǎng)按一段時(shí)間或者連續(xù)按多次才能清空，孰優(yōu)孰劣可想而知。

dosnap&nice

5.清晰的錯(cuò)誤反饋。

當(dāng)用戶輸入錯(cuò)誤信息時(shí)，最好利用臨時(shí)框的形式提示用戶。而不是不做反應(yīng)讓用戶自己去猜到底是怎么回事。

臨時(shí)框也有兩種形式，一種是下圖左側(cè)的對(duì)話框形式，這需要用戶點(diǎn)擊確認(rèn)才能進(jìn)行下一步操作。一種是toast的形式，彈出一兩秒后自動(dòng)消失。個(gè)人更傾向于第二種形式，因?yàn)榈谝环N形式相當(dāng)于強(qiáng)制中斷了用戶的操作，用戶需要點(diǎn)擊確認(rèn)才能回到原來的操作流程。而toast則起到了提示的效果，并且沒有打擾到用戶。下圖右側(cè)的airbnb，在用戶輸錯(cuò)密碼時(shí)，不光有底部的臨時(shí)框提示，還將整個(gè)登錄頁面的背景色油綠色變?yōu)樾涯康某壬@種設(shè)計(jì)在提示用戶的前提下，還做到了賞心悅目，是個(gè)不錯(cuò)的設(shè)計(jì)思路。

QQ&airbnb

4.美觀的視覺設(shè)計(jì)

• 緊密：通過元素的遠(yuǎn)近將相似元素分為一組。
• 對(duì)齊：通過對(duì)齊，規(guī)范元素的排版 。
• 簡(jiǎn)約：注冊(cè)登錄頁面的背景盡量簡(jiǎn)約，從而讓主體信息更加突出。
• 對(duì)比：將重要的內(nèi)容放大，增加色塊背景；將相對(duì)次要的內(nèi)容縮小，降低明度等從而使得信息層級(jí)清晰。
• 均衡：注冊(cè)登錄頁面幾乎都是沿著中心線左右對(duì)稱的，信息是左右均衡擺放的。否者會(huì)導(dǎo)致頁面不平衡。
• 品牌調(diào)性和產(chǎn)品定位：視覺風(fēng)格要能體現(xiàn)出品牌調(diào)性，也要做到符合產(chǎn)品的定位。

平時(shí)收藏的一些視覺不錯(cuò)的注冊(cè)登錄頁面：

bilibili&facebook

未知&UBER

總結(jié)

早期互聯(lián)網(wǎng)產(chǎn)品多使用郵箱或用戶名登錄，這是PC時(shí)代人圍繞設(shè)備走的特性決定的，而現(xiàn)在是移動(dòng)互聯(lián)網(wǎng)時(shí)代，是設(shè)備圍繞人走，手機(jī)號(hào)自然成了主流的注冊(cè)登錄方式。而現(xiàn)在，如果你的產(chǎn)品沒有自建賬號(hào)系統(tǒng)的需求，請(qǐng)直接使用第三方登錄的方式，其快捷簡(jiǎn)單的操作，無疑是成本最小的注冊(cè)登錄方式。

如果之前是郵箱注冊(cè)登錄的產(chǎn)品，建議后期加入綁定手機(jī)號(hào)碼功能，在允許用戶使用郵箱登錄的前提下，也提供手機(jī)號(hào)快捷注冊(cè)登錄的方式，還可以增加第三方登錄的方式。畢竟注冊(cè)登錄屬于產(chǎn)品需求，并不是用戶需求，盡可能降低用戶在注冊(cè)登錄時(shí)的成本，能提高新用戶的轉(zhuǎn)化率，幫助產(chǎn)品成功。

在滿足產(chǎn)品需求的前提下，讓注冊(cè)登錄有一個(gè)清晰的操作流程；良好的交互細(xì)節(jié)；美觀的視覺設(shè)計(jì)，是做好注冊(cè)登錄頁的葵花寶典。

#專欄作家#

鄒志楠，微信公眾號(hào)：UE修養(yǎng)，人人都是產(chǎn)品經(jīng)理專欄作家。交互設(shè)計(jì)師，專注于互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。