今天這篇好文把電商Banner 的設(shè)計(jì)方法都說(shuō)得七七八八了，如何用圖案提升節(jié)奏感+用裝飾活躍氛圍；分割背景怎么做；大色塊背景如何配色等等，全是電商Banner 常見的技巧。值得一提的是文中案例非常豐富，能大大降低新手的學(xué)習(xí)難度。

哈嘍大家好！已經(jīng)很久沒有更新分享了，沒有啥好的點(diǎn)子了。該分享的都分享的干凈了，那為什么現(xiàn)在整理這些分享給大家呢。

還是希望能幫助大家更快的了解Banner設(shè)計(jì)的一些技巧，另外也是有一些新的想法想和大家交流。

部分案例來(lái)源于網(wǎng)絡(luò) 多有得罪請(qǐng)恕罪哈。

圖案圖形節(jié)奏感 裝飾碎屑?xì)夥兆?分割背景更活躍 背景顏色大色塊 終極寶

是不是你也會(huì)出現(xiàn)這些問題：

畫面臟 頁(yè)面空 細(xì)節(jié)不足

圖案指的什么

圖案相比大家都知道，也或多或少用過(guò)。圖案放大可以變得大氣，縮小也可以很精致。

而Banner中經(jīng)常會(huì)出現(xiàn)的圖案大都是幾何形狀的重復(fù)或旋轉(zhuǎn)得到的圖形，用來(lái)做為背景的紋理來(lái)豐富背景的細(xì)節(jié)感。有時(shí)候有人經(jīng)常會(huì)說(shuō)背景里少了點(diǎn)什么，下次你不妨嘗試一下用用。不是一定要用，如果你需要可以試試效果呢。

舉個(gè)例子：

采用一個(gè)幾何形狀通過(guò)平移重復(fù)得到的圖案，在應(yīng)用在純色的背景上我把它稱之為圖案。案例中的背景采用了純色背景搭配，沒有過(guò)多的顏色。在這種情況下為了使背景避免過(guò)于簡(jiǎn)單，所以加上了菱形圖案來(lái)豐富背景的細(xì)節(jié)和層次。

圖形指的什么

有人可能會(huì)問了，圖案和圖形的區(qū)別是什么呢。圖案是通過(guò)復(fù)制平移得到的，而圖形可以通過(guò)復(fù)制平移和循環(huán)放大某個(gè)形狀得到的圖形。圖形比圖案的節(jié)奏感往往會(huì)更強(qiáng)一些，圖形需要手動(dòng)去調(diào)整和復(fù)制，可以做更多的差異化重復(fù)。而圖案則是規(guī)律性更好。

再舉個(gè)例子：

圖1：案例中的圖形是通過(guò)相同的圓角矩形，長(zhǎng)度和寬度的變化來(lái)組合成了更強(qiáng)的節(jié)奏感。它可以是色彩變化多端，也可以是單色深淺變化。

圖2：案例用了三角形向上循環(huán)重復(fù)使用，并且通過(guò)改變顏色深淺增強(qiáng)了空間感。其實(shí)上面還加了一成三角線的圖案，不知道小伙伴們你們看到?jīng)]。

看對(duì)比01-背景有圖案和沒有的區(qū)別：

我就拿一個(gè)三角形圖案Banner對(duì)比添加和不添加圖案的感受，在沒有添加圖案的情況下雖然這個(gè)案例在其他方面我做了挺多視覺表現(xiàn)，但是沒有圖案還是會(huì)感覺少了一點(diǎn)節(jié)奏感和細(xì)節(jié)。當(dāng)我們?yōu)楸尘皩犹砑恿藞D案之后，畫面變得飽滿、同時(shí)也增加了促銷的感受。

看對(duì)比02-背景有圖案和沒有的區(qū)別：

同樣是沒有和有圖案的對(duì)比（為了大家看的明顯一點(diǎn)我把圖案加深了一些，因?yàn)槭蔷€條圖案圖片縮小就不是很清晰了）圖案不僅可以是形狀、它也可以是線條。很明顯的感受到第一張圖促銷氛圍已經(jīng)可以滿足了，但是通常我們會(huì)為了讓背景更有細(xì)節(jié)會(huì)添加一些圖案。（個(gè)人意見 僅供參考）

圖案的應(yīng)用

第一個(gè)案例中用到了3種圖案，圓、星、豎條都是來(lái)烘托頁(yè)面背景。其中豎條屬于圖形重復(fù)。

第二個(gè)案例用到了類似波浪線的圖案，這些圖案總是會(huì)給人與生俱來(lái)的節(jié)奏感。

圖形的應(yīng)用

案例中是由多邊星形由小發(fā)散的圖形，是不是有很強(qiáng)的節(jié)奏感。圖案不僅是平鋪重復(fù)得到，它還可以由一個(gè)基本型放大-復(fù)制-放大這樣循環(huán)得到的圖形（也可以說(shuō)是放射性構(gòu)成）

在這樣一個(gè)背景純白的視覺上面，大膽的使用單個(gè)傾斜長(zhǎng)條復(fù)制得到的背景圖形，與模特姿態(tài)和五彩繽紛的元素組合起來(lái)巧妙的產(chǎn)生了有節(jié)奏感。