相信各位都聽說過“格式塔心理學(xué)”，“格式塔”源自德語“Gestalt”，意即“整體”、“完形”。

“格式塔心理學(xué)”是對人類視覺工作原理研究。此項(xiàng)研究提出人類的視覺是一個整體，眼睛所看到的事物都是經(jīng)過大腦整體化處理，所以我們是以整體形式感知事物而不是個體元素。其中，最重要的格式塔原理有著幾個：接近性原理；相似性原理；連續(xù)性原理；封閉性原理；對稱性原理；主體/背景原理。

在此篇文章中，我們重點(diǎn)介紹前三個，而這三個也是在版面中運(yùn)用最廣泛最基礎(chǔ)的。

 

一、 格式塔原理在版面中的應(yīng)用

1.1 接近與信息關(guān)聯(lián)性

何為接近原則？即我們視覺會把彼此接近的元素看成一個整體。

所以，在排版的時(shí)候我們可以將相關(guān)聯(lián)的元素彼此接近，不相關(guān)的元素彼此遠(yuǎn)離，以此來區(qū)分不同的信息集。

建立不同組合的方式有很多種，但是以接近性原則最為基礎(chǔ)和重要。即便每個元素的顏色形狀不同，但只要彼此接近，也能夠在視覺上形成一組。

例如：聯(lián)合利華LOGO的諸多元素因?yàn)楸舜私咏晕覀兒茌p易的能夠辨認(rèn)出輪廓“U”。

那么接近原則在版面中是如何運(yùn)用的呢？其實(shí)就是將相關(guān)聯(lián)的信息彼此靠近，不相關(guān)的信息彼此遠(yuǎn)離的過程。

在這個名人名言的案例中，標(biāo)題與內(nèi)容之間的距離完全相等，我們很大程度上就會產(chǎn)生哪段標(biāo)題對應(yīng)哪段文字的疑惑。

如果我們將接近性原則處理好之后會發(fā)生什么？

當(dāng)我們把相對應(yīng)的名人名言互相貼近，不相關(guān)的互相遠(yuǎn)離后，其閱讀障礙就不存在了，誰說了那句話一目了然。

 

接近性原則不但可以處理標(biāo)題與文字，還可以處理各種各樣的元素。

在此案例中，圖片與文字距離過遠(yuǎn)，缺乏聯(lián)系感。而圖片之間又過近，組合不分明。接近性沒有做好，所以造成了畫面整體偏散的問題。

當(dāng)我們用接近性原則將相關(guān)聯(lián)的圖文信息組合在一塊后，版面更易閱讀，哪個人物對應(yīng)哪個名字也不會出錯了。

 

我們再來看一下這組信息，需要用以下信息做一個中英文結(jié)合的名片。

首先，要做的還是把接近性原則處理好，把姓名職位、英文名、聯(lián)系方式、地址等通過接近性原則劃分為不同的組合。

右邊經(jīng)過接近性原則處理后的更易閱讀，哪塊信息說了什么也十分明顯，剩下的我們只需要把劃分好的組合選擇合適的字體，并排列到名片的版面中。

（Ps：關(guān)于如何選字體下文會講到）

利用好接近性原則我們可以不斷嘗試已經(jīng)分好組的元素在版面中的位置，在確保每組距離的同時(shí)保證版面的平衡性即可。

利用接近性原則可以不斷的去調(diào)整位置形成新的版面。

以上都是以接近性原則為基礎(chǔ)延伸出的不同布局的名片。

 

1.2 相似與版面統(tǒng)一性

接近性原則強(qiáng)調(diào)的是位置對我們視覺的影響，而相似性原則強(qiáng)調(diào)視覺元素的內(nèi)容對視覺的影響，如顏色、形狀、大小、方向等等。如果其他因素一樣，只有這些內(nèi)容不同，那么我們的視覺會把相似的內(nèi)容看成一個整體。

在同一組圖形中，顏色或者形狀相似的元素會形成一個視覺單元。

同樣的原理，在一組圖形中大小或方向相似的元素也會形成一個視覺單元。

相似性原理在版面上是如何去運(yùn)用的？

首先，利用相似性原理可以把不和諧的元素和諧化。

三張圖片的色調(diào)不同，強(qiáng)行組合在版面中并不和諧。

將色調(diào)處理成統(tǒng)一版面也會更加和諧。

不同的數(shù)字表現(xiàn)方式使版面凌亂不堪。

將數(shù)字的特征相似化后整體的風(fēng)格更統(tǒng)一，版面也沒了凌亂的感覺。

 

相似性原理除了可以和諧的處理版面之外還可以著重突出重點(diǎn)的元素。

我們只需要將想要突出的元素去掉相似特征就可以了，使之異于其他相似的元素。

此例中用不同的色彩使已完成、待進(jìn)行、正在處理的流程區(qū)分開來。而“已完成”的步驟其顏色則是一樣的；“未完成”之間的色彩也一致，這正是相似原則的突出運(yùn)用。

 

1.3 連續(xù)性原則與視覺邏輯

比起相似的事物，我們的視覺更容易感知到連續(xù)的事物，使之成為一個整體。

以上圖而言，雖然全部是虛線的點(diǎn)，但我們依然可以辨認(rèn)出他們的幾何形狀。有很多LOGO造型也是運(yùn)用了連續(xù)性的，比如IBM。

 

分割開的圖片我們依然能夠識別出內(nèi)容，也說明了視覺是連續(xù)的。連續(xù)性在排版設(shè)計(jì)中一般用于解決元素散亂、視覺邏輯的問題。

為解決這個問題，我們可以加入其它元素，建立連續(xù)性。

通過線條的穿插表現(xiàn)，我們的視覺得到了很好的引導(dǎo)，解決了不知按什么順序閱讀的問題。另外線條使四個點(diǎn)連成了一個整體，點(diǎn)與點(diǎn)之間具備了連續(xù)性，散亂的問題也得到了很好的解決。

線條的走向也會對我們的閱讀順序產(chǎn)生重大的影響。

這里考一下大家，如何利用連續(xù)性原則將上圖比較散的年份和日期建立聯(lián)系感？（要求：不能改變兩者的距離。）

 

好了，時(shí)間結(jié)束啦，我們看一看答案吧。

 

另外，我們的視覺流向也會被畫面中的目光朝向所影響。

我們現(xiàn)在要將BIG Cat 放到畫面里面，放到什么位置最能讓別人注意到？

放到這里雖然感覺也沒問題，但是如果字再小一點(diǎn)，圖片顏色再深一點(diǎn)就非常容易讓觀者遺漏此信息。

將“BIG Cat”放到貓咪目光的延伸線上則會非常容易使人注意到。

 

二、 素材的精致程度

素材的精致程度對版面的優(yōu)劣也有非常大的影響，素材的精致程度主要體現(xiàn)在三個方面，分別是清晰度、契合度和表現(xiàn)力。

 

2.1 清晰度

清晰度相信不用多說了吧，清晰度的優(yōu)劣直接會影響我們作品的品質(zhì)。

如下圖中這類素材清晰度不夠，排版就會毀于素材。

調(diào)換成足夠清晰度的素材，畫面也會精致很多。

 

2.2 契合度

契合度就是素材與主題的關(guān)聯(lián)程度。

如果一個表現(xiàn)體育的主題你去找一張美食的圖片，那么毫無關(guān)聯(lián)程度，必然是錯的。

上圖左側(cè)的案例文字是狗，但素材圖卻是個豹子，于是就成了契合度不夠的典型。

同樣是書法培訓(xùn)的海報(bào)，左側(cè)的用到太多不相關(guān)的元素，廟宇、竹子、山川等等，與主題的契合度不夠。而右側(cè)的案例僅僅只用了書法筆觸的素材，但契合度和表現(xiàn)力卻比左側(cè)好很多。另外，右側(cè)文字的編排在接近性、連續(xù)性上也比左側(cè)案例好很多。

 

2.3 表現(xiàn)力

表現(xiàn)力有多重形式，如創(chuàng)意性、光影出色、層次感強(qiáng)等等。

比如我們找一個舞者的素材，下圖左側(cè)這種就屬于表現(xiàn)力不夠的。

左側(cè)的素材常見，造型、創(chuàng)意以及美感都差強(qiáng)人意，缺乏感染力自然表現(xiàn)力就不夠。相比較，右側(cè)素材的光影以及美感非常好，表現(xiàn)力就會強(qiáng)很多。

上圖兩案例也屬于表現(xiàn)力非常好的素材，我們在做排版時(shí)，如果要用素材就要用表現(xiàn)力過關(guān)的素材，這樣作品才會更有美觀與設(shè)計(jì)感。

 

三、 字型選擇的重要性

字型在我們設(shè)計(jì)中是非常重要的，甚至可以上升到設(shè)計(jì)之魂的高度。字型選擇是否正確對版面的影響是決定性的。

在講字型之前我們先看一個案例。

這個生命科學(xué)的海報(bào)看上去怪怪的，究竟怪在哪里呢？實(shí)際上，是字體應(yīng)用不得當(dāng)?shù)膯栴}。案例中用的是襯線體與宋體，而這兩個都是傳統(tǒng)型字體，表達(dá)不出生命科學(xué)所擁有的嚴(yán)謹(jǐn)感與現(xiàn)代醫(yī)學(xué)的科技感。

當(dāng)我們將字體換成無襯線體與黑體后是不是就順眼多了。無襯線體更加現(xiàn)代，與要表達(dá)的主題氣質(zhì)契合。由此可見字型選不對，就很容易毀掉你的作品。要選對字型首先要對字體的氣質(zhì)有一定的了解，接下來重點(diǎn)介紹襯線體、無襯線體、黑體、宋體所具備的不同的氣質(zhì)。

 

3.1 襯線體與宋體

襯線體，即有襯線裝飾特征的字體；宋體，即筆畫有粗細(xì)變化，并且轉(zhuǎn)折處有三角裝飾特征的字體。襯線體與宋體一般都具有傳統(tǒng)的氣質(zhì)，能夠表現(xiàn)一定的文化感、歷史感，并且具有強(qiáng)烈的人文主義感。

襯線體還可詳細(xì)分為偏傳統(tǒng)和偏現(xiàn)代的類型，主要是看他們的橫豎筆畫的粗細(xì)對比度與簡潔程度區(qū)分。

左側(cè)傳統(tǒng)型襯線體粗細(xì)對比相差比較小，襯線也比較圓潤復(fù)雜，襯線連接處呈圓角；右側(cè)現(xiàn)代型襯線體粗細(xì)對比相差非常大，襯線連接處呈直角，簡單直接。

 

偏傳統(tǒng)襯線體的代表有Garamond、Caslon等，它們的傳統(tǒng)氣質(zhì)非常強(qiáng)烈，適合傳達(dá)傳統(tǒng)、文藝、人文的氣質(zhì)與故事感。

 

 

 

 

說完偏傳統(tǒng)的咱們再來說一下偏現(xiàn)代的。

偏現(xiàn)代襯線體的代表有Didot、Bodoni、Walbaum等，它們在保留襯線的同時(shí)又有很強(qiáng)的現(xiàn)代感，粗細(xì)對比也比較大，能夠傳達(dá)出優(yōu)雅、女性、高端、時(shí)尚的氣質(zhì)，因此很多時(shí)尚雜志、女性產(chǎn)品選擇此類型的字體。

 

 

 

 

既然襯線體分為傳統(tǒng)襯線與現(xiàn)代襯線，那么宋體也是一樣。

按照宋體裝飾三角的復(fù)雜程度也可分為傳統(tǒng)宋體與現(xiàn)代宋體。

常用的傳統(tǒng)宋體有方正標(biāo)宋、書宋、報(bào)宋、筑紫明朝、王漢宗明體等；而常用的現(xiàn)代宋體有方正雅宋系列、思源宋體、小塚明朝等。

傳統(tǒng)宋體與現(xiàn)代宋體所傳達(dá)的氣質(zhì)也有差別。傳統(tǒng)的宋體更能夠表現(xiàn)出文藝、故事、人文的感覺；而現(xiàn)代宋體則偏向傳遞女性優(yōu)雅、時(shí)尚的感覺。

 

介紹完宋體與襯線體的相同與不同后我們再來說一下他們之間應(yīng)該如何混合搭配。

搭配原則其實(shí)不難，總結(jié)就是一句話：

以這個搭配原則我們看一下下面這個案例。

第一組搭配為方正風(fēng)雅宋與其自帶的英文，顯然是不匹配的；第二組為方正風(fēng)雅宋+Garamond，現(xiàn)代宋體搭配傳統(tǒng)襯線體，顯得也不倫不類，不和諧；第三組為現(xiàn)代宋體搭配現(xiàn)代襯線Didot，所以非常和諧。

這一組也是一樣，只有第三組傳統(tǒng)宋體+傳統(tǒng)襯線體最為和諧。盡管第一組自帶的英文也可勉強(qiáng)劃分到傳統(tǒng)襯線里面，但他的筆畫特征與中外完全不同，因此也非常難匹配。

 

所以搭配的時(shí)候不僅要?dú)赓|(zhì)相匹配，其筆畫特征也應(yīng)該是相似的。

 

3.2 無襯線體與黑體

無襯線體，即沒有襯線修飾的字體。

黑體也是沒有三角形裝飾特征的字體，相較于襯線體與宋體而言，其更為簡約、現(xiàn)代，能夠表達(dá)理性、利落的特質(zhì)。

無襯線體根據(jù)其字母的結(jié)構(gòu)關(guān)系可以分為常規(guī)型、人文型、幾何型三類。

其中常規(guī)型無襯線體是最常見最普通的，可以說是最沒個性的；人文型無襯線體的筆畫并不是等寬的，而是有過渡過變化，S、C等字母的切口也是寬的，給人的感覺很秀麗、優(yōu)雅，同時(shí)又具有一點(diǎn)文藝氣質(zhì)；幾何型無襯線體更像是用幾何形狀切出來的，給人的感覺很簡約、時(shí)尚、現(xiàn)代。

 

常見的常規(guī)型無襯線體有Helvetica、Univers、DIN等，它們給人的感覺是現(xiàn)代、理性、嚴(yán)謹(jǐn)?shù)模瑫r(shí)也是最沒個性的。

 

因?yàn)槠錄]有特別的個性，所以字體的包容性非常廣，有話云：當(dāng)你不知道用什么字體時(shí)，就用Helvetica。由此可見其用途廣泛程度。

 

人文型無襯線體的代表為Gill Sans、Optima、Stone Sans等，它們給人感覺是理性與感性并存，是很有溫度的一類字體；它們也能傳達(dá)優(yōu)雅、秀麗、人文的氣質(zhì)。

 

 

幾何型無襯線體的代表有Ftura、Avalon、Avant Garded等，這種字體有強(qiáng)烈的幾何感，顯得很現(xiàn)代、高端。

 

 

相對于無襯線體，黑體的分類就比較簡單了，按照有無喇叭口的原則只將其分為常規(guī)型黑體與人文型黑體。無喇叭口的黑體為常規(guī)型，有喇叭口的為人文型。

常見的常規(guī)型黑體有思源黑體、微軟雅黑、漢儀旗黑、方正蘭亭黑等；常見的人文型黑體有默認(rèn)黑體和冬青黑體。

 

 

黑體與無襯線體的搭配比襯線體和宋體要簡單，只需要選擇精致的字體，并統(tǒng)一好字重和筆畫形式便可。

 

四、 案例演示

此部分我們用“東方藝蘊(yùn)”的海報(bào)來作為案例，來看看如何運(yùn)用以上的知識點(diǎn)運(yùn)用到版面設(shè)計(jì)中去。

首先我們看一下同學(xué)的原作極其所存在的問題。

第一點(diǎn)，是所用的素材不夠精致，不管是層次感還是表現(xiàn)力都非常的差。

第二點(diǎn)，是字形選擇上的錯誤，中文與英文的搭配也并不合理。

第三點(diǎn)，是接近性原則沒有處理好，版面的層級關(guān)系也沒有劃分好，所以顯得很碎且雜亂無章。

 

知道問題后我們來逐一解決就可以了。

 

問題一：“素材的精致程度不夠”

首先來看第一點(diǎn)，素材的精致程度。

隨著此素材層次感和表現(xiàn)力都不太好，但也并不是完全沒救，我們只需要在PS里處理一番，提高其層次感和表現(xiàn)力。

處理后素材的層次感通過浮雕效果表現(xiàn)了出來，增添一些東方韻味。對其色階、對比度的調(diào)整更使其表現(xiàn)力增加了幾分。

雖然調(diào)整好了，但素材的負(fù)空間比較多，比較零碎，所以我們可以為他加入一個底，最好貼合著形體來，我這里加了一個漸變的圓形，形式貼近中國特色民族傳統(tǒng)工藝之一的刺繡，與活動主題契合不少。

現(xiàn)在主體非常飽滿了，但后面的圓形缺乏層次感，為了解決這個問題我們可以去找一些紋理的素材疊加上去。

 

當(dāng)我們把紋理疊加上去后，其視覺表現(xiàn)更豐富了，層次感也比之前強(qiáng)很多，至此素材精致度的問題已經(jīng)得到了解決。

Ok，我們可以將處理好的素材置于版面之中作為主體，如下：

現(xiàn)在主體在版面中的大小已經(jīng)調(diào)整的比較合適了，剩下的我們只需要在主體以外的區(qū)域編排上文字信息便可。

在此圖中能夠放置文字信息的區(qū)域也就只有上下兩部分，如下：

 

問題二：“中西文字體搭配不合理”

了解文字編排的位置之后，我們需要解決第二個問題，也就是中西文字體搭配的問題。

 

在做之前，我們首先應(yīng)思考其表達(dá)的主題是什么，是傳統(tǒng)的感覺還是現(xiàn)代的感覺、該用黑體還是宋體？東方藝蘊(yùn)明顯是東方的藝術(shù)展，非常有文化感與藝術(shù)性，所以黑體與無襯線體肯定是不合適的，我們應(yīng)該選擇能夠表現(xiàn)文化屬性的宋體類字形。在宋體字形里面我們也要避開具有時(shí)尚、現(xiàn)代氣質(zhì)的，而要選用傳統(tǒng)的、有文化性的字體——傳統(tǒng)宋體。

確定好中文宋體的類型之后我們還要去確定英文字形，根據(jù)我們上文所說的傳統(tǒng)配傳統(tǒng)的法則，上面三個搭配中只有王漢宗明體與Garamond的搭配最為合適。

字型都確定好后便可以進(jìn)入排列文字信息的環(huán)節(jié)。

 

問題三：“接近性原則、層級關(guān)系沒有處理好”

首先，把主標(biāo)題放上去，但主標(biāo)題字與字直接空隙太大，有些散，怎么解決這個問題呢？

根據(jù)我們上文所說，在字與字之間加入連接性的符號就可以了，這樣建立了連續(xù)性，使其成為了一個視覺組合。

其他的信息也按照接近性的原則排列上去，注意相關(guān)聯(lián)的信息互相接近；不相關(guān)的信息互相遠(yuǎn)離。

現(xiàn)在，版面的結(jié)構(gòu)已經(jīng)成型了，剩下時(shí)間日期這里顯得有些散。

同樣我們也為其加入連接性的符號組織到一個視覺單元里去，那么其整體的效果就會好不少。

深灰色背景太單調(diào)了，所以我們可以另找一個密一點(diǎn)的紋理素材疊加上去。

疊加上去之后我們看一下其局部效果，

再看一下整體的效果和運(yùn)用效果。

至此，這個案例也就完成了。

 

總結(jié)

1.  要做好版面一定要去選擇精致的素材作為主體，素材的精致與否很大程度上能夠決定版面的優(yōu)劣。素材不夠精致，可以二次處理，二次處理也搶救不了的素材就趕緊換吧。

2.  素材的精致程度是其一，有了精致的素材還需要通過格式塔原理將信息的層級拉開。用接近性原則處理好信息的貼近與遠(yuǎn)離；用相似性原則平衡版面不同元素間的視覺和諧度，也可用此原則強(qiáng)調(diào)需要突出的信息；用連續(xù)性原則使散亂的信息形成整體，建立視覺邏輯。

3.  字體選擇和中英文搭配要契合項(xiàng)目的氣質(zhì)，并且筆畫特征相似。一定不要隨意的去選擇字體，每種字形都有其特定的氣質(zhì)，只有選擇正確的字形，版面所傳達(dá)的主題氣質(zhì)才會更加明確。

 

原文地址：大貓?jiān)O(shè)計(jì)（公眾號）
作者：大貓Sunjay