超實用！5個幫你快速進階的電商Banner設計技巧

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

哈嘍大家好！已經很久沒有更新分享了，沒有啥好的點子了。該分享的都分享的干凈了，那為什么現在整理這些分享給大家呢。

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

部分案例來源于網絡 多有得罪請恕罪哈。

01）Banner 5寶

1. 圖案圖形節奏感

2. 裝飾碎屑氣氛足

3. 分割背景更活躍

4. 背景顏色大色塊

5. 終極寶 

02）案例改稿分享

是不是你也會出現這些問題：

1. 畫面臟

2. 頁面空

3. 細節不足

一、圖案圖形節奏感

圖案指的什么

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

而Banner中經常會出現的圖案大都是幾何形狀的重復或旋轉得到的圖形，用來做為背景的紋理來豐富背景的細節感。有時候有人經常會說背景里少了點什么，下次你不妨嘗試一下用用。不是一定要用，如果你需要可以試試效果呢。

舉個例子：

采用一個幾何形狀通過平移重復得到的圖案，在應用在純色的背景上我把它稱之為圖案。

案例中的背景采用了純色背景搭配，沒有過多的顏色。在這種情況下為了使背景避免過

于簡單，所以加上了菱形圖案來豐富背景的細節和層次。

圖形指的什么

有人可能會問了，圖案和圖形的區別是什么呢。圖案是通過復制平移得到的，而圖形可以通過復制平移和循環放大某個形狀得到的圖形。圖形比圖案的節奏感往往會更強一些，圖形需要手動去調整和復制，可以做更多的差異化重復。而圖案則是規律性更好。

再舉個例子：

圖1：案例中的圖形是通過相同的圓角矩形，長度和寬度的變化來組合成了更強的節奏感。它可以是色彩變化多端，也可以是單色深淺變化。

圖2：案例用了三角形向上循環重復使用，并且通過改變顏色深淺增強了空間感。其實上面還加了一成三角線的圖案，不知道小伙伴們你們看到沒。

看對比01-背景有圖案和沒有的區別：

我就拿一個三角形圖案Banner對比添加和不添加圖案的感受，在沒有添加圖案的情況下雖然這個案例在其他方面我做了挺多視覺表現，但是沒有圖案還是會感覺少了一點節奏感和細節。當我們為背景層添加了圖案之后，畫面變得飽滿、同時也增加了促銷的感受。

看對比02-背景有圖案和沒有的區別：

同樣是沒有和有圖案的對比（為了大家看的明顯一點我把圖案加深了一些，因為是線條圖案圖片縮小就不是很清晰了）圖案不僅可以是形狀、它也可以是線條。很明顯的感受到第一張圖促銷氛圍已經可以滿足了，但是通常我們會為了讓背景更有細節會添加一些圖案。（個人意見 僅供參考）

圖案的應用

第一個案例中用到了3種圖案，圓、星、豎條都是來烘托頁面背景。其中豎條屬于圖形重復。

第二個案例用到了類似波浪線的圖案，這些圖案總是會給人與生俱來的節奏感。

圖形的應用

案例中是由多邊星形由小發散的圖形，是不是有很強的節奏感。圖案不僅是平鋪重復得到，它還可以由一個基本型放大-復制-放大這樣循環得到的圖形（也可以說是放射性構成）

在這樣一個背景純白的視覺上面，大膽的使用單個傾斜長條復制得到的背景圖形，與模特姿態和五彩繽紛的元素組合起來巧妙的產生了有節奏感。

二、裝飾碎屑氣氛足

Banner設計中經常用到會有彩禮飄帶、矩形、三角形、紅包外形、橫條等裝飾。

案例中都具備圖案、圖形，密集的點點圖案使背景更有細節、圓形的多個復制的圖案讓畫面更飽滿，飄起來的裝飾是不是也有大有小。

三個需要注意的方面

1）有大有小

最基本的基礎，因為大小產生空間感、節奏感，如下圖左1

2）別克隆

別克隆的意思就是不要所有元素都重復的使用，案例中的三角形有描邊的、填充的、幾何體，元素更豐富了，但適可而止。如中間圖

3）有深有淺

案例中三角形的顏色有深淺看到了吧，這樣做是讓畫面不會很平沒有遠近感覺。如圖右1

三、分割背景更活躍

有人問我這個Banner用什么分割呢？圓形、矩形？當場我就愣住了，只想靜靜。這個你自己想用什么分割都可以呀，不同的分割給人不同的視覺感受。搞清楚你想要的就知道用什么了。

因為它在Banner設計中的確是很有效果的，所以我們不僅需要實踐，還要進行對比分析，這一我們才會成長的更快嘛。

一個案例來演示下，同一主題不同分割的應用。

矩形的分割應用

△ 無分割

△ 有分割

在這里舉例矩形的分割，傾斜的會更加利落一些。還有別的方式我就不一一舉例了，大家

多留意觀察和收集（案例只是來舉例分割的其他方面我就沒有調整）

圓形、三角形的分割應用

△ 圓形

△ 三角形

圓讓人看起會有圓滑、包容的感受，而三角形是干凈利落到底的感受。形狀的大小、位置，在文案后面還是模特（商品）后面，都是可以變動的。不同的地方感覺會不一樣。

背景的分割會讓你的畫面變得有層次，多嘗試就會有慢慢對分割有一定的認識和感受。

四、背景顏色大色塊 第四寶色塊

大面積色塊的應用，在Banner設計中特別明顯。也是非常有效，天貓、淘寶、京東等這些國內電商平臺的活動經常是以色塊背景為主。色塊在很久之前就很流行，作為一種風格。在大色塊背景上面，白色的文案、圖案就成為了視覺焦點。在色塊背景上應用類似時尚的波普元素，畫面節奏感就出來了。

案例如下：

案例中背景顏色是整個藍色大色塊，在這樣的情況下。白色的文案就顯得非常突出了，成為了視覺的焦點。所以有時候我們會看到天貓、淘寶、京東的促銷活動中的會場Banner經常會這樣做，一是讓主題文案成為視覺的焦點，二是延展其它會場方便套用。沒有過多的特效處理，這樣大大的節約了時間成本。

用色塊背景的時候該注意什么

最重要的就是配色了，顏色盡量不要超過三種。模特或產品的顏色不要和背景顏色跳躍太大，列如上面的案例背景是藍色，那么其它的顏色可以是青色、紫色、黃色搭配起來會比較舒適?？赡苣銜f黃色和藍色相隔那么遠，黃色是和任何顏色都可以很好的搭配的，所以你會看到官方的Banner圖中出現黃色的利益點、小色塊。

如果你用不好對比色、互補色、近似色等這些配色理論。那我們就把這些簡化成2個點

01）暗色配亮色、亮色配暗色

02）深色配淺色、淺色配深色

暗色配亮色、亮色配暗色

暗色和亮色沒有規定說哪一個顏色就是暗色或亮色，如果非要說那就是黑和白了。某一個顏色暗和亮是可以控制的，就像是顏色深淺。但是我們以飽和度最高的情況下，從最基本的紅橙黃綠青藍紫來說，如果它們對比起來就產生了暗和亮的。

這里的分類表明的不是絕對的，因為一個藍色非常亮，但是如果和黃色比起來是不是藍色相對暗了呢。，每個顏色都有它最亮的色值，當然不會超過白色和黑色。白黑才是最亮和最暗的。就像 如果這個世界沒有瘦子那么就不會有瘦子一樣。

所以我們會通過調顏色飽和度的深淺來讓它變暗或亮，當然如果要深度的熟悉配色原理，還是要從對比色、互補色等這些原理去了解，才能更加的透徹。