一、 格式塔原理及其版面中的應(yīng)用
相信各位都聽(tīng)說(shuō)過(guò)格式塔心理學(xué)。“格式塔”源自德語(yǔ)“Gestalt”,意即“整體”、“完形”。
簡(jiǎn)言之格式塔心理學(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ǔ)的。
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)楸舜私咏?,所以我們很輕易的能夠辨認(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è)案例好很多。
3.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è)诒A粢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ù)?,同時(shí)也是最沒(méi)個(gè)性的。
因?yàn)槠錄](méi)有特別的個(gè)性,所以字體的包容性非常廣,有話(huà)云:當(dāng)你不知道用什么字體時(shí),就用Helvetica。由此可見(jiàn)其用途廣泛程度。
人文型無(wú)襯線(xiàn)體的代表為Gill Sans、Optima、Stone Sans等,人文型無(wú)襯線(xiàn)體給人感覺(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)逐一解決就可以了。首先來(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ū)域也就只有上下兩部分,如下。
了解文字編排的位置之后我們需要解決第二個(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é)。
首先把主標(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ì)更加明確。