格式塔原則

Properties2
tags狀態/草稿, 領域/簡報, 領域/設計, 領域/ux
aliasesGestalt Principles, 格式塔, 完形原則

閱讀時間約 13 分鐘

格式塔原則

一句話定義

來自 20 世紀初格式塔心理學派（Gestalt Psychology）的視覺認知原則——「整體大於部分之和」：人腦會自動把視覺元素群組化、簡化、補完。設計上應用為讓相關元素被視覺自動歸為一組，避免畫面雜亂。本 vault 採 2026-05-01-簡報懶人包 的簡化教學版：方框 Framed / 填色 Filled / 對齊 Aligned 三方程式。

核心要點

三方程式（2026-05-01-簡報懶人包 簡化版）

1. 方框 Framed

方框可以讓不同大小的文字、內容框在一起變成同樣主題的內容——觀眾的眼睛自動把方框內元素視為一組。

  • 應用：標題 + 內文 + 圖示放在同一框內 → 認知為「同一個主題」
  • 反模式：用方框框無關元素，反而誤導群組關係

2. 填色 Filled

用相同顏色填充背景，讓不同位置的元素被視為同類——對位「對比」原則：講或強調的重點用突出色填充，普通資訊用無背景或淺色

  • 應用：CTA 按鈕填亮色 / 普通選項僅描邊 / 不可選項灰色
  • 反模式：填色超過 3 種主色，觀眾無法快速分類群組

3. 對齊 Aligned

簡單又有效的對齊法，就算文字很多也會很整齊——任何兩個元素若視覺上看起來對齊（左 / 右 / 中 / 基線），人腦就會把它們視為相關

  • 應用：所有副標題對齊到同一垂直線、所有內文對齊到同一基線
  • 反模式：每個元素隨意擺放、各自為政——眼睛找不到視覺錨點，畫面看起來「亂」

群組化的根本邏輯

「善用圖形間的關連性，能讓畫面快速地變的簡潔又好看」（2026-05-01-簡報懶人包 p.18）

人腦預設會把視覺元素群組化——這是節省認知能源的本能。設計師的工作是主動引導群組化方向，讓「該被視為一組的東西自動成組」。三方程式都是這個本能的具體應用工具。

牌卡式圖表場景

2026-05-06-60分鐘打造質感簡報-資訊圖表 的牌卡式圖表，是三方程式在簡報圖表中的具體落地：

  • 方框：用圓角矩形把圖表、數值、結論分成不同閱讀區塊。
  • 填色：用淡色背景讓卡片從投影片背景中浮出，但不搶過圖表本身。
  • 對齊：左右、上下、區塊間距、內距都要一致；一旦不對齊，卡片會從「引導閱讀」變成「新增雜訊」。

→ 牌卡式圖表的價值不是裝飾，而是幫觀眾按講者安排的順序分區掃讀。

視覺動線場景

2026-05-07-即學即用的圖像資訊表達課 C4 把格式塔原則放進「眼睛的語言」：相似或相近的物件應放在一起，讓它們被看成同一群體；圖片中人物或物件的視線方向也會引導讀者往下一個重點看。

這補上三方程式之外的操作視角：

  • 接近 / 相似：相近與相似物件自然成組，適合整理同類資訊。
  • 連續：視線、箭頭、排列方向會建立閱讀路徑。
  • 圖地關係：主視覺與背景若沒有清楚分離，讀者會失去第一眼錨點。

整齊四步驟：格式塔的操作版

2026-05-09-60分鐘打造質感簡報-關鍵第一步 把「整齊」拆成四個新手可執行步驟，對應格式塔中的對齊、接近、相似與圖地分離：

步驟格式塔對位效果
尺寸統一相似同類圖片 / 物件尺寸一致，觀眾才會把它們看成同一層資訊
間距統一接近 + 對齊物件內距與物件間距一致，群組關係才穩定
物件留白圖地關係icon / 文字不貼齊底層色塊，前景與容器才可分辨
四邊留白圖地關係 + 版面邊界內容不貼投影片邊緣，畫面才有可呼吸的外框

這段補強一個實務判斷：畫面「整齊」不是單純用 PowerPoint 對齊按鈕，而是讓相關元素在尺寸、距離與留白上呈現一致規則。觀眾因此不必重新猜每個元素之間的關係。

三個元命題

  1. 「整齊感」是被設計出來的不是憑空的——把 5 個元素隨意擺放看起來雜亂，把同樣 5 個元素對齊到統一基線就「乾淨」；同樣資訊量、體感差異巨大
  2. 方框 + 填色 + 對齊三者疊加最有效——單用對齊容易枯燥、單用填色容易花俏、單用方框容易死板；三者按需組合產生階層感
  3. 本 vault 版是教學簡化版——學術格式塔包含接近、相似、連續、閉合、共同命運、圖地關係等 6+ 原則，本頁三方程式是「初學者最容易上手」的版本；隨來源累積可擴充

反模式

  • 同時用方框 + 填色 + 線條 + 陰影包裝同一組元素 → 過度設計，元素被「保護」太多反而失去重點
  • 填色超過 3 種主色 → 群組化失效，觀眾無法判斷哪些屬於同類
  • 對齊但不一致（有的左對齊有的中對齊有的右對齊在同一頁混用）→ 比完全不對齊更糟；對齊規則必須在同一頁內統一

與其他概念的關係

簡報設計家族

  • 屬於 簡報設計 「第三層：視覺設計」的工具——「兩個難以出錯的平面設計技巧」之一（另一個是蒙版技巧）
  • 與 資訊層級：資訊層級是內容分類、本頁是視覺組合——先用資訊層級分四級，再用方框 / 填色 / 對齊把同層級元素群組化
  • 與 字型搭配：字型搭配是字體層的對比與和諧、本頁是版面層的群組化——兩者都服務「視覺上自動成組」

設計理論家族

  • 與 排版：本頁的「對齊」對應 易讀性 中的重複節奏和留白；屬於 排版 工具集的核心子集
  • 與 排版設計系統：8 大視覺組織系統都隱含格式塔原則——軸線用對齊建立中軸 / 雙邊對稱用相似建立平衡 / 模組用方框建立群組 / 網格用對齊 + 接近建立秩序；本頁是排版設計系統的底層認知基礎
  • 與 Logo設計原則 的「功能性」：好 Logo 在不同尺寸下都能被識別——這是格式塔「閉合」原則的應用（即使局部缺漏，整體輪廓仍能被腦補完整）；本頁簡化版未涵蓋此細節
  • 與 包裝設計：包裝上的圖示、品牌名、規格說明應按格式塔群組呈現——產品照 + 主訴求文案放方框 / 細節說明放下方分區；觀眾在貨架前 1 秒抓得住主軸
  • 與 圖表設計：本頁三方程式（方框 / 填色 / 對齊）+ 顏色為次級訊號的紀律 = 圖表中Marks 形狀群組化 + 顏色加強而非取代訊息 的底層認知基礎；圖表設計 5 要點（Marks / Axes / Descriptions / Interaction / Color）皆隱含格式塔原則。本頁備註的「(d) Gestalt 在 資料視覺化（chart design）中的應用」未來方向已透過 2026-05-02-蘋果與谷歌圖表設計大揭秘 落地

相關來源

備註

  • 教學簡化版 vs 學術完整版的差距：學術 Gestalt principles 至少有 6 條經典原則——
    • 接近（Proximity）：靠近的元素被視為一組
    • 相似（Similarity）：外觀相似的元素被視為一組
    • 連續（Continuity）：眼睛偏好順著線條 / 曲線移動
    • 閉合（Closure）：缺口會被腦補成封閉形狀
    • 共同命運（Common Fate）：一起運動的元素被視為一組（動畫場景）
    • 圖地關係（Figure-Ground）：前景與背景的辨識
    • 本 PDF 的「方框 / 填色 / 對齊」三方程式分別對應閉合 + 相似 + 連續的具體操作版本
  • 未來累積方向：(a) 學術版六大原則的完整對位（待 2+ 設計理論來源累積）；(b) 共同命運 在動畫 / 互動介面中的應用；(c) 圖地關係 在包裝、Logo、廣告海報中的反轉操作；(d) Gestalt 在 資料視覺化（chart design）中的應用——對齊軸 / 顏色語意 / 資料分組視覺化
  • 達 2+ 來源後可拆出 Gestalt-完整原則 學術版作為深化頁；目前簡化版三方程式優先服務簡報初學者場景

反向連結