關(guān)于“節(jié)奏感”這個(gè)詞，大家應(yīng)該經(jīng)常聽說，不論是音樂，還是畫面的設(shè)計(jì)，我們都喜歡用“要有節(jié)奏感”來形容，最近我發(fā)現(xiàn)圖標(biāo)設(shè)計(jì)也需要“節(jié)奏感”！

今天的大綱如下：

1. 什么是節(jié)奏感

2. 粗細(xì)的節(jié)奏感

3. 長(zhǎng)短的節(jié)奏感

4. 疏密的節(jié)奏感

5. 總結(jié)

1. 什么是節(jié)奏感

其實(shí)節(jié)奏感有很多種，比如大小的節(jié)奏，粗細(xì)的節(jié)奏，長(zhǎng)短的節(jié)奏等等

舉個(gè)例子：

這張圖片，色塊的寬度是 100px，而色塊之間的間距也是 100px，這就使得整個(gè)畫面很平均，沒有節(jié)奏感！

而下圖就不一樣了：

色塊的寬度是 100px，但色塊之間的間距變成了 50px，這就使得整個(gè)畫面增加了一些節(jié)奏，變得稍微活潑一些。

其實(shí)不論人的視覺還是聽覺，都一樣，都需要刺激，而節(jié)奏感就能達(dá)到刺激的效果，接下來我們就用實(shí)際案例看看，圖標(biāo)設(shè)計(jì)是如何利用這個(gè)設(shè)計(jì)細(xì)節(jié)的！

2. 粗細(xì)的節(jié)奏感

在實(shí)際在圖標(biāo)設(shè)計(jì)上面，這個(gè)知識(shí)點(diǎn)是如何運(yùn)用的呢？

我們來舉個(gè)例子，如下圖：

我們可以看出來，白色矩形的寬度是 19px，而白色矩形之間的間距是 3px，二者形成一定的對(duì)比、節(jié)奏感，使整個(gè)圖標(biāo)看著舒服很多。

那如果兩個(gè)粗細(xì)一樣會(huì)是什么感覺呢？看下圖：

是不是平庸很多，而且圖標(biāo)看著很散！

再看個(gè)例子，我們看下圖：

左面的是國(guó)內(nèi)一個(gè)知名 app 內(nèi)的“更多”圖標(biāo)，右面是谷歌 inbox 內(nèi)的“更多”圖標(biāo)，也不能說誰好誰壞，我們只能說客觀來講，右邊的間距符合“節(jié)奏感”的規(guī)律，如果是我來執(zhí)行這個(gè)圖標(biāo)，我會(huì)用右邊的方法來做，讓線條粗細(xì)和線條間距不一樣，形成對(duì)比、節(jié)奏感！

但是，我們也不能拿幾個(gè)例子就覆蓋所有場(chǎng)景，還是得具體情況具體分析哈！

3. 長(zhǎng)短的節(jié)奏感

長(zhǎng)短的節(jié)奏感大家應(yīng)該最熟悉，我們?cè)诳绰犚魳返臅r(shí)候，前面的音樂一半都很平，頻率變化的就會(huì)很緩慢，一到高潮部分，變化就會(huì)很大，很有節(jié)奏感了！

例如蘋果手機(jī)中的語音備忘錄圖標(biāo)：

高的線條很高，短的線條又很短，形成很強(qiáng)節(jié)奏感，如果二者區(qū)分不明顯會(huì)是什么樣子呢？

對(duì)，就是下面這樣：

看起來對(duì)比不夠，總感覺沒伸展開，沒有美感與設(shè)計(jì)感，也就是沒做到位！

4. 疏密的節(jié)奏感

圖標(biāo)疏密也一定要有節(jié)奏感，而且很重要，不然真的會(huì)很難看。

比如下面這幾個(gè)從網(wǎng)上找到的圖標(biāo)，其他幾個(gè)疏密的變化都還比較舒服，突然第四個(gè)中下部那里就比較擁擠，導(dǎo)致疏密的節(jié)奏感不夠和諧統(tǒng)一：

疏密的節(jié)奏感是比較容易被大家忽視的，一旦忽視，就會(huì)看不清問題，總感覺整體不夠舒服，但是又不知道問題出在哪里，所以這個(gè)點(diǎn)一定要重視。

5. 總結(jié)

當(dāng)知道這種節(jié)奏、對(duì)比的原理之后，我們會(huì)發(fā)現(xiàn)，很多圖標(biāo)的設(shè)計(jì)當(dāng)中有含有這個(gè)原理，當(dāng)然在設(shè)計(jì)的時(shí)候選擇一個(gè)比較好用的設(shè)計(jì)軟件是非常重要的，比如我常用的就是www.figma.cool和skcetch，可以讓圖標(biāo)設(shè)計(jì)的節(jié)奏感把控的更好。隨便舉個(gè)最簡(jiǎn)單的例子，比如手機(jī)導(dǎo)航欄上面的這兩個(gè)圖標(biāo)：

都會(huì)多少帶有節(jié)奏感的知識(shí)點(diǎn)，大家可以多多觀察，發(fā)現(xiàn)更多新的感悟，互相交流