提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

小婷姐的電商設計系列好文:

  1. 《新人手冊!聊聊關于電商設計的那些事兒》
  2. 《前輩經驗!聊聊新人設計師最容易遇到的12個問題》
  3. 《不怕沒靈感了!SALE 招牌的9種排版設計方法歸納(附案例)》

那么進入正題之前,我們先用非常通俗描述講幾個簡單的概念:

一、Banner 是什么呢?

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

二、Banner 的作用是什么 ?

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

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

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

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

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

就像一個設計師,可以分為未入門 - 初級 - 中級 - 高級 - 資深 - 指導,那么banner 我將它分為不合格、合格和優秀,接下來我們分別看下:

一、不合格banner 的幾宗罪:

罪狀一:摳圖不干凈!!!(其他罪狀且不說)

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

有的人很懶,不管遇到啥圖都直接魔棒一點就完事了,那么鋼筆和通道這些工具要留著發霉么?

罪狀二:濫用各種特技

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

罪狀三:信息閱讀障礙

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

(不恰當的字體變形干擾閱讀,“季中”兩個字太過纏綿和糾結,大庭廣眾之這般曖昧真的好嘛?且不說黑色描邊,以及臟臟的配色了)

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

排版雜亂干擾閱讀,橫就是橫,豎就是豎,這樣橫豎穿插的跳躍感排版真的爽么?反正大腦和眼睛表示:不同意~

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

罪狀四:信息傳達不準確

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

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

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

罪狀六:圖文信息不一致,不知所以然

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

總結:

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

也許你做的這是一個創意很好的banner ,你的用色干凈,排版舒服,信息層級條理也很清晰,可是,你做的是一個賣高檔女裝的banner ,而我需要的banner ,只是想告訴別人,我這新進了一批廉價絲襪...... 歡迎搶購!~(這定位和傳達給用戶的信息完全錯了老板估計會崩潰哦)

二、合格banner 必殺技:

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

1、信息傳達準確

包括定位準確、圖文信息傳達準確一致。

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

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

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

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

3、畫面干凈整潔

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

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

4、信息條理清晰

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

想一想什么信息該突出,用什么方法突出,顏色還是大小?排版構圖是否合理?

5、畫面顏色為需要而搭配,有理有據

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

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

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

6、最后一點,摳圖要摳干凈!!!~(要不怎么配得上專業摳圖工的稱號呢~汪汪~

涉及到場景合成類的banner ,光影透視至少要大致正確,符合原理(網上有那么多教程,怎么做自己去百度看咯)

三、優秀banner 的特性:

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

1、帶有趣味

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

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

 

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

比如上圖這些手繪+實物虛實相結合的手法,特別適合可愛或者搞怪類的banner。

2、有創意的

或是有趣味,或是讓人驚嘆的視覺效果:

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

you are what u wear,一組鞋子廣告:

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

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

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

文案:長得漂亮是本錢,把錢花得漂亮是本事

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

文案:來全聯不會讓你變時尚,但省下來的錢能讓你把自己變時尚(這文案寫的太好,我竟無力反駁...)

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

文案:幾塊錢很重要,因為這是林北辛苦賺來的。(林北:中國臺灣方言,意思是你爸爸。)

我們再聊點別的:

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

寫在最后:

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

今天的內容就分享到這里了,你們get到這些技能了嘛?哈哈,我們下次再見咯~

歡迎關注小婷姐的微信公眾號「TTTink-D」,一個干貨與文筆俱佳的美女設計師:

微信公眾號簡介:專注開拓電商設計思維,不定期分享一些個人見解干貨,當然也會分享一些頂級創意、攝影、人生感悟方面的好文啦。

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

「技多不壓身的設計師才有高薪資」

  1. 平面設計:《超贊!設計師完全自學指南》
  2. 交互設計:《交互設計師修煉指南!教你從零開始成為優秀交互設計師》
  3. UI設計:《超實用新手指南!零基礎如何自學UI設計?》
  4. 前端開發:《天貓高手來教你!零基礎如何系統地學習前端開發?》
  5. 摳圖技巧:《從菜鳥到高手!PHOTOSHOP摳圖全方位攻略》
  6. 配色方案:《色彩搭配速成!3個實用方法幫你全面搞定配色》
  7. DPI指南:《基礎知識學起來!為設計師量身打造的DPI指南》
  8. 交互設計自學路徑圖:《零基礎入門!給非科班生的自學路徑圖之交互設計篇》

提高審美的前提!如何辨別一個Banner的好壞?(附案例)

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

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

收藏 159
點贊 12

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。