前端頁面的用戶體驗優化設計


一個好的設計能讓用戶更加便捷直觀的獲取信息,同時增強交互感,使用戶的體驗更佳。

我們以一個基礎表格為例

表格過濾搜索

表格右上方的搜索框用於關鍵詞過濾,當我們輸入值時,通過模糊匹配來過濾出相關的選項。

  • 過濾出的匹配值可以使用匹配部分加粗呈現,使用戶更加直觀的獲取到結果。

表格中文本對齊

  • 垂直方向均為居中對齊

  • 水平方向文本內容、時間、日期、IP地址建議在表格中左對齊,數字、小數、計費價格、貨幣、百分比、分數右對齊

手機號等隱私展示

  • 中國手機號碼推薦統一屏蔽第4~7位共四個數字,這樣呈現更加的友好。

輸入框、選擇框提示信息

  • 如果用戶對操作場景不太熟悉,很可能不知道在這里要做什么。所以我們需要在輸入框、搜索框、選擇框,建議提供文本默認提示,並在用戶在輸入文本后消失,這樣的弱提示,既能讓用戶清楚在這里做什么,又不會干擾用戶操作。

復選框

  • 復選框選項數量超過7個時,必須提供全選和去全選的功能,方便用戶操作,提升體驗

  • 復選框必須提供默認選項。但是如果涉及法律、可靠性、安全性的選擇,需要用戶明確作出選擇時,復選框不提供默認選項。這樣的設計是出於安全、合規等方案的考慮。

名稱+ID

表格里呈現名稱和ID是為了便於用戶識別,但ID本身識別度很低,且ID並不是用戶想查看的部分只是用於搜索或是達成其他目的。

  • 名稱+ID的場景,表頭顯示名稱,表格里只呈現名稱,鼠標hover時tips顯示名稱+ID,支持復制ID

  • 只有ID的場景,表格中只顯示ID,顯示不下的部分呈現"...",鼠標hover時tips顯示完整ID信息,同時表格內呈現復制圖標(默認不顯示但要預留位置)。

幫助信息提示

  • 幫助信息提示,是需要鼠標懸浮才能呈現提示內容,這時候鼠標變為“箭頭+問號”樣式,借這種樣式給用戶以暗示,即此處有幫助信息呈現,用戶可根據需要查看。

表單輸入規則

  • 如果頁面上的輸入框規則是“參差不齊”的,這樣頁面上不僅缺少一致性,也很難給用戶培養固定的習慣,體驗上也比較錯亂。所以建議使用同一的輸入的規則
  1. 名稱:最大64字符,字符集【中文字符、英文字母、數字、下划線、中划線、點】定義名稱輸入規則。如有特殊訴求,允許在當前規則基礎上增加長度和字符集。

2)描述:最大255字符,不限制字符集

警示顏色

  1. 紅色(#ff4c4c)在我們認知范圍內和生活經驗中有緊張危險的心理暗示,因此作為緊急、危險操作的使用色。

  2. 橙色(#ff8833)相比紅色沒有那么危險,但存在感也不弱,因此作為重要操作的用色。在用色時如果不是危險的負面的信息,但內容也很重要,建議使用橙色,避免用戶錯亂,也保持整個頁面的一致性。

表單冒號

  • 創建或者配置表單域標簽后不加冒號,中英文場景通用。域標簽后去掉冒號完全不會影響用戶理解這個場景,所以從用戶理解的前提下做減法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM