在版式設(shè)計(jì)中經(jīng)常用到的九大對(duì)比手法
閱前一叨逼:你以為排版只是左對(duì)齊、右對(duì)齊、左右對(duì)齊、居中對(duì)齊那么簡(jiǎn)單嗎?下
無(wú)對(duì)比不排版
所有的平面設(shè)計(jì)都離不開(kāi)版式,包括網(wǎng)頁(yè)設(shè)計(jì)、交互設(shè)計(jì)和UI設(shè)計(jì)。但是排版是一門很深也很難掌握的學(xué)問(wèn),有簡(jiǎn)簡(jiǎn)單單對(duì)齊就很好看的,也有看似亂七八糟但不明覺(jué)厲的。于是很多設(shè)計(jì)師就會(huì)有點(diǎn)迷糊,排版到底要怎樣才算好看?是不是純粹靠感覺(jué)啊?
其實(shí)版式設(shè)計(jì)也是有套路滴,我發(fā)現(xiàn)好看的版式設(shè)計(jì)都離不開(kāi)這兩個(gè)字——對(duì)比,下面是我總結(jié)的,在版式設(shè)計(jì)中經(jīng)常用到的九大對(duì)比手法:
1.字體大?。ù旨?xì))對(duì)比

大小對(duì)比在文字排版中是最常見(jiàn)的,在需要羅列的信息里一般會(huì)有標(biāo)題、小標(biāo)題、內(nèi)文之分,也會(huì)有重點(diǎn)信息和非重點(diǎn)信息,把重要的信息放大,次要信息則縮小處理,就形成了大小對(duì)比,這樣做的好處是可以減少次要信息對(duì)重要信息的干擾,使之更容易被接收。大小對(duì)比還能使版面的層次更豐富,讓受眾有細(xì)節(jié)可看,當(dāng)然,最終的還是得以那幾種對(duì)齊的方式來(lái)排列,呵呵!
如果把上圖的小字部分去掉,你會(huì)發(fā)現(xiàn),前后效果相差很多。

2.長(zhǎng)短對(duì)比
長(zhǎng)短對(duì)比分為行與行之間的長(zhǎng)短對(duì)比和列與列之間的長(zhǎng)短對(duì)比。

在文字排版中,每一行文字長(zhǎng)短不一,要比每一行都等長(zhǎng)好看(段落文章除外),而且文字段落的側(cè)面最好是呈波浪形,如上圖,這一點(diǎn)我在文章《設(shè)計(jì)的基礎(chǔ)就是把輪廓做好看》中有細(xì)講。所以我們?cè)谂虐鏁r(shí)可以通過(guò)斷句來(lái)刻意形成長(zhǎng)短對(duì)比,使排版看上去更美觀(最好別把詞語(yǔ)或單詞斷開(kāi))。
如果把上圖中的文字改成每行一樣長(zhǎng)的話就會(huì)得到如下效果:

算不上太丑,但略顯呆板。
列與列之間的長(zhǎng)短對(duì)比是指在畫冊(cè)、雜志、報(bào)紙的排版中,由于文字信息比較多,我們經(jīng)常會(huì)把文字分為幾列,這時(shí)候利用好各列段落文字的長(zhǎng)短關(guān)系,也能創(chuàng)造很好的效果,如左下圖。

如果像右上圖的把各段落排得一樣長(zhǎng),整個(gè)版面就又顯得呆板了。
3.稀疏對(duì)比

在實(shí)際排版中,我們需要處理的文字常常是有功能、信息、地位之分的,這時(shí)候最常見(jiàn)的處理手法就是把同一類型的信息擺在一起,而不是同類的信息則會(huì)區(qū)隔開(kāi)來(lái),然后對(duì)它們分別進(jìn)行不同的字體、字號(hào)和顏色處理等,這樣做的好處是信息清晰、看起來(lái)比較透氣,設(shè)計(jì)師可以利用這種手法制造視覺(jué)流程,引導(dǎo)受眾閱讀信息。
如果把上面例子中的稀疏對(duì)比去掉,就會(huì)顯得有點(diǎn)壓抑。

再比如下面這張名片的設(shè)計(jì),有無(wú)稀疏對(duì)比差別也挺明顯。


4.方向?qū)Ρ?/strong>
即把版面中的一部分文字信息朝某個(gè)方向排版,而另一部分文字則朝其他方向排版,這種手法可以有效增加版面的動(dòng)感或者空間感,海報(bào)設(shè)計(jì)中比較多見(jiàn),因?yàn)楹芏嗪?bào)的信息比較多,對(duì)排版的限制又比較少,所以設(shè)計(jì)可以玩的很靈活。下圖海報(bào)為向右上傾斜和向左上傾斜的對(duì)比。

日本是版式設(shè)計(jì)的高高手,下圖海報(bào)運(yùn)用了水平與垂直對(duì)比。

5.字體對(duì)比

大家應(yīng)該都聽(tīng)過(guò)這種說(shuō)法:"一個(gè)畫面里的字體最好不要超過(guò)3種。"因?yàn)檫^(guò)多的字體會(huì)造成版面很凌亂,不過(guò)如果一個(gè)版面里的信息比較多,而又只有一種字體的話,也會(huì)顯得有點(diǎn)單調(diào),用兩種或三種字體進(jìn)行排版可以制造對(duì)比,既能把不同信息區(qū)別開(kāi)來(lái),也能豐富版面,使設(shè)計(jì)看起來(lái)更具吸引力。
但也并不是字體不同就能形成對(duì)比,而是需要這幾種字體的風(fēng)格能形成比較大多反差,例如書(shū)法字體與宋體,手寫字體與黑體等等。上圖的版式中,是在眾多的羅馬體當(dāng)中夾雜了一個(gè)手寫體,正正規(guī)規(guī)的羅馬體與隨性的手寫體組合在一起,就產(chǎn)生來(lái)化學(xué)反應(yīng),整個(gè)版面一下子活了起來(lái)。
而如果把上圖的手寫體也改成羅馬體,整個(gè)版面就很普通了。

下圖的這款包裝中,中文產(chǎn)品名為手寫字體,而英文產(chǎn)品名則是羅馬體。

如果把中文產(chǎn)品名改成宋體,出來(lái)的效果也會(huì)大打折扣,雖然這里還保留了大小對(duì)比。

6.字體顏色對(duì)比

說(shuō)到顏色對(duì)比,大家很快就會(huì)想到圖片中的顏色對(duì)比,其實(shí)文字排版里面也會(huì)經(jīng)常用到,運(yùn)用色彩對(duì)比的文字排版可以起到突出重點(diǎn)、區(qū)分信息、裝飾畫面的作用,同時(shí)不同的顏色可以傳遞不同的情感,合理的運(yùn)用色彩對(duì)比,可以讓設(shè)計(jì)更符合所它所表達(dá)的內(nèi)容的屬性,在標(biāo)題設(shè)計(jì)中會(huì)比較常用到此手法。
缺少顏色對(duì)比的排版會(huì)顯得有些單調(diào)、平淡,如下圖。

下面的畫冊(cè)設(shè)計(jì)中,除了左邊的第三行文字用了紅色,其他的文字都是灰色,視覺(jué)上形成了差異化,當(dāng)然這個(gè)紅色就是來(lái)源于圖中紙船里的紅色。

如果把這僅有的紅色也改成灰色的話,似乎少了一個(gè)點(diǎn)睛之筆啊。

7.圖文對(duì)比
我們也可以把它看作是線與面的對(duì)比。

文字與圖片是平面設(shè)計(jì)的兩大最主要元素,所以掌握?qǐng)D文對(duì)比手法也是必不可少的。圖片與文字的組合方式有很多種,如:并列排版、文字繞排、圖疊文、文疊圖等等,圖片出現(xiàn)的形式主要分規(guī)則的幾何形和不規(guī)則的異形兩種,這些我們都可以根據(jù)實(shí)際需要進(jìn)行選擇。
純文字的版面雖然也可以排得很好看,但是會(huì)缺少有圖片時(shí)的視覺(jué)沖擊、感染力和美感,如果把上圖的圖片去掉全填滿文字,該版面的張力與美感瞬間就沒(méi)有了。

再比如下面的ui設(shè)計(jì),如果把圖片去掉,版面就會(huì)顯得單調(diào)很多。


所以,在條件允許的情況下,盡量在設(shè)計(jì)中加入圖片元素。
8.立體字與扁平字對(duì)比

這種對(duì)比效果在廣告設(shè)計(jì)中比較常見(jiàn),例如把標(biāo)題設(shè)計(jì)成3D的立體效果,副標(biāo)或者內(nèi)文用扁平效果,或者某個(gè)畫面的主視覺(jué)就是立體,標(biāo)題則直接用扁平字等等,出來(lái)的效果也很不錯(cuò),空間感和視覺(jué)沖擊力很強(qiáng)。右上圖就是把做上圖的立體字效果去掉了,結(jié)果視覺(jué)中心顯得很單薄。
9.局部與整體對(duì)比

局部與整體的對(duì)比在平面構(gòu)成中又稱特異,即版面中的大部分元素是一個(gè)效果,而只有局部的某個(gè)元素是完全不同的另一種效果,局部與整體的對(duì)比感很強(qiáng),能形成強(qiáng)大的反差,所以容易造成眼前一亮的效果,另類處理的局部部分也會(huì)隨之成為視覺(jué)重點(diǎn)。
下圖的畫冊(cè)設(shè)計(jì)也用了此對(duì)比手法。

當(dāng)然在排版中只用一種對(duì)比手法難以達(dá)到理想的效果,所以我們所看到的很多版式設(shè)計(jì)都至少采用了三種以上的對(duì)比效果。如下面的這幾個(gè)例子:

上圖綜合了文字大小對(duì)比、行之間的長(zhǎng)短對(duì)比、圖文對(duì)比、整體與局部對(duì)比、稀疏對(duì)比。

上圖綜合了字體對(duì)比、大小對(duì)比、顏色對(duì)比、列之間的長(zhǎng)短對(duì)比、整體與局部對(duì)比。

上圖綜合了字體大小、行之間的長(zhǎng)短、字體顏色對(duì)比。

上面的畫冊(cè)排版中綜合了字體大小對(duì)比、行之間的長(zhǎng)短對(duì)比、字體對(duì)比、整體與局部對(duì)比。
總之,有平面設(shè)計(jì)的地方就有排版,有排版的地方就有對(duì)比,運(yùn)用好對(duì)比,你的排版功力就又進(jìn)了一步。
相關(guān)文章

全畫幅不是半畫幅的兩倍有什么區(qū)別? 聊聊相機(jī)的傳感器尺寸
說(shuō)到相機(jī)畫幅,估計(jì)平時(shí)聽(tīng)到最多的可能就是全畫幅與半畫幅了,以至于不少人認(rèn)為中畫幅比全畫幅要小,為了避免這種常識(shí)性錯(cuò)誤,這篇文章就來(lái)和大家說(shuō)說(shuō)相機(jī)的不同畫幅,所謂2025-04-07
a5紙與a4紙?jiān)趺催x? a5紙與a4的區(qū)別介紹
4紙和A5紙因其尺寸適中,使用尤為廣泛,但你知道它們之間有何區(qū)別嗎?今天,就讓我們一起來(lái)探討這個(gè)話題2025-02-01
各類商務(wù)印刷品的尺寸怎么選? 印刷設(shè)計(jì)常用的尺寸紙張/克重都在這里了
日常經(jīng)常印刷各種東西,哪些尺寸,紙張更合適呢?本文為大家整理了常用印刷尺寸,方便圖文廣告店、印企在日常接單生產(chǎn)中能夠快速掌握客戶關(guān)鍵性信息,詳細(xì)請(qǐng)看下文介紹2024-02-10
常用照片尺寸有哪些 常見(jiàn)證件照尺寸對(duì)照表及用途介紹
現(xiàn)如今,證件照已成為我們生活中不可或缺的一部分,無(wú)論是求職應(yīng)聘,還是入學(xué)注冊(cè),亦或是辦理各種證件,都需要提交符合規(guī)定格式和要求的證件照,那么,這些證件照的尺寸和2024-02-10
平面設(shè)計(jì)是一個(gè)注重視覺(jué)效果的設(shè)計(jì),簡(jiǎn)單的排版方式有時(shí)候不能滿足視覺(jué)突出的效果,業(yè)務(wù)很難達(dá)到吸引用戶的眼球,下面我們就來(lái)看看8個(gè)平面設(shè)計(jì)技巧分享2023-10-08
如何選擇平面設(shè)計(jì)工具? 這10款軟件應(yīng)該收入囊中
每個(gè)設(shè)計(jì)師都有自己最喜歡的設(shè)計(jì)軟件,并把軟件作為自己的第二語(yǔ)言,今天我們來(lái)推薦10款UI設(shè)計(jì)不可或缺的工具,詳細(xì)請(qǐng)看下文介紹2023-10-08
夏日電影風(fēng)怎么調(diào)色調(diào)色? 適合夏季的柔和綠色調(diào)調(diào)色分享
夏日電影風(fēng)怎么調(diào)色調(diào)色?夏天快到了,想要調(diào)節(jié)夏季電影風(fēng)的畫面,該怎么操作呢?下面我們就來(lái)看看適合夏季的柔和綠色調(diào)調(diào)色分享2023-04-02
什么是真RAW 什么是偽RAW? 簡(jiǎn)單說(shuō)說(shuō)真 RAW 和 偽RAW
隨著索尼α7RV(ILCE-7RM5)正式發(fā)售,近期有不少網(wǎng)友跟我咨詢索尼相機(jī)“無(wú)損壓縮(M)”和“無(wú)損壓縮(S)”RAW的問(wèn)題,今天做一個(gè)統(tǒng)一答復(fù)2022-12-24
手機(jī)UI設(shè)計(jì)尺寸有哪些? 超全面的UI元素尺寸設(shè)置指南
手機(jī)UI設(shè)計(jì)尺寸有哪些?作為新手在設(shè)計(jì)手機(jī)ui的頁(yè)面的時(shí)候,發(fā)現(xiàn)自己設(shè)計(jì)的尺寸都很奇怪,如果能有元素尺寸介紹就好了,下面就來(lái)看看我們匯總的超全面的UI元素尺寸設(shè)置指南2021-08-06
常用照片尺寸有哪幾個(gè)? 照片標(biāo)準(zhǔn)尺寸/像素對(duì)照表匯總
常用照片尺寸有哪幾個(gè)?我們經(jīng)常說(shuō)一寸照片,二寸照片,這些照片的尺寸是怎么計(jì)算的?下面我們就來(lái)看看照片標(biāo)準(zhǔn)尺寸/像素對(duì)照表匯總2021-08-06









