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