無(wú)論趨勢(shì)怎么變，掌握這些設(shè)計(jì)節(jié)奏就不怕過(guò)時(shí)！

孟菲斯設(shè)計(jì)、鬼畜視頻、神曲電音、魔性畫風(fēng)、freestyle......看似毫無(wú)關(guān)聯(lián)，在我看來(lái)卻有一個(gè)共同的特性——那就是節(jié)奏。接下來(lái)我就來(lái)聊聊節(jié)奏，有不當(dāng)之處還望指正～

鑒于本文干貨太多，梳理的目錄如下：

• 結(jié)構(gòu)的節(jié)奏
• 形狀的節(jié)奏
• 顏色的節(jié)奏
• 動(dòng)靜的節(jié)奏
• 留白的節(jié)奏

項(xiàng)目中的節(jié)奏

• 項(xiàng)目1巨幕廣告
• 項(xiàng)目2如意貼

前言

“有freestyle嗎？”“你們一人來(lái)一段freestyle”“你有freestyle嗎？”......

“開(kāi)門吶！開(kāi)門吶！開(kāi)門開(kāi)門開(kāi)門吶！”.......

重復(fù)幾遍，就形成了一種流行節(jié)奏，現(xiàn)在的世界是一個(gè)多元的包容的世界。每個(gè)人都有不同的style，就像你說(shuō)“睡什么睡出來(lái)high”，他卻喜歡靜靜地宅著玩一把王者......跟節(jié)奏一致的人相處會(huì)很愉悅，而節(jié)奏相悖的人需要磨合。同一個(gè)事物見(jiàn)仁見(jiàn)智，但我們都習(xí)慣用自己的經(jīng)歷和經(jīng)驗(yàn)去看待事物，學(xué)院派也好，野路子也好，雅俗共賞，我想尋找的是一種相對(duì)理性的設(shè)計(jì)理論，屬于我們共有的經(jīng)歷和經(jīng)驗(yàn)，那些潛移默化對(duì)我們的影響，暫時(shí)定義為節(jié)奏。

從進(jìn)化論的角度而言，人們對(duì)節(jié)奏的認(rèn)知，最初來(lái)源于大自然的規(guī)律，以及新陳代謝的生物作息。隨著人類模仿大自然、勞作協(xié)調(diào)動(dòng)作的聲音、發(fā)展了音樂(lè)、詩(shī)歌、卦象、繪畫…所以廣義上而言，節(jié)奏包含世間萬(wàn)事萬(wàn)物，但狹義上大家理解的節(jié)奏可能是一個(gè)節(jié)拍、一首歌的曲調(diào)。

就像耳熟能詳?shù)墓?jié)奏有“嘣恰恰、嘣恰恰”和“咚次噠次”，我將節(jié)奏用圖形化的語(yǔ)言來(lái)說(shuō)明一下，圖中從黑到灰色代表聲音漸弱，豎線分割每個(gè)小節(jié)，重復(fù)小節(jié)形成一段簡(jiǎn)單的節(jié)奏，形成“強(qiáng)弱弱”“強(qiáng)弱次弱”的有規(guī)律變化，而簡(jiǎn)單的重復(fù)讓人可預(yù)知、可掌控，自然而然的產(chǎn)生舒適感。

中國(guó)古代的《禮樂(lè)記》中說(shuō)：“節(jié)奏，謂或作或止。作則奏之，止則節(jié)之。”

節(jié)奏的斷連頓挫也會(huì)表達(dá)出不同的含義，如下圖：

此句讀來(lái)源于一段故事，有一教書先生很體諒窮苦人家，想免去窮孩子學(xué)費(fèi)，但富人家則不能免，則給出同樣的一段句子，只是斷句不一樣，便有了兩種截然不同的含義，窮孩子只要青菜足矣交學(xué)費(fèi)，而富人家則需要雞／鴨、魚／肉和青菜，可見(jiàn)不同的節(jié)奏傳達(dá)的含義也會(huì)完全不同。

“節(jié)奏是一件藝術(shù)品所包含的各種不同要素的有秩序、有拍節(jié)的變化。”?——美國(guó).理查德列斯拉夫斯基

我尋來(lái)莫奈的《日出印象》和梵高的《星夜》，發(fā)現(xiàn)日出時(shí)倒映在水平面上的平行波紋井然有序，讓人瞬間感受到日出平靜的氛圍；星空糾結(jié)的漩渦氣流，體現(xiàn)了動(dòng)蕩不安的心，而事實(shí)證明梵高當(dāng)時(shí)確實(shí)已經(jīng)在精神病院接受精神治療。

不同的節(jié)奏會(huì)有完全不同的含義，也表達(dá)了不同氛圍和心情，因此，我大膽給設(shè)計(jì)節(jié)奏定義為：

“為了不同設(shè)計(jì)目的，進(jìn)行具有規(guī)律性、階段性、秩序性變化的設(shè)計(jì)稱之為設(shè)計(jì)節(jié)奏。”

結(jié)構(gòu)的節(jié)奏

什么是有規(guī)律性、階段性、秩序性變化的節(jié)奏呢？繼續(xù)觀察《日出印象》《星夜》則會(huì)發(fā)現(xiàn)他們都有共同的規(guī)律——結(jié)構(gòu)中的疏密、大小、視覺(jué)軌跡都是設(shè)計(jì)節(jié)奏。

莫奈的《日出.印象》就是一副節(jié)奏很明顯的繪畫作品，太陽(yáng)、船只形成穩(wěn)固的三角形布局。

陽(yáng)光倒影在水中的波紋，遠(yuǎn)處樹(shù)林房屋的倒映，平行的從上到下、從密到疏的排列，都給人平靜安詳?shù)母杏X(jué)。咋看一眼可能會(huì)被太陽(yáng)吸引，視線隨著橙色倒影到水面（紅色1～3軌跡），看到出行捕魚的船只（黃色1～3軌跡），緊隨其后的小船，引申到遠(yuǎn)處的樹(shù)林（藍(lán)色1～3軌跡），平移視線看到一大片樹(shù)林。最終形成一圈連貫的視覺(jué)軌跡，營(yíng)造出一副日出平靜中透著欣欣向榮生生不息的景象。

與莫奈不同，梵高是公認(rèn)的瘋子，但也是天才，因?yàn)樗诶L畫的時(shí)候無(wú)比認(rèn)真，從他作品中可以看出嚴(yán)謹(jǐn)?shù)囊?guī)律。天空中的黃色星星如果用線連起來(lái)，會(huì)發(fā)現(xiàn)它如浪花一樣此起彼伏，流動(dòng)的筆觸按照順時(shí)針?lè)较蛴幸?guī)律的排列，前景樹(shù)影與后景連綿的山脈形成近大遠(yuǎn)小的連續(xù)空間感，將視野從近處樹(shù)影往遠(yuǎn)處山丘無(wú)限延伸。

因此，結(jié)構(gòu)中的疏密、大小、視覺(jué)軌跡等變化，可以讓讓畫面更具張力與空間感。

設(shè)計(jì)上也通常會(huì)改變構(gòu)圖中物體的大小、間隔、方向漸變等的節(jié)奏來(lái)實(shí)現(xiàn)，從以上對(duì)比圖中，可以明顯看出來(lái)左圖的方塊、球體大小變化更有節(jié)奏，營(yíng)造出一種近大遠(yuǎn)小的空間感。

例如上圖骰子的大小變化，營(yíng)造了空間活躍感，讓物體具有魔法般的“騰空”起來(lái)。通過(guò)主題物（人）與輔助物（粉球）之間的穿插錯(cuò)位來(lái)產(chǎn)生“和旋”一樣的“交響樂(lè)”，豐富畫面的節(jié)奏，產(chǎn)生了縱深空間感，而不會(huì)誤以為比例不對(duì)。

應(yīng)用到網(wǎng)頁(yè)上，最明顯的就是頁(yè)面結(jié)構(gòu)布局設(shè)計(jì)，適當(dāng)穿插的左右排列，打造起伏流暢的曲線觀賞路徑，仿佛細(xì)細(xì)流淌的小溪，吸引用戶追本溯源不斷向下滑動(dòng)，同時(shí)也避免了所有信息累積在一起的壓迫感。

首尾錯(cuò)位疊加的布局，給人一種故事開(kāi)頭結(jié)尾和豐富過(guò)程的完整閱讀體驗(yàn)。可見(jiàn)，構(gòu)圖節(jié)奏能增加舒適感、緩解視覺(jué)疲勞，讓畫面更有起伏感。

但需要注意的是，錯(cuò)位構(gòu)圖帶來(lái)的節(jié)奏是較慢的瀏覽式體驗(yàn)，并不適合快速獲取信息的信息流。

信息流中過(guò)于跳躍的界面設(shè)計(jì)，讓用戶上下瀏覽的時(shí)候，很難快速定位店名、位置等信息。所以像新聞、快報(bào)等資訊類app設(shè)計(jì)都是一致的圖文方向，這樣更符合用戶快速閱讀的慣性。繼續(xù)深思下去，如果要一致的圖文為什么又要增加與圖文不一致的三小圖和大圖信息呢？這不就打斷了節(jié)奏嗎？沒(méi)錯(cuò)，就是故意打斷閱讀節(jié)奏的，為了讓用戶不至于長(zhǎng)期閱讀相同結(jié)構(gòu)而產(chǎn)生視覺(jué)疲勞，但怎樣的頻次和節(jié)奏才是最好的呢？

構(gòu)圖中文字的排版也可以運(yùn)用設(shè)計(jì)節(jié)奏，例如通過(guò)字體、字號(hào)、顏色、深淺、字間距、段落等的節(jié)奏變化來(lái)體現(xiàn)。如圖將普通的文字段落，先按主次區(qū)別，改變一成不變的閱讀體驗(yàn)，將標(biāo)題與內(nèi)容相呼應(yīng)，將文字與背景構(gòu)圖融合，傾斜對(duì)齊體現(xiàn)文字的力度。

可見(jiàn)，文字的節(jié)奏能突出主次、避免大段文字的閱讀壓力、橫縱向的閱讀呼應(yīng)也能有不一樣的閱讀體驗(yàn)。

形狀的節(jié)奏

如果說(shuō)結(jié)構(gòu)的節(jié)奏是整體布局的把控，那形狀的節(jié)奏就是通過(guò)形狀的變化對(duì)畫面所傳達(dá)信息的擴(kuò)展，其中最為突出的是表現(xiàn)在“漸變”和“聚散”兩種形式。

漸變是指以類似的基本形或骨格，漸次地、循序漸進(jìn)地逐步變化，呈現(xiàn)一種有階段性的、調(diào)和的秩序。包括：同一個(gè)形狀的顏色、大小、間隔、方向、位置的變化，也有多個(gè)形狀的關(guān)聯(lián)性變化。

聚散是一種特殊的重復(fù)，是基本形或骨骼單位環(huán)繞一個(gè)或多個(gè)中心點(diǎn)向外散開(kāi)或向內(nèi)集中，即爆發(fā)式（外擴(kuò)形）和聚焦式（內(nèi)收型）。特點(diǎn)：具有很強(qiáng)的聚焦點(diǎn)，這個(gè)焦點(diǎn)通常位于畫面的中央；具有一種深邃的空間感，使所有的圖形向中心集中或者由中心向四周擴(kuò)散。

對(duì)比上圖廣告宣傳banner，有聚散效果的圖片氛圍更熱鬧、豐富，也更能調(diào)動(dòng)用戶的購(gòu)買欲望。可見(jiàn)，形狀的節(jié)奏可以聚焦中心，使畫面更具沖擊力，營(yíng)造隆重活躍的氛圍，適合電商活動(dòng)頁(yè)面和商品banner展示。

顏色的節(jié)奏

顏色的節(jié)奏指的是畫面中顏色明度、純度和色相的有規(guī)律變化。提取圖中背景色，通過(guò)左圖純度軸來(lái)顯示色塊位置，會(huì)發(fā)現(xiàn)它們按照一條連貫起伏的曲線漸變，這樣可以讓顏色的變化更自然舒適，高高低低的純度變化營(yíng)造出微妙的色彩空間感，利用紅色吸引用戶注意力的同時(shí)，避免高純度的紅色，增加低純度的用色比例，控制顏色的比重讓紅色更顯沉穩(wěn)。第二張則明度上做了跳躍式選色處理，“高低低-高低”的節(jié)奏感仿佛一首歡快的歌，營(yíng)造出一種青春活力氛圍。

顏色的節(jié)奏不僅僅是單一顏色的節(jié)奏變化，多色的節(jié)奏更需要對(duì)顏色比重有更深刻的理解，圖左就是選用了深紫色作為占比超過(guò)60%的基調(diào)色，再配上任何顏色都不會(huì)比重失調(diào)，小塊幾何形對(duì)比色就像酒吧的彩燈，讓畫面更絢麗。圖右則是選用漸變色旋轉(zhuǎn)過(guò)渡，由于色相本身就有不同波長(zhǎng)，赤橙黃綠青藍(lán)紫逐漸延伸，就像幻想空間無(wú)限循環(huán)。

提取圖中顏色會(huì)發(fā)現(xiàn)，顏色奇妙的成為了五星型，通過(guò)互補(bǔ)色+對(duì)比色疊加取色的方式結(jié)合歸納的一種取色方法，它可以讓畫面豐富多彩，也可以讓不知道用什么顏色的小伙伴，很快選擇顏色。但需要注意的是一定要基調(diào)色穩(wěn)住場(chǎng)面，上圖就是深紫色“壓住”全場(chǎng)，讓其他亮色盡顯活力。放射型則通過(guò)顏色的深淺變化，過(guò)渡到不同色相，讓原本“突兀”的顏色也能和諧相處。

可見(jiàn)，顏色的節(jié)奏能夠增強(qiáng)畫面樂(lè)趣，通過(guò)顏色五星型、放射型等規(guī)律漸變，豐富視覺(jué)感官，營(yíng)造畫面活力。

動(dòng)靜的節(jié)奏

動(dòng)靜的節(jié)奏大家第一感覺(jué)會(huì)想到動(dòng)畫或者gif，除了上圖中微動(dòng)態(tài)照片，僅僅通過(guò)一張靜態(tài)的畫面能表現(xiàn)動(dòng)態(tài)嗎？

當(dāng)然，只要運(yùn)用“常識(shí)”和“認(rèn)知”就可以讓觀看者聯(lián)想到動(dòng)態(tài)，例如：速度很快，看不清物體，只留下殘影，會(huì)讓人們覺(jué)得物體動(dòng)起來(lái)了，并且速度很快。

運(yùn)用這樣的常識(shí)，我們用PS中的速度模糊就可以在靜態(tài)的圖片上表現(xiàn)動(dòng)態(tài)效果。同樣的模糊效果可以加快速度，是否也可以減緩速度呢？細(xì)細(xì)觀察生活，發(fā)現(xiàn)浴室里的磨砂玻璃可以隔離浴室空間，浴室內(nèi)水聲瀝瀝，室外安靜祥和；同樣酒吧也會(huì)用磨砂玻璃隔離空間，在模糊的背景后，你可以安靜下來(lái)，哪怕外面high翻天，你也可以靜靜著。

可見(jiàn)，動(dòng)靜節(jié)奏把握好，哪怕一張靜態(tài)圖也能做出動(dòng)態(tài)效果，渲染亦靜亦動(dòng)的氛圍。巧妙的運(yùn)用生活中的細(xì)節(jié)與“常識(shí)”總會(huì)有意料之外，情理之中的驚喜～

留白的節(jié)奏

留白的節(jié)奏也可稱之為節(jié)奏的間歇停頓。

我們先做一個(gè)小測(cè)試，以上4張海報(bào)，那張是阿甘正傳的官方海報(bào)？

只有一張是原版，其他三張都是我PS處理，去掉或者移動(dòng)局部得到的圖。

從圖中看每張都有留白，似乎看起來(lái)都不錯(cuò)，但為什么原版圖是這樣而不是那樣呢？因?yàn)橐粋€(gè)詞“平衡”。

分解上面4張圖，如果把長(zhǎng)椅看成蹺蹺板，長(zhǎng)椅下的文字信息“July 6”作為支點(diǎn)，長(zhǎng)椅上的文字就是穩(wěn)定軸心的巨石。手提包與文字形成一個(gè)穩(wěn)定的直角三角形，人在里面非常穩(wěn)定平衡。而第二張把長(zhǎng)椅上的文字移到左邊之后，“巨石”讓整個(gè)翹翹板向左傾斜。同理，第三四張都缺少支點(diǎn)。

留白除了使畫面平衡之外，還可使畫面透氣，產(chǎn)生強(qiáng)烈對(duì)比，就像全都是重點(diǎn)就沒(méi)有重點(diǎn)，全都畫的很細(xì)致也無(wú)法抓住重點(diǎn)。虛實(shí)結(jié)合才能塑造出一個(gè)比較平衡的畫面，有節(jié)奏的畫面。

了解結(jié)構(gòu)、形狀、顏色、動(dòng)靜和留白的節(jié)奏之后，看看我之前在工作項(xiàng)目中的應(yīng)用吧～

項(xiàng)目1 巨幕廣告

項(xiàng)目背景：巨幕廣告也稱原生落地頁(yè)廣告，是點(diǎn)擊廣告之后打開(kāi)的詳情頁(yè)面，與常規(guī)的外鏈落地頁(yè)不同，巨幕廣告是原生制作，提供圖片、視頻、文字、顏色等模版，將廣告詳情快速、完整的展現(xiàn)，以迪奧唇膏為例，為了更好說(shuō)明，將原本縱向頁(yè)面橫向展示。

構(gòu)圖節(jié)奏

通過(guò)迪奧廣告圖片的大小變化與文字的大小、間距的變化，增加畫面的節(jié)奏感，營(yíng)造“強(qiáng)弱弱、強(qiáng)弱弱”的秩序感，最后“弱弱弱”合理收尾。

動(dòng)靜節(jié)奏

運(yùn)用圖片、視頻、微動(dòng)態(tài)圖片和文字的動(dòng)靜交替變化，增加畫面的節(jié)奏感，避免動(dòng)態(tài)連續(xù)出現(xiàn)的疲勞感，讓眼睛得以休息的同時(shí)，將更多精力集中在重要的部分，例如將視頻區(qū)域放在中間，就像一首歌的高潮，傳遞核心思想，讓用戶留下深刻印象。

顏色節(jié)奏

雖然廣告主具體會(huì)用什么圖片和視頻我無(wú)法控制，但設(shè)計(jì)demo的時(shí)候，我可以選擇更適合基調(diào)顏色的廣告宣傳圖，通過(guò)畫面圖片的顏色純度的變化，增加畫面的節(jié)奏感，營(yíng)造氛圍。

普適性

同理運(yùn)用到以可口可樂(lè)demo中，按照設(shè)計(jì)節(jié)奏，打造基礎(chǔ)結(jié)構(gòu)，確保閱讀的舒適性與豐富性。

項(xiàng)目2 如意貼角標(biāo)

項(xiàng)目概述：如意貼角標(biāo)廣告是劇集播放過(guò)程中，左下角／右下角展現(xiàn)的廣告，如意貼一般劇情播放到特定時(shí)間觸發(fā)，廣告內(nèi)容與劇情相關(guān)；全程角標(biāo)一般在右下角，一直存在，以動(dòng)態(tài)mov形式呈現(xiàn)。

大小、位置、顏色的節(jié)奏

以角標(biāo)廣告為例，按照設(shè)計(jì)節(jié)奏，多方面呈現(xiàn)產(chǎn)品效果，豐富視覺(jué)效果。

如圖分解了角標(biāo)展現(xiàn)效果，大小：按照從小到大再漸漸變大的節(jié)奏。位置：形成波浪般的起伏。顏色：從淺到深再淺，最后強(qiáng)調(diào)品牌色展示產(chǎn)品。

動(dòng)態(tài)節(jié)奏

以如意貼廣告demo為例，按三個(gè)維度的設(shè)計(jì)節(jié)奏，打造多方面呈現(xiàn)效果，豐富視覺(jué)效果。

如圖分解了如意貼展現(xiàn)效果，X代表橫向變化的星空背景，Y代表縱向排列的文字；Z代表從小到大變化的手機(jī)。小紅點(diǎn)代表動(dòng)態(tài)變化路徑及視覺(jué)焦點(diǎn)。從小紅點(diǎn)的軌跡可以看到，最先是X軸上條紋背景橫向穿插出現(xiàn)，然后是Z軸上手機(jī)傾斜翻轉(zhuǎn)出現(xiàn)，等到X軸背景填滿，再是Y軸上文字從上到下依次排列，之后又從上到下依次消失，再依次Z軸手機(jī)，最后背景消失，遵循著從始到終又從終到始的設(shè)計(jì)節(jié)奏。

總結(jié)

回顧一下上面說(shuō)的內(nèi)容，對(duì)于設(shè)計(jì)節(jié)奏的概念我定義為：為了不同設(shè)計(jì)目的，進(jìn)行具有規(guī)律性、階段性、秩序性變化的設(shè)計(jì)稱之為設(shè)計(jì)節(jié)奏。

從以下五個(gè)方面講述了設(shè)計(jì)節(jié)奏：

• 結(jié)構(gòu)：疏密、大小、視覺(jué)軌跡的變化，可以讓畫面更具張力與空間感。網(wǎng)頁(yè)錯(cuò)位排版能增加舒適感、緩解視覺(jué)疲勞，讓畫面更有起伏感。文字的節(jié)奏能突出主次、避免大段文字的閱讀壓力。
• 形狀：包括聚散和漸變，可以聚焦中心，使畫面更具沖擊力，營(yíng)造隆重活躍的氛圍，適合電商活動(dòng)頁(yè)面和商品banner展示。
• 顏色：能夠增強(qiáng)畫面樂(lè)趣，通過(guò)顏色五星型、放射型等規(guī)律變化，豐富視覺(jué)感官，營(yíng)造畫面活力。
• 動(dòng)靜：動(dòng)靜節(jié)奏把握好，哪怕一張靜態(tài)圖也能做出動(dòng)態(tài)效果，渲染亦靜亦動(dòng)的氛圍。
• 留白：適當(dāng)留白、虛實(shí)結(jié)合才能塑造出一個(gè)平衡的畫面，有節(jié)奏的畫面。

設(shè)計(jì)節(jié)奏不僅僅是我上面說(shuō)的部分，可以說(shuō)這還只一個(gè)開(kāi)始，是一個(gè)概述，關(guān)于設(shè)計(jì)節(jié)奏每一個(gè)拆分開(kāi)來(lái)都可以寫成一篇文章，我想寫成一個(gè)系列文，也許需要更多時(shí)間、精力和經(jīng)驗(yàn)去總結(jié)。在此我想先分享給大家，有興趣的小伙伴可以一起討論。

總之，把握好設(shè)計(jì)節(jié)奏，就能夠快速抓住用戶的眼球，讓用戶能夠段時(shí)間內(nèi)獲取重要信息，并且有興趣花時(shí)間停留在此欣賞更多、挖掘更多。讓看似freestyle的設(shè)計(jì)也有節(jié)奏可循。

歡迎關(guān)注作者的微信公眾號(hào)：

「想掌握排版四原則？3個(gè)海報(bào)設(shè)計(jì)教程滿足你！」

1. 《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)？》
2. 《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)（二）》
3. 《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)？（三）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com