按鈕雖微小,卻是網頁/界面交互的關鍵觸點。專業按鈕圖標設計需遵循九大規範,確保一致性、可用性與專業感。
九大核心設計規範
- 寬度一致性: 同一窗口內按鈕寬度保持一致;不可行時,不同寬度類型限制在兩種以內。
- 標準尺寸: 有文本標籤的命令按鈕採用最小寬度與標準高度。
- 跨窗口一致性: 相同命令按鈕在多窗口保持相同標籤文本、訪問鍵、位置。
- 延遲反饋: 點擊不立即產生結果時,顯示忙碌鼠標指針,防止用戶重複點擊。
- 關聯控件佈局: 按鈕與互操作控件(如「瀏覽」按鈕與文本框)保持三種對齊關係:下側左對齊、右側頂端對齊、垂直居中。
- 尺寸專業度: 禁用過窄/過短/過高按鈕,優先使用默認寬高。
- 附屬按鈕狀態: 附屬於其他控件時,上級控件未選中前保持禁用狀態。
- 多按鈕佈局: 多按鈕操作同一控件時,右側縱向頂端對齊或下方橫向左對齊。
- 文本與圖形互斥: 避免同時使用文本標籤與圖形,增加視覺混亂。僅當圖形為標準符號或能顯著增進理解時例外;否則優先文本或單獨圖形。
遵循規範,按鈕將從「不顯眼」變為「不可或缺」的交互體驗守門人。