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

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

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

一、什么是格式塔理論

格式塔理論興起于 20 世紀(jì)初的德國，是一種描述人類認(rèn)知過程的心理學(xué)原理。

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

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

當(dāng)然，以上過程都借助了我們過去對貓的經(jīng)驗(yàn)和印象。

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

格式塔理論也衍生出了一系列原理，比如相似性、接近性、連續(xù)性等等，常常作為設(shè)計(jì)原則被應(yīng)用在用戶體驗(yàn)設(shè)計(jì)中。

這些法則可以如何指導(dǎo)我們的設(shè)計(jì)呢？下面想通過春晚專區(qū)項(xiàng)目來介紹它們的實(shí)際應(yīng)用。

二、格式塔原理的應(yīng)用

1. 相似性與對比

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

比如在發(fā)現(xiàn)頁列表中，各個功能入口統(tǒng)一以圖標(biāo)加名稱的橫條結(jié)構(gòu)展示，以保證列表項(xiàng)較多時也可展示清晰、頁面簡潔。

亦或是在訂閱號消息列表中，所有的消息統(tǒng)一被包裹在以賬號作為頭部的卡片中，即使消息的形態(tài)有一定差別，但我們?nèi)詴J(rèn)為他們都是訂閱號消息。

但一味遵循相似性也可能帶來難以識別的副作用。當(dāng)功能互不相同的元素太過相似時，用戶仍會以"更為簡單的方式"來進(jìn)行理解，認(rèn)為他們的功能都是相同的，從而導(dǎo)致誤解。

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

然而后續(xù)分析用戶行為數(shù)據(jù)發(fā)現(xiàn)，有些用戶想找節(jié)目單卻找不到；預(yù)約能力的點(diǎn)擊率也低于預(yù)期。我們猜測是不是因?yàn)樾螒B(tài)過于相似，用戶把輪播卡片當(dāng)成了單純的新聞模塊，將直播預(yù)約和節(jié)目單也當(dāng)做是新聞內(nèi)容了呢？

帶著這個疑問，在項(xiàng)目迭代中我們嘗試將直播預(yù)約、節(jié)目單這兩個模塊與新聞在形態(tài)上產(chǎn)生足夠的區(qū)隔，并從輪播卡片中拆分為獨(dú)立的模塊。

數(shù)據(jù)顯示，直播、節(jié)目單的點(diǎn)擊率均有提升。這也說明通過形態(tài)對比，可以讓用戶更直觀地區(qū)分不同功能，避免識別的模糊。

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

在后續(xù)迭代時，因?yàn)檩啿タㄆ械膬?nèi)容絕大多數(shù)是圖文文章，我們將其退階為了更匹配文章的列表結(jié)構(gòu)，更小面積的圖片、更多篇幅的文字，可以自然地與視頻模塊產(chǎn)生區(qū)分。

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

2. 接近性

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

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

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

因此迭代中進(jìn)行了調(diào)整：將節(jié)目單模塊上移，臨近直播組件，以位置的接近表達(dá)他們同屬一組；

接著進(jìn)一步將他們聚合成組以增加親密性：統(tǒng)一節(jié)目單的與直播的結(jié)構(gòu)并使其聚合在一張卡片上，減少專區(qū)內(nèi)模塊的數(shù)量，降低復(fù)雜度。

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

3. 連續(xù)性

連續(xù)性其實(shí)是我們的大腦在找規(guī)律：當(dāng)發(fā)現(xiàn)一個視覺規(guī)律后，傾向于將元素形態(tài)或運(yùn)動軌跡按規(guī)律延續(xù)下去。在界面設(shè)計(jì)中，我們可以通過遵循連續(xù)性讓相同的元素保持同樣的規(guī)律展示，通過迎合規(guī)律來減少用戶認(rèn)知成本。

在去年春晚專區(qū)設(shè)計(jì)中，節(jié)目單在沒有詳細(xì)信息前是一張輪播卡片，有詳細(xì)信息后會富化為結(jié)構(gòu)化的內(nèi)容模塊，導(dǎo)致變化前后缺乏連續(xù)性，找不到規(guī)律。

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

除了形態(tài)變化的連續(xù)性，也需要考慮視覺動線的連續(xù)性。

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

仍然以春晚專區(qū)的改版為例，在審視模塊的統(tǒng)一性后發(fā)現(xiàn)：各個模塊的標(biāo)題缺乏連續(xù)的閱讀起點(diǎn)；操作有的在左，有的在右。這樣不連貫的動線會讓用戶在瀏覽時視線反復(fù)地進(jìn)行跳躍，帶來受阻的感受，降低瀏覽效率。

因此我們將視覺起始點(diǎn)與操作動線進(jìn)行了統(tǒng)一：將紅包封面模塊增加了統(tǒng)一的小標(biāo)題，使各模塊在左側(cè)有統(tǒng)一的閱讀起點(diǎn)；將領(lǐng)取封面的操作右置，讓專區(qū)中的操作統(tǒng)一在右側(cè)，更利于操作。

上述案例中，通過遵從形態(tài)變化的連續(xù)性，讓節(jié)目單富化前后的變化自然連續(xù)；從視覺動線的連續(xù)性出發(fā)，統(tǒng)一了春晚專區(qū)各模塊的閱讀起始點(diǎn)與操作動線。遵從連續(xù)性可以讓用戶更輕松快速地識別信息，減少認(rèn)知負(fù)擔(dān)。

總結(jié)

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

作者：We-Design