什么是格式塔原理 (Gestalt)

格式塔心理學(xué)誕生于 1912 年，是由德國(guó)心理學(xué)家組成的研究小組試圖解釋人類(lèi)視覺(jué)的工作原理。他們觀察了許多重要的視覺(jué)現(xiàn)象并對(duì)它們編定了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類(lèi)視覺(jué)是整體的：我們的視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域?！感螤睢购汀笀D形」在德語(yǔ)中是 Gestalt，因此這些理論也稱作視覺(jué)感知的格式塔原理。

格式塔創(chuàng)始人總結(jié)的七個(gè)基本原則：

• 接近性原則
• 相似性原則
• 連續(xù)性原則
• 閉合性原則
• 簡(jiǎn)單對(duì)稱性原則
• 主體與背景原則
• 共同命運(yùn)原則

1. 接近性原則

在上圖的兩個(gè)圖形組合中，我們可以看出「A」中的圓角矩形給我們的視覺(jué)效果是以橫向的「行」為單位進(jìn)行組合，而「B」中更像是以「列」為單位進(jìn)行組合。因「A」每?jī)蓚€(gè)圓角矩形之間的間距橫向 20px 大于豎向30px，而「B」與之相反所以會(huì)產(chǎn)生這樣的視覺(jué)效果。距離近的關(guān)聯(lián)親密，距離遠(yuǎn)的就各自獨(dú)立分組這就是格式塔理論中的接近性原則。

在視覺(jué)效果上，圖上單獨(dú)的特征已經(jīng)不是特別明顯了，替換而來(lái)的是接近組合形成了層次分明的整體。

我們?cè)谧霭媸皆O(shè)計(jì)時(shí)會(huì)把圖文信息以不同形狀、大小、顏色分組排列，在視覺(jué)上營(yíng)造視覺(jué)層次，便于用戶閱讀。如上圖元素以組的形式分布在海報(bào)中的各個(gè)位置，形成不同大小的視覺(jué)層次，讓我們能夠依次看到主要信息、次要信息、輔助信息等內(nèi)容。

上圖微信的發(fā)現(xiàn)頁(yè)面中，把功能分組用戶，硬性分割每組是一個(gè)整體。而 App store 中的「探索更多」和「為你推薦」和下方內(nèi)容距離更近，在中間沒(méi)有明確分割線的情況下進(jìn)行軟性分割，用戶也會(huì)知道他們和下方內(nèi)容是一個(gè)整體。

2. 相似性原則

人們?cè)谟^察事物的過(guò)程中經(jīng)常會(huì)將相近或者相似的東西自動(dòng)的合并在一起，如上圖中我們會(huì)在視覺(jué)中默認(rèn)分為「灰-粉-灰」三部分。人們?cè)诟兄挛镞^(guò)程中會(huì)形成的心理模型，相似的物體默認(rèn)歸屬于一組，這就是格式塔的相似性原則。

上圖中的郵件界面就是格式塔相似性原則的體現(xiàn)。我們?cè)跒g覽的過(guò)程中，會(huì)從心理上默認(rèn)把縱向的郵件圖標(biāo)、發(fā)件人、郵箱標(biāo)題等自動(dòng)歸為一類(lèi)。

相關(guān)閱讀：

因擁有共同的視覺(jué)元素具有聯(lián)系性，上圖是以「圖片+標(biāo)題+作者」為一個(gè)模塊，從而在視覺(jué)上我們把界面分成一個(gè)個(gè)組類(lèi)。

3. 連續(xù)性原則

因人眼的視覺(jué)會(huì)偏向連續(xù)的形式，使閱讀上更具有連貫性，在觀察事物的過(guò)程中會(huì)情不自禁地形成一種視覺(jué)延續(xù)的感受，這就是格式塔的連續(xù)性原則。

上圖中 IBM 的 logo，我們之所以能看出來(lái)是 IBM，就是因?yàn)槲覀冊(cè)谝曈X(jué)上看到的不是離散的線條，而是連續(xù)的圖形。

「上圖」就是我們?cè)陂喿x過(guò)程中形成的視覺(jué)延續(xù)的體現(xiàn)，有橫向或縱向的閱讀模式。因此，在設(shè)計(jì)中有效的對(duì)齊可以減弱用戶的視覺(jué)疲勞感，不打破視覺(jué)的連續(xù)性。

4. 閉合性原則

閉合性與連續(xù)性比較相似。真實(shí)的圖形是非閉合的，但在視覺(jué)上我們會(huì)自動(dòng)把空白填滿形成封閉的空間，這就是格式塔的閉合性原則。

圖中 IBM 的 logo，我們的視覺(jué)會(huì)將非閉合事物進(jìn)行閉合處理。

「上圖」中我們的視覺(jué)系統(tǒng)自動(dòng)的嘗試將敞開(kāi)的圖形封閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片。

5. 簡(jiǎn)化對(duì)稱性原則

在觀察事物過(guò)程中，我們第一印象更傾向于簡(jiǎn)單而且對(duì)稱的圖形，這就是格式塔的簡(jiǎn)化對(duì)稱性原則。

「上圖」中是屬于人類(lèi)視覺(jué)的自然感知，①屬于一種視覺(jué)經(jīng)驗(yàn)第一時(shí)間感知，而②和③屬于視覺(jué)的強(qiáng)烈感知，是通過(guò)分析和解析。

「上圖」就是格式塔的簡(jiǎn)化對(duì)稱性的體現(xiàn)，用戶在瀏覽的的過(guò)程中有效減輕了閱讀壓力。

6. 主體與背景原則

當(dāng)小圖形重疊大圖形之上，我們的視覺(jué)會(huì)傾向于將小圖形歸為主體，大色塊為背景，這就是格式塔中的主體與背景原則。如「下圖」。

「上圖」就是利用了主體與背景的原理，體現(xiàn)了圖形之間的共生關(guān)系，凸顯主體與背景。

7. 共同命運(yùn)原則

共同命運(yùn)是為運(yùn)動(dòng)物體的體現(xiàn)，與接近性原理和相似性原理相像，都與我們的視覺(jué)系統(tǒng)會(huì)有著給對(duì)象進(jìn)行分組來(lái)感知事物的傾向相關(guān)，但是一起運(yùn)動(dòng)的物體會(huì)被感知為屬于同一組或是彼此相關(guān)這樣的一種視覺(jué)現(xiàn)象，這就是格式塔中的共同命運(yùn)原則。

「上圖」選中的圖形 02、07、08、12、13、14、21、22，我們?cè)谔幚淼倪^(guò)程當(dāng)中，會(huì)默認(rèn)把它們歸為一類(lèi)。

「上圖」格式塔理論中共同命運(yùn)涉及到運(yùn)動(dòng)的物體，iPhone 中刪除應(yīng)用時(shí)候，左上角都有一個(gè)刪除的標(biāo)記，在處理的過(guò)程中，要么刪除，要么保留，這就是共同命運(yùn)原則。

總結(jié)

格式塔原則的體現(xiàn)在設(shè)計(jì)中比比皆是，我們只有更好的利用視覺(jué)空間設(shè)計(jì)作品，減少設(shè)計(jì)的復(fù)雜性，盡量保持格式塔原則的完整，用戶才能更好更容易地理解使用我們的產(chǎn)品。

文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：土撥鼠

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)