圖標設計不僅是「畫好看」，更需建立「網格規範、形狀語法、色彩系統、匯出標準」的系統化流程。本教學以 Spacebear 卡通熊系列為例，完整拆解從草圖到交付的專業圖標設計流程。

系統化設計規範

規範項目	標準值	Fireworks 實作
基礎網格	24×24 px（@1x）、48×48 px（@2x）	檢視→網格→編輯：24px 主網格、2px 子網格
關鍵形狀	圓形、圓角矩形 (4px)、45° 斜線	形狀工具 + 鋼筆微調，儲存為「圖形元件」
描邊規格	2px (粗)、1.5px (中)、1px (細)、端點圓帽、連接圓角	筆觸面板儲存 3 組預設
色彩系統	主色 #FF6B35、輔助色 #4A90E2、中性灰 4 階、語義色 (成功/警告/錯誤)	色板面板匯入 .ase，建立「填充樣式」+「描邊樣式」
圖層命名	BDS 命名法：component/element/state (如 bear/head/normal)	圖層面板強制命名規範
匯出規格	SVG (矢量) + PNG @1x/@2x/@3x、命名 icon-[name]-[size].[ext]	切片 + 批次匯出 + 重命名腳本

Spacebear 繪製核心步驟

1. 頭部：24×24 圓形 + 兩 8×8 圓耳朵（相距 4px） → 聯合
2. 五官：眼睛：2×2 圓 + 1×1 高光；嘴巴：4px 寬 1px 描邊弧線；腮紅：4×2 橢圓 Feather 2、透明度 30%
3. 身體：16×20 圓角矩形 (R4) → 手臂：4×12 圓角矩形 旋轉 ±30°
4. 姿態變體：基礎元件複製 → 部件旋轉/位移/縮放 → 命名 bear/wave, bear/sit, bear/heart
5. 色彩套用：樣式面板一鍵切換主色/輔助色/節日主題色

交付包內容

• ✅ 完整分層 PNG 源檔（含所有狀態、變體、網格參考層）
• ✅ SVG Sprite (spacebear-icons.svg)
• ✅ PNG 多倍率資產包 (@1x, @2x, @3x)
• ✅ 設計規範文檔 (Markdown：網格、形狀、色彩、命名、匯出)
• ✅ 6 款桌面牆紙 (1920×1080/2560×1440/3840×2160)

方法論升華：將「畫圖標」升級為「設計圖標系統」，從單點產出轉向可擴展、可維護、可交付的設計資產管理，這才是專業設計師的核心競爭力。