當前位置: 首頁 > 設計資訊 > 理論文摘 > 正文

格式塔原理及其版面中的應用

2019-03-14 2525 0

 


 

一、 格式塔原理及其版面中的應用


 

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


 

簡言之格式塔心理學是對人類視覺工作原理研究。此項研究提出人類的視覺是一個整體,眼睛所看到的事物都是經(jīng)過大腦整體化處理,所以我們是以整體形式感知事物而不是個體元素。


 

其中最重要的格式塔原理有著幾個:接近性原理;相似性原理;連續(xù)性原理;封閉性原理;對稱性原理;主體/背景原理。 在此篇文章中我們重點介紹前三個,而這三個也是在版面中運用最廣泛最基礎的。


 


 

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


 

何為接近原則?即我們視覺會把彼此接近的元素看成一個整體。所以在排版的時候我們可以將相關聯(lián)的元素彼此接近,不相關的元素彼此遠離,以此來區(qū)分不同的信息集。


 

 

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

 

 


 

例如:聯(lián)合利華LOGO的諸多元素因為彼此接近,所以我們很輕易的能夠辨認出輪廓“U”。


 

那么接近原則在版面中是如何運用的呢?其實就是將相關聯(lián)的信息彼此靠近,不相關的信息彼此遠離的過程。


 

 

在這個名人名言的案例中,標題與內(nèi)容之間的距離完全相等,我們很大程度上就會產(chǎn)生哪段標題對應哪段文字的疑惑。如果我們將接近性原則處理好之后會發(fā)生什么?


 


 

當我們把相對應的名人名言互相貼近,不相關的互相遠離后,其閱讀障礙就不存在了,誰說了那句話一目了然。


 

接近性原則不但可以處理標題與文字,還可以處理各種各樣的元素。


 


 

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


 

 


 

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


 

我們再來看一下這組信息,需要用以下信息做一個中英文結合的名片。首先要做的還是把接近性原則處理好,把姓名職位、英文名、聯(lián)系方式、地址等通過接近性原則劃分為不同的組合。


 


 

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

 


 

(Ps:關于如何選字體下文會講到)


 


 

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


 


 

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


 


 

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


 


 


 

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


 

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


 

 

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


 


 

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


 


 

相似性原理在版面上是如何去運用的?


 

 

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


 


 

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


 


 


 

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


 


 


 

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

 


 


 

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


 

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


 


 


 

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


 


 


 

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


 


 


 

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


 

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


 


 

以上圖而言,雖然全部是虛線的點,但我們依然可以辨認出他們的幾何形狀。


 


 

有很多LOGO造型也是運用了連續(xù)性的,比如IBM。


 


 

 

分隔開的圖片我們依然能夠識別出內(nèi)容,也說明了視覺是連續(xù)的。


 

連續(xù)性在排版設計中一般用于解決元素散亂、視覺邏輯的問題。


 


 

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


 


 

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


 


 

 

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


 


 

 

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


 


 

好了,時間結束啦,我們看一看答案吧。


 


 

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


 


 

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


 


 


 

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


 


 

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


 


 


 


 

二、 素材的精致程度


 

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


 


 

2.1 清晰度


 

清晰度相信不用多說了吧,清晰度的優(yōu)劣直接會影響我們作品的品質(zhì)。如下圖中這類素材清晰度不夠,排版就會毀于素材。調(diào)換成足夠清晰度的素材,畫面也會精致很多。

 


 


 


 

2.2 契合度


 

契合度就是素材與主題的關聯(lián)程度,如果一個表現(xiàn)體育的主題你去找一張美食的圖片,那么毫無關聯(lián)程度,必然是錯的。

 


 

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


 

 

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


 


 

3.3 表現(xiàn)力


 

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


 

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


 


 

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


 


 

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


 


 


 


 

三、 字型選擇的重要性


 

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


 

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


 

 

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


 

 

當我們將字體換成無襯線體與黑體后是不是就順眼多了。無襯線體更加現(xiàn)代,與要表達的主題氣質(zhì)契合。


 

由此可見字型選不對,就很容易毀掉你的作品。要選對字型首先要對字體的氣質(zhì)有一定的了解,接下來重點介紹襯線體、無襯線體、黑體、宋體所具備的不同的氣質(zhì)。


 


 

3.1 襯線體與宋體


 

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


 

 

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


 

 

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


 

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

 


 


 


 

 


 

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


 

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


 


 


 


 


 


 

既然襯線體分為傳統(tǒng)襯線與現(xiàn)代襯線,那么宋體也是一樣。按照宋體裝飾三角的復雜程度也可分為傳統(tǒng)宋體與現(xiàn)代宋體。


 

 

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


 


 

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


 


 

  


 

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


 

 

搭配原則其實不難,總結就是一句話


 


 

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


 

 

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


 

 

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


 


 

所以搭配的時候不僅要氣質(zhì)相匹配,其筆畫特征也應該是相似的。


 


 


 

3.2 無襯線體與黑體


 

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


 


 

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


 

 

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


 

常見的常規(guī)型無襯線體有Helvetica、Univers、DIN等,他們給人的感覺是現(xiàn)代、理性、嚴謹?shù)?,同時也是最沒個性的。

 


 

 

因為其沒有特別的個性,所以字體的包容性非常廣,有話云:當你不知道用什么字體時,就用Helvetica。由此可見其用途廣泛程度。


 

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


 


 


 

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


 


 


 

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


 


 

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

 


 

 

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


 


 


 


 

四、 案例演示


 

此部分我們用“東方藝蘊”的海報來作為案例,來看看如何運用以上的知識點運用到版面設計中去。


 

首先我們看一下同學的原作極其所存在的問題


 

 

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


 

第二點是字形選擇上的錯誤,中文與英文的搭配也并不合理。


 

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


 


 

知道問題后我們來逐一解決就可以了。首先來看第一點,素材的精致程度。


 

 


 

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


 


 

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


 

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


 


 

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


 


 


 


 

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


 

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


 

 

現(xiàn)在主體在版面中的大小已經(jīng)調(diào)整的比較合適了,剩下的我們只需要在主體以外的區(qū)域編排上文字信息便可。在此圖中能夠放置文字信息的區(qū)域也就只有上下兩部分,如下。


 


 

了解文字編排的位置之后我們需要解決第二個問題,也就是中西文字體搭配的問題。在做之前我們首先應思考其表達的主題是什么,是傳統(tǒng)的感覺還是現(xiàn)代的感覺、該用黑體還是宋體?


 

東方藝蘊明顯是東方的藝術展,非常有文化感與藝術性,所以黑體與無襯線體肯定是不合適的,我們應該選擇能夠表現(xiàn)文化屬性的宋體類字形。


 

在宋體字形里面我們也要避開具有時尚、現(xiàn)代氣質(zhì)的,而要選用傳統(tǒng)的、有文化性的字體——傳統(tǒng)宋體。


 

 

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


 

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


 

 

首先把主標題放上去,但主標題字與字直接空隙太大,有些散,怎么解決這個問題呢?


 


 

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


 


 

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


 

現(xiàn)在版面的結構已經(jīng)成型了,剩下時間日期這里顯得有些散。


 

 

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


 

 

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


 


 

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


 


 

再看一下整體的效果和運用效果。

 


 


 

 

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


 


 


 


 

總結:


 

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


 

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


 

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


 


 


23
評論區(qū)(0)
正在加載評論...