品牌行銷

格式塔原則排版應用:7 個法則讓版面一眼看懂

「整體不同於部分的總和(The whole is other than the sum of the parts)」,這是格式塔心理學創始人之一 Kurt Koffka 提出的一句話,他特別強調重點在「不同(other)」,不是常被誤傳的「更大(greater)」,因為那從來不是一道加法題。同一批文字、按鈕、圖示,只要間距、顏色、對齊方式一換,大腦看到的整體感受就完全不一樣,這正是格式塔原則排版應用要處理的核心問題,也就是讀者一眼看懂,跟覺得畫面很亂,中間那條看不見的分水嶺。

多數排版判斷聽起來很憑感覺:這裡該不該留白、那兩個按鈕該不該挨近一點、標題跟內文該不該用同一種顏色。但這些判斷背後,其實都有格式塔心理學研究透的規則可循。大腦看到一群元素時,會自動依循幾條固定邏輯把它們分組,設計師只是在順著或逆著這套邏輯做決定;順著做,讀者不用思考就能抓到畫面結構,逆著做,讀者得多花一層力氣去拼湊元素之間的關係,體驗就打了折扣。

這篇會逐一走過幾條最常被用在排版上的格式塔原則,每一條都配一組沒套用、套用後的實際對照。先從格式塔理論本身在講什麼、又是怎麼被研究出來的開始拆起。

格式塔原則是什麼?為什麼大腦會自動把畫面元素看成一組

格式塔(Gestalt)是一個德文詞,原意是「形狀」或「整體」,格式塔心理學研究的正是人類怎麼把零散的視覺線索,在腦中組織成一個有意義的整體。它的核心命題就是引言那句話,整體不等於部分的總和。這句話常被通俗地簡化成「整體大於部分總和」,聽起來只是說「加起來變多了」,但格式塔心理學要講的其實更根本。整體可能跟部分完全不一樣,不是量的疊加,而是質的轉變。一堆散落的線條疊在一起,大腦看到的不會是幾條線,而是直接看成一個圖形,這個圖形本身帶有的意義,是拆開來看任何一條線都找不到的。

放到視覺感知上,這代表大腦處理畫面的順序跟你想的可能相反。多數人以為眼睛是先看清楚每一個細節,再慢慢拼湊出整體印象,但格式塔心理學觀察到的剛好相反,大腦是先快速抓出整體的結構與分組,再回頭填補細節。這也是為什麼一份排版就算字都看得清楚,讀者還是可能覺得「亂」。亂的不是單一元素,而是元素被大腦分組的方式,跟設計師原本想傳達的不一致。

這對排版設計來說,意義不只是多學一個心理學名詞。間距留多少、顏色配得像不像、對齊線對不對齊,這些看起來憑手感的決定,其實每一項都在操控讀者大腦怎麼分組。用對了,讀者不假思索就看懂資訊之間的關係;用錯了,讀者得先自己在腦中重新分類一次,才有辦法理解內容。接下來要拆的幾條格式塔原則,就是格式塔原則排版應用裡,最實用的幾個判斷工具。

把相近、相似、共同區域、連續、封閉、圖地、對稱與簡化 7 條格式塔原則排版應用彙整成一張分組法則總覽卡
排版最常用的 7 條格式塔分組法則:從相近、相似到對稱與簡化,都是大腦自動分組的邏輯。

格式塔心理學的起點:三位德國心理學家

這套理論最早可以回溯到 1912 年,德國心理學家 Max Wertheimer 在法蘭克福做了一場實驗,他讓兩盞固定位置的燈,以極短的時間差輪流閃爍。結果受試者看到的不是兩盞燈各自在閃,而是一盞燈在兩點之間移動。這個現象後來被稱為「phi 現象」。Wertheimer 找了 Wolfgang Köhler 與 Kurt Koffka 當受試者,三人後來一起把這個發現延伸成一整套理論,主張大腦處理視覺訊息時是「整體優先」,而不是像過去的心理學研究那樣,把知覺拆解成一堆各自獨立的感官刺激去分析。

這場實驗之所以重要,是因為它讓人第一次看清楚,眼睛接收到的訊號其實是靜態、片段的,得靠大腦主動把這些片段組織起來,才會變成一段連貫的整體感知。這個從實驗室裡發現的現象,後來被設計界拿來解釋螢幕或紙本上一堆分散的元素,為什麼會被讀者的大腦自動看成有結構的整體,也成了接下來每一條排版原則共同的起點。

相近原則:物件擺得越近,讀者就越認為彼此有關係

兩個按鈕擺近一點,讀者會直覺以為它們是同一組功能;擺遠一點,又會覺得八竿子打不著關係,這就是相近(Proximity)原則在起作用。大腦判斷「這些東西有沒有關係」,空間距離往往是最直覺的線索,不需要框線、不需要分隔符,光靠間距就能建立分組關係。

同一份表單間距一改,三個欄位靠緊就被讀成一組、版權宣告拉開後自成一區,示範相近原則的分組效果
間距是最直覺的分組線索:相關欄位靠近、無關資訊拉開,不必畫線也能分出群組。

這條原則失靈時最常見的地方是表單。假設一份聯絡資訊表單裡,姓名、聯絡電話、信箱三個欄位彼此之間的間距,跟旁邊完全不相干的頁尾版權宣告區塊距離一樣近,讀者沒辦法單靠間距分辨「這三個欄位算一組,版權宣告是另一回事」,得多花一層判斷才分得清楚,填表單的順暢感就先打了折扣。

Google 旗下的協作工具,就是套用相近原則的好例子。無論是 Gmail 還是文件編輯器,同一類功能的圖示,像加粗、斜體、底線這幾個文字格式選項,彼此會緊靠著排在一起,跟其他功能群組之間刻意留出更大的間距,不靠邊框線,使用者也能一眼看出「這幾個屬於同一群」。同樣的邏輯放到日常排版一樣管用。段落與段落之間的留白量,直接決定讀者會不會誤判段落歸屬;名片上姓名跟職稱該貼多近才算「同一組資訊」,答案也是同一套規則,關係越近的資訊,間距就該留得越小。

相似原則:長得像的東西,會被大腦自動歸成同一組

如果相近原則靠的是「距離」,相似(Similarity)靠的就是「長相」:顏色、形狀、字重、大小,只要有共通點,大腦就會把它們自動歸成同一類,不管它們實際上擺得多遠。這條原則在排版上最實用的場景,是幫讀者快速分辨「哪些是可以點擊的元素」跟「哪些只是純資訊文字」,建立一套一致的視覺語言,讓讀者不用逐字閱讀也能快速掃描出重點。

把可點擊的連結與按鈕統一成同一種顏色與樣式,讀者不用逐一試探就能掃出哪些能點,示範相似原則
長得像的會被歸成同一類:把可點元素統一成一種樣式,讀者一眼就掃得出重點。

沒套用相似原則的頁面,常見的問題是所有文字不管是不是連結,都用同一種顏色跟字重呈現。讀者只能一個個滑鼠移過去試,才知道哪裡真的能點、哪裡只是說明文字,這種試出來的體驗,對使用者來說是額外的認知負擔。

電商平台 Etsy 的商品格線做法,把每個商品方塊的尺寸、間距、按鈕樣式都做到完全一致,讓使用者一眼就懂「這些是同一類、可以互相比較的東西」。視訊會議工具 Zoom 的首頁則是靠顏色分工,註冊、報價這類可執行的動作按鈕統一用藍色,資源、方案、產品這類純資訊連結則統一用灰色,光靠顏色差異就能引導使用者分辨功能。這兩個案例用的手法不同,一個靠版面規格統一、一個靠色彩分類。但邏輯完全一樣,長得像的東西,讀者就會預設它們扮演同樣的角色。

畫面沒有分隔線,讀者怎麼知道哪些內容算同一區?

三種分組線索裡,力道最強的一個不是靠距離,也不是靠長相,而是靠同一個邊界。只要幾個元素共享同一個色塊、卡片或邊框,就算它們彼此距離不特別近、外觀也不特別像,大腦一樣會把它們看成一組,這就是共同區域(Common Region)原則要講的重點。這也是共同區域跟相近、相似最大的差別。前兩者是「暗示」分組,共同區域幾乎是「宣告」分組,常被用在資訊量大、需要模組化呈現的排版,像是儀表板、活動流程表、內容分類頁。

把活動時間表的每一場包進各自的卡片容器,讀者一眼就分出三場,示範共同區域比間距更強的分組力道
共享同一個容器就是一組:與其硬拉開間距,不如給每組資訊一個框,分辨更省力。

一份活動流程時間表若是整段塞進同一片沒有任何分隔的空白背景裡,項目跟項目之間只靠一點點行距做區隔,讀者很容易看串,上一場活動結束在哪裡、下一場從哪裡開始,得靠自己重新數過一遍才分得清楚。

串流平台 Netflix 的首頁,就是共同區域用得極致的例子。「繼續觀看」、「為你推薦」這類每一列內容,都用獨立的視覺容器呈現,就算沒有明顯的外框線,讀者也能秒懂「這一整排都是同一組」,滑動瀏覽時不會把不同列的內容混在一起判讀。這種做法特別適合內容量大的頁面,與其靠加大間距硬把每組資訊撐開,不如直接給它一個共同的容器,讀者分辨起來更省力。

連續原則:視線一旦起步,就會順著線條走到底

視線一旦開始沿著一條路徑移動,就會傾向順著走到底,就算中間被其他元素打斷,大腦也會把它自動接成一條連續的路。這就是連續(Continuity)原則,人眼對「順著一條線或曲線移動」有天生的偏好,排版上最常用來引導視覺動線,像是時間軸、進度條、輪播內容。

把散落的步驟卡片對齊成一條由左到右的動線,視線順著箭頭一路走到底,示範連續原則引導視覺動線
視線一旦沿路徑起步就會走到底:把步驟對齊成一條線,讀者不必每步重新找方向。

如果一系列的步驟卡片東一塊、西一塊散落排列,沒有共同的視覺路徑可循,讀者每完成一個步驟,都得重新在畫面裡搜尋「下一步在哪裡」,注意力就這樣一路被打斷。

社群平台的限時動態介面、求職平台的逐步註冊流程,都靠一致的方向,由左到右或由上到下,讓使用者不假思索地往下一步走,不需要每次都重新定位視線。電商網站的相關商品輪播也是同一套邏輯,利用水平排列,引導視線持續往右掃過去,讀者不會意識到自己「正在被引導」,只會覺得瀏覽起來很順。

畫面不必畫滿,大腦會自動把缺角補完整

多數排版原則在教你怎麼把東西擺在一起,封閉(Closure)反過來教你,東西不完整,大腦一樣會自己補完。只要視覺資訊留下夠明確的線索,大腦就會自動填補缺口,把殘缺的圖形腦補成完整的樣子。排版上常見的兩種手法,一是局部露出的圖片暗示「還有更多內容」,二是簡化到只剩局部線條的圖形,讀者仍然認得出它是什麼。

只給斷弧與四個角的線索,大腦仍把殘缺圖形讀成完整的圓與方,示範封閉原則的補完機制
留下缺口,大腦會自己補完:只剩局部線條的圖形,仍被讀成完整的圓與方。

一張完整置中、四周留白收得乾乾淨淨的圖片,讀者看了會直覺認為「資訊已經看完了」,沒有繼續往下瀏覽的動機。封閉原則在這裡反而幫了倒忙,因為畫面本身已經太完整,大腦不需要再腦補什麼,也就沒有繼續探索的理由。

反過來,把圖片刻意裁到頁面邊緣、只露出一半,大腦會覺得「這裡還沒看完」而主動往下滑,想看看被裁掉的那部分長什麼樣子。世界自然基金會(WWF)的熊貓標誌是封閉原則最經典的示範,標誌裡有大片留白跟缺角,黑白色塊拆開來看根本不成形狀,但大腦仍然會自動把它補成一隻完整的熊貓,而不是一堆隨機拼貼的色塊。

圖地原則:誰是主角、誰是背景,決定讀者先看到什麼

打開一個彈出視窗時,你會很自然地知道現在該看哪裡、該操作哪裡,這種直覺,其實靠的是大腦先把畫面切成前景(主體)跟背景兩層,也就是圖地關係(Figure-Ground)原則在運作。它能藉由對比、模糊化、遮罩這些手法,明確告訴讀者視線該落在哪個層次,這也是留白、負空間之所以能發揮作用的心理基礎。

把彈窗背後的頁面整片壓暗,彈窗清晰浮出成為前景,讀者一眼知道只能操作彈窗,示範圖地關係
分出前景與背景:背景一暗、彈窗浮起,讀者立刻知道視線該落在哪一層。

一個彈出視窗如果跟底下的頁面用同一種白色背景,沒有做任何暗化或遮罩處理,讀者會一時分不清楚現在該操作的是這個彈窗,還是底下那層頁面的內容。圖地關係一旦沒被明確建立,使用者的注意力就會在前景和背景之間游移。

Apple macOS 的彈窗設計是常見的正確示範,彈窗本身保持清晰、背景整片變暗,讀者一眼就懂「現在只能操作這個視窗」,不用多想。平面設計裡最經典的圖地案例則是國際快遞品牌 FedEx 的標誌,E 與 X 兩個字母之間的負空間,刻意留出一支隱藏的箭頭,同時傳達了「品牌名稱」與「快速、精準」兩層意涵,是圖地關係用在正式視覺識別上的示範。

排版失衡時,讀者的眼睛在找什麼?

分組類的格式塔原則講到這裡,還缺最後一塊拼圖。大腦不只在乎「這些元素算不算同一組」,還在乎整個畫面「看起來平不平衡」,這正是對稱與簡化(Symmetry,常跟 Prägnanz、良好圖形法則一起討論)在處理的層次。大腦天生偏好簡單、平衡、有秩序的形式,一旦畫面失衡,讀者會無意識地想去「修正」它,這股修正的衝動反而會分散掉他對內容本身的注意力。

把全擠在左側的版面改成置中、兩側留白對稱的平衡分佈,視線安定不再懸念,示範對稱與簡化原則
大腦偏好平衡:分佈對稱、留白均勻,讀者才不會被失衡的畫面拉走注意力。

一個左右元素分佈不均、兩側留白量差異很大的排版區塊,讀者看了會直覺覺得「右邊內容好像還沒結束」,產生一種不必要的視覺懸念,忍不住去猜測、去尋找,而不是專心把內容讀完。

萬事達卡(Mastercard)的標誌是對稱原則的直接示範,兩個互扣的圓圈左右對稱、大小一致,讀者一眼就讀出「穩定、平衡」的視覺印象。奧運五環標誌則示範了簡化法則(Prägnanz)在起作用,即使只剩線條、拿掉顏色,大腦仍然會自動把它辨識成「五個重疊的圓圈」,而不是一堆彎曲交錯的線條,因為大腦永遠會挑最簡單好懂的那個解釋。

不過對稱不是排版的萬靈丹,過度追求左右對稱,容易讓畫面顯得死板、缺乏生氣;適度的不對稱,比如刻意留出不均等的留白量,反而能為版面製造節奏感,讓讀者的視線有地方可以停留、呼吸。

回到引言那句「整體不同於部分的總和」——前面走過的這幾條格式塔原則排版應用,做的都是同一件事,利用大腦自動分組的慣性,讓讀者不用刻意思考就看懂排版背後的邏輯。

這篇聚焦在靜態排版最常用到的幾條原則,格式塔理論裡其實還有像「共同命運」這種更偏動態、互動設計的延伸,例如一群圖示同時往同個方向移動,會暗示彼此之間有關聯,等版面開始加入動態效果時,會更用得上。

下次動手排版前,不妨先問自己一個問題:「這個間距、這個顏色、這個位置,會讓讀者的大腦把畫面分成幾組?」這個問題,往往比任何排版範本都準。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

整體不同於部分的總和是什麼意思?

這句話是說整體可能和部分完全不一樣,不是量的疊加,而是質的轉變。像一堆散落的線條疊在一起,大腦看到的不是幾條線,而是直接把它看成一個圖形。這個圖形本身的意義,拆開來看任何一條線都找不到。

相近原則怎麼影響讀者對物件的分組判斷?

相近原則是指物件擺得越近,讀者就越容易直覺認為彼此有關係,光靠間距,不需要框線或分隔符,就能建立分組關係。相反地,若不同資訊之間的間距一樣近,讀者就得多花一層判斷,才能分辨彼此其實不是同一組。

共同區域原則為什麼是分組力道最強的原則?

共同區域原則是讓元素共享同一個色塊、卡片或邊框,就算彼此距離不近、外觀不像,大腦也會直接把它們看成一組。相近靠距離、相似靠外觀,兩者都只是「暗示」分組,共同區域則幾乎是「宣告」分組,因此力道最強。

封閉原則怎麼讓大腦補完不完整的畫面?

封閉原則是指視覺資訊只要留下夠明確的線索,大腦就會自動填補缺口、把殘缺的圖形腦補成完整的樣子。例如把圖片刻意裁到頁面邊緣只露出一半,會讓讀者覺得「這裡還沒看完」而主動往下滑,繼續探索內容。

圖地原則怎麼幫讀者判斷畫面該看哪個層次?

圖地原則是靠對比、模糊化、遮罩等手法,把畫面切成前景主體與背景兩層,明確告訴讀者視線該落在哪裡。例如彈出視窗若背景整片變暗、視窗本身保持清晰,讀者就能一眼看懂現在只能操作這個視窗。

資料來源
  1. Gestalt Psychology — Kurt Koffka