編者按：今天這篇好文把電商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經常會這樣做，一是讓主題文案成為視覺的焦點，二是延展其它會場方便套用。沒有過多的特效處理，這樣大大的節約了時間成本。

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

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

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

01）暗色配亮色、亮色配暗色
02）深色配淺色、淺色配深色

暗色配亮色、亮色配暗色

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

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

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

而我在這里說的2個方法只是提醒下大家盡量少犯錯誤，例如如果用到暗紅色，這個時候你就應該毫不猶豫的用亮色或白色。

舉例說明：

如上在選定的顏色中，黃色比藍色亮這就是亮色配暗色，反之就是暗配亮（以背景色塊為主色）。

如上2個顏色同為暗色所以不管怎么樣都是一個錯誤的案例（不管是亮色還是暗色的情況下白色和黑色都是可以搭配的，當然首先考慮白色-白色是視覺焦點）

如上很顯然2個亮色進行搭配不是明智的選擇，如果非要使用亮色和亮色搭配、我建議用白色或者黃色這2個特色的顏色。

如上白色和黃色去搭配亮色色塊顯然是可行的、但是還是比較刺眼的哦，從用戶角度考慮還是要慎用。

所以配色要配的舒適，有時候很多小伙伴會誤入歧途，亮色搭配不行，他還是嘗試亮色搭配。下次不妨用暗色試試哦。

深色配淺色、淺色配深色

從中間開始往上走顏色越來越深，反之越來越淺。深淺配色是指一個顏色由明度和飽和度來控制顏色，然后進行配色。

舉個例子：

深綠色作為背景色塊，用它的淺色來搭配。如上圖可見

或者反之進行搭配：

看案例：

案例中背景顏色和文案或利益點的形狀載體采用了深色配淺色的道理，當然文案還是以白色為主。

大多數都是色塊的深淺搭配而不是文字哦（記住色塊的情況下白色是視覺焦點）

五、Banner 終極寶！設計師終極絕招！

養成10分鐘1次Ctrl+S?的好習慣。

Banner5寶回顧總結

1. 圖案圖形讓畫面變得節奏感
2. 背景分割沒有特定的形狀，而是看你需要什么形狀
3. 配色切勿亮色配亮色、暗色配暗色

優秀的設計案例還有很多這個需要大家平時的采集和觀察，更多的思考你會發現更多的空間。

下面我們來看下幾個改稿分享。

六、案例改稿分享

案例一 ：修改前

案例中的錯誤：

1. 背景白色線條和白色立體英文過于搶眼
2. 標題細節表現不夠、不夠精致

案例一 ：修改后

解決方案：

1. 弱化線條和立體英文（混合模式柔光調整透明度即可）
2. 在標題上面疊加一層圖案（或者是點或者是線）

修改后可以發現中間主體在畫面中更加突出、主體位置更加明顯。標題也比純白色更加精致。

案例二 ：修改前

案例中的錯誤：

1. 字體上面刮痕過多，顯得標題有些臟
2. 標題有一些輕飄

案例二：修改后

解決方案：

1. 減少劃痕到最舒服的比例（在素材不夠清晰的時候可以采用銳化素材將其更加精致）
2. 給標題增加一層厚度，增加力量感。

線條縮小容易變粗，大家可以看細節圖。刮痕變得更精致，也不會顯得畫面臟了

案例三 ：修改前

案例中的錯誤:

1. 兩側比較空不飽滿，商品推擠高度順序和標題主體不夠緊密
2. 標題雖然變形和做了一些處理，是不是是否更加有沖擊力一些呢？
3. 飄絮少了一些氛圍。

案例三：修改后

解決方案：

1. 放大兩側商品和添加商品之間的高度。
2. 繪制劃痕使其文字有刮破的感覺、周圍增加碎屑強調氣氛,另外增加字體厚度，強調力量感。
3. 增加飄絮營造更加熱鬧的畫面氣氛。

修改后兩側更加飽滿、標題也更有氣氛。

到這里這次的分享就完結了，謝謝大家！

歡迎關注作者的微信公眾號：“三根設計骨”

「電商設計系列好文」

1. 《新人手冊！聊聊關于電商設計的那些事兒》
2. 《前輩經驗！聊聊新人設計師最容易遇到的12個問題》
3. 《不怕沒靈感了！SALE 招牌的9種排版設計方法歸納（附案例）》
4. 《如何辨別一個BANNER的好壞？（附案例）》
5. 《電商干貨！BANNER圖設計之商品圖該怎么玩（上集）》
6. 《電商干貨！BANNER圖設計之商品圖該怎么玩（下集）》
7. 《感覺技不如人？聊聊設計師該如何正確認知自己的價值》
8. 《超長干貨！平臺電商設計師vs店鋪電商設計師哪個好？》
9. 《職場進階術！哪些性格特質有助于設計師的成長和提升？》
10. 《設計師項目做到一半總是想要放棄怎么辦？（附問答合集）》

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

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com