視覺設計在產品用戶界面（UI）中非裝飾品，而是功能載體、認知向導、情感連接器。優秀的 UI 視覺系統需在「美感」與「易用」間找到黃金平衡點。

核心視覺組件體系

1. 色彩系統：語義化與無障礙並重

• 品牌色：核心識別，限制用於關鍵行動點（CTA、品牌標識）
• 功能色：紅錯誤/綠成功/黃警告/藍資訊，符合用戶心智模型
• 中性色階：10-12 階灰階構建層級，保證 WCAG AA 級對比度（4.5:1）
• 暗色模式：非單純反色，需重新定義色彩語義與層級關係

2. 字體系統：閱讀效率與品牌人格

• 字體選型：系統字體優先（San Francisco, Roboto, PingFang, Microsoft YaHei）保證渲染一致性；品牌字體僅用於大標題
• 類型比例：建立 8-10 級標題層級 + 2-3 級正文層級，基於 4px 基礎網格
• 行高/字距：中文正文行高 1.6-1.8，字距 0.5-1px；英文對應調整

3. 圖標系統：識別度與風格統一

• 網格基準：24x24px 或 32x32px 設計網格，關鍵像素對齊
• 風格統一：線性/面性/雙色風格三選一，全系貫徹
• 語義一致：同一隱喻圖標全產品通用（如「編輯」統一用鉛筆圖標）

4. 組件庫：原子化設計落地

• 原子：按鈕、輸入框、標籤、頭像、圖標按鈕
• 分子：搜索框、表單行、導航項、卡片、列表項
• 有機體：導航欄、側邊欄、彈窗、表單頁、詳情頁
• 模板/頁面：特定業務場景頁面組合

交互視覺反饋：看得見的回應

狀態	視覺表現	時長/曲線	目的
懸停	背景色加深/邊框高亮/陰影升級	150ms ease-out	可點擊暗示
按下	縮放 0.98/內陰影/色彩加深	100ms linear	即時反饋
聚焦	外發光邊框（藍色/品牌色）	200ms ease-in-out	鍵盤無障礙
載入	骨架屏/進度環/品牌動畫	視複雜度	降低感知等待
成功/錯誤	Toast/內聯提示/表單紅框	3-5s 自動消失/需手動關閉	任務結果確認

響應式視覺策略

• 斷點系統：移動優先，≥4 斷點（320/768/1024/1440）
• 流體佈局：百分比/自動佈局 + 最大寬度限制
• 組件適配：同一組件在不同斷點的形態定義（如導航欄→漢堡菜單）
• 圖片策略：WebP/AVIF + srcset + 懶加載，藝術導向裁切

設計交付規範：讓開發「照著做」就對

1. 標註規範：Figma 標註模式：間距/尺寸/色值/字體/圖層結構
2. 交互原型：關鍵流程高保真原型，含狀態轉換、微動效
3. 設計系統文檔：Notion/Zeroheight/Storybook 托管，版本化管理
4. 切圖規範：@1x/@2x/@3x、SVG 優先、命名規範（ic_home_24_on.svg）
5. 無障礙清單：對比度、焦點順序、ARIA 標籤、語義化結構

總結

產品 UI 視覺設計的本質是建立一套可擴展、可維護、可度量的視覺語言系統。它不服務於「好看」，而服務於降低認知負荷、提升操作效率、傳遞品牌價值、包容多樣用戶。當視覺決策都能追溯到用戶利益與業務目標，設計才真正成為產品的戰略資產。