以小見(jiàn)大：如何設(shè)計(jì)注冊(cè)登錄頁(yè)？

本文由 @鄒志楠 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理

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

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

清晰的操作流程

APP的注冊(cè)登錄有四種情況:

不需要注冊(cè)登錄

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

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

第三方賬號(hào)登錄

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

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

郵箱注冊(cè)

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

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

手機(jī)注冊(cè)

隨著移動(dòng)互聯(lián)網(wǎng)的到來(lái)，人們觸網(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)證碼的形式來(lái)驗(yàn)證ID，這些操作流程都基于手機(jī)端。所以手機(jī)號(hào)碼逐漸取代郵箱成為APP注冊(cè)登錄的主流方式。

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

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

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

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

彈出相對(duì)應(yīng)的輸入鍵盤(pán)

點(diǎn)開(kāi)郵箱輸入框，彈出帶有@的英文輸入鍵盤(pán)。

點(diǎn)開(kāi)手機(jī)號(hào)輸入框，彈出九宮格數(shù)字輸入鍵盤(pán)。

點(diǎn)開(kāi)密碼輸入框，彈出英文輸入鍵盤(pán)。

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

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

對(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為單位分組，有利于用戶(hù)閱讀、編輯、校對(duì)手機(jī)號(hào)碼。

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

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

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

清晰的錯(cuò)誤反饋

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

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

美觀(guān)的視覺(jué)設(shè)計(jì)

緊密：通過(guò)元素的遠(yuǎn)近將相似元素分為一組。

對(duì)齊：通過(guò)對(duì)齊，規(guī)范元素的排版 。

簡(jiǎn)約：注冊(cè)登錄頁(yè)面的背景盡量簡(jiǎn)約，從而讓主體信息更加突出。

對(duì)比：將重要的內(nèi)容放大，增加色塊背景；將相對(duì)次要的內(nèi)容縮小，降低明度等從而使得信息層級(jí)清晰。

均衡：注冊(cè)登錄頁(yè)面幾乎都是沿著中心線(xiàn)左右對(duì)稱(chēng)的，信息是左右均衡擺放的。否者會(huì)導(dǎo)致頁(yè)面不平衡。

平時(shí)收藏的一些好看的注冊(cè)登錄頁(yè)面：