今天給大家分享來(lái)自UI中國(guó)會(huì)員-skys的一篇文章，關(guān)于格式塔原理與設(shè)計(jì)排版的關(guān)系。

?

格式塔是一種視覺(jué)感知的理論，是研究人們視覺(jué)如何將元素組織成群體或整體，從而視覺(jué)上進(jìn)行分類，在設(shè)計(jì)中，我們使用格式原理能使得我們?cè)O(shè)計(jì)更科學(xué)性，更具吸引力。通過(guò)格式塔效應(yīng)，去處理設(shè)計(jì)中的點(diǎn)、線、面、顏色、空間和形狀的分組排版，格式塔原理很重要，它是一切排版的基礎(chǔ)，我們需要了解我們的心理是如何感知視覺(jué)。
?

?

什 么 是 格 式 塔 原 理 ？???

格式塔是1890年德國(guó)哲學(xué)和心理學(xué)首先引入的概念，它的原理是，我們的視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu)，并且在系統(tǒng)層感官形狀，圖形和物體，自動(dòng)形式一個(gè)認(rèn)知，而不是只看到互不相連的邊、線和區(qū)域。

大家看圖理解，大家看下面這張圖，“不存在的三角形”我們對(duì)一個(gè)三角形的認(rèn)知，并非純粹從三角形的形狀，大小感官而來(lái)，還包括我們過(guò)去對(duì)于三角形的經(jīng)驗(yàn)和印象，加在一起就是我們對(duì)一個(gè)三角形的認(rèn)知。

?

?? 格 式 塔 重 要 的 幾 個(gè) 原 理???

▲?相似原理:我們潛意識(shí)會(huì)把更緊密的事物將被視為屬于一起一組。

▲?對(duì)稱原理：我們的思維傾向于將對(duì)象視為在中心點(diǎn)對(duì)稱，并且去均勻分割這些元素找到平衡。

▲ 連續(xù)性原理：我們視覺(jué)系統(tǒng)傾向于連續(xù)性，視覺(jué)系統(tǒng)傾向于感知連續(xù)的形式而不是離散的碎片。

▲?封閉原理：視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片。

▲?共同命運(yùn)原理：一起運(yùn)動(dòng)的物體被感知為屬于一組或者彼此相關(guān)的。

▲ 主體背景原理：我們的大腦將視覺(jué)區(qū)域分為主體和背景，主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素，其余的則是背景。

那么設(shè)計(jì)中我們需要去如何運(yùn)用這些原理呢？下面我做些簡(jiǎn)單分析和案例。

?

1.緊密原理/相似性原理

緊密原理

我們潛意識(shí)會(huì)把更緊密的事物將被視為屬于一起一組。

▲ 左圖挨著更近為一組 ，右圖分3個(gè)為1組，2個(gè)為1組

相似原理
?

具有相同特征（形狀、顏色、陰影、質(zhì)量、方向）的東西將被視為屬于一起。

舉個(gè)栗子

在日常設(shè)計(jì)中，我們面對(duì)信息比較少的，可以采用緊密原則，根據(jù)信息熟悉進(jìn)行分類，讓信息看起來(lái)更有秩序。

▲ 淘寶網(wǎng)導(dǎo)航菜單就是運(yùn)用這種原則，根據(jù)產(chǎn)品類別一致性，進(jìn)行同類分類，就是使用的格式塔緊密原則。

▲ 反例：底部一排大部分是可以鏈接，紅圈部分無(wú)鏈接。

緊密和相似共用案例

?

2.對(duì)稱原理

?

我們的思維傾向于分解復(fù)雜場(chǎng)景為簡(jiǎn)單場(chǎng)景，我們會(huì)自覺(jué)把周圍的物體圍繞著中心點(diǎn)，這個(gè)原則指出，組合不應(yīng)該提供混亂或不平衡的感覺(jué)。否則，用戶視線將花費(fèi)時(shí)間嘗試找到丟失的元素或修復(fù)。

所以在設(shè)計(jì)中，我們應(yīng)該去制造這種中心對(duì)稱，平衡感。

▲ 制造平衡感，左右對(duì)稱

?

3.連續(xù)性原理

我們視覺(jué)系統(tǒng)傾向于連續(xù)性，視覺(jué)系統(tǒng)傾向于感知連續(xù)的形式而不是離散的碎片。

連續(xù)性是沿著道路，河流，海灘，山川，臺(tái)階，線條或曲線繪制眼睛的連續(xù)原則。

▲ 圖中你看見(jiàn)的是藍(lán)色和黃色線的物理交叉是很連續(xù)的，而并非是四條線相遇在終點(diǎn)。

在網(wǎng)頁(yè)和界面設(shè)計(jì)中，最基本的原則是讓用戶看到后知道點(diǎn)什么，設(shè)計(jì)師需要做的是最大限度地提高可點(diǎn)擊性的感知能力。

設(shè)計(jì)界面時(shí)，我們需要引導(dǎo)用戶的眼睛遵循一定的路徑，通過(guò)視覺(jué)手段突出我們想表達(dá)的元素，來(lái)制造出一條視覺(jué)層級(jí)排列元素，幫助用戶完成任務(wù)。

▲ 這些icon都說(shuō)使用連續(xù)性原理，它們的方向，秩序是連續(xù)的有方向的。

▲ 我們視覺(jué)系統(tǒng)對(duì)方向的識(shí)別，會(huì)自動(dòng)把上下圖形像馬路一樣延伸出去。

▲ 我們視覺(jué)系統(tǒng)對(duì)方向的識(shí)別會(huì)自動(dòng)把圖形注意點(diǎn)集中到中間縱向沖擊的點(diǎn)。

▲ 我們視覺(jué)系統(tǒng)對(duì)文字的識(shí)別會(huì)自動(dòng)把兩側(cè)的文字連續(xù)性補(bǔ)全。

▲我們視覺(jué)系統(tǒng)對(duì)形狀的識(shí)別會(huì)自動(dòng)把遮住的半片封面膠片補(bǔ)全。

?

總 結(jié) ??

格式塔更多是一種人們心理潛意識(shí)排版原理，我們需要了解它并靈活運(yùn)用它，使得我們的設(shè)計(jì)更科學(xué)，更具有吸引力，格式塔在網(wǎng)頁(yè)設(shè)計(jì)、平面設(shè)計(jì)、UI設(shè)計(jì)中都無(wú)處不在，此文只是拋磚引玉，希望大家多關(guān)注這些經(jīng)典設(shè)計(jì)原理和心理學(xué)。

?

作者：?skys

UI中國(guó)主頁(yè)

來(lái)源網(wǎng)絡(luò)