很棒的排版設計干貨：節奏感

Sponsor

前言：在今天的文章中，將給大家帶來版式設計中一個重要的技法：節奏感設計，聽起來是不是有些抽象？沒關系，下面我們會用實際的案例來告訴大家節奏感是什么。

缺少節奏感的設計，真的很“呆”？在開始今天的文章之前，先看一段舞蹈：

我們除了看到他充滿喜感的表情和舞蹈，還能感受到一種無形的節奏，有快有慢、有輕有重、層次分明，這就是現實生活中常說的節奏感。

富有節奏感的音樂、舞蹈、色彩、詩歌韻律等等總是能帶動我們的思緒、令人沉迷其中，無法自拔。

俄文藝理論家車爾尼雪夫斯基在《藝術對現實的審美關系》中說到：“藝術來源于生活，卻又高于生活”，那么現在不禁會有人提出問題：設計中會不會也存在節奏感？又是怎么體現和運用的？

希望今天這邊文章，能幫你弄清楚這些。

1、提現節奏感的形式有哪些？

首先明確一點：小到元素使用，大到頁面布局，設計中同樣也是存在節奏感的，在說設計中的節奏感如何體現之前，我們先來回顧以下對比。

對于節奏定義是這樣的：自然界或人文藝術界因變化而豐富進化，在包括高度、寬度、深度、時間等多維空間內的有規律或無規律的階段性變化簡稱節奏。

比如我們學生時代寫作文時，先揚后抑或先抑后揚的手法都很實用，一篇好的作文要有敘述、有例子、有感觸、有抒情。

通篇抒情或通篇敘事都不太好，這其實就是在強調一種寫作上的節奏感。

我們都知道過于統一的畫面會給人無趣、缺少層次、甚至呆板的視覺感受，所以這時候我們就需要打破呆板、營造層次感，讓畫面富有律動、有變化。

設計中的節奏感，很大程度上是可以通過對比的方式來體現，但這兩者也是有一定區別的，節奏感大多數情況下更加強調整體，而對比則更偏向局部。

那么如何運用到設計中呢？

2、如何將節奏感用到文字排版中

在設計中節奏感可以理解為感官上規律或不規律的變化。所以想要做出優秀的設計作品，我們需要去營造視覺上的節奏變化，否則就會有過于統一的問題就會再次出現。

好了，接下來我們就說說節奏感是如何體現在文字排版中的。

說到節奏感，我們首先想到的就是音樂，聽覺感官上最直觀的感受就是動次打次~動次打次~快與慢、輕與重之間的變化，這就形成了聽覺上的節奏。

下面再說回設計。

文字編排能力是設計師的必修課，文字既是商業設計中不可或缺的信息元素，它是用戶最直觀獲取關鍵信息的方式；又是畫面中非常重要的設計元素，提升畫面整體的設計感。

看似簡單的文字，不同的排版形式會改變作品給人的視覺感受，往往一些整體不錯的作品，最終會毀在了文字排版上。

想要做好文字排版，其節奏感也是很重要的，下面我們舉個例子：

如果把上圖中的線條看做簡單的文字編排的話，這兩者給你最直觀的視覺感受是什么？

左側給人的感受就是是工整、嚴謹，但這在設計中很容易就會讓畫面顯得枯燥乏味、缺少層次感；而右側則在視覺上相對富有跳躍性、節奏感。

提問：在文字排版中，為什么我們經常會用到點線面的知識？

結合今天的所說的，答案很明顯：為了讓文字編排在視覺上更豐富有層次、提升作品的出彩度，避免因排版過于簡單、統一使得作品整體枯燥乏味。

下面我們看個案例，能更助于大家理解：

如上圖案例所示，很顯然左側是不可取的，在設計工作中我們都不會這么做。

而右側在我們工作中是用到最多的，在兼顧可讀性的前提下文案主次分明，視覺上更有邏輯和節奏感、并且在點線面知識理論的加持下，讓簡單的文字編排變得更有設計感、也更吸引眼球。

所以說文字編排也是有節奏感而言的，當我們清楚這一點之后，文字排版就不會那么難了，現在我們趁熱打鐵，再分析幾個案例：

我將案例中的文字排版部分單獨抽離出來，將文案替換成線條，就做成了如上的示意圖。

通過上圖我們不難發現，每個作品中的文字排版在視覺表現上都很豐富、有層次感，通過區別文字的大小、粗細、字體形態、文案長短等等，使得文案有主有次，視覺上有輕重之分，這就是排版中的節奏感。

有節奏感的排版既能起到傳達信息的作用，又能豐富整個畫面，提升設計感，所以設計中不要一味的追求統一感，越是統一就越難把控，在視覺表現上就越容易犯錯。

接下來我們再說說頁面設計！

3、頁面設計的節奏感如何提現？

頁面設計相對來說篇幅更長，比如我們工作中常做的：首頁、詳情頁、H5頁面、活動頁等等，都屬于頁面設計的范疇。

相比而言，網頁設計對整體性要求更高。

這一點區別于海報設計，拿電商詳情頁來說，我們可以將每一屏都當做一張海報來制作，但這并不意味著每張都出彩的海報組合起來就是一款優秀的詳情頁。

其中還要考慮每一屏之間的銜接、串聯、區別、視覺層次、主次等等，這就是為什么有些人做海報還不錯，一做頁面就出問題的原因。

那么在網頁設計中，有沒有所謂的節奏感而言呢？下面我們看個案例：

我們做了一個簡易的示意圖，將詳情頁中的模塊用色塊對應起來，通過色塊顏色的深淺來對應詳情頁中每個模塊的視覺輕重，而色塊高度對應模塊高度。

下面做個簡單的整理，看的更直觀一些：

通過示意圖我們不難發現：色塊有深有淺、有長有短，不是完全統一的。

這就等于在視覺上形成了一定的變化和反差，而色塊之間的變化也對應了詳情頁模塊之間不同的視覺權重，那么整體的層次感就有了。

趁熱打鐵，再分析個案例：

上圖示意圖也是通過色彩屬性的差異一一對應的，為了看的更直觀，整理了一個如下豎型圖：

所以你會發現，類似上述布局的頁面在視覺上絲毫沒有枯燥、乏味的感覺，這就是頁面設計中的節奏感。

缺少節奏感的頁面，就如同水平如鏡的海面，過于單調平淡很容易造成視覺疲勞，所以我們需要適當的給海面加點浪花，從而避免這種現象出現。

這時候該有人問了：如果頁面整體都是黑色、或者重色、輕色，那是不是就沒有節奏感而言了？

當然不是！

頁面布局的節奏和色彩沒有必然關系，而是跟視覺感受有關系，上面案例中最直觀的視覺反差是輕重色的區別，我們就依此為出發點，但這只是衡量視覺變化的一個因素而已。

影響頁面視覺節奏變化的因素有很多種，哪個因素最直觀的影響視覺感受，我們就以它為衡量標準。

最常用的就是利用色彩屬性劃分，比如：輕色與重色、有彩色與無彩色、不同色相等等。

而當色彩屬性相似時，我們依然可通過其他因素劃分，比如：模塊的高矮、畫面的簡易和復雜、視覺停留時間長短等等。

頁面視覺節奏的變化在一定程度可以理解為模塊之間的對比，營造視覺反差。只不過這里更要兼顧整體、全局化考慮。

這里需要強調一個誤區：就是過于有規律反而會讓整體喪失節奏感，舉個簡單的例子：

如圖所示，過于規律的變化反而容易視覺疲勞，讓人感覺單調無趣，這一點對于頁面設計來說非常重要。

這時候再去看一些優秀的網頁作品時，嘗試分析他們的結構布局：

現在你能看懂這兩個頁面整體布局的用意嗎？

4、總結

所以在設計中也是需要有節奏感的，小到文字編排，大到網頁布局，節奏感總是在無形中影響著我們的作品。

正如文章中說到的一樣：對于頁面設計來說，每一個模塊單獨做的很出彩，串聯成一個頁面未必就是優秀作品，這就是忽略節奏感所導致的，總結一句話：局部看細節，整體看節奏！

現在你可以找些優秀的案例自己驗證一下，更能加深記憶和理解。

作者&來源 | 美工美邦（id:laozhang-sj）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。