極簡圖標設計的核心挑戰在於「以最少元素傳達最多資訊」。本教程示範如何用 Illustrator 基礎形狀工具、路徑查找器布爾運算、偏移路徑、漸變著色，構建一個可識別度極高、風格統一、支援單色/多色雙版本輸出的巧克力漢堡包圖標，並總結可複用的圖標設計方法論。

最終效果：多色版與單色版

多色版構建流程 (步驟 1-11)

1. 文件與色彩準備

新建 500×500 px RGB 文件。預定義 CMYK 色票 (便於印刷轉換)：
麵包色：C15 M40 Y74 K1
餡料深色：C25 M52 Y65 K71
芝麻色：C5 M21 Y42 K0
起司色：C0 M27 Y85 K0
起司側面：C0 M27 Y85 K30
麵包側面：C15 M31 Y50 K0

2. 麵包上下層 (步驟 1-2)

• 上層：橢圓工具繪製橢圓，填充麵包色。
• 下層：圓角矩形工具 (圓角 50 px) 繪製寬扁橢圓，同色，置於上層下方對齊中心。

3. 餡料層 (步驟 3)

兩個細長圓角矩形 (高度極小)，填充餡料深色，置於上下麵包之間，形成雙層餡料視覺。

4. 芝麻裝飾 (步驟 4)

橢圓工具繪製多個微小橢圓 (芝麻)，填充芝麻色，隨機分佈於上層麵包表面。

5. 起司熔融造型 (步驟 5-6)

• 鋼筆工具繪製熔融狀起司頂部輪廓 (流動不規則曲線)，填充起司色。
• 複製起司 → 下移 10 px → 填充起司側面色 → 直接選擇工具調整錨點變形，構建 3D 厚度側面。

6. 麵包側面厚度 (步驟 7-11)

• 鋼筆工具繪製側面輪廓形狀 → 與上層麵包「相交」 (路徑查找器) → 獲得上麵包側面 → 水平鏡像複製得另一側。
• 同法處理下層麵包側面，顏色用麵包側面色 (較淡)。
• 疊加順序：上麵包面 → 起司面 → 起司側面 → 餡料 → 下麵包面 → 下麵包側面 → 上麵包側面 (左右)。

單色版轉換流程 (步驟 12-15)—— 關鍵技術：偏移路徑 + 減去布爾運算

邏輯

單色版 = 多色版外輪廓統一填色。但直接合併會丟失層次。解決方案：**由內而外逐層「偏移路徑」擴大 → 與外層「減去」 → 保留各層獨立輪廓環 → 最終合併為單一複合路徑。**

操作步驟

1. 複製多色版整組 → 隔離編輯。
2. 選中芝麻群組 → 「物件」→「路徑」→「偏移路徑」→ 5 px → 與上麵包形狀「減去」 (路徑查找器「減去前層」) → 上移上麵包 20 px 露出芝麻環。
3. 依序處理：起司面 (偏移+減去) → 起司側面 (刪除) → 餡料層 → 上/下麵包側面 → 最終合併所有環狀路徑。
4. 鋼筆工具平滑銳角連接處，確保單一複合路徑無自交叉。

圖標設計方法論總結

原則	本案實踐	通用指導
幾何構形優先	橢圓、圓角矩形、鋼筆微調	盡量用基本幾何體組合，邊緣銳利、易縮放、易修改
色彩系統化	預定義 6 色 CMYK 色票	建立專案色板庫，確保系列圖標色彩一致性
層次邏輯清晰	上麵包→起司→餡料→下麵包→側面厚度	圖層命名規範：`TopBun` `Cheese` `Patty` `BottomBun` `Thickness`
單色版非單純合併	偏移路徑+減去運算保留層次輪廓	單色版 = 多色版的「拓撲骨架」，而非像素扁平化
可擴展性預留	所有元素為矢量、編組清晰、存為符號/資產	支援 SVG 動畫、Lottie、變體擴展 (雙層/三層/素食版)

避坑指南

• ❌ 直接用「合併」生成單色版 → 內部細節 (芝麻、起司邊緣) 消失 → ✅ 偏移路徑+減去保留內部輪廓環
• ❌ 芝麻用畫筆點繪 → 縮放時筆觸變形 → ✅ 橢圓形狀矢量化，任意縮放不變形
• ❌ 起司側面用漸變模擬 3D → 小尺寸下漸變條帶明顯 → ✅ 實際繪製側面路徑，純色填充，銳利乾淨

小結

極簡圖標的「簡」不代表「少」，而是「精」——**每一條路徑、每一個色標、每一層疊加都經過精確計算**。掌握「幾何構形 → 色彩系統 → 層次邏輯 → 單色版拓撲重構」這套標準化流程，配合「符號庫 + 圖形樣式 + 動作」三件套，你就能建立高效、一致、可擴展的圖標設計系統。下一個專案，試著用這套方法論重構你的圖標集吧。