優秀的 UI 圖標不只是好看，更需經得起放大縮小、適配多種背景。這組教學分享 9 張過程圖，完整記錄從草圖構思、矢量輪廓、圖層樣式質感疊加、高光陰影邏輯、像素對齊到最終導出的設計思路，值得收藏反覆研讀。

設計流程概覽

1. 草圖構思：確認隱喻、視覺重心、品牌色系
2. 矢量繪製：形狀工具/鋼筆繪製可縮放路徑，圖層命名規範
3. 基礎質感：圖層樣式斜面浮雕建立體積感，光源統一左上 45°
4. 材質細分：金屬/玻璃/塑膠/木紋分層疊加樣式（漸變、圖案、內發光）
5. 高光邊緣：筆刷/形狀疊加銳利高光線，模式濾色/線性減淡
6. 投影系統：陰影層獨立、漸變透明度、距離隨物體高度變化
7. 像素對齊：關鍵邊緣對齊像素網格，避免模糊
8. 多尺寸導出：智慧物件縮放、手動微調 16/24/32/64/128/256/512/1024px
9. 規格文檔：標註色值、圓角、間距、命名規範，交付開發

過程圖解