UI設計中的格式塔原則

如何成為視覺傳達的主操縱者

你有沒有看到過天空中有一不同形狀的云，像熟悉的動物或物體?你有沒有想過，為什么或者怎樣通過觀察一團蓬松的氣體來建立這種聯系?這都是因為你的大腦是怎樣工作的!你的大腦總是試圖通過比較以前的經驗或視覺模式和連接點來理解世界。它有自己的“奇怪”的方式來感知形狀和形式，分組信息，填補空白，畫出大局。

了解你的大腦是如何工作的會幫助你成為一個更聰明的設計師，掌握視覺傳達的機械手。它可以幫助你確定哪些視覺元素在任何給定的情況下都是最有效的，所以你可以使用它們來影響感知，直接關注并引起行為改變。當涉及面向目標、解決問題、直覺設計時，特別有用的是：用戶界面設計。

“偉大的設計師理解心理學在視覺感知中扮演的重要角色。當某人的眼睛符合您的設計創作時會發生什么？他們的思想如何對你的作品分享的信息做出反應？“——Laura Busche, Autodesk品牌內容策略師。

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

格式塔是什么？

格式塔（形式，德語形狀）是德國心理學家在20世紀20年代開發的一組視覺感知原則。它建立在“有組織的整體，被認為大于其各部分之和”的理論之上。

“整體不是各部分的總和。”—— 庫爾特·考夫卡

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

緊急情況

人們傾向于首先確定元素的總體輪廓形式。我們的大腦識別一個簡單、明確的物體比識別一個詳細的物體要快。

物化

即使有部分缺失，人們也能識別物體。我們的大腦與我們記憶中熟悉的模式相匹配，并填補了空白。

多穩定性

人們通常會用不止一種方法來解釋模棱兩可的東西。我們的大腦會在尋求確定性的替代方案之間來回跳動。因此，一種觀點將變得更加主導，而另一種觀點將變得更加難以理解。

不變性

人們可以獨立于旋轉、縮放和翻譯來識別簡單的物體。我們的大腦可以從不同的角度感知物體，盡管它們的外表不同。

這是格式塔原則，它可以為今天的UI設計提供信息。

接近

排列在一起的元素被認為與相距較遠的元素更相關。這樣，不同的元素主要被視為一個組而不是單個的元素。

Proximity原理如何應用于UI設計？

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

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

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

公共區域

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

公共區域原則如何應用于UI設計?

Common Region原則如何應用于UI設計？共同區域原則特別有用。它可以幫助進行信息分組和內容組織，但它也可以實現內容分離或充當焦點。它增強了層次結構，可掃描性并有助于促進信息。

公共區域原則可以將許多不同的元素結合在一起，使它們在更大的組中統一。我們可以通過使用線條，顏色，形狀和陰影來實現它。它通?？捎糜趯⒃貛肭熬埃甘窘换セ蛑匾?。

一個好的公共區域示例是卡片UI模式;一個明確定義的矩形空間，其中不同的信息位表示為一個。橫幅和表格也是很好的例子。

相似

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

相似原則如何應用于UI設計?

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

有不同的方式使元素被認為是相似的，因此是相關的。這些特征包括顏色、大小、形狀、紋理、尺寸和方向的相似性;有些人的交際能力比其他人強(例如，顏色為>大小的>形狀)。當相似性發生時，一個物體可以通過與其他物體不同而得到強調;這被稱為“異?！?，可用于創建對比或視覺重量。它可以將用戶的注意力吸引到特定的內容(焦點)上，同時還可以幫助用戶進行可掃描性、可發現性和整體流程。

我們可以在導航、鏈接、按鈕、標題、動作調用等方面使用相似原則。

關閉

一組元素通常被認為是單一可識別的形式或圖形。當對象不完整或者未封閉部分對象時，也會發生關閉。

Closure原則如何應用于UI設計？

正如Closure原則所述，當提供適量的信息時，我們的大腦將通過填補空白并創建一個統一的整體來得出結論。通過這種方式，我們可以減少傳遞信息所需的元素數量，降低復雜性并使設計更具吸引力。閉合可以幫助我們最小化視覺噪音并傳達信息，在相當小的空間內強化概念。

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

對稱

無論距離如何，對稱元素都會被認為屬于一體，給我們一種堅固和有序的感覺。

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

對稱的元素簡單、和諧、美觀。我們的眼睛尋求這些屬性，以及秩序和穩定，以了解世界。由于這個原因，對稱是快速有效地傳遞信息的有用工具。對稱讓我們專注于重要的事情。

對稱的構圖是令人滿意的，但它們也會變得有點沉悶和靜態。視覺對稱往往更具動態性和趣味性。在對稱的設計中加入不對稱的元素可以在給人留下印象的同時吸引注意力;對任何興趣點或行動號召都有用的東西，例如。對稱，以及適度的不對稱在任何設計中都很重要。

對于投資組合、畫廊、產品展示、列表、導航、橫幅和任何內容豐富的頁面，使用對稱是很好的。

延續

排列成直線或柔和曲線的元素被認為與隨機排列或粗糙線排列的元素相關。

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

連續線后面的元素被視為分組。線段越平滑，我們就越看到它們的統一形狀;我們更喜歡阻力最小的道路。

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

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

共同的命運

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

共同命運原則如何應用于UI設計?

無論元素之間的距離有多遠，或者它們看起來有多不同，如果它們一起運動或變化，它們都被認為是相關的。這種效果可以在其他視覺元素暗示動作時發生。

當元素同步移動時，共同的命運原則更為有效;在相同的方向，相同的時間和速度。它可以幫助對相關信息進行分組，并將操作與結果聯系起來。同步運動的中斷可以抓住用戶的注意力，并將其指向特定的元素或特性。它也可以建立不同群體或國家之間的關系。

我們可以在可擴展的菜單、手風琴、工具提示、產品滑塊、視差卷軸和滑動指示器中使用共同的命運原則。

結論

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

三米工作室“TF三缺一與他們的經紀人”小組的每周優質設計文章漢化計劃13篇--《Gestalt principles in UI?design.（UI設計中的格式塔原則）》。

Medium英文原文鏈接:https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965