特殊情況下的APP設計：註冊登錄頁設計

最新 06-27

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

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

1.清晰的操作流程

APP的註冊登錄有三種流程:

無需註冊登錄

常見於系統自帶的工具類APP，像經常使用的鬧鐘、日曆、計算器等等；一些簡單的第三方APP：樂流，榫卯等。

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

計算器&榫卯

非強制登錄

有註冊登錄的流程，但是用戶不需要註冊登錄也能使用產品的部分功能，也就是所謂的支持遊客模式。

內容類、購物類、娛樂類等都會使用這種形式。

非強制登錄又有兩種設計流程，一種是先展現出註冊登錄頁，但是允許用戶跳過。

網易雲音樂&豆瓣

另一種是直接展示產品功能，當用戶想深入使用某些功能時用戶得選擇註冊登錄。

開眼&same

強制登錄

用戶必須先進行註冊登錄，才能正常使用產品功能。社交類、2B類、工作類的產品會使用這種流程。

強制註冊登錄的流程會影響用戶的轉化率，所以產品不是嚴重依賴於賬號系統的話，盡量採用非強制登錄的方式。

2.不同的註冊登錄方式

郵箱

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

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

.手機號

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

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

.用戶名

早期用戶名註冊登錄還很常見，但是隨著第三方登錄的普及，以及用戶名登錄自身的缺陷：「只能區別用戶的ID，並不能獲取到用戶的聯繫信息」，用戶名註冊登錄的方式已經退出主流。目前很多產品會將用戶名作為昵稱來用，而不是作為註冊登錄的ID來使用。

.第三方賬號

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

這四種方式各有優劣，但總的來講，通過手機號註冊登錄會更方便，通過獲取驗證碼輸入四位或六位數字就能完成註冊登錄。

3.注重交互細節

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

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

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

issuu&in

彈出相對應的輸入鍵盤

點開郵箱輸入框，彈出帶有@的英文輸入鍵盤。

點開手機號輸入框，彈出九宮格數字輸入鍵盤。

點開密碼輸入框，彈出英文輸入鍵盤。

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

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

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

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

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

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

淘寶&Facebook

登錄時增加一鍵清空icon。

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

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

dosnap&nice

清晰的錯誤反饋。

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

臨時框也有兩種形式，一種是下圖左側的對話框形式，這需要用戶點擊確認才能進行下一步操作。一種是toast的形式，彈出一兩秒後自動消失。個人更傾向於第二種形式，因為第一種形式相當於強制中斷了用戶的操作，用戶需要點擊確認才能回到原來的操作流程。而toast則起到了提示的效果，並且沒有打擾到用戶。下圖右側的airbnb，在用戶輸錯密碼時，不光有底部的臨時框提示，還將整個登錄頁面的背景色油綠色變為醒目的橙色，這種設計在提示用戶的前提下，還做到了賞心悅目，是個不錯的設計思路。