如何打造具有“節(jié)奏感”的版式設(shè)計(jì)?

發(fā)布時(shí)間:2020-02-10      閱讀量:23167次     

  老鐵們,元宵節(jié)好??!
  不能出門(mén)的日子
  你們都是怎么度過(guò)的呢?
  貼心的來(lái)拯救大家的“無(wú)聊”了!
  這次帶來(lái)了版式設(shè)計(jì)類(lèi)的干貨
  ——如何用文字打造“節(jié)奏感”
  一起來(lái)用知識(shí)充實(shí)無(wú)聊的時(shí)間吧
  什么是節(jié)奏感?
  首先說(shuō)到節(jié)奏感,我們肯定會(huì)聯(lián)想到音樂(lè)。由于旋律的不同,每一首音樂(lè)都能給人帶來(lái)不同的感受。
  那么,設(shè)計(jì)當(dāng)中的節(jié)奏感指的是什么呢?
  ▼
  拿以下的作品延展一下
  這是吳冠中的繪畫(huà)作品,看似很簡(jiǎn)單的畫(huà)面
  但是這種水流蜿蜒的繪制手法
  讓人從視覺(jué)上感受到畫(huà)面的靈動(dòng)
  
  然而當(dāng)去掉這些流動(dòng)的線(xiàn)
  整個(gè)畫(huà)面失去蜿蜒流潺的感覺(jué)
  變得平靜了
  就像很多圖像網(wǎng)站的作品排版
  一樣是采用了這種瀑布流的方式
  方便不同尺寸的圖片載入的同時(shí)
  相對(duì)于平鋪的圖片放置
  視覺(jué)上會(huì)更讓人舒服而不枯燥
  節(jié)奏與韻律
  在平面構(gòu)成中,節(jié)奏感與韻律是常常放在一起說(shuō)的。
  比如以下的兩張海報(bào),左邊海報(bào)中幾條魚(yú)擺放是毫無(wú)規(guī)律的,但是它卻能形成節(jié)奏感。右邊的則是能清晰地感受到它的節(jié)奏與韻律的變化。
  所以節(jié)奏是有規(guī)律或者無(wú)規(guī)律地變化的,韻律是有規(guī)律地變化。
  一個(gè)版面里的節(jié)奏影響是多方向面的,有文字編排、色彩搭配、圖像處理等
  文字編排
  那為什么要在文字編排上掌握節(jié)奏感呢?
  舉個(gè)例子:我們?cè)诳醇兾淖值臅?shū)籍時(shí),很容易犯困
  這是因?yàn)闀?shū)籍的文字編排是規(guī)整
  并且?guī)缀鯖](méi)有節(jié)奏感
  所以在視覺(jué)上容易造成審美疲勞
  而在一些不同的書(shū)籍設(shè)計(jì)或者雜志會(huì)在里面加入圖片、對(duì)文字與版式進(jìn)行處理,使它們通過(guò)變化來(lái)形成一種節(jié)奏感,就會(huì)讓畫(huà)面不再枯燥。其中,畫(huà)面中的標(biāo)題起得很強(qiáng)的節(jié)奏感,并且具有裝飾性。
  所以,掌握文字編排的節(jié)奏感
  對(duì)畫(huà)面?zhèn)鬟_(dá)的氣質(zhì)影響是非常大的
  比如以上這兩張海報(bào),它們的背景圖片都是采用了天空大量留白對(duì)的形式。但風(fēng)格完全不同的文字編排,左邊海報(bào)表現(xiàn)出活潑可愛(ài)的感覺(jué),而右邊的則是平靜安逸。
  我們可以理解為,隨著幾乎沒(méi)有節(jié)奏感到節(jié)奏感比較弱再到節(jié)奏感強(qiáng),它的畫(huà)面是可以呈現(xiàn)出由靜止到舒緩再到動(dòng)感的。
  在文字編排中有非常多的對(duì)比。今天我們主要去梳理一下文字編排時(shí)的一些影響因素,以及在文字編排上一些需要注意的細(xì)節(jié)。
  ●字體種類(lèi)
  文字種類(lèi)在字體種類(lèi)里一般分成了襯線(xiàn)體與非襯線(xiàn)體,但是在中文里,一般主要由這五大類(lèi)組成,分別是黑體,宋體,楷體,圓體與書(shū)法體。
  包括字體家族里的不同字重
  并且同一個(gè)字體,我們還細(xì)分為常規(guī)體、窄體、扁體。
  那么按照以上分類(lèi)的組合,一段文字中的變化就有有105種。所以文字編排時(shí)稍微不注意就會(huì)有太多的變化性。
  更何況我們經(jīng)常在版面里加入其他國(guó)家語(yǔ)言的文字,這些都會(huì)影響文字的節(jié)奏感。
  所以我們要學(xué)會(huì)控制這種節(jié)奏感,一般來(lái)說(shuō)我們?nèi)粘1容^常用的就是黑體配無(wú)襯線(xiàn)體,宋體配襯線(xiàn)體。并且在字重上我們都要注意協(xié)調(diào)字體的粗細(xì)度。
  不同的字體搭配起來(lái)是有一定難度的,這種節(jié)奏感就好像不同風(fēng)格的音樂(lè)的結(jié)合,它們之間的銜接與融合會(huì)比單純的某一種風(fēng)格的音樂(lè)制作起來(lái)更難。
  以下這張圖里,它同時(shí)用了無(wú)襯線(xiàn)體與襯線(xiàn)體的結(jié)合。
  如果嘗試把左邊的襯線(xiàn)體換成無(wú)襯線(xiàn)看看,是不是有種現(xiàn)代都市的氣質(zhì)?
  如果都統(tǒng)一成襯線(xiàn)的話(huà),是不是一種精致的時(shí)尚感就出來(lái)了呢,
  統(tǒng)一這種文字的種類(lèi)能更加精準(zhǔn)地傳達(dá)畫(huà)面的氣質(zhì)。
  而字體的混搭會(huì)產(chǎn)生混亂和怪異感,要慎用。如果想要這種感覺(jué)。就可以將多種類(lèi)的字體融入在畫(huà)面中,營(yíng)造出來(lái)強(qiáng)烈的節(jié)奏感。比如下圖。
  接下來(lái)我們用一下文案來(lái)做個(gè)案例演示
  首先在版面中劃分版塊,文案同時(shí)用了襯線(xiàn)與無(wú)襯線(xiàn)的字體,并且是具有手寫(xiě)性質(zhì)的字體。所有的文字我采用了窄體來(lái)增強(qiáng)這種怪異的節(jié)奏感。
  最后加上一些圖形處理一下負(fù)空間。
  單取文案板塊來(lái)看,當(dāng)這些字體都變成黑體后。對(duì)比可以發(fā)現(xiàn),原先的窄體文字組更有搞怪奇異的節(jié)奏感。
  ●大小
  文字大小是影響節(jié)奏感的重要因素,比如像下圖中的演示可以明顯看出其中的變化。
  下面,我們具體來(lái)看看用在標(biāo)題與內(nèi)文的對(duì)比。節(jié)奏變化比較大的文字組會(huì)給人一種沖擊力。
  其中,標(biāo)題用較大的字體,就會(huì)讓人有種喧鬧和強(qiáng)硬感,讓人無(wú)法忽視。
  而節(jié)奏比較平緩的文字組合,就會(huì)呈現(xiàn)精致、安靜的感覺(jué)。
  我們把以上文案放在畫(huà)面中看看:這種標(biāo)題與內(nèi)文的文字大小差距大的,并且標(biāo)題在版面中占據(jù)較大的位置,呈現(xiàn)的是這個(gè)小島有什么重大新聞的視覺(jué)感。
  但是當(dāng)標(biāo)題變小時(shí),整個(gè)畫(huà)面呈現(xiàn)出比較平緩的節(jié)奏感,給人安逸舒緩的視覺(jué)感。
  ●長(zhǎng)短
  我們都知道音頻都是這種長(zhǎng)短不一的聲波圖,才會(huì)在聽(tīng)覺(jué)上帶來(lái)一定的“節(jié)奏感”。
  所以也有按照音頻形式編排文字,來(lái)表現(xiàn)具有節(jié)奏感的系列廣告作品。
  它比較經(jīng)常出現(xiàn)在居中對(duì)齊的文字組上
  但是我們要注意的是
  你會(huì)發(fā)現(xiàn)很少情況在兩個(gè)極端之間直接過(guò)度
  比如說(shuō)一長(zhǎng)一短
  畢竟它的閱讀時(shí)間不會(huì)太長(zhǎng),所以就需要通過(guò)調(diào)節(jié)節(jié)奏,讓它閱讀起來(lái)美觀卻不枯燥。例如以下某購(gòu)物網(wǎng)站的文字排版,非常注意短長(zhǎng)短的節(jié)奏感,視覺(jué)上很讓人舒適。
  ●位置
  就拿這兩種比例相似,并且都是黑色背景的海報(bào)來(lái)說(shuō)。
  首先提去文案部分,并把右邊文字的紅色改為白色。這樣看,它們之間的對(duì)比就很清晰了:左邊的文字規(guī)劃在版面中顯得更有活力,右邊版面的文字集中在一塊且平整,就會(huì)呈現(xiàn)乏味的視覺(jué)感
  所以我們?nèi)绻嬲鰧?duì)比的話(huà),用左邊的圖像放置在兩個(gè)不同的版面來(lái)作對(duì)比,這樣大家應(yīng)該能感覺(jué)到差別。
  左邊的版面雖然沒(méi)有表現(xiàn)特別強(qiáng)的節(jié)奏感覺(jué),但是至少版面不是特別壓抑的。這就是文字編排在版面的影響。
  不僅是文字組之間會(huì)影響節(jié)奏感,標(biāo)題的擺放位置也會(huì)通過(guò)改變我媽們的閱讀視線(xiàn),來(lái)影響整個(gè)畫(huà)面的節(jié)奏感。
  接下來(lái)我們用案例來(lái)演示
  首先選擇纖細(xì)的宋體會(huì)比較符合這個(gè)畫(huà)面的氣質(zhì),很多人可能把文字組放在畫(huà)面四個(gè)角就算大功告成了,但是這個(gè)畫(huà)面既沒(méi)有一個(gè)亮點(diǎn)吸引我們,而且畫(huà)面里的元素都非常得散,沒(méi)有體現(xiàn)出一點(diǎn)活潑的味道。
  這個(gè)時(shí)候我們可以效仿剛剛我們看到的標(biāo)題的做法,拉開(kāi)距離,調(diào)整位置讓它有上下浮動(dòng)的節(jié)奏感,包括文字上我都做了一些切割移動(dòng)讓它們活潑,再加上線(xiàn)條讓它們更有聯(lián)系感,這個(gè)畫(huà)面就會(huì)比剛剛活潑多了。
  ●疏密
  左邊緊湊的文字字距會(huì)呈現(xiàn)出一種張力,一種急促的節(jié)奏,營(yíng)造一種緊張感。右邊寬松的字距畫(huà)面會(huì)更緩和,不同的字距在版面中有寬松對(duì)比,也營(yíng)造出了一種節(jié)奏對(duì)比,不會(huì)感到枯燥。
  很多人可能沒(méi)太去注意這些文字編排的小細(xì)節(jié),這兩版里哪一個(gè)更符合平緩的節(jié)奏感呢?答案是下面這個(gè)。
  第一張這樣做也沒(méi)錯(cuò)的,但是我們想讓文字也能相應(yīng)地呈現(xiàn)出一種透氣感的話(huà),第二張的會(huì)更加符合。
  ●顏色
  顏色的問(wèn)題大家應(yīng)該了解了很多,這里就簡(jiǎn)單提一下,就像我們?cè)跔I(yíng)造一種氛圍的時(shí)候選擇的氣球顏色都是非常重要的,我們選擇飽和度比較高,顏色種類(lèi)比較多的氣球的時(shí)候,是想營(yíng)造一種熱鬧活潑的感覺(jué)的。
  但是如果想營(yíng)造一種浪漫安靜的氛圍時(shí)就用了很多白色或者淡色調(diào)的顏色。
  就像這個(gè)banner一樣,中間不同顏色的文字為這個(gè)畫(huà)面增加了很強(qiáng)的節(jié)奏感,變得很活潑。
  很多時(shí)候我們不需要太強(qiáng)的節(jié)奏感,所以我們經(jīng)常給文字做一點(diǎn)的顏色變化,來(lái)讓畫(huà)面更鮮活。就像這個(gè)banner,如果它沒(méi)有了左邊那個(gè)粉色的顏色的跳躍。
  這個(gè)畫(huà)面就會(huì)變得很沉靜
  如果,畫(huà)面文字的粉色變多
  它的節(jié)奏感又會(huì)變得更強(qiáng)
  不僅是因?yàn)檫@個(gè)顏色本身的跳躍性比較高,而且也是因?yàn)轭伾牟煌G袚Q導(dǎo)致這種節(jié)奏感的增強(qiáng)。所以不同顏色的占比也是需要考慮的。
  ●組合形狀
  我們?cè)谶@些變化的圖形中替換兩個(gè)不同形狀的圖形,可以感覺(jué)到替換后的圖形里的變化會(huì)更多,呈現(xiàn)出來(lái)的活潑性更強(qiáng)了,當(dāng)畫(huà)面中的不同形狀更多,就會(huì)趨向于一種混亂。
  用不同的圖形在版面里,有區(qū)分不同信息的作用,但是這種方式也是增加版面節(jié)奏感的一種方式,在很多促銷(xiāo)的傳單會(huì)經(jīng)??吹?。
  這個(gè)畫(huà)面沒(méi)有人物圖片,僅僅是通過(guò)文字的編排就能傳達(dá)出這種熱鬧的節(jié)奏感。
  除了顏色本身的熱鬧性,其中比較大的影響因素,就是文字在各種不同形狀里的編排,讓這個(gè)畫(huà)面呈現(xiàn)出熱鬧的氛圍。
  ●方向
  隨著方向變化越來(lái)越多,畫(huà)面會(huì)趨向于更有動(dòng)感的的節(jié)奏,但是節(jié)奏感覺(jué)也是有度的,一旦變化性很多,那么這個(gè)版面就會(huì)顯得雜亂。
  我們也可以簡(jiǎn)單理解為亂的元素的占比決定著你畫(huà)面呈現(xiàn)出來(lái)的節(jié)奏感的強(qiáng)烈。
  像第一張海報(bào)一樣,這些方向不一的文字編排,向我們說(shuō)明了這不是一個(gè)嚴(yán)肅的展覽,而是具有活潑的屬性,從而吸引不同的觀看群體。包括右邊這個(gè)海報(bào)的文字編排都讓這個(gè)畫(huà)面的節(jié)奏感變得更強(qiáng)了,與人物夸張的肢體語(yǔ)言也相呼應(yīng)。
  傾斜的文字編排在電商里是出現(xiàn)得比較多的,微微傾斜文字就可以強(qiáng)調(diào)這種活潑的節(jié)奏感。
  我們來(lái)看一個(gè)比較明顯的例子,畫(huà)面只有一個(gè)黃色的色塊和文字編排以及一個(gè)不規(guī)則的圖形,但是這個(gè)畫(huà)面呈現(xiàn)出來(lái)的感覺(jué)卻很活潑。
  其實(shí)去掉這圖形,也并沒(méi)有影響原有的氣質(zhì),是因?yàn)槲淖值木幣诺姆较蛐缘膶?duì)比讓它的節(jié)奏感增強(qiáng)了。
  ●案例演示
  那么說(shuō)到這里其實(shí)今天的內(nèi)容也就結(jié)束了,這次的案例就給大家演示下怎么用這些知識(shí)去做一張海報(bào)。
  首先我們要分析這個(gè)畫(huà)面,圖片本身是比較具有節(jié)奏感的,因?yàn)椴皇俏覀兤匠?吹囊m子的視角,而且人物有一種運(yùn)動(dòng)過(guò)程的動(dòng)勢(shì)。
  這個(gè)負(fù)空間非常不規(guī)則,如果文字在這個(gè)畫(huà)面負(fù)空間上直接加字的話(huà),可能就會(huì)顯得比較亂,但是我們又要做出迎合這個(gè)圖片的節(jié)奏但是不亂的畫(huà)面,應(yīng)該怎么做呢?
  首先不采取直接在圖上加字的方式。而是把圖片縮小,再添加一個(gè)深色的底色,這樣這張圖片和這個(gè)畫(huà)面里就是一個(gè)整體了。
  由于我們要壓住圖片的節(jié)奏感,不讓它太亂,所以在周?chē)目臻g編排文字是呈現(xiàn)一個(gè)既有文字層級(jí)關(guān)系,但是整體是呈現(xiàn)矩形的文字組,現(xiàn)在這個(gè)畫(huà)面看起來(lái)的確不會(huì)亂,但是文字還是少了和圖片活潑氣質(zhì)契合的節(jié)奏感。
  分析一下這個(gè)畫(huà)面,是宇宙系列的感覺(jué),所以就加入了環(huán)形的文字,然后再加一點(diǎn)與圖片呼應(yīng)的顏色,這個(gè)畫(huà)面就會(huì)比之前更和諧。
  最后總結(jié)
  我們今天講的是文字編排中的節(jié)奏感,無(wú)論是對(duì)信息的傳達(dá)還是對(duì)氣質(zhì)的表現(xiàn),它的影響是非常大的。例如文字類(lèi)型、大小、方向、長(zhǎng)短、文字組合形態(tài)等都是重要的影響因素。
  所以把握自己要傳達(dá)的節(jié)奏,才能正確傳達(dá)信息。大家也可以用這種方式去看作品,分析它的節(jié)奏感是通過(guò)什么方式形成的。久而久之,對(duì)節(jié)奏感的掌握就會(huì)更加熟練與精準(zhǔn)。