平時經常會有人問我“什麼樣才算是好的Banner ？”、“我這個Banner 有什麼問題呢？”之類的問題，還有時候大家會分享一些作品但是我覺得并不是特别好，所以就覺得要不寫一篇“如何判斷一個Banner 的好壞”之類的文章吧，因為我們常說設計師要多看，但是多看的前提是要學會辨别一個東西的好壞，要多看好的而非不好的東西哈，要不然怎麼提高審美提高眼界呢？

一、Banner 是什麼呢？

Banner 英文翻譯過來其實是指橫幅或者旗幟，随着網絡的興起，後來專門用Banner 一詞來代指任何投放于線上（PC端、移動端）的各種尺寸和形狀的廣告圖，有靜态和動态之分，總之現在你在網頁上所看到的各種形狀尺寸的圖片基本都屬于Banner ，而且基本都是可點擊的。

二、Banner 的作用是什麼 ？

宣傳，展示，廣而告之，或者是能給企業、産品或者人帶來相應的轉化率。

三、Banner 由哪些部分組成呢 ？

主要由文案、商品圖或模特、背景四項中的至少一項組成。

最常見的一種Banner 就是四項都包含了，我們來看下圖舉例：

那麼了解完上面的基礎知識，我們該如何判斷一個banner 的好壞呢？

就像一個設計師，可以分為未入門 – 初級 – 中級 – 高級 – 資深 – 指導，那麼banner 我将它分為不合格、合格和優秀，接下來我們分别看下：

一、不合格banner 的幾宗罪：

罪狀一：摳圖不幹淨！！！（其他罪狀且不說）

有的人很懶，不管遇到啥圖都直接魔棒一點就完事了，那麼鋼筆和通道這些工具要留着發黴麼？

罪狀二：濫用各種特技

喜歡用各種大大的描邊髒髒的陰影還有各種光效結合為一體的殺馬特效果閃瞎我們的眼，然而我們需要學會正确使用特技，并且懂得克制和矜持，才能體現出自己的身價，要不很容易看起來low。

罪狀三：信息閱讀障礙

（不恰當的字體變形幹擾閱讀，“季中”兩個字太過纏綿和糾結，大庭廣衆之這般暧昧真的好嘛？且不說黑色描邊，以及髒髒的配色了）

排版雜亂幹擾閱讀，橫就是橫，豎就是豎，這樣橫豎穿插的跳躍感排版真的爽麼？反正大腦和眼睛表示：不同意~

用色過多幹擾閱讀（哎喲我又出鏡了，耶~），紅橙黃綠藍靛紫全被用上了，仿佛一個沒有顔值的人，五官身材比例也不協調，但是偏偏穿衣服還非常高調~所以你們想象一下這會導緻什麼結果呢，搞的人家根本就不知道往哪看。

罪狀四：信息傳達不準确

比如上圖這個Banner ，問題在于用色不當導緻信息傳達不準确，“幹淨”本該是要比其他文字信息更突出，而這裡唯獨把“幹淨”二字用了淺湖藍色，在淺藍灰色背景上，這兩個字反而沉下去了，一點都不突出，反倒是其他的普藍色文字在淺色背景上非常突出（文字過多，圓形三角形色塊的出現導緻排版很亂也是一方面），相當于有一身力氣卻用錯了勁。

上圖的banner 問題在于，關鍵字選取有誤導緻信息傳達不準确，這是一個賣女裝的banner ，文案是“新夏天高腰顯瘦連衣裙”，明顯是要突出“高腰顯瘦連衣裙”幾個字，而這裡卻突出了“新夏天”，還有這個模特打扮跟連衣裙有半毛錢關系嗎？（我讀書少，你不能這樣騙我，因為，我眼不瞎啊~）

罪狀五：畫面及文案與活動定位不符

先認清活動定位，再結合相對應的文案去做設計，像上面這個banner 是非常失敗的，為什麼？首先怎麼可能會寫出“LV全場0元包郵”這種文案？其次就算真是“LV全場0元包郵”這種低價引導型的文案，畫面怎麼可能是這種高冷模特、大面積留白、文字小小的左右布局設計呢？畫面一點也不熱鬧促銷啊，是吧~

罪狀六：圖文信息不一緻，不知所以然

也許你初一看會覺得視覺效果好叼噢，但是但是，你仔細看，你以為它是個電影海報麼，可它卻是賣歐式家具的，這個畫面裡提到的活動目的或利益點你們看了幾秒才知道？這個畫面與你的家具有半毛錢關系嗎？雖然這是個店鋪banner ，可是誰能快速告訴我們這些新老用戶“你是什麼？”“你想幹嘛?”好嗎？

總結：

在banner 設計當中，信息傳達準确比什麼都重要，準确傳達活動目的優先于設計好看。

也許你做的這是一個創意很好的banner ，你的用色幹淨，排版舒服，信息層級條理也很清晰，可是，你做的是一個賣高檔女裝的banner ，而我需要的banner ，隻是想告訴别人，我這新進了一批廉價絲襪…… 歡迎搶購！~（這定位和傳達給用戶的信息完全錯了老闆估計會崩潰哦）

二、合格banner 必殺技：

以下我簡單慨括，因為前面幾篇文章我已經很詳細地介紹過怎麼做出好banner 了。

1、信息傳達準确

包括定位準确、圖文信息傳達準确一緻。

比如上圖雨滴、水珠、都是跟雨鞋有關聯的元素，文案部分也清晰明了的告知了要賣什麼東西。

2、合理利用特技或者不用

各種點綴元素、各種效果使用恰當。

比如上圖無論從紅黃配色還是那條貫穿主線的彩帶看，都給人傳達出一種很喜慶熱鬧的感覺，一看就是新年促銷活動，飄散的物品也很好的告知了這是賣數碼相關産品的。

3、畫面幹淨整潔

畫面中的元素都因需要而存在，而非可有可無或者多餘。

比如上圖人物上半身和下半身的對比，近大和遠小的對比，背景深色和淺色的對比，都使得這個banner 看起來幹淨簡潔但不單調，它也不需要一些多餘的點綴。

4、信息條理清晰

想一想什麼信息該突出，用什麼方法突出，顔色還是大小？排版構圖是否合理？

5、畫面顔色為需要而搭配，有理有據

比如，按活動目的來選取顔色搭配、按商品圖或模特圖來吸取顔色等，合理運用色彩對比和控制色彩面積，像優設、站酷還有68design等設計網站上已經有那麼多無私奉獻的大神都寫了關于色彩運用相關的文章我這裡就不贅述了，大家可以自己搜索啦~

相關推薦：有阿裡這篇就夠了：《色彩搭配速成！3個實用方法幫你全面搞定配色》

6、最後一點，摳圖要摳幹淨！！！~（要不怎麼配得上專業摳圖工的稱号呢~汪汪~）

涉及到場景合成類的banner ，光影透視至少要大緻正确，符合原理（網上有那麼多教程，怎麼做自己去百度看咯）

三、優秀banner 的特性：

優秀就是，除了做到了合格以外，他還做到了圖文一緻、創意很贊或者引起共鳴，帶給人額外的愉悅感，或是會心一笑。

1、帶有趣味

既準确傳達信息，又讓人會心一笑，給人超出預期的愉悅的感受。

比如上圖這些手繪 實物虛實相結合的手法，特别适合可愛或者搞怪類的banner。

2、有創意的

或是有趣味，或是讓人驚歎的視覺效果：

you are what u wear，一組鞋子廣告：

通過手繪或三維建模營造出一些豐富多彩的場景：

3、擁有讓人産生共鳴的文案或畫面

比如下面這組關于宣傳去“全聯購物中心”購物可以省錢的廣告文案，就很能引起共鳴，讓人感覺會花錢或者會節省錢是一件很酷很有情懷的事情，而不是因為窮才去省錢。

文案：長得漂亮是本錢，把錢花得漂亮是本事

文案：來全聯不會讓你變時尚，但省下來的錢能讓你把自己變時尚（這文案寫的太好，我竟無力反駁…）

文案：幾塊錢很重要，因為這是林北辛苦賺來的。（林北：台灣語，意思是你爸爸。）

我們再聊點别的：

無意間看到某大神把我4年前的banner 拿出來當做優秀案例講（我當時的心情是，很嬌羞的~……)，其實現在看來這個banner 隻是做到了信息傳達準确，但文字排版挺亂，整體畫面也很粗糙，哈哈，（另外我的文章中所用到的各種正面反面案例有部分是我自己為寫文章而做的，有些來自于花瓣，如有冒犯請私下約我，麼麼哒~）

寫在最後：

對于電商Banner 設計來說，最基本要求是要做到信息傳達準确，而後才是設計的好看或者有創意，我們可以每個月彙總一下自己的設計作品，然後看有什麼問題，看它合格了嗎？優秀嗎？也許之前的作品因為時間不夠，因為那時的你考慮不周全或是迫于外界的壓力你做了不太好的設計，現在我們回過頭來發現問題，并動手去重新優化它們，堅持下來，相信很快就會看到進步的。另一方面，時間過了這麼久，要不重新看下以前收集的設計案例，它們合格嗎？優秀嗎？是不是該清理一下了呢？

今天的内容就分享到這裡了，你們get到這些技能了嘛？哈哈，我們下次再見咯~

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!