產品經理充電：設計法則——格式塔理論

上篇文章中涉及到了格式塔理論中的接近法則，由于除了接近原則之外，格式塔原則還有著其他的一些原則，所以就打算另開一篇文章來寫。本文主要分為四部分，分別是什么是格式塔理論、格式塔理論的基礎、創始人提出的五項法則以及常見的格式塔法則在設計中的應用。

一. 什么是格式塔理論

格式塔是德文Gestalt的譯音，意即“模式、形狀、形式”等，意思是指“動態的整體（dynamic wholes）。格式塔理論自1912年由韋特海墨（Ｍ,Wetheimer）提出后，在德國得到迅速發展，后來由于苛勒（Ｋ,Kohler）和考夫卡（Ｋ,Koffka）的訪美以及他們的著作被翻譯成英文之后得到進一步傳播，在國內格式塔心理學又被稱為“完形心理學”。

格式塔理論和研究述及了這樣一個觀念，即人們的審美觀對整體與和諧具有一種基本的要求。簡單地說，視覺形象首先是作為統一的整體被認知的，而后才以部分的形式被認知，也就是說，我們先“看見”一個構圖的整體，然后才“看見”組成這一構圖整體的各個部分。格式塔心理學派斷言：人們在觀看時，眼腦并不是在一開始就區分一個形象的各個單一的組成部分，而是將各個部分組合起來，使之成為一個更易于理解的統一體。

此外，他們堅持認為，在一個格式塔（即一個單一視場，或單一的參照系）內，眼睛的能力只能接受少數幾個不相關聯的整體單位。這種能力的強弱取決于這些整體單位的不同與相似，以及它們之間的相關位置。如果一個格式塔中包含了太多的互不相關的單位，眼腦就會試圖將其簡化，把各個單位加以組合，使之成為一個知覺上易于處理的整體。如果辦不到這一點，整體形象將繼續呈現為無序狀態或混亂，從而無法被正確認知，簡單地說，就是看不懂或無法接受。

格式塔理論明確地提出：眼腦作用是一個不斷組織、簡化、統一的過程，正是通過這一過程，才產生出易于理解、協調的整體。

注：本段文字摘自百度文庫 《格式塔原理及應用》

二. 格式塔理論的基礎

格式塔理論明確地提出：“眼腦作用是一個不斷組織、簡化、統一的過程，正是通過這一過程，才產生出易于理解、協調的整體。”由此才產生了格式塔理論的一些基礎原則：

1整體性

格式塔學派主張人腦的運作原理是整體的，“整體不同于其部件的總和”，所以在我們嘗試分辨某物體時，我們的眼睛會首先去識別物體的整體輪廓，然后將整體的輪廓同大腦中原有的記憶進行比對，從而產生聯想的結果。

比如在下圖中，我們可以輕易的分辨出這是一條狗，而不是先識別出狗身體的各個部分，然后再把它們拼接成一條狗。

2具體性

具體性是知覺的“建設性”或“生成性”的方面，這種知覺經驗，比起其所基于的感覺刺激，包括了更多外在的空間信息。

當視覺信息中存在空白、或者信息不完整、信息錯位時我們的大腦會自動將缺失的信息進行補充，或者將順序進行調換，比如你將漢字遮擋住一半或者將英文單詞固定首尾兩個字母，而將中間的幾個字母進行順序調換時，依然能夠進行正常的閱讀。

在下圖中，雖然信息存在缺失，但是我們依然能夠分辨出四個選項中的幾何圖形。

3組織性

組織性是指我們的大腦可以不穩定地在兩個或兩個以上不同解釋之間進行往返，但是大腦在同一時刻只能給予一種解釋，當我們盯著一種解釋的時間越長，這種解釋就會占據主導作用，比如下面的這幅圖像，你看到的是什么？

4恒常性

恒常性是指知覺認可的簡單幾何組件，在當組件進行獨立的旋轉，平移、大小以及其他一些變化（如彈性變形，不同的燈光和不同的組件功能）時，我們的大腦仍然能夠輕易的認出這個物體。

比如在下面的圖像中，這些組件發生了平移、旋轉或者變形，我們依然能夠識別出來它們。

三. 創始人提出的五項原則

格式塔心理學派的創始人最早提出了五項格式塔原則，分別是Simplicity (簡單)、Proximity (接近)、Similarity(相似)、Closure (閉合)、Continuity (連續)，后來又延伸出一些其他的格式塔原則，比如對稱性原則、主體/背景原則、命運共同體原則等…

1簡單

我們的眼睛在觀看時，眼腦并不是在一開始就區分一個形象的各個單一的組成部分，而是將各個部分組合起來，使之成為一個更易于理解的統一體。比起復雜的視覺效果，人們反而更容易接受基本的幾何圖形。

2接近原則（強調位置）

接近原則是指物體間的距離會影響我們對于物體的感知，我們會自動的將距離較近的物體歸到一組，而將距離較遠的物體歸為另一組。

對應在設計中的案例就是會利用留白來進行區塊分割，從而讓人們將距離最近的元素看成一組，或者將元素至于不同的位置的手段來進行分塊，比如我們很自然的會將導航欄中的元素與標簽欄中的元素區分開來。

3相似原則（強調內容）

相似原則是指當其他因素一致的情況下，我們會習慣性的將看起來相似的物體歸到一組，比如在下圖中，我們會將圓形分為實心和空心的兩組，對應在設計中的案例就是會利用形狀、顏色、或者大小來進行元素的分組。

4閉合原則

人們在觀察熟悉的視覺形象時，會把不完整的局部形象當作一個整體的形象來感知，這種知覺上的結束，稱之為閉合，如果局部形象過于陌生或者過于簡略，則不會產生整體閉合聯想。

比如下圖左側中的三角形與右側的大熊貓，即使我們只感受到了不完整的局部形象，卻能夠聯想到三角形與熊貓。

5連續原則

人的視覺會追隨一個方向的延續，以便把元素聯接在一起，使它們看來是連續向著特定的方向進行移動，這意味著用戶會按照視覺引導從而將排成一條直線或者曲線的元素當成一組，比如在下圖中的視覺引導：

四. 常見的格式塔原理的應用

格式塔原理中有一些原則會經常出現在設計中，這里只舉例說明幾個常見的原則：

1接近原則

利用留白或者閉合的線條來形成明確的邊界，來將元素進行分塊，從而讓用戶將臨近的一些元素劃分為一組，見下圖紅線框出的部分。或者將元素放置在同一位置，從而讓用戶將這些元素劃分為一組，比如下圖底部的標簽欄以及微信聊天框中左右信息的分欄。

再舉一個案例，更新個人信息的界面，上面的圖形由于距離太遠，用戶很難將輸入框與標簽的內容進行聯系，下面的圖形才是正確的打開方式。

2相似原則

其他元素一致的情況下，我們會傾向于將看起來相似的元素歸到一起，比如在下圖的注冊流程中，通過顏色的指示，我們很自然的就知道當前所在的位置，而將剩下的被灰化的步驟歸為另一組，另外也可以通過形狀或者大小來進行分組。

3對稱性原

則 在移動端由于屏幕有限，很容易產生失衡的感覺，所以很多情況下的設計都會盡可能的采用對稱的設計。多數情況下，在不違背iOS設計規范的情況下，都會將操作按鈕平衡在導航欄的兩側，如下圖：

4連續性原則

由于人的視線會在某一個方向進行延續，所以會有著一些元素來進行視覺上的引導，來引導用戶的視線進行左右或者上下移動，從而將不同的元素通過細微的共性連接在一起，比如在導航欄中的一級導航與二級導航，另外導航欄中也體現著接近原則與相似原則。

5主體/背景原則

頁面內容通常包括主體和背景，而根據格式塔理論的組織性原則，在主體和背景之間是能夠進行互換的，可以通過顏色和排版來將背景進行模糊處理，從而將想要突出的焦點進行突出，也可以直接將背景進行灰化處理，比如常見的彈窗：

以上就是關于本文的全部內容，主要講述了格式塔原理的內容以及一些應用的案例，另外也有著一些自己的心得感想。鑒于個人知識水平有限，有些地方考慮的并不全面，或者有錯誤的地方，歡迎斧正、指點、交流。

關于我：王家郴，喜歡網球和騎行的產品汪。公眾號（產品經理從0到1），每周都會在公眾號上寫點東西，歡迎關注,求指教、求分享、求交流。目前奔走在產品的道路上，漫漫產品路，與君共勉。