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

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

咱們以一個基礎表格爲例

表格過濾搜索

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

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

表格中文本對齊

• 垂直方向均爲居中對齊

• 水平方向文本內容、時間、日期、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）相比紅色沒有那麼危險，但存在感也不弱，所以做爲重要操做的用色。在用色時若是不是危險的負面的信息，但內容也很重要，建議使用橙色，避免用戶錯亂，也保持整個頁面的一致性。

表單冒號

• 建立或者配置表單域標籤後不加冒號，中英文場景通用。域標籤後去掉冒號徹底不會影響用戶理解這個場景，因此從用戶理解的前提下作減法。