設(shè)計(jì)源于生活，本文通過生活視角溯源格式塔原理，從生活到界面設(shè)計(jì)感受格式塔原理應(yīng)用在方方面面。

一、什么是格式塔原理

格式塔即Gestalt，是德語中“形狀”和“圖形”的意思。是基于心理學(xué)對人類視覺系統(tǒng)的研究，人類的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu)。

最重要的格式塔原理有：接近性原理、相似性原理、連續(xù)性原理、封閉性原理、對稱性原理、主體/背景原理、共同命運(yùn)體 原理。

下面將進(jìn)行詳細(xì)分述

視覺會把互相靠近的物體看成一組，反之則不是。

下方示意圖中A被看作三排，B被看作三列

【 生活中】

無論是在看閱兵還是軍訓(xùn)，我們都有所經(jīng)歷，左右間距為一拳，前后間距為一臂。

列與列之間的間距遠(yuǎn)大于每個(gè)人之間的間距，互相靠近的則被看作一列。

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

【界面設(shè)計(jì)中】

個(gè)人中心中，同一組信息之間的間距遠(yuǎn)小于不同組，下圖中我們明顯可以感知到7組由圖標(biāo)和文字組成的信息。

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

建議

設(shè)計(jì)過程當(dāng)中可以控制元素與元素之間的間距，從而對元素進(jìn)行視覺分組，就像排隊(duì)一樣，有利于元素排列更有規(guī)律，主次分明，易于用戶獲取信息。

視覺會把相似的物體看成一組，反之則不是

下方示意圖中顏色相似的被看成一組，顏色較深的兩個(gè)圓被看作一組

【 生活中】

大家都玩過跳棋，在全部棋子形狀相同的情況下，通過顏色進(jìn)行陣營區(qū)分。相同顏色的棋子很容易區(qū)分被分為一個(gè)陣營。

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

【界面設(shè)計(jì)中】

下圖中01、02、03三個(gè)圖標(biāo)區(qū)域呈現(xiàn)不同的圖標(biāo)樣式，通過樣式的相似性進(jìn)行了合理分組，體現(xiàn)了個(gè)人中心圖標(biāo)的強(qiáng)弱層級。

建議

設(shè)計(jì)過程當(dāng)中可以通過制造相似性，包括：顏色、形狀、格式、質(zhì)感等，使某些對象在視覺上成組。

視覺傾向于感知連續(xù)性，而不是零散的事物

下圖中我們更傾向于把圖形看作為兩條不同顏色的線交疊，甚至是一個(gè)X。而不是一條淺色線段，兩條深色線段

【 生活中】

被切開的水果我們依然可以感受到完整的樣子，一看便知這是一個(gè)完整的橙子被切開之后的樣子

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

【界面設(shè)計(jì)中】

利用連續(xù)性原理，我們將上圖中的會員等級曲線看成是完整的曲線，而不是兩段不同顏色的曲線

利用連續(xù)性，下圖中依然可以感受到完整的一盤食物

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

建議

設(shè)計(jì)中可以利用連續(xù)性原理，只露出部分元素暗示完整元素，或用連續(xù)性來暗示走向趨勢等。

視覺會將敞開的圖形封閉起來，從而感知完整的物體

下圖中我們不會將其看作三段曲線，而是很容易感知到是一個(gè)圓

【 生活中】

劃分停車位的時(shí)候，即使不畫出四面封閉的四邊形，我們依然可以感知到完整的四邊形車位

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

【界面設(shè)計(jì)中】

下圖中的斷點(diǎn)式icon設(shè)計(jì)，即使圖形沒有完全連續(xù)，我們依然可以感受到完整的圖形

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

建議

設(shè)計(jì)中可以利用封閉性原理合理刪減、斷點(diǎn)等方式增加設(shè)計(jì)感、豐富度，強(qiáng)化頁面趣味感、精細(xì)度

視覺會將復(fù)雜物體解析為符合對稱規(guī)律的更簡單的物體，從而降低復(fù)雜性

我們可以很快感知到下圖是兩個(gè)圓交疊，而不是其他更復(fù)雜的圖形，因?yàn)橐粚A的復(fù)雜度遠(yuǎn)小于其他

【 生活中】

河對岸的房子倒影在水面上，我們通常會最快地自動解析出水平的對稱線，將其視為上下對稱的兩組房子

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

【界面設(shè)計(jì)中】

下圖的網(wǎng)頁排版，我們的視覺自動梳理出了左右對稱的規(guī)律，即使左右的顏色并不一樣，也有其他小字信息干擾。但對稱的解析方式極大地降低了頁面的復(fù)雜性

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

建議

設(shè)計(jì)中復(fù)雜圖形可以通過簡單圖形復(fù)用得出，降低視覺理解難度。復(fù)雜的排版中可以制造對稱性，從而降低頁面的理解成本。

視覺將聚焦部分解析為主體其余解析為背景，或改變焦點(diǎn)時(shí)呈現(xiàn)不同的主體

大的矩形和圓形交疊時(shí)，我們傾向于把小的看作主體，矩形則視為背景。

【 生活中】

下圖中將深色區(qū)域視為主體時(shí)我們看到了建筑，把淺色視為主體時(shí)我們看到了五角星，在五角星中我們把美隊(duì)看作主體，天空看作背景

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

【界面設(shè)計(jì)中】

下圖中彈窗的出現(xiàn)轉(zhuǎn)移了頁面的主體

（圖片來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

建議

可以通過控制主體與背景，改變用戶視線焦點(diǎn)，從而起到引導(dǎo)用戶視覺的目的。

一起運(yùn)動的物體被感知成一組或彼此關(guān)聯(lián)

下圖中三個(gè)運(yùn)動的小球被看作一組

【 生活中】

舞蹈表演中，通向運(yùn)動的舞蹈演員被我們歸位同一組

（資料來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

【界面設(shè)計(jì)中】

背景的文字擁有一致的運(yùn)動速度，因此原本零散的文字在動效過程中被我們視為同一層元素

（資料來源于網(wǎng)絡(luò)，僅供交流學(xué)習(xí)）

建議

設(shè)計(jì)中不僅可以通過接近性、相似性，還可以通過同樣的動態(tài)特征將物體成組，減少視覺凌亂感。

文章來源：UI中國   作者：JuneW

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)