用戶界面設計并不全是關于漂亮的像素和閃亮的圖形，它主要是關于溝通、性能和便利性。

你是否曾經觀察過天空，注意到一團不同尋常的云，像一個熟悉的動物或物體？你有沒有想過，為什么或者如何通過觀察一團蓬松的氣體來建立這種聯系？這都是因為你的大腦運作方式！

圖一

你的大腦總是試圖通過比較以前的經驗或視覺模式來理解這個世界，并把這些點連接起來。它有自己的“怪異”方式來感知形狀和形式，分組信息，填補空白，繪制大圖。

了解你的大腦如何工作將有助于你成為一個更聰明的設計師，掌握視覺溝通的操縱者。它可以幫助你確定在任何特定情況下哪些視覺元素是最有效的，因此你可以利用它們來影響用戶的感知、引導他們的注意力，并最終引起行為的改變。這個方法對于以完成目標為導向、解決問題、無意識設計、用戶界面的設計上都格外有用。

“偉大的設計師理解心理學在視覺感知中的強大作用。當別人的目光與你的設計創作相遇時，會發生什么？他們對你所分享的信息有什么反應？”

– Autodesk品牌內容策劃師Laura Busche

現在很清楚，視覺設計和心理是相互聯系的，并且可以相互影響。格式塔原則可以幫助我們理解和控制這些聯系。

什么是格式塔？

格式塔（德式造型）是20世紀20年代由德國心理學家提出的一組視覺知覺原理。它建立在“一個有組織的整體，被認為大于其各部分之和”的理論基礎上。

“整體不是各部分之和?！?/p>

– 庫爾托夫卡

格式塔原則試圖描述當某些條件適用時，人們是如何看待視覺元素的。它們是建立在四個關鍵思想的基礎上的：

1. 出現

人們傾向于通過物體的粗略輪廓來識別它們。相較于一個細節豐富的物體，我們的大腦能更快的識別一個簡明清晰的物體。

圖二

2. 物化

人們可以識別物體，即使它們有部分缺失。我們的大腦將我們所看到的東西與記憶中的熟悉模式相匹配，并填補空白。

圖三

3. 多穩定性

人們常常會用不止一種方式來解釋模棱兩可的事物。我們的大腦會在尋找確定性的選擇之間來回穿梭。因此，一種視角將變得更加主導，而另一種視角將變得更難看到。

圖四

4. 不變性

人們在識別簡單物體時，不會受到它被旋轉、縮放、變形的干擾。我們的大腦可以從不同的角度感知物體，盡管它們的外觀不同。

圖五

以下是格式塔原則，它可以為今天的UI設計提供參考。

鄰近

排列在彼此之間的鄰近元素被認為比那些放置得更遠的元素更相關。這樣，不同的元素主要被看作是一個組，而不是單個的元素。

圖六

鄰近原則如何適用于UI設計？

我們可以在UI設計中使用鄰近原則來分組相似的信息，組織內容和整理布局。它的正確使用將對視覺交流和用戶體驗產生積極的影響。

如原則所述，相關的項目應該保持緊密的聯系，而不相關的項目應該保持更遠的距離。白色的空間在這里起著至關重要的作用，因為它創造了對比，引導用戶的眼睛朝著預期的方向看?？瞻卓梢栽鰪娨曈X層次結構和信息流，便于閱讀和瀏覽布局。它將幫助用戶更快地實現他們的目標，并深入研究內容。

圖七

我們幾乎可以在任何地方應用鄰近原則，從導航、卡片、圖庫和橫幅到列表、正文和分頁。

共同區域

與鄰近原則類似，將放置在同一區域內的元素被視為分組。

圖八

共同區域原則如何適用于UI設計？

共同區域原則特別有用。它可以幫助信息分組和內容組織，但它也可以實現內容分離或充當焦點。它提升了層次結構，可掃描性，并有助于信息的推廣。

共同區域的原則可以將許多不同的因素組合在一起，使它們在更大的群體中保持統一。我們可以通過使用線條，顏色，形狀和陰影來實現它。它經常被用來使某個元素突出，表示交互作用或重要性。

圖九

一個絕佳的運用公共區域理論的例子就是用戶界面上的卡片；一個定義良好的矩形空間，包含不同的信息。橫幅廣告圖跟表格也是很好的例子。

相似

與不具有相似視覺特征的元素相比，具有相似視覺特征的元素被認為更加相關。

圖十

相似性原則如何適用于UI設計？

我們傾向于把相似的元素看作是分組或模式。我們也可能認為，它們的目的是相同的。相似性可以幫助我們組織和分類一個組內的對象，并將它們與特定的意義或功能聯系起來。

有很多不同的方法可以讓元素們看起來相似，從而被用戶認為是彼此關聯的。這些特征包括顏色、大小、形狀、紋理、尺寸和方向的相似性；其中一些比其他的更具交際力(例如顏色>大小>形狀)。當相似發生時，一個物體可以通過與其他物體不同而得到強調，這被稱為“異?！?，可以用來創造對比或視覺重量。通過增加可瀏覽性、可發現性和整體信息流，將用戶的注意力吸引到某個焦點內容上。

圖十一

我們可以在導航，鏈接，按鈕，標題，呼叫動作等等中使用相似性原則。

閉合

一組元素通常被認為是單個可識別的形式或圖形。閉合也發生在對象不完整或部分不封閉的時候。

圖十二

閉合原則如何適用于UI設計？

正如閉合原則所指出的，當我們面對適當的信息量時，我們的大腦會通過填補空白并創建一個統一的整體來得出結論。通過這種方式，我們可以減少信息交流所需的元素數量，減少復雜性，使設計更加吸引人。閉合可以幫助我們最小化視覺噪音并傳達信息，在一個很小的空間內強化一個概念。

圖十三

我們可以在圖像學中使用閉合原則，在這種情況下，簡單有助于迅速而清晰地傳達意義。

對稱

對稱的元素往往被認為是歸屬在一起的，而不管它們之間的距離，都給我們一種牢固和有序的感覺。

圖十四

對稱原則在UI設計中如何應用？

對稱的元素簡單、和諧、美觀。我們的眼睛尋求這些屬性，以及秩序和穩定，以了解世界。因此，對稱是快速有效地交流信息的有用工具。對稱讓人感覺舒服，有助于我們專注于重要的東西。

對稱的構圖是令人滿意的，但它們也會變得有點沉悶和靜態。視覺對稱往往更具動態性和趣味性。在任意一種對稱設計中加入不對稱的元素都能讓用戶對這個元素印象深刻從而吸引到用戶的注意力，這種方法非常好用，比如當你希望吸引用戶興趣、或者像促進用戶做出操作的時候。

圖十五

對于作品集、圖庫、產品展示、列表、導航、橫幅和任何內容豐富的頁面，使用對稱性都是很好的。

延續

排列在一條線或一條細曲線中的元素被認為比那些隨機排列或排列在一條粗線中的元素更相關。

連續性原則在UI設計中如何應用？

圖十六

連續線之后的元素被認為是分組的。線段越光滑，我們就越把它們視為統一的形狀;我們的頭腦更喜歡阻力最小的道路。

連續性幫助我們通過構圖來解釋方向和運動。它是在對齊元素時進行的，它可以幫助我們的眼睛平滑地在頁面上移動，幫助我們閱讀信息。連續性原則加強了對分組信息的感知，創造了秩序，并通過不同的內容片段引導用戶。中斷連續性可以標志著一段內容的結束，讓人注意到新的內容。

圖十七

行和列的線性排列是連續性的好例子。我們可以在菜單和子菜單，列表，產品排布展示，輪播，服務或過程/進度顯示中使用它們。

共同的命運

向同一方向移動的元素被認為比向不同方向移動或根本不移動的元素更相關。

圖十八

共同命運原則在UI設計中如何應用？

無論元素有多遠或者它們可能出現的差異多少，如果它們一起移動或變化，它們都被認為是相關的。即使隱藏元素本身的真實運動，它的移動效果也可以通過其它視覺元素來反襯出來。

當元素移動同步時，共同命運原則更有效;?在同一個方向，同一時間和速度。它可以幫助將相關信息分組并將結果與行為聯系起來。同步運動的中斷可以吸引用戶的注意力并將其引導至特定的元素或特征。它還可以建立不同分組或狀態之間的關系。

圖十九

我們可以把命運共同原則用在可擴展菜單、折疊條目、小提示、滑塊、滾動條和手勢操作提示等。

結論

用戶界面設計不僅僅是漂亮的像素和閃亮的圖形。主要是關于溝通，性能和便利性。格式塔原則總是能夠幫助我們實現這些目標;?為用戶創造愉快的體驗，并為企業取得巨大成功。

英文原文：GESTALT PRINCIPLES IN UI DESIGN

原文地址：HTTPS://MEDIUM.MUZ.LI/GESTALT-PRINCIPLES-IN-UI-DESIGN-6B75A41E9965

譯者：板板，微信公眾號：「微信ID：DR_DDC」

本文由 @板板?翻譯發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pixabay，基于 CC0 協議