格式塔作為心理學(xué)術(shù)語，具有兩種含義：一指事物的一般屬性，即形式；一指事物的個(gè)別實(shí)體，即分離的整體，形式僅為其屬性之一。通俗地說格式塔就是知覺的最終結(jié)果，是我們?cè)谛牟辉谘膳c沒有引入反思的現(xiàn)象學(xué)狀態(tài)時(shí)的知覺，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性。

大腦如何運(yùn)作

我們像其他動(dòng)物一樣，依據(jù)整體的對(duì)象來感知周圍的環(huán)境，所以格式塔原理是基于人類大腦視覺系統(tǒng)的神經(jīng)系統(tǒng)基礎(chǔ)處理信息原則，是一個(gè)合理的描述框架。為圖形和用戶界面設(shè)計(jì)準(zhǔn)則提供了有用的基礎(chǔ)。

設(shè)計(jì)師了解大腦的運(yùn)行機(jī)制尤為重要，可以結(jié)合大腦視覺系統(tǒng)的處理方式來設(shè)計(jì)最有效的視覺方案。使用視覺元素，引導(dǎo)用戶的注意力。在用戶界面中對(duì)實(shí)現(xiàn)產(chǎn)品目標(biāo)和用戶目標(biāo)非常重要。

什么是格式塔原理

格式塔原理是 20 世紀(jì)早期的德國(guó)心理學(xué)家研究小組發(fā)現(xiàn)的人類視覺工作原理。人類視覺是整體性的，我們會(huì)對(duì)看到的事物自建結(jié)構(gòu)，并且在神經(jīng)系統(tǒng)層面上感知形狀，圖形和物體。而不是單獨(dú)的互不相關(guān)的邊，線，區(qū)域?！感螤?、區(qū)域」在德語中是 Gestalt，所以這些理論也就叫做視覺感知的格式塔原理。格式塔原理描述的是人類視覺從神經(jīng)系統(tǒng)對(duì)事物的感知方式，它主要包含以下幾條原理：接近性、相似性、連續(xù)性、封閉性、對(duì)稱性、主體/背景、共同命運(yùn)。

01

接近性

物體之間的相對(duì)距離會(huì)影響我們感知它們的關(guān)系。相互靠近的物體被認(rèn)為比相互距離較遠(yuǎn)的物體更有關(guān)聯(lián)性。

接近性原理在 web 端或者 app 端的排版布局中有非常廣泛的應(yīng)用。設(shè)計(jì)師也會(huì)應(yīng)用此原則，調(diào)整距離或者用分割線等來分開不同設(shè)計(jì)模式的構(gòu)建。此原理使設(shè)計(jì)界面層次有序，視覺清晰。減少視覺噪音。按照原理，我們會(huì)將內(nèi)容相似的元素位置放置得更接近，在 UI 設(shè)計(jì)中的卡片設(shè)計(jì)，列表組合等信息整合設(shè)計(jì)都會(huì)應(yīng)用到此原理。并且不同內(nèi)容之間我們使用分割線，留白，卡片區(qū)分等方式來使不同的內(nèi)容區(qū)分更為明顯。

如下圖所列舉的支付寶和知乎界面中，運(yùn)用卡片設(shè)計(jì)框架，將信息聚合靠近展示來體現(xiàn)關(guān)聯(lián)性，層次清晰有序。

如下圖所示界面中，支付寶將統(tǒng)一優(yōu)先級(jí)的圖標(biāo)靠近展示，形成視覺上的組合模塊。iOS 設(shè)置頁面，將功能相近的列表靠近展示，不同功能列表使用留白來產(chǎn)生距離差，形成不同的功能區(qū)塊。在 iOS 設(shè)置鬧鐘的界面，計(jì)次列表和功能點(diǎn)在垂直和水平線上都靠近放置。

相互關(guān)聯(lián)的控件和內(nèi)容之間距離越近，用戶越能感知它們的相關(guān)性。反之，如果距離太遠(yuǎn)，用戶很難感知到它們是相關(guān)的，那么產(chǎn)品在體驗(yàn)上就更加難學(xué)也不方便記憶。

02

相似性

格式塔原理中的相似性通常和接近性一起運(yùn)用在產(chǎn)品設(shè)計(jì)中。它指出了影響我們感知分組的另外一個(gè)原則：有共同視覺元素的物體看起來更有關(guān)聯(lián)性。我們傾向于將看起來相似的對(duì)象視為一組或者一個(gè)模式，并且將它們與特定含義或者功能聯(lián)系在一起。

那么相似性的視覺元素可以由哪幾部分構(gòu)成呢？比如顏色、形狀、大小、方向以及紋理等視覺元素，組成相近的樣式。UI 設(shè)計(jì)規(guī)范中的控件組合成的組件，大部分都會(huì)使用到相似性原則，統(tǒng)一視覺樣式，來表達(dá)統(tǒng)一的功能性。比如標(biāo)簽欄。安卓規(guī)范中對(duì)標(biāo)簽欄設(shè)計(jì)的規(guī)范如下：

iOS 的設(shè)計(jì)規(guī)范中對(duì)標(biāo)簽欄的定義原則之一是，確保標(biāo)簽欄在視覺和交互上保持一致和平衡。

當(dāng)在相似性的元素中，如果想凸顯其中一個(gè)元素，那么就用不一樣的視覺來呈現(xiàn)，以達(dá)到凸顯效果的目的。強(qiáng)烈的對(duì)比性使其他相似元素顯得平庸，而吸引了用戶注意力。

03

連續(xù)性

我們的視覺傾向于感知連續(xù)的形式，而不是離散的碎片。并且能感知到整個(gè)物體的傾向。連續(xù)性通過構(gòu)圖來幫助我們感知事物的形狀和運(yùn)動(dòng)方向。界面中的設(shè)計(jì)元素，會(huì)引導(dǎo)眼鏡在平面中的移動(dòng)，提高界面的可閱讀性。創(chuàng)建順序并且指導(dǎo)用戶瀏覽不同的內(nèi)容分組。

連續(xù)性目前在 app 產(chǎn)品中應(yīng)用非常廣泛。比如在電商產(chǎn)品中 banner 區(qū)域的左右滑動(dòng)交互模塊，滑動(dòng)組件和進(jìn)度條展示。主要應(yīng)用范圍包括：導(dǎo)航欄中的連續(xù)性設(shè)計(jì)、卡片模塊中的連續(xù)性設(shè)計(jì)、模塊的連續(xù)性設(shè)計(jì)、滑動(dòng)條的連續(xù)性設(shè)計(jì)。

04

封閉性

人們?cè)谟^察一個(gè)物體的時(shí)候，視覺系統(tǒng)傾向于把不完整的局部當(dāng)作一個(gè)整體來感知。將不連續(xù)的，敞開的圖形自動(dòng)補(bǔ)充，從而感知到它為完整的物體，而不是分散的碎片。這個(gè)原理和人類的心智模型有相關(guān)性，當(dāng)我們?cè)诒孀R(shí)一個(gè)物體的時(shí)候，我們會(huì)將不完整的物體與我們的認(rèn)知模型中的原型相匹配，從而達(dá)成認(rèn)知。所以封閉性原則的前提之一是，把握局部不完整物體的尺度，如果太零散，太碎片，就會(huì)出現(xiàn)認(rèn)知混亂。封閉性在圖形設(shè)計(jì)中有非常多著名的案例，比如蘋果 logo。

這個(gè)原則也非常適用于圖形用戶界面的圖標(biāo)設(shè)計(jì)中。運(yùn)用省略或者減法處理圖形，不僅可以節(jié)省空間，同時(shí)也讓用戶產(chǎn)生聯(lián)想，產(chǎn)生趣味性。

05

共同命運(yùn)

共同命運(yùn)原理指出我們傾向于將一起運(yùn)動(dòng)的物體，感知為一個(gè)彼此相關(guān)的整體。視覺系統(tǒng)會(huì)將運(yùn)動(dòng)規(guī)則一致的物體感知為一組。這個(gè)原則適用于交互設(shè)計(jì)中，當(dāng)一些元素的動(dòng)作一致的時(shí)候需要保持相似性，或者有相同的運(yùn)動(dòng)傾向。

在蘋果 mac 的文件夾中我們經(jīng)常會(huì)使用到這種原則。比如當(dāng)我們選擇一些文件夾想要丟入垃圾桶，那么這幾個(gè)被選中的文件夾擁有一致的運(yùn)動(dòng)方向。共同命運(yùn)是將會(huì)被扔進(jìn)垃圾桶。

在產(chǎn)品設(shè)計(jì)中，當(dāng)我們想要對(duì)一些元素操作同樣的動(dòng)作會(huì)常常使用到這個(gè)原則。比如蘋果手機(jī)的長(zhǎng)按刪除 app 的交互動(dòng)作，所有的 app 都有一致的運(yùn)動(dòng)傾向，告知用戶界面處于可編輯狀態(tài)，非常直觀。

06

主體/背景

我們的大腦將視覺區(qū)域分為主體和背景兩個(gè)部分。這個(gè)特征有利于我們對(duì)重要信息和次要信息的感知。主體和背景的區(qū)別可以從以下兩個(gè)方面來控制：1.場(chǎng)景大小——我們傾向于將處于大場(chǎng)景中的中間小區(qū)域部分視為主體，而大場(chǎng)景視為背景；2.層級(jí)關(guān)系——如果在同一個(gè)平面中，我們傾向于將處于視覺第一層級(jí)的物體視為主體。

此原則可以幫助設(shè)計(jì)師在設(shè)計(jì)界面的過程中抓住用戶注意力，并且讓用戶優(yōu)先看到我們想讓他們看到的事物。比如重要信息的彈窗提示以及弱化背景從而突出內(nèi)容等界面中都有運(yùn)用到此原則。

本篇文章部分圖片素材來源自網(wǎng)絡(luò)