Illustrator 向量插畫教學：5 種扁平設計風格實作指南

扁平設計（Flat Design）大概是過去十年影響最深遠的設計趨勢之一。從 iOS 7 開始的極簡風潮，到現在已經演變出好幾種變體——幾何風、等距風、漸層扁平（Flat 2.0）等等。而要做扁平設計插畫，Adobe Illustrator 絕對是最佳工具。

我自己接商業插畫案子的時候，大概有六成都是扁平風格。今天這篇Illustrator 向量插畫扁平設計教學，我會帶你從基本原則到 5 種風格的實作，希望能幫你建立一套扁平設計的系統化思維。

扁平設計的核心原則

在開始畫之前，先搞懂扁平設計的幾個基本原則：

• 去除質感與擬真：不用漸層（或只用微妙的漸層）、不加陰影、不做 3D 效果
• 幾何形狀為基礎：大量使用圓形、矩形、三角形等基本形狀來構成畫面
• 鮮明的配色：通常使用飽和度適中、對比明確的色彩方案
• 極簡構圖：去掉不必要的細節，只留核心元素
• 一致的線條粗細：如果用到線條，全畫面保持統一的粗細

扁平設計的精髓在於「少即是多」。你的功力不是看能畫多少細節，而是看能省掉多少細節，同時又不失去辨識度。

Illustrator 必備工具

做扁平設計最常用的 Illustrator 工具有這幾個：

形狀工具（Shape Tools）

矩形、橢圓、多邊形。扁平設計 80% 的內容都可以用基本形狀組合出來。善用圓角矩形——它是扁平設計中出現頻率最高的形狀。

鋼筆工具（Pen Tool）

畫自由曲線用的。雖然扁平設計以幾何形狀為主，但有些有機的造型（如植物、人物輪廓）還是需要鋼筆工具。想精通鋼筆工具，推薦閱讀 Illustrator 鋼筆工具完整教學。

形狀建立工具（Shape Builder）

這是做扁平設計的神器。把多個形狀重疊後，用 Shape Builder 工具一刷，就能快速合併或刪除區域。比 Pathfinder 更直覺。

Pathfinder（路徑管理員）

聯集、差集、交集、排除——四個最常用的操作。當 Shape Builder 不夠精確的時候，就用 Pathfinder。

扁平設計配色策略

配色是扁平設計的靈魂。一套好的配色方案通常有 4-6 個顏色：

• 1-2 個主色
• 1 個強調色
• 1-2 個中性色（背景、文字）
• 各顏色的明暗變體（用於陰影區域）

推薦幾個配色資源：Coolors、Adobe Color、Muzli Colors。如果你對色彩理論感興趣，可以看看 品牌配色理論完整指南。

一個實用技巧：陰影不要用黑色降低透明度，而是用同色系的深色版本。例如藍色區域的陰影用深藍，而不是加黑色透明度。這樣畫面會乾淨很多。

風格一：幾何風格

這是最基礎也最經典的扁平設計風格。所有元素都用純幾何形狀構成。

實作步驟：

1. 用矩形和圓形畫出一個簡單的城市天際線
2. 建築物 = 不同高度寬度的矩形
3. 窗戶 = 小正方形排列
4. 太陽 = 圓形 + 三角形放射線
5. 雲朵 = 3-4 個圓形組合後用 Pathfinder 聯集

關鍵：保持所有邊緣銳利，不加圓角（除非是刻意的設計選擇）。顏色用純色填充，不加漸層。

風格二：等距風格（Isometric）

等距插畫近幾年非常流行，尤其在科技產品的行銷素材中。它用 30 度角的透視來呈現 3D 的感覺，但保持扁平設計的簡潔。

實作步驟：

1. 在 Illustrator 中設定等距網格（Preferences → Guides & Grid，設定 30 度角）
2. 用矩形工具畫一個正方形，然後用 Transform → Shear 和 Rotate 把它變成等距面
3. 複製三份做成方塊的三個面（頂面、左面、右面）
4. 三個面用同色系的三個深淺度（最亮 → 頂面，最暗 → 右面）

等距風格的難度在於要保持所有角度的一致性。建議做一個等距方塊的 Symbol，之後所有物件都基於這個方塊來修改。

風格三：角色設計

扁平風格的角色設計在 App 介面、網站 landing page、行銷素材中超常見。

設計要點：

• 頭部通常偏大（Q 版比例），讓角色更可愛
• 身體用簡單的幾何形狀：橢圓或圓角矩形
• 手腳可以用簡單的線條或橢圓
• 表情極簡：兩個點當眼睛、一條線當嘴巴就夠了
• 服裝和配件用色彩區分，不需要畫得很細

風格四：風景插畫

扁平風格的風景插畫非常適合做網站背景、App 啟動畫面。

技巧：用多層矩形或波浪線來營造前景、中景、遠景的層次感。遠景的顏色淡、近景的顏色深，用色彩明度來模擬空氣透視。

樹木用三角形或橢圓疊加，山用三角形，河流用曲線形狀。整個構圖以水平分層為主。

風格五：圖標設計

扁平設計的圖標是日常設計工作中最實用的。App 圖標、網站圖標、簡報圖標都用得到。

設計原則：

• 在固定的正方形畫板中工作（例如 64x64 或 128x128）
• 保持一致的線條粗細（通常 2-4px）
• 限制用色在 2-3 個
• 留足夠的留白（圖標不要撐滿整個畫板）
• 測試在小尺寸下的辨識度

這跟 Logo 設計的思維很類似，可以參考 Logo 設計完整流程教學中的向量化技巧。

Flat 2.0：加入微妙的深度

純粹的扁平設計有時候會缺乏層次感。Flat 2.0（也叫 Semi-Flat 或 Material Design 風格）在扁平的基礎上加入了微妙的陰影和漸層：

• 長投影（Long Shadow）：物件後面加一個 45 度的拉長陰影
• 微漸層：同色系的淡漸層，增加質感但不破壞扁平感
• 層次陰影：用低透明度的深色形狀做微微的底影

這些效果要克制使用。加太多就變成擬物風了，加太少又看不出來。多練習幾次就能找到那個平衡點。

匯出與應用

做好的向量插畫匯出方式取決於用途：

• Web 用：匯出 SVG（可縮放、檔案小）或 PNG（有背景）
• 印刷用：匯出 PDF 或 EPS，確認色彩模式為 CMYK
• 社群媒體：匯出 PNG，解析度 72dpi，尺寸依平台調整
• 簡報/投影片：匯出 SVG 或高解析度 PNG

排版和視覺層次的進階技巧，可以參考 海報設計排版視覺層次教學。

總結

扁平設計看起來簡單，但要做得好其實需要很強的形狀概括能力和配色功力。我建議從幾何風格開始練習，等到能夠熟練地用基本形狀表達複雜物件之後，再挑戰等距和角色設計。

最重要的是多看、多練、多嘗試。Dribbble 和 Behance 上有大量優秀的扁平設計作品可以學習。更多品牌設計的系統性思維，歡迎閱讀我們的 品牌視覺設計完全指南。