為什麼等距插畫突然到處都是？
你應該有發現，金融 App、SaaS 網站、教學簡報，滿滿都是一種「有立體感、又不像 3D」的插畫風格，畫面很多小房子、小角色，東西都以同一個角度斜斜放，這就是等距插畫。
它這麼紅，理由很單純：比寫實更好懂，比扁平圖更有空間感，又很好拿來做介面示意、流程圖、服務場景。所以設計師、行銷、簡報族群都愛用。
明明一眼認得，卻說不出所以然
很多人跟你一樣，看到就知道「這是等距插畫」，但真的要解釋，就只剩下「斜斜的、看起來有立體」。結果要畫的時候，只能打開 AI 或 Figma 硬試，線怎麼拉都怪怪的，物件放在一起比例又亂掉。
會卡關通常是因為：沒有抓到「固定角度」跟「所有東西要活在同一個空間規則」這兩件事。
等距插畫到底是什麼？跟扁平插畫差在哪？
項目 |
扁平插畫 |
等距插畫 |
|---|---|---|
空間感 |
幾乎沒有深度，像貼紙 |
有立體與高度感 |
視角 |
正面、側面或俯視自由切 |
固定 30°/45° 等距角 |
應用 |
icon、角色、海報 |
流程圖、系統架構、場景 |
一句話版定義：等距插畫就是用「等距投影」畫出來的插畫，把 3D 物件以固定角度投影到 2D 平面上，三個主軸長度看起來一樣，不會有遠小近大的透視。
用超白話抓住等距插畫的關鍵特徵
如果你是等距插畫新手，可以先記三個關鍵：
- 固定角度：常見是左右軸各 30° 往外張，所有立方體、桌子、房子，都用同一組角度畫。
- 邊長不縮小：後面的物件不會因為「遠一點」就變小，深度是靠「遮擋關係、顏色深淺」來表現。
- 場景像積木：桌子、建築、角色，都像積木一樣可以疊起來，畫面很適合做資訊可視化。
判斷小訣竅：把畫面裡的桌腳、牆邊延伸出去，如果線條方向一致又互相平行，大多就是等距插畫。
從零開始畫第一張：超精簡等距插畫教學
步驟 1：選軟體＆開格線
能畫向量圖就行：Illustrator、Figma、Affinity Designer，或免費的 Inkscape 都可以。重點是：找等距格線（isometric grid）。很多軟體有預設，也有大量免費格線可以下載貼在底層當參考。
步驟 2：先畫一個等距立方體
- 先畫一個正六邊形或菱形，對齊格線。
- 複製切出上、左、右三個面。
- 三個面上不同明暗：上面最亮、正面中間、背光面最暗。
這個立方體，就是你之後所有「桌子、房子、箱子」的基礎模組。
步驟 3：用積木組一個小場景
把立方體拉高、拉寬，就能變成桌子、機器、人站的地板。再加一些簡單圖形當電腦螢幕、植栽、文件，就有一個小小工作桌場景。
想更快？搜尋「isometric free illustration pack」會找到不少可商用素材包，可以拆開研究，也能直接拼出第一張圖，熟悉一下比例和陰影。
等距插畫新手常犯錯＆如何一路畫到整組場景
3 個常見新手錯誤
- 角度亂換：同一張圖裡，有些用 30°，有些像 45°，畫面直接散掉。解法：一開始所有東西都靠格線，不要用目測。
- 比例失衡：桌子比人高兩倍，或手機跟桌面一樣大。解法：先畫「人」或一個標準物件當尺度，再依比例放大縮小其他東西。
- 顏色太吵：每個物件不同色，資訊焦點不明。解法：限制在 2–3 個主色，加 1–2 個點綴色，重要物件用相同色系。
進階：從一張圖練到一整組場景
如果你已經能畫一張桌面或一棟小房子，下一步可以這樣練：
- 同主題三連作：例如「線上學習」：一張畫桌面、一張畫教室、一張畫後台數據。限制使用同一組配色與同款角色。
- 做一條流程：把「註冊 → 下單 → 付款 → 收貨」畫成四個等距小場景，放在同一軸線上，變成服務流程圖。
- 加上視覺層級：利用亮度、飽和度，讓「主流程」最亮最顯眼，背景建築和裝飾則偏淡、偏灰。
等距插畫風格的完整場景作品示意，一個由多個小平台組成的城市資訊流場景：有辦公桌、伺服器、小房子與角色，全部以一致的等距角度排列。畫面中有兩位台灣年輕男女，一人站在平台上操作筆電，螢幕水平放在桌上、人物身體正面面向螢幕，眼睛看著螢幕，雙手自然在鍵盤上；另一人站在另一個平台，看著大型等距圖表，用手指向圖表。背景為漸層藍紫色，光線柔和，整體色調跟前面圖片一致，保留約 30% 上方留白可放文案。不要任何品牌 logo、不要可辨識商標、不要任何可讀文字、不要水印。
下一步：今天就試著畫出你的第一個等距小桌面
如果你看完還是覺得有點抽象，最好的方式就是打開手邊的繪圖軟體，先照上面步驟畫一個立方體，再組出一張「自己的工作桌」。不用追求美，先讓所有東西都乖乖貼在同一組等距格線上，你就已經跨出最難的第一步。
當你能穩定畫出 2–3 張一致風格的小場景，就能開始把等距插畫放進簡報、介紹頁、作品集，慢慢替你的設計加上「有空間感的故事」。