格式塔原理

2022-08-19 18:37 作者:天地雖大任我游 0人讀過 | 我要投稿

在簡單的掃描了之前整理的設(shè)計法則一覽表之后，我馬上就把目光鎖定在了《格式塔原理》上，這幾乎是所有設(shè)計師入門必學(xué)的基礎(chǔ)知識，日常運用也最為廣泛，不過很多同學(xué)只知其核心理念，對其延展知識卻知之甚少（如果你不信，可以繼續(xù)往下看哦~），非常符合我想深度解析的想法。

起源

格式塔，是由三位德國心理學(xué)家威特海默、考夫卡和科勒創(chuàng)立的。它是德文“Gestalt”一詞的音譯，意思為“形式”、“形狀”，在心理學(xué)中用這個詞表示的是任何一種被分離的整體。對它的研究，起源于視知覺，后以此為地基，構(gòu)建了現(xiàn)代認(rèn)知心理學(xué)的大廈。

格式塔心理學(xué)派指出，人類的視覺感知具有整體性，整體是大于個體總和的。整體不能簡單的看做是個體集合，它的特性是不包含于元素之內(nèi)。

舉個??

從元素構(gòu)成上來說，上圖就是一系列的一模一樣的小圓點，整體構(gòu)成一個笑臉，一系列的圓點有無數(shù)種可能，但單獨看任意一個圓點都不具備笑臉的特性，這就是1+1＞2帶來的整體特性。

格式塔原理告訴我們：我們的眼睛和大腦在觀察事物，接收影像刺激時，會有一些特別的傾向，以幫助我們快速地辨別事物。這些特別的傾向，就是我們今天要深度解析的格式塔七大設(shè)計原則，下面我們逐一來了解一下。

一. 簡單原則

在人眼的認(rèn)知過程中，大腦會傾向于把一個復(fù)雜的物體解析成較為簡單的物象來理解，以降低大腦的認(rèn)知負(fù)荷，這就是簡單原則。

簡單原則是格式塔的核心與基石，當(dāng)我們看一個畫面時，大腦并不會把他們拆解為獨立的點線面體，而是會自動對元素進(jìn)行組合、甚至腦補(bǔ)缺失，以便讓它們呈現(xiàn)為一個相對完整且簡單的整體。

舉個??

對于左一的圖形，拆解的方式有多種，但多數(shù)正常的大腦都會將其拆解為右一的圖形，而不是中間的種種，這便是簡單原則的一個體現(xiàn)。

在互聯(lián)網(wǎng)設(shè)計中，我們也經(jīng)常利用簡單原則來做設(shè)計，比如

根據(jù)簡單法則，我們的大腦會把它解析成三張獨立，相同大小，近大遠(yuǎn)小且有所遮擋的圖片，而不是一大二小且不完整的三張圖片。

再比如，我們在設(shè)計圖標(biāo)時，也經(jīng)常利用簡單法則，設(shè)計一些前后疊加或者組合的視覺效果，讓用戶感知其作為一個圖標(biāo)整體的涵義，而忽略單個視覺元素的寓意。

以上都是簡單法則的基礎(chǔ)應(yīng)用，下面進(jìn)入我們的延展知識環(huán)節(jié)。

??延展小芝士

關(guān)于簡單法則，我們提到最終是為了給大腦減少負(fù)荷，那所謂的負(fù)荷到底有幾類？這些負(fù)荷之間的關(guān)系又是怎樣的？我們又應(yīng)該怎么樣給大腦減負(fù)呢？

------這是一條思考線，請先思考1分鐘------

答案：

我們?nèi)粘Ｌ岬降呢?fù)荷可以細(xì)分為三種：認(rèn)知負(fù)荷，操作負(fù)荷，以及視覺負(fù)荷。

認(rèn)知負(fù)荷指人腦在思考、記憶或計算時所消耗的能量負(fù)載，簡單來說就是燒腦程度。

操作負(fù)荷就是因抬手、點擊、眼動等運動所消耗的能量負(fù)載，簡單來說就是操作復(fù)雜度；

視覺負(fù)荷是指我們?yōu)g覽一個頁面時，人眼所接受到的信息量，簡單來說就是信息復(fù)雜度；

一般來講認(rèn)知負(fù)荷＞操作負(fù)荷＞視覺負(fù)荷。

所以我們會把“Don't make me think”奉為設(shè)計的真理，在日常設(shè)計中堅守。如果認(rèn)知負(fù)荷小，有時候哪怕多一兩步慣性的操作負(fù)荷都是值得的。

在操作負(fù)荷上，（如果不會導(dǎo)致認(rèn)知負(fù)荷負(fù)荷增加）我們也會盡量秉承三步操作法則，費茨定律等，盡可能的減少用戶操作的步數(shù)和單次操作的難度。

視覺負(fù)荷是所有負(fù)荷的基石，無論是“Less is More”，還是“奧卡姆剃刀原理”，都告訴我們：保持簡約是優(yōu)秀設(shè)計的必要條件。

一般情況下，做完視覺負(fù)荷的減法后，操作負(fù)荷和認(rèn)知負(fù)荷也會有所降低。

舉個??

大家對蘋果和星巴克的logo都比較熟悉，從他們的發(fā)展歷程來看，這是扁平化的體現(xiàn)，也是視覺負(fù)荷降低的典型案例，經(jīng)歷了時間的變遷，人們可以在更遠(yuǎn)的范圍內(nèi)，以更快的速度完成視覺認(rèn)知，提升了信息傳達(dá)的效率。

再舉一個??：

在Web端設(shè)計時，手機(jī)號、驗證碼和短信驗證碼同頁呈現(xiàn)是非常普遍的一個設(shè)計模式。移動端設(shè)計興起時，這樣的設(shè)計也延續(xù)了過來，但隨著移動端設(shè)計的發(fā)展，就逐步被更主流的拆分設(shè)計（分三個頁面分別呈現(xiàn)手機(jī)號、驗證碼和短驗）所替代。這樣的設(shè)計對于操作負(fù)荷來說其實是沒什么變化的，主要的就是對認(rèn)知負(fù)荷的降低，達(dá)到一個頁面一個核心關(guān)注點的設(shè)計目標(biāo)。

二. 接近法則

我們的大腦會傾向于將彼此靠近的元素視為一個組，這就是接近法則。

以左一圖為例，當(dāng)元素之間彼此間距完全相同，視覺上就會比較均衡，不會讓人產(chǎn)生接近性聯(lián)想。當(dāng)元素橫向距離變小，縱向距離變大，形成中間圖后，我們的大腦就會傾向于將其視作橫向的三個小組，同理，我們也會傾向于把右圖視為縱向的三個小組，這就是接近性法則最直觀的體現(xiàn)。

舉個??

在我們進(jìn)行書籍排版時，因為有橫向閱讀和縱向閱讀的版式差別，為了直觀的給用戶傳達(dá)閱讀順序，我們就需要加大行間距，縮小字間距，讓橫向排版和縱向排版一目了然，而不需要通過具體語義來傳遞。

生活中，如果不注重接近法則進(jìn)行設(shè)計，還有可能鬧出以下的笑話。

再來看兩個互聯(lián)網(wǎng)產(chǎn)品的設(shè)計案例

當(dāng)我們進(jìn)行圖文布局時，對于同組信息，需要充分利用接近原則，讓圖片和文字之間的成組關(guān)系能夠一目了然，而不是模棱兩可。

當(dāng)組間關(guān)系明確時，我們也需要在組內(nèi)充分利用接近原則，讓彼此之間更加接近收攏，讓組內(nèi)信息整體性更好，用戶視覺更聚焦。

??延展小芝士

在利用接近法則的時候，到底多近能成組？多遠(yuǎn)會分離？有什么參考標(biāo)準(zhǔn)嗎？

------這是一條思考線，請先思考1分鐘------

答案：

接近性是相對而言的，在書籍設(shè)計中，核心間距原則是：字間距＜行間距＜段間距＜欄間距＜頁邊距。借鑒到我們的產(chǎn)品設(shè)計中，字間距＜行間距＜組間距＜模塊間距＜頁邊距的設(shè)計標(biāo)準(zhǔn)依然成立。

在Material Design對柵格的間距和邊距有明確的建議，在產(chǎn)品設(shè)計時，設(shè)計師可以參考，也可以根據(jù)產(chǎn)品內(nèi)容，定義具體的間距規(guī)范。以我們的vivo視頻為例，設(shè)計師定義了以6為倍數(shù)的間距規(guī)范，然后就根據(jù)元素之間的親密性，確定不同元素之間的間距關(guān)系，整體依然符合前面的間距原則。