設計法則： 格式塔原理

前序：因為格式塔原理在設計中應用的比較廣泛，有眾多前輩精心整理了相關知識概念，在大量閱讀相關文章之後，挑選了其中比較優秀的一篇轉載（補充了一些案例和相關說明，以“注"的形式呈現）如下，其他相關優秀文章請通過文末擴充閱讀連結參閱。

先欣賞一張雅虎ued繪製的關於“格式塔"的Q版小漫畫，初步瞭解下格式塔原理：

一、什麼是格式塔原理 (Gestalt)

格式塔心理學誕生於1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象並對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的：我們的視覺系統自動對視覺輸入構建結構，並在神經系統層面上感知形狀、圖形和物體，而不是隻看到互不相連的邊、線和區域。“形狀”和“圖形”在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。

二、最重要的格式塔原理

接近性原理；相似性原理；連續性原理；封閉性原理；對稱性原理；主體/背景原理；共同命運原理。

1、接近性原理（注：強調的是位置）

接近性原理說的是物體之間的相對距離會影響我們感知它是否以及如何組織在一起。互相靠近（相對於其它物體）的物體看起來屬於一組，而那些距離較遠的則自動劃為組外。

注：應用接近性原理可以達到減少使用者介面上視覺凌亂感和程式碼數量。

如上圖所示，左圖中的圓相互之間在水平方向比垂直距離近，那麼我們看到了四排圓點，右側則看成四列。

接近性原理案例

案例1：不同財經類網站的索引模組

上兩圖截自不同財經類網站的索引模組，第一幅圖中雖然以紅色重點標註分類欄位，但人們視覺習慣性還是會以列為分組，與實際所展現出的以行為組的排列相斥，使用者閱讀時引起不必要的視錯覺。同樣的內容，那麼圖2的排列方式做到了視覺與內容分組統一，作為使用者來講，查詢的內容時是否更直觀明瞭？

案例2

案例2，這是兩組不同物品，設計師在處理設計形式上做到了完全一致，但由於中間的距離之差令人清晰分辨出是兩組而非一體。

2、相似性原理（注：強調的是內容）

如果其它因素相同，那麼相似的物體看起來歸屬於一組。

相似性原理

圖中每個圓點縱橫距離相同，但我們習慣性把外形相同的同心圓看成一組

相似性原理案例

案例3 

每個模組外形保持一致，但第一個在顏色上區別於其它，即能保持版面整齊又能使使用者直觀感受到灰色內容與綠色丙容展示的是不同功能。

案例4

外型一樣，間距一樣，第一個區域的內容明顯區別其它，那麼自然在視覺上我們把它單獨分成一組，其它幾個則分成一組。在做活動頁排版時是否可以依此規則擺放？還用抓破頭皮想每個模組要突出要分類這些問題嗎？

案例5：使用者註冊頁面

同樣的使用者註冊頁面，是純色引導一通到底還是給當前執行區域特殊標註？顯然是後者，人們的視覺會自動把相同填充色的歸類，而那個特殊的區塊會從中剝離出來。設計師你注意到這個細節了麼？

案例6

由於對齊方式的不同，視覺上會把案例6圖1中左側字解析成一列，右則文字框解析成一列，顯然使用者使用時容易出現視錯覺。

注：補充一個案例

觀察上圖Tumblr是如何應用相似性原則的。如圖所示，不同圖示代表了釋出部落格的不同方式。相似性體現在哪兒呢？

1）、每個圖示下都有文字說明。2）、圖示的大小，文字說明的字型以及大小都是相同的。3）、每個圖示都被均勻的分佈在了空間內。

從釋出部落格的過程中我們瞭解到什麼？

1）、作為使用者，我們知道這些圖示都可以釋出部落格。2）、我們也清楚的知道每個圖示代表的不同意義，能滿足我們不同的需要。

3、連續性原理

視覺傾向於感知連續的形式而不是離散的碎片

我們看到的左圖是藍橙兩條相交線而非四條線段與一個圓點,你看到的右圖是一些零散的藍色線條還是IBM三個字母？當然是三個字母，你的視覺有意去組織離散碎片形成整體。

連續性原理案例

看完這四幅圖你什麼感覺？這個設計師圖沒擺對位置，以至於使用者看不全內容？非也！這樣的構圖不但不影響視覺效果反倒增加頁面的擴充套件性，視覺有意組織離散元素假想整體的能力不容小覷。還在把主形象等比縮小全部展現在頁面中嗎？大膽地切一角主要內容來顯示足夠，視覺衝擊力是否也更強了？

4、封閉性原理

視覺系統自動嘗試將敞開的圖形關閉起來，從而將其感知為完整的物體而不是分散的碎片。

注：簡單理解，當圖形是一個殘缺圖形，但主體有一種使其閉合的傾向，即主體能自行填補缺口而把其知覺為一個整體。

我們的視覺系統強烈傾向於看到物體，以至於它能將一個空白區解析成一個物體，所以我們看到上圖所呈現的是一個圓而非多條線段。

封閉性原理案例

工作中我們常用同樣的形狀疊加來展示物品達到充實畫面，場景擬實效果。

注：補充一個經典案例：

最著名的應用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。

5、

對稱性原理

我們傾向於分解複雜的場景來降低複雜度。

我們習慣把上圖解析成兩個簡單對稱形狀的組合，把右側二維幾何圖解析成三維立體面。

對稱性原理案例

還在發愁你的專題場景沒帶入感？需求說你的按鈕太扁平“不像按鈕”？畫幾個面的疊加，是不就是上圖中那個看似高階洋氣大舞臺效果？

6、主體/背景原理

我們的大腦將視覺區域分為主體和背景。主體包括一個場景中佔據我們主要注意力的所有元素，其餘則是背景。

當物體重疊時我們習慣把小的那個看成是背景之上的主體。

主體/背景原理案例

在頁面設計中常用在主要顯示內容“之後”放置印象誘導的背景，達到傳遞資訊暗示主題作用。遇到一個需求內容灰常多還要氛圍的，那麼內容常規安排，在背景上做文章也是不錯的處理手法吧？

也經常用來在其他內容之上彈出資訊，作為使用者注意力焦點的內容 ，新的資訊短暫地作為新的主體，相對於在新資訊替換，彈出能夠幫助使用者瞭解他們在相互所處的環境。

7、共同命運

與接近性、相似永生原理相關，都影響我們感知的物體是否成組。指出一起運動的物體被感知為屬於一組或者是彼此相關的。

同樣間距大小顏色的圖形，那麼視覺上會把一起動的圖形分為一組。

共同命運原理案例

運動的圖例無法用靜態圖表示，只提示一點在工作中做同類分組傳達資訊時，給它一致的活動規律展現形式。比如同樣功能按鈕HOVER效果一樣，不至於讓使用者分不清同類選項。資料夾拖動時同時選中的資料夾出現的反白背景及運動軌跡是共同命運原理最直觀的解釋。

8、綜合

在現實世界的視覺場景中，各種格式塔原理並不是孤立的，而是共同起作用，在工作中用每一條原理來考量各個設計元素之間的關係是否符合設計初衷。設計師是自己稿子的第一道QA人員，我們不能做到讓它人人稱讚但可以在常識問題上不犯錯誤。