大家都有過這種經歷嗎，當我們抬頭看云朵的時候，經常會將不同的云朵聯想到不同的事物或者動物。這取決于我們大腦的認知系統。

大腦如何運作

20世紀早期，德國心理學家試圖研究人類視覺的工作原理。發現人類視覺是整體的，我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上結合之前的經驗認知感知形狀，圖形和物體。而不是單純的互無關聯的邊，線，區域等。

我們像其他動物一樣，依據整體的對象來感知周圍的環境，所以格式塔原理是基于人類大腦視覺系統的神經系統基礎處理信息原則，是一個合理的描述框架。為圖形和用戶界面設計準則提供了有用的基礎。

設計師了解大腦的運行機制尤為重要，可以結合大腦視覺系統的處理方式來設計最有效的視覺方案。使用視覺元素，引導用戶的注意力。在用戶界面中對實現產品目標和用戶目標非常重要。

什么是格式塔原理？

格式塔原理是 20 世紀早期的德國心理學家研究小組發現的人類視覺工作原理。人類視覺是整體性的，我們會對看到的事物自建結構，并且在神經系統層面上感知形狀，圖形和物體。而不是單獨的互不相關的邊，線，區域?！感螤睢^域」在德語中是 Gestalt，所以這些理論也就叫做視覺感知的格式塔原理。

格式塔原理的完形原則

格式塔原理描述的是人類視覺從神經系統對事物的感知方式，它主要包含以下幾條原理：

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

1. 接近性

物體之間的相對距離會影響我們感知它們的關系。相互靠近的物體被認為比相互距離較遠的物體更有關聯性。

如何應用于UI設計？

接近性原理在 web 端或者 app 端的排版布局中有非常廣泛的應用。設計師也會應用此原則，調整距離或者用分割線等來分開不同設計模式的構建。

此原理使設計界面層次有序，視覺清晰。減少視覺噪音。

按照原理，我們會將內容相似的元素位置放置得更接近，在 UI 設計中的卡片設計，列表組合等信息整合設計都會應用到此原理。并且不同內容之間我們使用分割線，留白，卡片區分等方式來使不同的內容區分更為明顯。

如下圖所列舉的支付寶和知乎界面中，運用卡片設計框架，將信息聚合靠近展示來體現關聯性，層次清晰有序。

如下圖所示界面中，支付寶將統一優先級的圖標靠近展示，形成視覺上的組合模塊。

iOS 設置頁面，將功能相近的列表靠近展示，不同功能列表使用留白來產生距離差，形成不同的功能區塊。

在 iOS 設置鬧鐘的界面，計次列表和功能點在垂直和水平線上都靠近放置。

相互關聯的控件和內容之間距離越近，用戶越能感知它們的相關性。反之，如果距離太遠，用戶很難感知到它們是相關的，那么產品在體驗上就更加難學也不方便記憶。

2. 相似性

格式塔原理中的相似性通常和接近性一起運用在產品設計中。它指出了影響我們感知分組的另外一個原則：有共同視覺元素的物體看起來更有關聯性。我們傾向于將看起來相似的對象視為一組或者一個模式，并且將它們與特定含義或者功能聯系在一起。

如何應用于UI設計？

那么相似性的視覺元素可以由哪幾部分構成呢？比如顏色，形狀，大小，方向，以及紋理等視覺元素，組成相近的樣式。

UI 設計規范中的控件組合成的組件，大部分都會使用到相似性原則，統一視覺樣式，來表達統一的功能性。比如標簽欄。安卓規范中對標簽欄設計的規范如下：

iOS 的設計規范中對標簽欄的定義原則之一是，確保標簽欄在視覺和交互上保持一致和平衡。

當在相似性的元素中，如果想凸顯其中一個元素，那么就用不一樣的視覺來呈現，以達到凸顯效果的目的。強烈的對比性使其他相似元素顯得平庸，而吸引了用戶注意力。

3. 連續性

我們的視覺傾向于感知連續的形式，而不是離散的碎片。并且能感知到整個物體的傾向。

連續性通過構圖來幫助我們感知事物的形狀和運動方向。界面中的設計元素，會引導眼鏡在平面中的移動，提高界面的可閱讀性。創建順序并且指導用戶瀏覽不同的內容分組。

如何應用于UI設計？

連續性目前在 app 產品中應用非常廣泛。比如在電商產品中 banner 區域的左右滑動交互模塊，滑動組件和進度條展示。主要應用范圍如下：

• 導航欄中的連續性設計
• 卡片模塊中的連續性設計
• 模塊的連續性設計
• 滑動條的連續性設計

4. 封閉性

人們在觀察一個物體的時候，視覺系統傾向于把不完整的局部當作一個整體來感知。將不連續的，敞開的圖形自動補充，從而感知到它為完整的物體，而不是分散的碎片。

這個原理和人類的心智模型有相關性，當我們在辨識一個物體的時候，我們會將不完整的物體與我們的認知模型中的原型相匹配，從而達成認知。所以封閉性原則的前提之一是，把握局部不完整物體的尺度，如果太零散，太碎片，就會出現認知混亂。

封閉性在圖形設計中有非常多著名的案例，比如蘋果 logo。

如何應用于UI設計？

這個原則也非常適用于圖形用戶界面的圖標設計中。運用省略或者減法處理圖形，不僅可以節省空間，同時也讓用戶產生聯想，產生趣味性。

5. 共同命運

共同命運原理指出我們傾向于將一起運動的物體，感知為一個彼此相關的整體。視覺系統會將運動規則一致的物體感知為一組。這個原則適用于交互設計中，當一些元素的動作一致的時候需要保持相似性，或者有相同的運動傾向。

在蘋果 mac 的文件夾中我們經常會使用到這種原則。比如當我們選擇一些文件夾想要丟入垃圾桶，那么這幾個被選中的文件夾擁有一致的運動方向。共同命運是將會被扔進垃圾桶。

如何應用于UI設計？

在產品設計中，當我們想要對一些元素操作同樣的動作會常常使用到這個原則。比如蘋果手機的長按刪除 app 的交互動作，所有的 app 都有一致的運動傾向，告知用戶界面處于可編輯狀態，非常直觀。

6. 主體/背景

我們的大腦將視覺區域分為主體和背景 2 個部分。這個特征有利于我們對重要信息和次要信息的感知。

主體和背景的區別可以從以下兩個方面來控制：

• 場景大?。何覀儍A向于將處于大場景中的中間小區域部分視為主體，而大場景視為背景；
• 層級關系：如果在同一個平面中，我們傾向于將處于視覺第一層級的物體視為主體。

如何應用于UI設計？

此原則可以幫助設計師在設計界面的過程中抓住用戶注意力，并且讓用戶優先看到我們想讓他們看到的事物。比如重要信息的彈窗提示，以及弱化背景從而突出內容等界面中都有運用到此原則。

總結

本文通過闡述各個原則的定義，以及通過大量實際案例來闡釋格式塔原則在 UI 設計中的使用。希望能幫助到大家。