扁平化風格以其簡潔的幾何造型、大膽的色塊對比、無陰影透視的視覺語言，成為 UI 圖示、網頁插畫、品牌吉祥物、動態圖形設計的主流選擇。本教學將以系統化方法論，引導你在 Illustrator 中從零構建一套完整的扁平化插畫場景，涵蓋構圖佈局、形狀邏輯、配色體系、細節豐富度控制與輸出規範。

設計前的決策框架

決策維度	建議策略
視角類型	正投影、等距投影、平行透視，三選一貫徹全圖
幾何基礎	圓形、圓角矩形、三角形、梯形為核心原語，禁用自由曲線
色彩策略	主色 1、輔助色 2、強調色 1、中性灰 2，總色票 ≤ 8
線條規範	全圖統一描邊寬度（如 2 pt）或全無描邊純色塊
細節層級	L1：輪廓；L2：主要分色；L3：裝飾紋理（點、線、簡單幾何）

標準化生產流程 (SOP)

1. 縮圖構圖

在 A4 畫布以極簡幾何形狀（僅用矩形、圓形）快速產出 6–9 張縮圖，驗證視覺重心、留白比例、敘事清晰度。選定最佳方案放大為正式畫布尺寸。

2. 基礎圖形庫建立

利用「形狀建立工具」（Shift+M）、「路徑查找器」將複雜物件分解為基本幾何組合。例如：樹木 = 三角形(樹冠) + 矩形(樹幹)；房屋 = 矩形(主體) + 三角形(屋頂) + 圓角矩形(門窗)。將常用組件存為「符號」。

3. 佈局與對齊系統

開啟「智能參考線」（Ctrl+U）、「對齊面板」，建立 8px 或 4px 基準網格。所有物件邊緣、中心點、基線強制吸附網格，確保畫面秩序感。

4. 配色系統落地

在「色板面板」建立「全域色彩」色票組。使用「重新著色圖稿」功能快速嘗試不同配色方案（單色、類似色、互補色、分裂互補色）。為每個色票添加「色調/飽和度/亮度」變體，構建 3–5 階明度階梯，供陰影、高光、懸停狀態使用。

5. 細節豐富度分層控制

依「遠景簡、近景繁」原則：前景物件添加 L3 級裝飾（如窗框花盆、牆面幾何紋理、地面點綴），中景保留 L2 分色，背景僅 L1 輪廓或純色剪影。利用「不透明度蒙版」實現漸隱效果。

6. 動態化預留

若後續需導入 After Effects 製作動態插畫，請遵循：每個可動部件獨立圖層、命名規範（如 `char_arm_L`、`bg_tree_03`）、錨點置於旋轉中心、路徑點數最小化（簡化路徑）。

成果展示

常見避坑指南

• ❌ 同一畫面混用描邊與無描邊風格 → ✅ 統一風格規範
• ❌ 過度使用漸層破壞扁平感 → ✅ 僅在大面積背景或特定光效使用微弱線性漸層
• ❌ 路徑點過多導致檔案龐大、動畫卡頓 → ✅ 定期執行「物件」→「路徑」→「簡化」
• ❌ 圖層混亂、命名隨意 → ✅ 建立圖層命名規範文檔，團隊共同遵守

延伸應用場景

• 網站 Hero Banner / Onboarding 插畫
• App 空狀態、錯誤頁、成就徽章
• 品牌 IP 形象延展（表情包、周邊、動態貼圖）
• Lottie / Bodymovin 輕量級網頁動畫

扁平化插畫看似簡單，實則考驗設計師對「幾何抽象能力」、「色彩克制力」與「系統化思維」的綜合掌控。建立屬於自己的 SOP 與素材庫，將讓你在面對緊迫交期時，依然能產出高質感、風格統一的優秀作品。