格式塔在界面中的使用思考

01??格式塔原則：貼近

貼近性原理是指，物體之間的相對距離會影響我們感知它們如何組織在一起。

互相靠近的物體看起來屬于一組。

左邊的圓相互之間水平方向比垂直方向靠的更近，因為我們看到圓排成了三行；右邊的圓垂直方向上比水平方向上靠的更近，因為我們看到圓排成了三列。

舉個簡單的例子，這個是一個票務的預定入口，

他的排版就是典型的比較零散的樣式，換成模塊圖就是這樣，會更明顯，整個組件脫離了上下文，因為沒有將圖像，標題和鏈接關聯在一起。

如果使用貼近原則，把三個單獨漂浮在外層空間的元素，作為一個整體組件，在視覺上就會很舒適。

舉個B端頁面中的例子:

在我們的數字卡片設計里面里面，很有可能也會出現這種情況，讓同一區域內的元素有一定的聯系，會讓頁面更整體。

在界面中的運用

以ps的編輯面板來看，通過擺放距離可以知道樣式為一組，按鈕操作為一組；控件的合理擺放，能減少用戶界面上的視覺凌亂感和代碼數量。

相反，如果無法感知或者分層不清晰，就會比較難理解和使用。

02??格式塔原則?: 相似

格式塔相似性原理是影響我們感知分組的另一個因素：如果其他因素相同，那么相似的物體看起來歸屬于一組。下圖中相同形狀的看起來感覺屬于一組，相同顏色的看起來感覺屬于同一組。

相似原則可以幫助我們組織和分類組中的對象，并將它們與特定的含義或功能相關聯。

乍一看，我們可能會認為這只是一個我們可以忽略的普通類型系統。

但是當我們看得更近時，問題發生在正文文本和文本鏈接之間，它們都共享相同的文字系統（20px ），這可能導致用戶混淆并且缺乏用戶信任。

當他們瀏覽網站時，他們可能會猶豫，他們正在交互的是正文文本還是文本鏈接，那么就需要進行反復試驗。

在界面中的運用

下圖中通過相似性我們知道頂部文字組是一組，即菜單欄，左側全部是圖標，為工具欄。

03??格式塔原則?: 共同區域

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

舉個?

在界面中的運用

我們可以通過使用線條、顏色、形狀和陰影來達到這個目的。上圖是共同區域原則的一個示例：一個布局合理的網頁，其中不同的信息位表示一個模塊，banner和表格是很好的示例。

04??格式塔原則?: 閉合

有一種常見的視覺歸類方法基于人類的一種完型心理：把局部形象當作一個整體的形象來感知。當提供適量的信息時，我們的大腦將通過填補空白并創建一個統一的整體來得出結論。

通過這種方式，我們可以減少傳遞信息所需的元素數量，降低復雜性也可以幫助我們最小化視覺噪音并傳達信息，在相當小的空間內強化概念。

在界面中的運用

建議我們可以在圖標以及圖形設計中使用閉合原則，可以簡單快速且清晰的傳達想表達的意義，同時視覺樣式也比較透氣。

05??格式塔原則?: 對稱

對稱元素簡單，和諧，視覺上令人愉悅 , 對快速有效地傳遞信息非常有用 , 幫助專注于重要的事情。

但它們也會變得有點沉悶和靜止。視覺對稱往往更有活力，更有趣。在對稱設計中添加不對稱元素有助于在留下印象時引起注意。在任何設計中，對稱以及合理的不對稱都很重要。

在界面中的運用

對稱的形式對于在界面中識別內容有很多的幫助，用于產品展示，列表，導航，banner和任何內容豐富的頁面，減輕閱讀壓力。

06??格式塔原則?: 連續

我們的視覺傾向于感知連續的形式而不是了散的碎片。連續性原理的IBM標志設計，它由非連續的藍色塊組成，但一目了然，很容易看出它們是三個粗體字母。

在界面中的運用

連續性通過構圖來解釋方向和運動。加強了對分組信息的感知，創建了秩序并引導用戶通過不同的內容細分。

連續性的中斷可以表示一個部分的結尾，引起對新內容的關注。

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

07??格式塔原則?: 共同命運

當元素在同一方向、同一時間和同一速度同步移動時，共同命運原則更為有效。它可以幫助對相關信息進行分組，并將行動與結果聯系起來。同步運動的中斷可以吸引用戶的注意力，并將其引導到特定的元素或特性。

在界面中的運用

不管這些元素相距多遠，或者它們看起來有多么不同，如果它們一起移動或變化，它們就被認為是相關的。這種效果可以發生，即使運動是隱含的。

建議我們可以在可擴展菜單，產品滑塊，視差滾動和滑動指示器中使用共同命運原則。

寫在最后

前面就是所有的格式塔對應的原則和建議使用的地方 , 一些真實的案例，讓大家清楚地知道如何運用簡單有效的方法來改變設計的觀感。關鍵是使用這些原理來設計的時候，可以達到 1 + 1 > 2 的效果。

格式塔原則的體現在設計中比比皆是，我們只有更好的利用視覺空間設計作品，減少設計的復雜性，盡量保持格式塔原則的完整，著眼頁面中的細節，才能讓我們的產品更好更容易地被用戶理解。

參考

用格式塔原理分析頁面中的用戶體驗

https://www.jianshu.com/p/311939783be5

如何在UI設計中使用格式塔原則

https://mp.weixin.qq.com/s/F7RYn_cgM1stJXOQPKej9g