Gestalt Layout Diagnosis

Gestalt 版面知覺診斷

實驗講義｜認知心理學 — 知覺章

Section 01

一、認知理論背景

1.1 Gestalt 心理學的核心主張

Gestalt 心理學提出一個核心立場：整體不同於部分的總和（The whole is different from the sum of its parts）。

Goldstein & Hale (2026, p. 95) 指出，知覺系統能從靜止影像中產生運動知覺，顯示它不是被動接收，而是主動組織。這個觀察促使 Gestalt 心理學家開始提出一系列「組織原則」（principles of perceptual organization），描述知覺如何把局部線索整合成整體結構。

1.2 Pragnanz：最簡原則

所有 Gestalt 原則的根基是 pragnanz（簡潔律 / 好圖形法則）：

知覺系統傾向於把刺激組織成「最簡單、最規整、最穩定」的形狀。

Goldstein & Hale (2026, p. 96) 用這個原則解釋為什麼我們在部分遮蔽下仍能看見完整形狀——知覺系統會自動「補全」成最簡單的解釋。

設計含意： 如果你的版面提供了兩種可能的「簡單組織方式」，讀者通常會優先採用那個最省力的結構，即使那不是你希望他得到的概念結構。

1.3 Gestalt 原則 vs. Helmholtz 的 Likelihood Principle

Goldstein & Hale (2026, p. 97) 提供了一個重要的對照框架：

立場	核心主張	對學習的態度
Gestalt 原則	知覺組織是天生內建的	學習/知識的角色較小
Likelihood principle	知覺依賴經驗累積的假設	經驗與知識的角色較大

兩者不必二選一。對教材設計而言，這代表兩種「設計提醒」：

有些視覺組織是強力且普遍的（如 proximity、similarity），幾乎不受學習影響
有些則會被知識與脈絡高度調節（如你對特定圖表慣例的熟悉度）

本實驗同時測試兩類情境：原則一致時的自動組織，以及原則衝突時的猶豫與選擇。

Section 02

二、四個核心 Gestalt 原則

2.1 Proximity（接近性）

原則：空間上距離越近的元素，越容易被知覺為同一群組。

機制：知覺系統用空間距離作為「屬不屬於同一群」的快速線索。這可能是所有 Gestalt 原則中最強力的——間距的影響通常比顏色、形狀等其他線索更優先。

設計應用：

在版面設計中，間距比邊框更有效地創造群組感
相關內容之間的間距應該小於不相關內容之間的間距
教材中的「段落間距」「標題與正文距離」「圖片與說明文字距離」都在利用 proximity

常見錯誤：把標題放在前一段和後一段的正中間——讀者會不確定標題屬於哪一段。解法：讓標題更靠近它所屬的內容（縮小下方間距、加大上方間距）。

2.2 Similarity（相似性）

原則：外觀相似的元素（顏色、形狀、大小、方向）會被知覺歸為同一群組。

機制：當多個元素共享視覺屬性時，知覺系統自動把它們「綁在一起」，即使它們在空間上分散。

設計應用：

改變視覺屬性比加文字標籤更直覺——用顏色區分不同類別，比在每個元素旁邊寫標籤更有效
教材中的色彩編碼（color coding）直接利用 similarity
一致的視覺語言讓讀者可以快速辨識「這類元素是同一種東西」

常見錯誤：在同一頁面使用太多種顏色或形狀，導致 similarity 線索互相競爭，讀者無法建立穩定的群組。

2.3 Good Continuation（好延續）

原則：落在同一條平滑路徑上的元素，會被知覺為同一個連續物。

Goldstein & Hale (2026, p. 95) 指出，good continuation 是最常被媒材設計直接用到的原則之一：箭頭、線段、對齊方式，可能比你以為的更強烈地決定讀者覺得「哪些應該被連在一起」。

機制：知覺系統偏好「繼續」的假設——如果一條線開始了某個方向，它會繼續延伸。

設計應用：

流程圖、時間線之所以有效，正因為延續性引導了閱讀順序
表格中的水平線引導橫向閱讀；垂直線引導縱向閱讀
對齊（alignment）是 good continuation 在版面設計中的體現——左對齊的文字會形成一條隱形的垂直線，把段落「綁」在一起

常見錯誤：版面中的裝飾線或分隔線意外地把應該連續的內容「切斷」，讀者的視覺流被打斷。

2.4 Common Region（共同區域）

原則：被同一區域（框線、背景色、容器）包圍的元素，會被知覺為同一群組。

機制：區域邊界提供了明確的群組線索，即使區域內的元素在其他屬性上並不相似。

設計應用：

卡片式設計（card UI）之所以流行，正因為它利用了 common region
對話框、面板、分組框都是 common region 的實踐
在教材中用淺色背景框住相關內容（例如「概念框」「案例框」），比只用標題分隔更有效

與 proximity 的差異：Proximity 利用間距，common region 利用邊界。兩者可以疊加增強效果，也可能衝突。

Section 03

三、原則衝突：當多個原則「打架」

3.1 為什麼衝突很重要？

在真實的版面中，多個 Gestalt 原則通常同時運作。關鍵問題是：

當多個原則指向同一組織方式（一致）→ 判斷快速且自信
當多個原則指向不同組織方式（衝突）→ 判斷變慢、歧義增加、錯誤率上升

3.2 衝突範例

Similarity vs. Proximity 衝突：

接近性說左右各一組；相似性說黑圓一組、白圓一組。

Common Region vs. Proximity 衝突：

如果框線內的元素靠近框線邊緣，而跨框的元素反而更近，proximity 會告訴你「跨框的那兩個比較像一組」，但 common region 會告訴你「框內的才是一組」。哪個贏？

3.3 衝突的設計教訓

你的版面設計要讓多個原則協同（alignment），而非互相打架（conflict）。

這意味著：

間距、顏色、框線、對齊方向應該指向同一種群組結構
當你不確定時，測試——讓幾個人看你的版面，問他們「哪些東西看起來是一組」
如果必須讓某個原則覆蓋另一個（例如用顏色打破 proximity），要確保覆蓋的原則足夠強

Section 04

四、實驗設計說明

4.1 實驗目的

讓參與者：

體驗四個 Gestalt 原則如何自動影響群組知覺
比較原則一致 vs. 原則衝突時的判斷差異
透過反應時間的差異，量化「原則打架的代價」
將這些原則連結到版面設計的實際決策

4.2 實驗設計

本實驗包含 8 道視覺判斷題，分為兩類：

類型	題數	特徵	目的
原則一致	6 題	單一原則清楚指向正確分組	測試各原則的基本效果
原則衝突	2 題	兩個原則指向不同分組	測試衝突時的偏好與延遲

各題對應的原則：

題號	原則	類型	測試內容
Q1	Proximity	一致	基本接近性分組（2 組）
Q2	Proximity	一致	進階接近性分組（3 組）
Q3	Similarity	一致	顏色相似性分組
Q4	Similarity vs. Proximity	衝突	顏色 vs. 距離的競爭
Q5	Good Continuation	一致	兩條交叉曲線的辨識
Q6	Good Continuation	一致	點列構成波浪的辨識
Q7	Common Region	一致	框線內分組
Q8	Common Region vs. Proximity	衝突	框線 vs. 距離的競爭

4.3 實驗流程

每一題的流程：呈現視覺刺激 → 計時開始 → 選擇答案 → 記錄反應時間 + 選擇 → 即時回饋 → 1.6 秒後自動進入下一題（共 8 題，約 3 分鐘）

4.4 衝突題的設計

衝突題沒有標準答案。它們的目的不是測試「對錯」，而是觀察：

你偏向哪個原則？ 當 proximity 和 similarity 衝突時，你更依賴距離還是顏色？
衝突導致多少延遲？ 反應時間的增加就是「原則打架的代價」

4.5 反應時間的意義

本實驗記錄每題的反應時間（RT），並在結果頁比較：

一致題的平均 RT vs. 衝突題的平均 RT
預期：衝突題的 RT 顯著較長
RT 差異 = 知覺系統在多個組織方案之間猶豫的時間成本

關鍵概念：如果你的版面讓多個 Gestalt 原則打架，讀者在每個打架的地方都要多花時間——而這些時間累積起來就是「版面不好讀」的原因之一。

4.6 刺激繪製

所有視覺刺激使用 HTML Canvas 繪製：

圓形元素（proximity、similarity）
曲線（good continuation）
帶圓角的矩形區域（common region）
顏色使用紅（#d42b2b）、藍（#2b4fd4）、黃（#e8c840）三原色，呼應 Bauhaus 美學

Section 05

五、教材設計含意

5.1 四原則的版面設計速查表

原則	版面設計規則	檢查問題
Proximity	相關內容靠近，不相關內容遠離	「這兩段之間的間距是否暗示它們有關？」
Similarity	同類元素使用一致的視覺屬性	「讀者能否只看外觀就知道這些是同一類？」
Good Continuation	閱讀路徑應該平滑連續	「讀者的視線會自然流到哪裡？是我希望的方向嗎？」
Common Region	相關內容放在同一容器中	「框線/背景色是否正確地框住了應該在一起的內容？」

5.2 版面診斷三步驟

列出你希望的群組結構：哪些內容是一組、哪些不是
檢查每個 Gestalt 原則是否都指向你希望的結構：proximity、similarity、continuation、common region 是否一致？
找出衝突點：如果有任何原則指向不同的結構，要不是加強你希望的那個原則，就是削弱衝突的那個

5.3 「看起來清楚」不等於「組織正確」

Goldstein & Hale (2026, p. 84) 的城市場景示範提醒：設計者自己覺得「看起來很清楚」的版面，對初學者可能充滿「需要推理的謎題」。

你需要問的不是「我覺得清不清楚」，而是「初學者的知覺系統會怎麼自動組織這個版面？他的 Gestalt 原則會把哪些東西綁在一起？那是我希望的嗎？」

Section 06

六、課堂討論題

在本實驗中，衝突題的反應時間是否明顯長於一致題？這對版面設計有什麼啟示？
你在衝突題中偏向哪個原則（proximity vs. similarity？common region vs. proximity？）。全班同學的偏好是否一致？
找一個你覺得「不好讀」的真實教材頁面（投影片、課本、網頁），分析其中是否存在 Gestalt 原則衝突。
如果你只能調整一個設計元素來改善一個版面的可讀性，你會選擇調整間距（proximity）、顏色（similarity）、對齊（continuation）還是容器（common region）？為什麼？
Pragnanz 原則說知覺系統傾向最簡單的組織。這是否意味著「越簡單的版面越好」？什麼時候複雜的版面反而更有效？

Bauhaus / Gestalt