孟菲斯設計、鬼畜視頻、神曲電音、魔性畫風、freestyle......看似毫無關聯，在我看來卻有一個共同的特性——那就是節奏。接下來我就來聊聊節奏，有不當之處還望指正～

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

• 結構的節奏
• 形狀的節奏
• 顏色的節奏
• 動靜的節奏
• 留白的節奏

項目中的節奏

• 項目1巨幕廣告
• 項目2如意貼

前言

“有freestyle嗎？”“你們一人來一段freestyle”“你有freestyle嗎？”......

“開門吶！開門吶！開門開門開門吶！”.......

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

從進化論的角度而言，人們對節奏的認知，最初來源于大自然的規律，以及新陳代謝的生物作息。隨著人類模仿大自然、勞作協調動作的聲音、發展了音樂、詩歌、卦象、繪畫…所以廣義上而言，節奏包含世間萬事萬物，但狹義上大家理解的節奏可能是一個節拍、一首歌的曲調。

就像耳熟能詳的節奏有“嘣恰恰、嘣恰恰”和“咚次噠次”，我將節奏用圖形化的語言來說明一下，圖中從黑到灰色代表聲音漸弱，豎線分割每個小節，重復小節形成一段簡單的節奏，形成“強弱弱”“強弱次弱”的有規律變化，而簡單的重復讓人可預知、可掌控，自然而然的產生舒適感。

中國古代的《禮樂記》中說：“節奏，謂或作或止。作則奏之，止則節之。”

節奏的斷連頓挫也會表達出不同的含義，如下圖：

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

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

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

不同的節奏會有完全不同的含義，也表達了不同氛圍和心情，因此，我大膽給設計節奏定義為：

“為了不同設計目的，進行具有規律性、階段性、秩序性變化的設計稱之為設計節奏。”

結構的節奏

什么是有規律性、階段性、秩序性變化的節奏呢？繼續觀察《日出印象》《星夜》則會發現他們都有共同的規律——結構中的疏密、大小、視覺軌跡都是設計節奏。

莫奈的《日出.印象》就是一副節奏很明顯的繪畫作品，太陽、船只形成穩固的三角形布局。

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

與莫奈不同，梵高是公認的瘋子，但也是天才，因為他在繪畫的時候無比認真，從他作品中可以看出嚴謹的規律。天空中的黃色星星如果用線連起來，會發現它如浪花一樣此起彼伏，流動的筆觸按照順時針方向有規律的排列，前景樹影與后景連綿的山脈形成近大遠小的連續空間感，將視野從近處樹影往遠處山丘無限延伸。

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

設計上也通常會改變構圖中物體的大小、間隔、方向漸變等的節奏來實現，從以上對比圖中，可以明顯看出來左圖的方塊、球體大小變化更有節奏，營造出一種近大遠小的空間感。

例如上圖骰子的大小變化，營造了空間活躍感，讓物體具有魔法般的“騰空”起來。通過主題物（人）與輔助物（粉球）之間的穿插錯位來產生“和旋”一樣的“交響樂”，豐富畫面的節奏，產生了縱深空間感，而不會誤以為比例不對。

應用到網頁上，最明顯的就是頁面結構布局設計，適當穿插的左右排列，打造起伏流暢的曲線觀賞路徑，仿佛細細流淌的小溪，吸引用戶追本溯源不斷向下滑動，同時也避免了所有信息累積在一起的壓迫感。

首尾錯位疊加的布局，給人一種故事開頭結尾和豐富過程的完整閱讀體驗。可見，構圖節奏能增加舒適感、緩解視覺疲勞，讓畫面更有起伏感。

但需要注意的是，錯位構圖帶來的節奏是較慢的瀏覽式體驗，并不適合快速獲取信息的信息流。

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

構圖中文字的排版也可以運用設計節奏，例如通過字體、字號、顏色、深淺、字間距、段落等的節奏變化來體現。如圖將普通的文字段落，先按主次區別，改變一成不變的閱讀體驗，將標題與內容相呼應，將文字與背景構圖融合，傾斜對齊體現文字的力度。

可見，文字的節奏能突出主次、避免大段文字的閱讀壓力、橫縱向的閱讀呼應也能有不一樣的閱讀體驗。

形狀的節奏

如果說結構的節奏是整體布局的把控，那形狀的節奏就是通過形狀的變化對畫面所傳達信息的擴展，其中最為突出的是表現在“漸變”和“聚散”兩種形式。

漸變是指以類似的基本形或骨格，漸次地、循序漸進地逐步變化，呈現一種有階段性的、調和的秩序。包括：同一個形狀的顏色、大小、間隔、方向、位置的變化，也有多個形狀的關聯性變化。

聚散是一種特殊的重復，是基本形或骨骼單位環繞一個或多個中心點向外散開或向內集中，即爆發式（外擴形）和聚焦式（內收型）。特點：具有很強的聚焦點，這個焦點通常位于畫面的中央；具有一種深邃的空間感，使所有的圖形向中心集中或者由中心向四周擴散。

對比上圖廣告宣傳banner，有聚散效果的圖片氛圍更熱鬧、豐富，也更能調動用戶的購買欲望。可見，形狀的節奏可以聚焦中心，使畫面更具沖擊力，營造隆重活躍的氛圍，適合電商活動頁面和商品banner展示。

顏色的節奏

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

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

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

可見，顏色的節奏能夠增強畫面樂趣，通過顏色五星型、放射型等規律漸變，豐富視覺感官，營造畫面活力。

動靜的節奏

動靜的節奏大家第一感覺會想到動畫或者gif，除了上圖中微動態照片，僅僅通過一張靜態的畫面能表現動態嗎？

當然，只要運用“常識”和“認知”就可以讓觀看者聯想到動態，例如：速度很快，看不清物體，只留下殘影，會讓人們覺得物體動起來了，并且速度很快。

運用這樣的常識，我們用PS中的速度模糊就可以在靜態的圖片上表現動態效果。同樣的模糊效果可以加快速度，是否也可以減緩速度呢？細細觀察生活，發現浴室里的磨砂玻璃可以隔離浴室空間，浴室內水聲瀝瀝，室外安靜祥和；同樣酒吧也會用磨砂玻璃隔離空間，在模糊的背景后，你可以安靜下來，哪怕外面high翻天，你也可以靜靜著。

可見，動靜節奏把握好，哪怕一張靜態圖也能做出動態效果，渲染亦靜亦動的氛圍。巧妙的運用生活中的細節與“常識”總會有意料之外，情理之中的驚喜～

留白的節奏

留白的節奏也可稱之為節奏的間歇停頓。

我們先做一個小測試，以上4張海報，那張是阿甘正傳的官方海報？

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

從圖中看每張都有留白，似乎看起來都不錯，但為什么原版圖是這樣而不是那樣呢？因為一個詞“平衡”。

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

留白除了使畫面平衡之外，還可使畫面透氣，產生強烈對比，就像全都是重點就沒有重點，全都畫的很細致也無法抓住重點。虛實結合才能塑造出一個比較平衡的畫面，有節奏的畫面。

了解結構、形狀、顏色、動靜和留白的節奏之后，看看我之前在工作項目中的應用吧～

項目1 巨幕廣告

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

構圖節奏

通過迪奧廣告圖片的大小變化與文字的大小、間距的變化，增加畫面的節奏感，營造“強弱弱、強弱弱”的秩序感，最后“弱弱弱”合理收尾。

動靜節奏

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

顏色節奏

雖然廣告主具體會用什么圖片和視頻我無法控制，但設計demo的時候，我可以選擇更適合基調顏色的廣告宣傳圖，通過畫面圖片的顏色純度的變化，增加畫面的節奏感，營造氛圍。

普適性

同理運用到以可口可樂demo中，按照設計節奏，打造基礎結構，確保閱讀的舒適性與豐富性。

項目2 如意貼角標

項目概述：如意貼角標廣告是劇集播放過程中，左下角／右下角展現的廣告，如意貼一般劇情播放到特定時間觸發，廣告內容與劇情相關；全程角標一般在右下角，一直存在，以動態mov形式呈現。

大小、位置、顏色的節奏

以角標廣告為例，按照設計節奏，多方面呈現產品效果，豐富視覺效果。

如圖分解了角標展現效果，大小：按照從小到大再漸漸變大的節奏。位置：形成波浪般的起伏。顏色：從淺到深再淺，最后強調品牌色展示產品。

動態節奏

以如意貼廣告demo為例，按三個維度的設計節奏，打造多方面呈現效果，豐富視覺效果。

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

總結

回顧一下上面說的內容，對于設計節奏的概念我定義為：為了不同設計目的，進行具有規律性、階段性、秩序性變化的設計稱之為設計節奏。

從以下五個方面講述了設計節奏：

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

設計節奏不僅僅是我上面說的部分，可以說這還只一個開始，是一個概述，關于設計節奏每一個拆分開來都可以寫成一篇文章，我想寫成一個系列文，也許需要更多時間、精力和經驗去總結。在此我想先分享給大家，有興趣的小伙伴可以一起討論。

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

歡迎關注作者的微信公眾號：

「想掌握排版四原則？3個海報設計教程滿足你！」

1. 《設計易容術！如何設計一張高品位高水準的海報？》
2. 《設計易容術！如何設計一張高品位高水準的海報（二）》
3. 《設計易容術！如何設計一張高品位高水準的海報？（三）》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

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

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com