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

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

清晰的操作流程

APP的注冊登錄有四種情況:

不需要注冊登錄

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

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

第三方賬號登錄

用戶不需要輸入注冊登錄信息，直接選擇第三方賬號就能完成登錄。國內(nèi)常見的第三方賬號有微博、微信、QQ、豆瓣、人人等，國外常見的第三方賬號有Facebook，Twitter，Google等。

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

郵箱注冊

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

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

手機(jī)注冊

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

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

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

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

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

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

彈出相對應(yīng)的輸入鍵盤

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

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

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

對手機(jī)號碼進(jìn)行3 4 4的分布。

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

這是因為人的短期記憶是有限的，即一次只能記住有限的東西，如果強(qiáng)制記住很長的東西，短期記憶就很容易出錯。

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

登錄時增加一鍵清空icon

在登錄的時候偶爾會出現(xiàn)輸入錯誤，如果沒有這個清除的icon，用戶只能按鍵盤中的清除按鈕，需要一直按住直到輸入框為空。

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

清晰的錯誤反饋

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

臨時框也有兩種形式，一種是左邊的對話框形式，這需要用戶點擊確認(rèn)才能進(jìn)行下一步操作。一種是右邊toast的形式，彈出一兩秒后自動消失。個人更傾向于第二種形式，因為第一種形式相當(dāng)于強(qiáng)制中斷了用戶的操作，用戶需要點擊確認(rèn)才能回到原來的操作流程。而toast則起到了提示的效果，并且沒有打擾到用戶。

美觀的視覺設(shè)計

• 緊密：通過元素的遠(yuǎn)近將相似元素分為一組。
• 對齊：通過對齊，規(guī)范元素的排版 。
• 簡約：注冊登錄頁面的背景盡量簡約，從而讓主體信息更加突出。
• 對比：將重要的內(nèi)容放大，增加色塊背景；將相對次要的內(nèi)容縮小，降低明度等從而使得信息層級清晰。
• 均衡：注冊登錄頁面幾乎都是沿著中心線左右對稱的，信息是左右均衡擺放的。否者會導(dǎo)致頁面不平衡。

平時收藏的一些好看的注冊登錄頁面：

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