立體幾何圖標以簡潔形狀、清晰光影、強烈體積感著稱，是 APP 圖標、品牌輔助圖形、資訊圖表的熱門選擇。本教程展示如何利用 Illustrator「3D 效果」+「外觀面板」實現非破壞編輯的立體圖標製作，保持參數隨時可調，極大提升迭代效率。

最終效果

核心步驟拆解

1. 基礎幾何構建

• 組合基礎形狀：矩形/圓角矩形/橢圓/多邊形/星形
• 路徑查找器「合併/減前/交集」構建複合基礎形狀
• 保持路徑簡潔，錨點最少化，便於 3D 計算

2. 應用 3D 擠出與斜角

1. 選中基礎形狀 → 效果 > 3D > 擠出與斜角
2. 關鍵參數：
   • 位置：等距左上/右上/自定義 (X: -30° Y: -20° Z: 0°)
   • 擠出深度：30-80pt (視圖標大小)
   • 斜角：經典/圓角/階梯，高度 4-8pt
   • 表面：塑膠著色 (預設) / 線框 / 無陰影
   • 光源：拖動光源球至左上/右上，添加第 2 光源補側面
3. 確定 → 效果記錄在外觀面板，隨時可雙擊修改

3. 表面材質與色彩系統（外觀面板疊加法）

選中 3D 物件 → 外觀面板 (Shift+F6) 疊加：

• 填充 1 (基底色)：品牌主色/系統色，套用於「內容」
• 填充 2 (側面陰影)：基底色 × 0.7 亮度，效果 > 路徑 > 偏移路徑 -2pt，限制於側面
• 填充 3 (頂面高光)：基底色 × 1.3 亮度，偏移 -4pt，混合模式「螢幕」
• 描邊 1 (邊緣線)：深色 0.5pt，效果 > 路徑查找器 > 加合 合併邊緣

4. 圖標細節添加

• 在 3D 物件「內容」層級內 (外觀面板點擊「內容」文字進入隔離模式) 繪製內部圖形
• 內部圖形同樣套用 3D 效果 (複製外觀 Alt 拖拽) 或獨立 3D 參數
• 布林運算構建複雜內部結構

5. 投影與地面接觸

• 複製主體 → 效果 > 風格化 > 投影：X/Y 偏移 4px、模糊 6px、不透明度 30%、顏色深灰
• 或手繪橢圓漸變 (黑→透明) 置底，更可控

非破壞工作流優勢實戰

修改需求	傳統擴展外觀流程	外觀面板非破壞流程
調整擠出深度	撤銷→重做 3D→重新設置材質→重做投影	外觀面板雙擊「3D 擠出」→修改深度→確定 (10 秒)
換色方案	重新選色、重做漸變、重做高光陰影	外觀面板修改填充顏色/漸變色標 (5 秒)
修改斜角樣式	全推倒重來	雙擊 3D 效果→換斜角預設 (5 秒)
調整光源位置	全推倒重來	雙擊 3D 效果→拖動光源球 (即時預覽)
批量產出系列圖標	逐個重做	複製物件→修改基礎形狀/顏色→自動繼承 3D 效果

導出與交付規範

• UI 開發：檔案 > 匯出 > 供螢幕使用，設置 1x/2x/3x、SVG (保留矢量)、前綴命名
• 設計系統：存為 CC 庫資產，標註 3D 參數預設值、色彩 Token
• 動態圖標：導入 After Effects + Bodymovin，3D 參數可做關鍵幀動畫
• 印刷/大屏：300dpi CMYK PDF，確保 3D 效果光柵化解析度足夠 (效果 > 文檔柵格效果設置 300ppi)

進階：多物件統一 3D 空間

1. 建立「3D 參考物件」：一個隱藏的矩形套用目標 3D 參數
2. 所有圖標物件 → 外觀面板 → 「添加新效果」→ 選擇「3D 擠出」→ 參數引用參考物件 (或手動輸入相同值)
3. 移動光源：只需修改參考物件光源，所有關聯圖標同步更新（需手動點擊更新/重新應用）

「3D 效果 + 外觀面板」是 Illustrator 實現參數化立體設計的黃金組合。它將「建模、材質、光照、渲染」封裝為可疊加、可複用、可動畫的外觀屬性，讓矢量設計師擁有了媲美 3D 軟體的立體表達能力，卻保持了矢量編輯的極致靈活。這正是現代品牌視覺系統構建中「圖標組件化、參數化、系統化」的關鍵技術基石。