在日常生活中，無數的視覺信息不斷涌入我們的眼簾。

面對這些錯綜復雜的信息，我們的大腦有一種神奇的能力，能在海量的信息中迅速識別出有意義的模式和結構。這種在雜亂信息中尋找秩序的能力，能讓我們更好地理解和適應環境。這種化繁為簡的神奇能力究竟從何而來，它又如何影響人們對事物的認知呢？

在格式塔理論中，我們可以找到答案。

往期教程：

一、什么是格式塔理論

格式塔理論興起于 20 世紀初的德國，是一種描述人類認知過程的心理學原理。

它的核心觀點是，人們在感知世界時，會自然地將各種元素組織成有意義的整體，而不是孤立的個體。這種將零碎信息整合成有序結構的過程，被稱為“格式塔”（德語 Gestalt 音譯）。

格式塔理論主張“整體不等于部分的總和”。例如，我們識別一只貓的過程，并非機械地判斷它是否由頭部、身體、四條腿、尾巴等部位拼合而成，而是立即將它作為一個整體識別出來；有時看到了貓的完整組成部分，但由于組合得不合常理，我們也會遲疑這是不是一只貓；而有時即使沒看到貓的全貌，我們也能推斷出這是貓而不是雞腿。

當然，以上過程都借助了我們過去對貓的經驗和印象。

究其根源，大腦在處理信息時會自動進入“節能模式”，習慣于用一種更為簡單的方式，來感知和解釋含糊不清或復雜的圖像，以更快地做出判斷。這也意味著需要接收的信息量越少、信息的處理難度越低，我們就越容易識別一個事物。

格式塔理論也衍生出了一系列原理，比如相似性、接近性、連續性等等，常常作為設計原則被應用在用戶體驗設計中。

這些法則可以如何指導我們的設計呢？下面想通過春晚專區項目來介紹它們的實際應用。

二、格式塔原理的應用

1. 相似性與對比

相似性是指在視覺感知中，人們會自然地將相似的物體歸為同一組。在界面設計中常通過遵循相似性來簡化頁面樣式、增強統一性。

比如在發現頁列表中，各個功能入口統一以圖標加名稱的橫條結構展示，以保證列表項較多時也可展示清晰、頁面簡潔。

亦或是在訂閱號消息列表中，所有的消息統一被包裹在以賬號作為頭部的卡片中，即使消息的形態有一定差別，但我們仍會認為他們都是訂閱號消息。

但一味遵循相似性也可能帶來難以識別的副作用。當功能互不相同的元素太過相似時，用戶仍會以“更為簡單的方式”來進行理解，認為他們的功能都是相同的，從而導致誤解。

在春晚專區的項目中就遇到了這個問題：預告階段下需要同時展示直播預約、節目單、新聞三個模塊，為節約開發成本、快速上線，同時不增加更多的樣式，將直播預約和節目單處理成了跟新聞卡片相似的樣式整合進了輪播卡片。

然而后續分析用戶行為數據發現，有些用戶想找節目單卻找不到；預約能力的點擊率也低于預期。我們猜測是不是因為形態過于相似，用戶把輪播卡片當成了單純的新聞模塊，將直播預約和節目單也當做是新聞內容了呢？

帶著這個疑問，在項目迭代中我們嘗試將直播預約、節目單這兩個模塊與新聞在形態上產生足夠的區隔，并從輪播卡片中拆分為獨立的模塊。

數據顯示，直播、節目單的點擊率均有提升。這也說明通過形態對比，可以讓用戶更直觀地區分不同功能，避免識別的模糊。

除了形態對比，也可以使用面積對比來避免相似帶來的模糊性。春晚專區中的輪播卡片與視頻模塊的形態看上去都是圖片，面積相似且位置接近，不利于區分這兩種內容。

在后續迭代時，因為輪播卡片中的內容絕大多數是圖文文章，我們將其退階為了更匹配文章的列表結構，更小面積的圖片、更多篇幅的文字，可以自然地與視頻模塊產生區分。

借助相似性可以幫助頁面增加統一性、減少復雜度。但是對于功能屬性不同的模塊，需要使用對比讓他們在形態和面積上產生明確的區分，讓用戶更直觀地區分不同功能，避免理解的模糊。

2. 接近性

與相似性類似，接近性也是在探究我們是如何將事物歸為一組的——我們習慣于將空間位置接近的物體歸為同一組。在界面設計中可以借助接近性將元素分組展示，讓界面布局更清晰合理、讓用戶更快速地識別。

比如，如果將發現頁列表中這些功能入口打亂分散展示，我們會覺得列表上元素繁雜，需要逐個閱讀。而通過相似性將他們按社交內容、視頻內容、工具進行聚合分組后，用戶直觀上只需要識別三個分組，降低了認知負擔。

在春晚項目中，直播和節目單位置的處理就用到了接近性的方法。直播與節目單拆分為獨立模塊之后位置較為分散。但從邏輯關系出發，相比新聞與紅包封面模塊，節目單與直播關系應該更緊密。

因此迭代中進行了調整：將節目單模塊上移，臨近直播組件，以位置的接近表達他們同屬一組；

接著進一步將他們聚合成組以增加親密性：統一節目單的與直播的結構并使其聚合在一張卡片上，減少專區內模塊的數量，降低復雜度。

上述案例中借助接近性讓界面上元素按親疏關系展示，將同類模塊聚合成組減少了界面上模塊的數量。在設計中靈活使用接近性可以讓布局更有條理。

3. 連續性

連續性其實是我們的大腦在找規律：當發現一個視覺規律后，傾向于將元素形態或運動軌跡按規律延續下去。在界面設計中，我們可以通過遵循連續性讓相同的元素保持同樣的規律展示，通過迎合規律來減少用戶認知成本。

在去年春晚專區設計中，節目單在沒有詳細信息前是一張輪播卡片，有詳細信息后會富化為結構化的內容模塊，導致變化前后缺乏連續性，找不到規律。

后續由于節目單被拆分為了獨立的模塊，在變化前后始終保持在同一個容器中，只是信息詳略發生了變化，在形態上仍有連續性，因此用戶仍能感知它們是同一個模塊。

除了形態變化的連續性，也需要考慮視覺動線的連續性。

視覺動線是指我們在閱讀或瀏覽時，會將頁面上的元素識別成一條無形的線，眼睛會自然而然地依照視覺動線來移動。平滑連續的視覺動線能提升用戶的瀏覽效率，而這條“線”是通過設計師對元素位置的有意布置形成的。

仍然以春晚專區的改版為例，在審視模塊的統一性后發現：各個模塊的標題缺乏連續的閱讀起點；操作有的在左，有的在右。這樣不連貫的動線會讓用戶在瀏覽時視線反復地進行跳躍，帶來受阻的感受，降低瀏覽效率。

因此我們將視覺起始點與操作動線進行了統一：將紅包封面模塊增加了統一的小標題，使各模塊在左側有統一的閱讀起點；將領取封面的操作右置，讓專區中的操作統一在右側，更利于操作。

上述案例中，通過遵從形態變化的連續性，讓節目單富化前后的變化自然連續；從視覺動線的連續性出發，統一了春晚專區各模塊的閱讀起始點與操作動線。遵從連續性可以讓用戶更輕松快速地識別信息，減少認知負擔。

總結

格式塔原理為元素該如何擺放、形態該做何差異提供了一定理論依據。它其實是由我們對事物的認知規律總結而來，因此即使我們不了解以上法則，有時也能憑直覺在設計中使用對齊、親密、對比等方法。但準確把握格式塔原理的精髓，可以讓我們在設計時更有理有據，在潛移默化中煉出一雙化繁為簡的慧眼。

歡迎關注作者微信公眾號：「We-Design」