教程概覽

展示一組統一視覺語言的藍色系 UI 圖標設計流程，涵蓋形狀構建、描邊規範、色階標準化與導出規格。

核心設計規範

項目	標準值	說明
畫布尺寸	64×64 px / 128×128 px	雙倍圖 @2x 標準
網格系統	4 px 基礎網格	所有關鍵錨點吸附網格
描邊寬度	2 px (64px) / 4 px (128px)	圓角半徑 4 px / 8 px
主色調	#1A73E8 (Primary Blue)	HSB: 217° 81% 91%
輔助色	#E8F0FE (Blue 50) / #4285F4 (Blue 600)	懸停/禁用狀態用
圖層命名	`Icon/Home/Normal` `Icon/Search/Pressed`	BEM 命名便於工程師對接

製作流程 4 步走

1. 幾何構形： 矩形/橢圓/多邊形工具組合，布爾運算（合併/減去/交集）得基礎形狀，轉為形狀圖層保持矢量可編輯。
2. 描邊統一： 形狀圖層屬性面板統一設「描邊 2 px、居中、圓角 4 px」，禁止手繪描邊。
3. 色階應用： 建立「Color Library」庫，所有填充色、描邊色拖入庫中，跨文檔一鍵套用。
4. 導出規範： 圖層右鍵「複製 SVG」或「導出為 PNG @1x/@2x/@3x」，命名 `ic_home_24px.svg` 格式。

品質自檢清單

• ☐ 所有圖標視覺重心對齊光學中心（非幾何中心）。
• ☐ 同組圖標「視覺重量」一致（實心 vs 線性 需光學補償）。
• ☐ 16 px 最小尺寸下關鍵特徵仍可辨識。
• ☐ SVG 代碼無冗余 transform、無描邊縮放異常。

適合建立設計系統圖標庫的 UI 設計師參考。