以小見大:如何設計注冊登錄頁?

19 評論 39147 瀏覽 367 收藏 9 分鐘

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

一個合格的注冊登錄頁面,應該是具有清晰的操作流程,良好的交互細節美觀的視覺設計。

清晰的操作流程

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

不需要注冊登錄

常見于系統自帶的工具類APP,像經常使用的鬧鐘、日歷、計算器等等;一些簡單的第三方APP:樂流,榫卯等。

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

1

第三方賬號登錄

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

現在國內除了超級APP之外的APP基本都支持第三方賬號登錄,這樣能簡化用戶注冊登錄的流程,提高APP的用戶轉化率。

2

郵箱注冊

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

現在很多APP依然保持著郵箱注冊的方式。

3

4

手機注冊

隨著移動互聯網的到來,人們觸網的主要設備已經從PC逐漸轉移到智能手機。

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

5

6

注重交互細節

APP的優秀與否,由很多因素決定,而良好的交互細節是每一個優秀APP的共同品質。只有從用戶場景出發,并從用戶的視角來思考產品,才能設計出打動人心的APP。

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

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

7

彈出相對應的輸入鍵盤

  • 點開郵箱輸入框,彈出帶有@的英文輸入鍵盤。
  • 點開手機號輸入框,彈出九宮格數字輸入鍵盤。
  • 點開密碼輸入框,彈出英文輸入鍵盤。

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

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

8

對手機號碼進行3 4 4的分布。

這個規則不僅適用于手機號碼,包括銀行賬號、轉賬金額等等。

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

所以將數字以4或者3為單位分組,有利于用戶閱讀、編輯、校對手機號碼。

9

登錄時增加一鍵清空icon

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

一個是只需要點一次就能清空,一個需要長按一段時間或者連續按多次才能清空,孰優孰劣可想而知。

90

清晰的錯誤反饋

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

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

91

美觀的視覺設計

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

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

92

93

94

 

本文由 @鄒志楠 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝,很好的文章 ??

    來自中國 回復
  2. 喜歡你的頭像 哈哈哈哈

    回復
  3. 受教了

    來自山東 回復
  4. 謝謝 受教了

    來自北京 回復
  5. 好犀利啊,感覺又升級了

    來自廣東 回復
  6. 對一個剛入門的產品經理來說受教了

    回復
  7. 提示框,并沒有覺得第二種好,你不覺得第二種有的人找半天,沒發現那個toast嗎?

    回復
    1. 設計toast的時候也是需要考慮如何做到不干擾操作而又能提醒到用戶的……

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

      回復
    3. 作者思路應該是針對toast的提示內容,而不是具體的展現形式、這方面交互應該設計的更好

      來自廣東 回復
    4. 個人覺得右側會好一些,在片刻里,用偏紅色的背景比較醒目了,當然對于產品設計中具體留存時間,放置位置是需要思量的。個人感覺目前彈窗因為被濫用的太多,會導致部分用戶的反感,所以每次在考慮彈窗的時候都比較慎重,看是否有必要再添加。

      來自北京 回復
    5. 同感,我認為提示框放郵箱輸入框下面,同事輸入框變紅,右邊出現紅叉更人性化

      來自美國 回復
    6. 直接將錯誤字段標紅,并在錯誤字段上方或下方直接顯示 提示文案會更好。

      來自北京 回復
  8. 作者有想過,為什么反饋提示要用 alert 么?

    來自廣東 回復
    1. alert可以防刷?

      來自北京 回復
    2. 為什么

      來自廣東 回復
    3. 是不是為了防止用戶看不到提示,而在次執行登錄操作?

      回復
    4. 某些產品組織操作者頻繁輸入

      來自廣東 回復
    5. 產品角度和設計角度兩重考慮。。這個問題問的經典

      來自北京 回復