【轉】註冊/登錄界面設計理念

原文:https://juejin.cn/post/6985449685842395144

這是一份基於上千人調查研究出的關於登錄界面設計優化的用戶體驗報告

交互設計的基本規則是:減少交互,減少點擊,減少讀取,減少等待,功能清晰

1. 自動聚焦於第一個字段

當頁面加載完畢後,自動聚焦在第一個輸入文本框。

image.png

2. 使用專用移動鍵盤

使用 type = "" 來限制移動端彈出的專用鍵盤。

image.png

3. 立即驗證字段

當輸入文本框失去焦點時,立即驗證輸入文本框格式是否正確。

image.png

4. 使標籤可以點擊

點擊標籤,可以自動定位到相應的輸入文本框會使用戶體驗更美好

image.png

5. 當用戶選擇密碼時顯示密碼要求

當用戶點擊輸入文本框時顯示格式要求

image.png

6. 讓用戶查看密碼

註冊時,允許用戶查看他們輸入的密碼,比同時要求他們輸入兩次密碼效果更好

image.png

7. 使用提交按鈕時,頁面應該有反應

在點擊提交按鈕,應該有過渡動畫,和處理結果

image.png

8. 允許其他登錄

應該允許用戶使用QQ、微信等方式登錄

image.png

9. 使用不同的術語進行"登錄"和"註冊"

保留“登錄”標籤。
“註冊”標籤換成“創建一個賬戶”,使用戶更清晰地區別

image.png

10. 允許在"登錄"和"註冊"之間輕鬆切換

通過底部鏈接,允許"註冊"和"登錄"之間可以輕鬆切換

image.png

11. 使用電子郵件\手機號登錄,而不是用戶名

使用電子郵箱登錄更容易記住賬號,使用手機號登錄可以快速實名

image.png

12. 如果用戶輸入無效密碼,請說明爲什麼密碼無效

如果使用戶輸入的密碼和數據庫中的不匹配,要告知用戶密碼爲什麼不對。

image.png

13. 輸入錯誤密碼

輸入錯誤的密碼後,應該清空密碼,但不清理空賬戶名

image.png

14. "重置密碼"屏幕應記住您已輸入的賬戶名

如果輸入賬號密碼後,提示錯誤,再點擊“忘記密碼”,應該保留已輸入的賬戶名

image.png

15. 登錄成功後,不反饋處理結果,自動跳轉首頁

如果反饋處理結果,要採用小提示,不用跳轉新頁面告知其處理結果。

image.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章