OSX/macOS 風格圖標以其精致的材質表現、準確的透視關係、統一的光源系統著稱。本教程完整記錄從草圖構思、關鍵視覺元素提煉、Illustrator 精修建模、材質疊層、多尺寸導出的專業圖標設計工作流，並提供設計系統化延伸指南。

前期構思：草圖驅動設計決策

• 核心隱喻： U 形磁鐵 + 吸附的金屬釘/回形針，瞬間傳達「磁力、吸附、連接」語義。
• 透視規範： 採用蘋果官方圖標透視標準：等軸測側視，水平面 -18°，垂直面 +26°，光源左上 45°、高度 45°。
• 材質清單： 磁鐵本體(哑光紅/藍塑膠)、金屬極性端面(鏡面鋼/鍍鎳)、吸附物(鍍鋅鐵/不鏽鋼)、陰影/接觸陰影/環境光遮蔽。

Illustrator 精修建模流程

1. 磁鐵主體幾何構建

1. 圓角矩形工具畫 U 型基礎輪廓：寬 120px、高 160px、圓角 20px。鋼筆工具添加底部連接弧，形成完整 U 型閉合路徑。
2. 路徑偏移 (+4px) 生成外殼厚度，路徑查找器「減去頂層」得到中空 U 型殼體。
3. 兩端極性面：矩形工具畫端面，路徑偏移生成倒角邊緣，與殼體聯集合併。

2. 3D 效果建立基礎透視與光影

4. 選中主體，效果 > 3D > 擠出與斜角：位置「等軸測左面」，擠出深度 0pt(無厚度，僅用光照)、斜角「經典」4pt、表面「塑膠著色」、光源左上。此步驟僅為生成基礎光照參考層，後續將展開手動精修。
5. 物件 > 展開外觀，分離各面：頂面、左面、右面、端面、內側面。各面獨立圖層組管理。

3. 材質疊層精修（外觀面板非破壞流程）

6. 紅/藍塑膠本體： 基底漸變(線性 -90°) + 內發光(邊緣陰影) + 膨脹效果(邊緣高光) + 顆粒紋理(效果 > 藝術效果 > 顆粒，疊加模式 正片疊底 10%)。

7. 金屬極性端面 (N/S 極)： 基底漸變(線性 45°，多色停模擬鏡面反射) + 環形高光(橢圓漸變遮罩) + 細微刮痕(雜點筆刷描邊，疊加模式 柔光 5%)。

8. 吸附金屬釘： 圓柱體簡化為：側面漸變網格(模擬圓柱體積) + 頂面徑向漸變(高光) + 底部接觸陰影(橢圓漸變、正片疊底)。複製分佈，隨機旋轉 ±5°、縮放 ±3%。

多尺寸導出與設計系統整合

• 標準尺寸集： 16、32、64、128、256、512、1024 px (含 @2x/@3x 變體)，符合 macOS/iOS/watchOS 圖標規範。
• 像素對齊： 每個尺寸畫板獨立微調：關鍵直線對齊像素網格，描邊寬度按比例縮放 (最小 0.5pt)，圓角半徑取整。
• 圖形樣式庫： 將材質屬性存為 `Icon/Material/Plastic/MatteRed`、`Icon/Material/Metal/Brushed` 等，新圖標一鍵套用。
• 設計令牌導出： 顏色、漸變、陰影、圓角、描邊參數導出 JSON，Figma/Sketch/代碼庫同步消費。
• 資產交付包： `.ai` 源檔(含圖層結構、參考草圖、色板、符號) + `.iconset` 資料夾 + `README.md`(使用規範、授權、版本記錄)。

進階：從單一圖標到圖標家族

• 語義變體： `magnet-attract`(吸附中)、`magnet-repel`(排斥)、`magnet-off`(無磁性)、`magnet-electro`(電磁鐵)，共用幾何骨架，材質/顏色/輔助圖形差異化。
• 風格變體： 同語義下支援 `Filled`、`Outlined`、`Two-tone`、`Sharp` 四種視覺風格，滿足不同 UI 密度需求。
• 動態狀態： 定義 `Default → Hover → Active → Focus → Disabled` 五態屬性差異表，支援 Lottie/Web 動畫無縫切換。

優秀的圖標設計，30% 在繪製技巧，70% 在系統思維。將「磁鐵」這一隱喻拆解為可參數化的幾何骨架、材質模板、狀態定義、尺寸規範、交付標準，才能讓設計系統在產品快速迭代中保持視覺一致性、降低維護成本、賦能跨平台體驗統一。