以小見大:如何設(shè)計(jì)注冊(cè)登錄頁(yè)?

19 評(píng)論 39113 瀏覽 367 收藏 9 分鐘

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

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

清晰的操作流程

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

不需要注冊(cè)登錄

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

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

1

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

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

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

2

郵箱注冊(cè)

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

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

3

4

手機(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è)登錄的主流方式。

5

6

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

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

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

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

7

彈出相對(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),無(wú)論點(diǎn)擊哪個(gè)輸入框彈出的都是九宮格中文輸入鍵盤,用戶就會(huì)覺得這個(gè)APP不太好用。

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

8

對(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)碼。

9

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

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

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

90

清晰的錯(cuò)誤反饋

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

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

91

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

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

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

92

93

94

 

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 謝謝,很好的文章 ??

    來(lái)自中國(guó) 回復(fù)
  2. 喜歡你的頭像 哈哈哈哈

    回復(fù)
  3. 受教了

    來(lái)自山東 回復(fù)
  4. 謝謝 受教了

    來(lái)自北京 回復(fù)
  5. 好犀利啊,感覺又升級(jí)了

    來(lái)自廣東 回復(fù)
  6. 對(duì)一個(gè)剛?cè)腴T的產(chǎn)品經(jīng)理來(lái)說(shuō)受教了

    回復(fù)
  7. 提示框,并沒有覺得第二種好,你不覺得第二種有的人找半天,沒發(fā)現(xiàn)那個(gè)toast嗎?

    回復(fù)
    1. 設(shè)計(jì)toast的時(shí)候也是需要考慮如何做到不干擾操作而又能提醒到用戶的……

      回復(fù)
    2. 我是說(shuō)片刻那個(gè)提示框,不夠明顯。不用點(diǎn)擊就可以了,放在登陸下方,不打斷用戶操作就可以了,沒必要為了美觀做的都快找不到了,首先是好用,然后才是美觀。

      回復(fù)
    3. 作者思路應(yīng)該是針對(duì)toast的提示內(nèi)容,而不是具體的展現(xiàn)形式、這方面交互應(yīng)該設(shè)計(jì)的更好

      來(lái)自廣東 回復(fù)
    4. 個(gè)人覺得右側(cè)會(huì)好一些,在片刻里,用偏紅色的背景比較醒目了,當(dāng)然對(duì)于產(chǎn)品設(shè)計(jì)中具體留存時(shí)間,放置位置是需要思量的。個(gè)人感覺目前彈窗因?yàn)楸粸E用的太多,會(huì)導(dǎo)致部分用戶的反感,所以每次在考慮彈窗的時(shí)候都比較慎重,看是否有必要再添加。

      來(lái)自北京 回復(fù)
    5. 同感,我認(rèn)為提示框放郵箱輸入框下面,同事輸入框變紅,右邊出現(xiàn)紅叉更人性化

      來(lái)自美國(guó) 回復(fù)
    6. 直接將錯(cuò)誤字段標(biāo)紅,并在錯(cuò)誤字段上方或下方直接顯示 提示文案會(huì)更好。

      來(lái)自北京 回復(fù)
  8. 作者有想過,為什么反饋提示要用 alert 么?

    來(lái)自廣東 回復(fù)
    1. alert可以防刷?

      來(lái)自北京 回復(fù)
    2. 為什么

      來(lái)自廣東 回復(fù)
    3. 是不是為了防止用戶看不到提示,而在次執(zhí)行登錄操作?

      回復(fù)
    4. 某些產(chǎn)品組織操作者頻繁輸入

      來(lái)自廣東 回復(fù)
    5. 產(chǎn)品角度和設(shè)計(jì)角度兩重考慮。。這個(gè)問題問的經(jīng)典

      來(lái)自北京 回復(fù)