圖示系統
目的
Iconography System 技能提供了一套用於選擇、調整尺寸與實作圖示作為功能性 UI 元素的方法論。它超越了「挑選漂亮圖片」的層次，建立一個結構化的系統，確保圖示一致地使用，以降低認知負荷、強化品牌識別，並對所有使用者保持無障礙可及性。一個健全的圖示系統能確保圖示扮演清晰的指引標誌，而非視覺雜訊。
使用案例
- 為新網站定義圖示風格（線條、填滿、雙色調）。
- 為按鈕、導覽、功能區塊等不同情境中的圖示建立標準尺寸與間距尺度。
- 審核網站是否有「圖示膨脹」或不一致的視覺隱喻。
- 為開發人員實作無障礙的 SVG 或圖示字型工作流程。
- 選擇與特定品牌屬性（例如「友善」的圓角圖示 vs.「技術感」的銳角圖示）一致的圖示。
何時不應使用
- 插圖與主視覺圖片： 大型、複雜的敘事性圖片，用以傳達故事而非單一功能性概念。請改用一般佈局或主視覺最佳化技能。
- 標誌與品牌識別： 主要的品牌識別通常有其不可妥協的規則；圖示支援 UI，而非取代品牌標誌。
- 純裝飾性背景圖案： 當圖示被用作不具語意意義的壁紙時。
輸入
- 品牌語調與風格： 品牌是極簡、技術感、趣味還是企業風？
- 技術環境： 網站是否建構在偏好 SVG 元件、Sprite 或圖示字型的框架上？
- 使用情境： 圖示將出現在何處？（例如：主要導覽、CTA 按鈕、功能列表、儀表板狀態）
- 現有設計標記： 流暢間距與色彩系統，以確保一致性。
輸出
- 圖示風格指南： 定義線條粗細、角落半徑與填滿類型的規則。
- 圖示尺寸尺度： 一組標記（例如
icon-sm、icon-md、icon-lg）對應到特定的像素或 rem 值。 - 語意庫： 一組精心挑選的圖示，對應到特定動作或概念（例如「Chevron-down」代表下拉式選單）。
- 無障礙規範： 關於 ARIA 標籤、
role="img"與aria-hidden屬性的規則。
工作流程
1. 建立視覺隱喻
選擇使用普遍理解符號的圖示。
- 搜尋： 放大鏡。
- 設定： 齒輪或滑桿。
- 使用者： 人形輪廓或圓形使用者。 避免使用需要使用者猜測圖示含義的「巧妙」隱喻。
2. 定義視覺風格
確保系統中的所有圖示共享相同的 DNA：
- 線條粗細： 使用一致的線條厚度（例如所有 24px 圖示使用 2px）。
- 角落處理： 圓角感覺更平易近人；銳角感覺更技術感/精確。
- 細節程度： 圖示越小，越應簡化以保持易讀性。
3. 建立尺寸與間距尺度
對圖示容器套用 fluid-spacing-system：
- 小型 (16px)： 與文字同行、麵包屑。
- 中型 (24px)： 標準按鈕、主要導覽。
- 大型 (48px+)： 功能卡片、主視覺重點。
- 光學置中： 手動調整因形狀而看似未置中的圖示（例如「播放」三角形）。
4. 實作顏色與狀態邏輯
將圖示連結到 interactive-state-system：
- 活躍/懸停： 圖示應隨著其父元素的變化而改變顏色或粗細。
- 語意顏色： 使用紅色表示刪除/錯誤圖示，綠色表示成功。
- 對比度： 圖示必須符合 WCAG AA（圖形物件 3:1）。
5. 技術交付與無障礙
- SVG vs. 圖示字型： 偏好使用 SVG，以獲得更好的效能、無障礙性與渲染品質。
- Aria 角色：
- 若為裝飾性：使用
aria-hidden="true"。 - 若為功能性（例如僅圖示的按鈕）：使用
role="img"和清晰的aria-label。
- 若為裝飾性：使用
決策規則
- 「標籤優先」規則： 圖示幾乎應始終伴隨文字標籤。僅對普遍識別的動作（搜尋、關閉、選單）使用「獨立」圖示，且僅在具有無障礙標籤時使用。
- 一致性勝於多樣性： 使用單一圖示庫（例如 Lucide、Heroicons），而非混合多種來源的風格。
- 線條粗細縮放： 如果圖示被放大，其線條粗細理想上應保持與其尺寸成比例，以維持整個佈局中的視覺「重量」。
- 光學平衡： 並非所有圖示生而平等。一個方形圖示看起來比相同寬度的圓形圖示更大。使用「邊界框」方法，但手動調整視覺尺寸以達到平衡。
限制條件
- 無障礙： 作為連結或按鈕使用的圖示必須具備適用於螢幕閱讀器的文字替代方案。
- 觸控目標： 按鈕內的圖示不得將點擊區域縮小至低於 24x24px（WCAG 2.2 SC 2.5.8 最小值）；對於主要的純圖示動作，44x44px 為較佳選擇。
- 響應式設計： 在小螢幕上，若圖示會壓縮文字，可能需要簡化或移除；不過，圖示通常有助於行動裝置掃描。
常見失敗模式
- 「謎之肉」圖示： 使用沒有標籤且使用者無法辨識的圖示。
- 不一致的粗細： 在同一行中混合使用 1px 線條圖示與 3px 粗體圖示。
- 過於複雜： 使用具有過多細線的圖示，這些細線在低解析度螢幕或小尺寸下會「模糊」或消失。
- 缺乏無障礙： 使用沒有標題或 ARIA 標籤的 SVG 圖示，讓螢幕閱讀器使用者無法得知該動作。
- 光學對齊錯誤： 一個「播放」按鈕因為數學上置中但光學上未置中，看起來像是從圓圈左側滑出。
驗證標準
- 所有圖示屬於單一、一致的視覺風格。
- 圖示具有定義的尺寸尺度（例如 16、24、32、48）。
- 獨立圖示（如有）具備
aria-label或等效的文字替代方案。 - 裝飾性圖示標記為
aria-hidden="true"。 - 圖示與其背景之間維持 3:1 的對比度。
- 純圖示的互動元素符合 WCAG 2.2 24x24px 觸控目標最小值（44x44px 為較佳選擇）。
- 視覺隱喻清晰且標準（無需「猜測」）。