相信各位都聽(tīng)說(shuō)過(guò)“格式塔心理學(xué)”，“格式塔”源自德語(yǔ)“Gestalt”，意即“整體”、“完形”。

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

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

 

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

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

何為接近原則？即我們視覺(jué)會(huì)把彼此接近的元素看成一個(gè)整體。

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

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

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

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

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

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

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

 

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

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

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

 

我們?cè)賮?lái)看一下這組信息，需要用以下信息做一個(gè)中英文結(jié)合的名片。

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

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

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

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

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

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

 

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

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

在同一組圖形中，顏色或者形狀相似的元素會(huì)形成一個(gè)視覺(jué)單元。

同樣的原理，在一組圖形中大小或方向相似的元素也會(huì)形成一個(gè)視覺(jué)單元。

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

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

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

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

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

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

 

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

 

另外，我們的視覺(jué)流向也會(huì)被畫(huà)面中的目光朝向所影響。

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

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

將“BIG Cat”放到貓咪目光的延伸線(xiàn)上則會(huì)非常容易使人注意到。

 

二、 素材的精致程度

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

 

2.1 清晰度

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

如下圖中這類(lèi)素材清晰度不夠，排版就會(huì)毀于素材。

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

 

2.2 契合度

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

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

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

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

 

2.3 表現(xiàn)力

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

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

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

上圖兩案例也屬于表現(xiàn)力非常好的素材，我們?cè)谧雠虐鏁r(shí)，如果要用素材就要用表現(xiàn)力過(guò)關(guān)的素材，這樣作品才會(huì)更有美觀與設(shè)計(jì)感。

 

三、 字型選擇的重要性

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

在講字型之前我們先看一個(gè)案例。

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

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

 

3.1 襯線(xiàn)體與宋體

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

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

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

 

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

 

 

 

 

說(shuō)完偏傳統(tǒng)的咱們?cè)賮?lái)說(shuō)一下偏現(xiàn)代的。

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

 

 

 

 

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

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

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

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

 

介紹完宋體與襯線(xiàn)體的相同與不同后我們?cè)賮?lái)說(shuō)一下他們之間應(yīng)該如何混合搭配。

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

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

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

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

 

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

 

3.2 無(wú)襯線(xiàn)體與黑體

無(wú)襯線(xiàn)體，即沒(méi)有襯線(xiàn)修飾的字體。

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

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

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

 

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

 

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

 

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

 

 

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

 

 

相對(duì)于無(wú)襯線(xiàn)體，黑體的分類(lèi)就比較簡(jiǎn)單了，按照有無(wú)喇叭口的原則只將其分為常規(guī)型黑體與人文型黑體。無(wú)喇叭口的黑體為常規(guī)型，有喇叭口的為人文型。

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

 

 

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

 

四、 案例演示

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

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

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

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

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

 

知道問(wèn)題后我們來(lái)逐一解決就可以了。

 

問(wèn)題一：“素材的精致程度不夠”

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

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

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

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

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

 

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

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

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

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

 

問(wèn)題二：“中西文字體搭配不合理”

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

 

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

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

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

 

問(wèn)題三：“接近性原則、層級(jí)關(guān)系沒(méi)有處理好”

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

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

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

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

同樣我們也為其加入連接性的符號(hào)組織到一個(gè)視覺(jué)單元里去，那么其整體的效果就會(huì)好不少。

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

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

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

至此，這個(gè)案例也就完成了。

 

總結(jié)

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

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

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

 

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