2019-12-10 資深UI設(shè)計(jì)者
我們?cè)谧鲈O(shè)計(jì)的時(shí)候總是會(huì)聽到，要注意「節(jié)奏感」。關(guān)于節(jié)奏感這個(gè)詞，大多數(shù)人似懂非懂，可能明白它是什么意思，但是在設(shè)計(jì)中都應(yīng)該注意哪些節(jié)奏感，卻還沒有一個(gè)比較清晰的思路。我們都知道音樂(lè)是有不同種類的，有古典音樂(lè)，有搖滾音樂(lè)等，它們之間的不同，很多時(shí)候是節(jié)奏給我們帶來(lái)的感受不同。在設(shè)計(jì)上也是一樣的，掌握節(jié)奏感就能控制畫面的變化和氣質(zhì)的傳達(dá)。
先理解什么是節(jié)奏感。
我們常說(shuō)的生活節(jié)奏，可以理解為，假如你在規(guī)定時(shí)間里，你只需要上班和回家兩點(diǎn)一線的生活。
但是當(dāng)你有了孩子還要去幼兒園接送，晚上還要去健身等，這樣就是生活節(jié)奏加快了。
我們常聽到的節(jié)奏感其實(shí)是來(lái)源于音樂(lè)的。
不同節(jié)奏感的音樂(lè)會(huì)給人不同的感受，就像音樂(lè)1這種，會(huì)給你一種平靜舒緩的感覺。音樂(lè)2這種就會(huì)有種比較喧鬧、比較活潑的感覺。
說(shuō)到設(shè)計(jì)的中的節(jié)奏感，從繪畫里也可以看出，這是吳冠中的繪畫作品，看似很簡(jiǎn)單的畫面，但是這種水流的蜿蜒的感覺讓這個(gè)畫面變得靈動(dòng)起來(lái)。
去掉這些流動(dòng)的線之后，整個(gè)畫面就變得很平靜了。失去了那種蜿蜒流潺的感覺。
在我們很多圖像網(wǎng)站里都用了這種瀑布流的方式，不僅是為了方便不同尺寸的圖片的載入，在很多時(shí)候這種方式，相對(duì)于平鋪的圖片放置會(huì)更讓人舒服而不枯燥。
在平面設(shè)計(jì)里，我們?cè)趯W(xué)習(xí)平面構(gòu)成的時(shí)候節(jié)奏與韻律是常常放在一起說(shuō)的。
我們可以看海報(bào)去理解，第一張海報(bào)那幾條魚擺放的位置是沒什么規(guī)律的，但是它卻能形成節(jié)奏感。那么在第二張海報(bào)，我們能清晰地感受到它的節(jié)奏與韻律的變化。所以節(jié)奏是有規(guī)律或者無(wú)規(guī)律的變化的，韻律是有規(guī)律的變化的。
包括去百度百科查找相關(guān)信息也是表達(dá)類似這樣的意思。
一個(gè)版面里的節(jié)奏影響是多方向面的，有文字編排、色彩搭配、圖像處理等。
今天我們要講的是文字編排里的節(jié)奏感。在文字編排上我們?yōu)槭裁匆莆展?jié)奏感呢?
我們?cè)诳匆恍┘兾淖值臅臅r(shí)候，很容易犯困。
這就是因?yàn)闀奈淖志幣艓缀鯖]有節(jié)奏感，所以相對(duì)來(lái)說(shuō)是枯燥的。
有一些不同的書籍設(shè)計(jì)或者雜志會(huì)在里面加入圖片、對(duì)文字與版式進(jìn)行處理，使它們變得有變化性，就會(huì)調(diào)節(jié)這種節(jié)奏感。讓畫面閱讀不再枯燥。當(dāng)然了，畫面左邊是因?yàn)榇罅康男畔⒌膫鬟_(dá)不適合做過(guò)多的變化，否則閱讀過(guò)程會(huì)有阻礙。這也是根據(jù)不同種類的信息從而把握不同節(jié)奏感的結(jié)果。
所以在這個(gè)畫面里標(biāo)題是節(jié)奏感比較強(qiáng)的，在保證閱讀性的同時(shí)也做到了裝飾性。那么由于下方信息量比較多，這些文字又需要被快速傳達(dá)，所以這些文字的編排就會(huì)趨向于閱讀性。
掌握文字編排的節(jié)奏感對(duì)畫面?zhèn)鬟_(dá)的氣質(zhì)的影響是非常大的。就像這兩張海報(bào)，它們的背景圖片氣質(zhì)是很像的，都是天空的大留白，但是，完全不同的文字編排，就讓第一張海報(bào)表現(xiàn)出活潑可愛的感覺，第二張海報(bào)表現(xiàn)出平靜安靜的感覺。
我們可以理解為，隨著幾乎沒有節(jié)奏感到節(jié)奏感比較弱再到節(jié)奏感強(qiáng)，它的畫面是可以呈現(xiàn)出由靜止到舒緩再到動(dòng)感的。
在文字編排中有非常多的對(duì)比，是一個(gè)非常大的系統(tǒng)，今天我們主要去梳理一下文字編排時(shí)的一些影響因素，以及在文字編排上一些需要注意的細(xì)節(jié)。（我們今天會(huì)講這些影響我們文字編排的節(jié)奏感，字體種類、大小、長(zhǎng)短、位置、疏密、顏色、組合形狀和方向。）
文字種類就是我們對(duì)文字的類別進(jìn)行分類，在字體種類里一般分成了襯線體與非襯線體，但是在中文里，我覺得主要由這五大類組成，分別是黑體，宋體，楷體，圓體與書法體。
包括字體家族里的不同字重。
不僅是這樣，對(duì)于同一個(gè)字體我們還分常規(guī)體、窄體、扁體。
一段文字只選擇上面的所說(shuō)的變化就已經(jīng)可以有很多種了。我拿了一段數(shù)學(xué)公式裝?。這里我們算出有 105 種。所以文字編排時(shí)稍微不注意就會(huì)有太多的變化性。
更何況我們經(jīng)常在版面里加入其他國(guó)家語(yǔ)言的文字，這些都會(huì)影響文字的節(jié)奏感。
所以我們要學(xué)會(huì)控制這種節(jié)奏感，一般來(lái)說(shuō)我們?nèi)粘１容^常用的就是黑體配無(wú)襯線體，宋體配襯線體。并且在字重上我們都要注意協(xié)調(diào)。盡量使它們看一起是一樣的粗細(xì)度。
不同的字體搭配起來(lái)是有一定難度的。這種節(jié)奏感就好像不同風(fēng)格的音樂(lè)的結(jié)合，它們之間的銜接與融合會(huì)比單純的某一種風(fēng)格的音樂(lè)制作起來(lái)更難。
這種不同類型的文字的搭配，對(duì)于排版和運(yùn)用的能力有一定要求，運(yùn)用不好就會(huì)傳達(dá)不了畫面的氣質(zhì)與信息。在電商里的反例是比較多的。在我看到的這張圖里，它同時(shí)用了無(wú)襯線體與襯線體的結(jié)合，畫面沒有清晰呈現(xiàn)出準(zhǔn)確的氣質(zhì)。大家可能會(huì)說(shuō)它是簡(jiǎn)約高貴風(fēng)，但是這是一個(gè)大范圍，在簡(jiǎn)約高貴里有現(xiàn)代的高貴，有復(fù)古的高貴，還有一些與眾不同的高貴等。
我們嘗試把左邊的襯線體換成無(wú)襯線看看。是不是有種現(xiàn)代都市的氣質(zhì)？
如果都統(tǒng)一成襯線的話，是不是一種精致的時(shí)尚感就出來(lái)了呢。統(tǒng)一這種文字的種類能更加精準(zhǔn)地傳達(dá)畫面的氣質(zhì)。
剛剛我們也說(shuō)到字體的混搭會(huì)產(chǎn)生混亂和怪異感，要慎用，但是如果我們的畫畫就需要這種感覺呢，當(dāng)然就可以用這種特性來(lái)故意營(yíng)造一種怪異感，當(dāng)畫面的字體種類越多的時(shí)候，所營(yíng)造出來(lái)的節(jié)奏感會(huì)更強(qiáng)烈。
我們看這個(gè)畫面也是這樣的，周圍的很多圖形和各種各種樣的字體類型讓這個(gè)畫面變得搞怪活潑。
就算去掉了周圍的圖形，文字這傳達(dá)出來(lái)的搞怪感覺也依然存在。
接下來(lái)我們用這個(gè)文案來(lái)做一個(gè)案例演示下，由于平時(shí)很多都是用同一種類型字體搭配，那么這一次就挑戰(zhàn)一下，我就打算做一稿用不同類型字體的版面?？纯磿?huì)有什么樣的效果。
首先我在版面中劃分版塊，填上相應(yīng)的文字，在這里可以看到，我同時(shí)用了襯線與無(wú)襯線的字體，還用了具有手寫性質(zhì)的字體。不僅如此， 所有的文字我都用了窄體而不是常見的常規(guī)體來(lái)增強(qiáng)這種怪異的節(jié)奏感。
最后加上一些圖形處理一下負(fù)空間，這個(gè)案例就完成了。
為了減少影響，我把圖片遮住單看文字組，我把這些字體都變成黑體了，對(duì)比可以發(fā)現(xiàn)，還是原來(lái)的文字組更有搞怪奇異的節(jié)奏感。右邊這個(gè)因?yàn)榘迨脚c圖形的完整性使得它看起來(lái)并沒有很大的問(wèn)題，但是它的確是缺少了像左邊這種古典與現(xiàn)代結(jié)合的節(jié)奏感。
文字的大小節(jié)奏可能會(huì)有人理解為這樣，但是我們一般不會(huì)這么做。
我們更多地是用在標(biāo)題與內(nèi)文的對(duì)比。
節(jié)奏變化比較大的文字組會(huì)給人一種沖擊力，讓人無(wú)法忽視標(biāo)題的存在，就好像我在大聲告訴你一句話的感覺，會(huì)比較強(qiáng)硬與喧鬧。
節(jié)奏比較平緩的文字組表現(xiàn)出一種精致、安靜的感覺。
我們把它們放到畫面里看下，這個(gè)標(biāo)題與內(nèi)文的對(duì)比很大，并且在這個(gè)版面中占據(jù)一定的大小，這種時(shí)候有沒有覺得這個(gè)畫面呈現(xiàn)出一種，好像在播放新聞的感覺，好像在說(shuō)這個(gè)小島有什么重大新聞一樣。
但是當(dāng)標(biāo)題變小時(shí)，整個(gè)畫面呈現(xiàn)出比較平緩的節(jié)奏感，很符合畫面?zhèn)鬟_(dá)出來(lái)的安靜舒緩的感覺。
這種方式很多作品都有，這種標(biāo)題和內(nèi)文的對(duì)比，或者說(shuō)是文字在版面的占比比較大時(shí)，就可以體現(xiàn)出這種很強(qiáng)烈的節(jié)奏，讓人很難忽視這些文字內(nèi)容。同時(shí)畫面也更容易傳達(dá)出一種力量感。
往往想要營(yíng)造這種安靜感的時(shí)候，比較注重畫面整體的感覺，就不需要太多的文字變化，甚至為了區(qū)別文字層級(jí)而需要有的文字大小，也盡量地在減少對(duì)比。
我們都知道音頻都是這種長(zhǎng)短不一的聲波圖，因?yàn)檫@種長(zhǎng)短不一的變化感受會(huì)給人帶來(lái)節(jié)奏感。
所以也有以這種形式來(lái)編排文字，表現(xiàn)節(jié)奏感的系列廣告作品。
它比較經(jīng)常出現(xiàn)在居中對(duì)齊的文字組上。
但是我們要注意的是，你會(huì)發(fā)現(xiàn)很少情況在兩個(gè)極端之間直接過(guò)度，比如說(shuō)一長(zhǎng)一短。
在沒有文字大小的對(duì)比情況下，如果文字的長(zhǎng)短對(duì)比太小，我們先不說(shuō)節(jié)奏感，我們可能會(huì)有種疑問(wèn)，它到底是想兩端對(duì)齊還是居中對(duì)齊的呢？所以這種兩端模棱兩可的情況最好避免。不能模棱兩可，對(duì)比太大又會(huì)不夠美觀，所以我們?nèi)?chuàng)造節(jié)奏感的時(shí)候要注意這些問(wèn)題。
畢竟它不是讓人閱讀時(shí)間很長(zhǎng)的文字，所以我們就需要調(diào)節(jié)這種節(jié)奏讓它看起來(lái)美觀而且不枯燥。
這是我隨便在購(gòu)物網(wǎng)站截圖的，你會(huì)發(fā)現(xiàn)它們的文字編排都很注意我剛剛說(shuō)的短長(zhǎng)短的節(jié)奏感。
我找了兩張都是黑色背景并且配圖比例也差不多的海報(bào)作對(duì)比說(shuō)明這個(gè)問(wèn)題。
因?yàn)閳D像的干擾我就同時(shí)去掉了圖片，還有也把右邊紅色的字變成了白色，它們之間的對(duì)比變得清晰了，左邊的文字規(guī)劃在版面中顯得更有活力，右邊版面的文字集中在一塊，就像我們前面提到的小說(shuō)書籍內(nèi)頁(yè)一樣。這樣的文字編排在閱讀上會(huì)比左邊的缺少節(jié)奏感。但是我在這里要說(shuō)的一點(diǎn)是，左邊海報(bào)本身的圖像沒有右邊的有沖擊力與活力，所以我們?nèi)绻嬲鰧?duì)比的話。
用左邊的圖像放置在兩個(gè)不同的版面來(lái)作對(duì)比，這樣大家應(yīng)該能感覺到差別。左邊的版面雖然沒有表現(xiàn)特別強(qiáng)的節(jié)奏感覺，但是至少版面不是特別壓抑的。至于右邊的我們會(huì)覺得很沉靜，配合這種黑色的背景比左邊更壓抑。這就是文字編排在版面的影響。
不僅是文字組之間，標(biāo)題的有意放置不同的位置就可以營(yíng)造這種節(jié)奏感，是因?yàn)樗廊豢梢允沟梦覀兊拈喿x視線發(fā)生變化。
比較隨意編排的文字組也會(huì)比，比較拘謹(jǐn)正式的文字組看起來(lái)更有節(jié)奏、更活潑。
接下來(lái)我們用案例來(lái)演示。
首先選擇纖細(xì)的宋體會(huì)比較符合這個(gè)畫面的氣質(zhì)，很多人可能把文字組放在畫面四個(gè)角就算大功告成了，但是這個(gè)畫面既沒有一個(gè)亮點(diǎn)吸引我們，而且畫面里的元素都非常得散，沒有體現(xiàn)出一點(diǎn)活潑的味道。
這個(gè)時(shí)候我們可以效仿剛剛我們看到的標(biāo)題的做法，拉開距離，調(diào)整位置讓它有上下浮動(dòng)的節(jié)奏感，包括文字上我都做了一些切割移動(dòng)讓它們活潑，再加上線條讓它們更有聯(lián)系感。這個(gè)畫面就會(huì)比剛剛活潑多了。
案例完成。
左邊緊湊的文字字距會(huì)呈現(xiàn)出一種張力，一種急促的節(jié)奏，營(yíng)造一種緊張感。右邊寬松的字距畫面會(huì)更緩和，不同的字距在版面中有寬松對(duì)比，也營(yíng)造出了一種節(jié)奏對(duì)比。不會(huì)感到枯燥。
很多人可能沒太去注意這些文字編排的小細(xì)節(jié)，這兩版里哪一個(gè)更符合平緩的節(jié)奏感呢？答案是下面這個(gè)。第一張這樣做也沒錯(cuò)的，但是我們想讓文字也能相應(yīng)地呈現(xiàn)出一種透氣感的話，第二張的會(huì)更加符合。
顏色的問(wèn)題大家應(yīng)該了解了很多了，這里就簡(jiǎn)單提一下，就像我們?cè)跔I(yíng)造一種氛圍的時(shí)候選擇的氣球顏色都是非常重要的，我們選擇飽和度比較高，顏色種類比較多的氣球的時(shí)候，是想營(yíng)造一種熱鬧活潑的感覺的。但是如果想營(yíng)造一種浪漫安靜的氛圍時(shí)就用了很多白色或者淡色調(diào)的顏色。
就像這個(gè) banner 一樣，中間不同顏色的文字為這個(gè)畫面增加了很強(qiáng)的節(jié)奏感。變得很活潑。
很多時(shí)候我們不需要太強(qiáng)的節(jié)奏感，所以我們經(jīng)常給文字做一點(diǎn)的顏色變化，來(lái)讓畫面更鮮活。就像這個(gè) banner，如果它沒有了左邊那個(gè)粉色的顏色的跳躍。
這個(gè)畫面就會(huì)變得很沉靜。
如果，畫面文字的粉色變多，它的節(jié)奏感又會(huì)變得更強(qiáng)。
不僅是因?yàn)檫@個(gè)顏色本身的跳躍性比較高，而且也是因?yàn)轭伾牟煌Ｇ袚Q導(dǎo)致這種節(jié)奏感的增強(qiáng)。所以不同顏色的占比也是需要考慮的。在這里主要是因?yàn)槟Ｌ厣砩蠜]有玫紅色，所以左邊不適合用過(guò)多的玫紅色，用全黑都會(huì)顯得很沉悶，所以這里選擇用一次玫紅色讓這個(gè)畫面鮮活。
我們?cè)谶@些變化的圖形中替換兩個(gè)不同形狀的圖形，我們可以感覺到替換后的圖形里的變化會(huì)更多，呈現(xiàn)出來(lái)的活潑性更強(qiáng)了。當(dāng)畫面中的不同形狀更多，就會(huì)趨向于一種混亂。
用不同的圖形在版面里，有區(qū)分不同信息的作用，但是這種方式也是增加版面節(jié)奏感的一種方式。在很多促銷的傳單會(huì)經(jīng)?？吹?。
這個(gè)畫面沒有人物圖片，僅僅是通過(guò)文字的編排就能傳達(dá)出這種熱鬧的節(jié)奏感。
除了顏色本身的熱鬧性，其中比較大的影響因素。就是文字在各種不同形狀里的編排，讓這個(gè)畫面呈現(xiàn)出熱鬧的氛圍。
隨著方向變化越來(lái)越多，畫面會(huì)趨向于更有動(dòng)感的的節(jié)奏。但是節(jié)奏感覺也是有度的，一旦變化性很多，那么這個(gè)版面就會(huì)顯得雜亂。我們也可以簡(jiǎn)單理解為亂的元素的占比決定著你畫面呈現(xiàn)出來(lái)的節(jié)奏感的強(qiáng)烈。
像第一張海報(bào)一樣，這種有點(diǎn)古老的作品我們一般會(huì)認(rèn)為是比較正式和比較嚴(yán)肅的，但是這些方向不一的文字編排，向我們說(shuō)明了這不是一個(gè)嚴(yán)肅的展覽，而是具有活潑的屬性，從而吸引不同的觀看群體。包括右邊這個(gè)海報(bào)的文字編排都讓這個(gè)畫面的節(jié)奏感變得更強(qiáng)了，與人物夸張的肢體語(yǔ)言也相呼應(yīng)。
傾斜的文字編排在電商里是出現(xiàn)得比較多的，微微傾斜文字就可以強(qiáng)調(diào)這種活潑的節(jié)奏感。
我們來(lái)看一個(gè)比較明顯的例子，畫面只有一個(gè)黃色的色塊和文字編排以及一個(gè)不規(guī)則的圖形，但是這個(gè)畫面呈現(xiàn)出來(lái)的感覺卻很活潑。
其實(shí)去掉這圖形，也并沒有影響原有的氣質(zhì)，是因?yàn)槲淖值木幣诺姆较蛐缘膶?duì)比讓它的節(jié)奏感增強(qiáng)了。
那么說(shuō)到這里其實(shí)今天的內(nèi)容也就結(jié)束了，這次的案例就給大家演示下怎么用這些知識(shí)去做一張海報(bào)。
首先我們要分析這個(gè)畫面，圖片本身是比較具有節(jié)奏感的，因?yàn)椴皇俏覀兤匠？吹囊m子的視角，而且人物有一種運(yùn)動(dòng)過(guò)程的動(dòng)勢(shì)。
這個(gè)負(fù)空間非常不規(guī)則，如果文字在這個(gè)畫面負(fù)空間上直接加字的話，可能就會(huì)顯得比較亂，但是我們又要做出迎合這個(gè)圖片的節(jié)奏但是不亂的畫面，應(yīng)該怎么做呢？
首先不采取直接在圖上加字的方式，把圖片縮小，再添加一個(gè)深色的底色，這樣這張圖片和這個(gè)畫面里就是一個(gè)整體了。
由于我們要壓住圖片的節(jié)奏感，不讓它太亂，所以我在周圍的空間編排文字是呈現(xiàn)一個(gè)既有文字層級(jí)關(guān)系，但是整體是呈現(xiàn)矩形的文字組?，F(xiàn)在這個(gè)畫面看起來(lái)的確不會(huì)亂，但是文字還是少了和圖片活潑氣質(zhì)契合的節(jié)奏感。
分析一下這個(gè)畫面，是宇宙系列的感覺，所以我就加入了環(huán)形的文字，然后再加一點(diǎn)與圖片呼應(yīng)的顏色。這個(gè)畫面就會(huì)比之前更和諧。在做的過(guò)程通過(guò)減少變化與增加變化讓畫面逐漸接近自己的預(yù)期。
總結(jié)一下今天我們講的，我們今天講的是文字編排中的節(jié)奏感，在一開始，我分別給大家講了從生活節(jié)奏、音樂(lè)節(jié)奏、再到設(shè)計(jì)的節(jié)奏去理解什么是節(jié)奏感，然后我還講了關(guān)于文字節(jié)奏感對(duì)于畫面的重要性，無(wú)論是對(duì)信息的傳達(dá)還是對(duì)氣質(zhì)的表現(xiàn)，它的影響是非常大的。最主要的部分，我講了影響文字編排的節(jié)奏都有哪些因素，比如文字類型、大小、方向、長(zhǎng)短、文字組合形態(tài)等。把握自己要傳達(dá)的節(jié)奏，才能正確傳達(dá)信息。大家也可以用這種方式去看作品，分析它的節(jié)奏感是通過(guò)什么方式形成的。久而久之，對(duì)節(jié)奏感的掌握就會(huì)更加熟練與精準(zhǔn)。
文章來(lái)源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://paul-jarrel.com