以小見大:如何設計注冊登錄頁?
朋友說某個APP不錯,下載后正準備好好體驗一番,卻被糟糕的注冊登錄頁面弄的精疲力竭,無奈最終只能放棄。注冊登錄流程能讓用戶扭頭就走,也能讓產品獲得新用戶的芳心。
一個合格的注冊登錄頁面,應該是具有清晰的操作流程,良好的交互細節和美觀的視覺設計。
清晰的操作流程
APP的注冊登錄有四種情況:
不需要注冊登錄
常見于系統自帶的工具類APP,像經常使用的鬧鐘、日歷、計算器等等;一些簡單的第三方APP:樂流,榫卯等。
這些APP的特點都是功能相對單一,比較“輕”,不需要記錄用戶信息或行為歷史。
第三方賬號登錄
用戶不需要輸入注冊登錄信息,直接選擇第三方賬號就能完成登錄。國內常見的第三方賬號有微博、微信、QQ、豆瓣、人人等,國外常見的第三方賬號有Facebook,Twitter,Google等。
現在國內除了超級APP之外的APP基本都支持第三方賬號登錄,這樣能簡化用戶注冊登錄的流程,提高APP的用戶轉化率。
郵箱注冊
最開始的時候注冊登錄是基于PC的,也就是基于網頁,PC時代的互聯網產品多使用郵箱作為唯一ID。所以郵箱注冊成為主流,而且注冊過程中需要驗證郵箱也很方便,用戶直接在PC端就可以完成所有操作。
現在很多APP依然保持著郵箱注冊的方式。
手機注冊
隨著移動互聯網的到來,人們觸網的主要設備已經從PC逐漸轉移到智能手機。
加上手機號碼的實名制、全球通業務的普及,使得手機號碼也具有了唯一標示性。而且在移動互聯網時代,用手機號碼作為登錄ID,并用短信驗證碼的形式來驗證ID,這些操作流程都基于手機端。所以手機號碼逐漸取代郵箱成為APP注冊登錄的主流方式。
注重交互細節
APP的優秀與否,由很多因素決定,而良好的交互細節是每一個優秀APP的共同品質。只有從用戶場景出發,并從用戶的視角來思考產品,才能設計出打動人心的APP。
用顯示/隱藏icon代替輸入兩遍密碼
為了確保密碼輸入正確,很多APP需要用戶輸入兩遍密碼來確定密碼輸入無誤,但這無疑增加了用戶的工作量。替代方案是在密碼輸入框右側增加一個“顯示/隱藏icon”,讓用戶在輸入完一遍密碼后可以選擇點開“顯示/隱藏icon”來確保密碼輸入無誤,減少用戶的工作量。
彈出相對應的輸入鍵盤
- 點開郵箱輸入框,彈出帶有@的英文輸入鍵盤。
- 點開手機號輸入框,彈出九宮格數字輸入鍵盤。
- 點開密碼輸入框,彈出英文輸入鍵盤。
這是很小的細節,雖然用戶可能不知道哪里不對,但是他能體會到好不好用。一個APP注意了這點,那用戶就會覺得這個APP好用。而另一個APP沒有做到這點,無論點擊哪個輸入框彈出的都是九宮格中文輸入鍵盤,用戶就會覺得這個APP不太好用。
作為設計師,要知道用戶覺得不好用的原因是什么,這樣才能對癥下藥,改善用戶體驗。
對手機號碼進行3 4 4的分布。
這個規則不僅適用于手機號碼,包括銀行賬號、轉賬金額等等。
這是因為人的短期記憶是有限的,即一次只能記住有限的東西,如果強制記住很長的東西,短期記憶就很容易出錯。
所以將數字以4或者3為單位分組,有利于用戶閱讀、編輯、校對手機號碼。
登錄時增加一鍵清空icon
在登錄的時候偶爾會出現輸入錯誤,如果沒有這個清除的icon,用戶只能按鍵盤中的清除按鈕,需要一直按住直到輸入框為空。
一個是只需要點一次就能清空,一個需要長按一段時間或者連續按多次才能清空,孰優孰劣可想而知。
清晰的錯誤反饋
當用戶輸入錯誤信息時,最好利用臨時框的形式提示用戶。而不是不做反應讓用戶自己去猜到底是怎么回事。
臨時框也有兩種形式,一種是左邊的對話框形式,這需要用戶點擊確認才能進行下一步操作。一種是右邊toast的形式,彈出一兩秒后自動消失。個人更傾向于第二種形式,因為第一種形式相當于強制中斷了用戶的操作,用戶需要點擊確認才能回到原來的操作流程。而toast則起到了提示的效果,并且沒有打擾到用戶。
美觀的視覺設計
- 緊密:通過元素的遠近將相似元素分為一組。
- 對齊:通過對齊,規范元素的排版 。
- 簡約:注冊登錄頁面的背景盡量簡約,從而讓主體信息更加突出。
- 對比:將重要的內容放大,增加色塊背景;將相對次要的內容縮小,降低明度等從而使得信息層級清晰。
- 均衡:注冊登錄頁面幾乎都是沿著中心線左右對稱的,信息是左右均衡擺放的。否者會導致頁面不平衡。
平時收藏的一些好看的注冊登錄頁面:
本文由 @鄒志楠 原創發布于人人都是產品經理。未經許可,禁止轉載。
謝謝,很好的文章 ??
喜歡你的頭像 哈哈哈哈
受教了
謝謝 受教了
好犀利啊,感覺又升級了
對一個剛入門的產品經理來說受教了
提示框,并沒有覺得第二種好,你不覺得第二種有的人找半天,沒發現那個toast嗎?
設計toast的時候也是需要考慮如何做到不干擾操作而又能提醒到用戶的……
我是說片刻那個提示框,不夠明顯。不用點擊就可以了,放在登陸下方,不打斷用戶操作就可以了,沒必要為了美觀做的都快找不到了,首先是好用,然后才是美觀。
作者思路應該是針對toast的提示內容,而不是具體的展現形式、這方面交互應該設計的更好
個人覺得右側會好一些,在片刻里,用偏紅色的背景比較醒目了,當然對于產品設計中具體留存時間,放置位置是需要思量的。個人感覺目前彈窗因為被濫用的太多,會導致部分用戶的反感,所以每次在考慮彈窗的時候都比較慎重,看是否有必要再添加。
同感,我認為提示框放郵箱輸入框下面,同事輸入框變紅,右邊出現紅叉更人性化
直接將錯誤字段標紅,并在錯誤字段上方或下方直接顯示 提示文案會更好。
作者有想過,為什么反饋提示要用 alert 么?
alert可以防刷?
為什么
是不是為了防止用戶看不到提示,而在次執行登錄操作?
某些產品組織操作者頻繁輸入
產品角度和設計角度兩重考慮。。這個問題問的經典