電商干貨！Banner圖設計之商品圖該怎么玩（上集）

編者按：拿到一個banner設計需求后該如何動手？不同風格的Banner都有什么規律可以借鑒？今天@TTTing1?（京東用戶體驗部）這篇好文不僅分享了拿到設計需求后5個應該執行的步驟，而且還對六種常見的商品圖進行歸納總結，干貨滿滿收！

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

1. 《新人手冊！聊聊關于電商設計的那些事兒》
2. 《前輩經驗！聊聊新人設計師最容易遇到的12個問題》
3. 《不怕沒靈感了！SALE 招牌的9種排版設計方法歸納（附案例）》
4. 《如何辨別一個BANNER的好壞？（附案例）》

一、拿到一個banner設計需求后，我們該怎么做

接到一個banner圖的設計需求，第一件事情應該是去了解以下幾個方面點：

1、banner圖是針對什么活動、什么目的而設計的

我們需要知道做這個的原因，為誰而做，比如是為了某個節日專題活動還是針對某一個單品的預售，是走高端大氣上檔次路線，還是走促銷親民熱鬧路線等等，因為這些關系到banner圖設計風格的選擇（不妨問一下需求人看他有什么參考圖可以提供給你，不要害羞~）

2、主副標題、利益點等文案信息的確認

一般來說我們可以從文案中尋找靈感確定設計方向，為了避免設計方向錯誤，所以需要確認好了才好動手，其次就算只是簡單的文字排版，萬一后續又有文案的改動或字數的增減，就麻煩了。

3、這個banner圖是放在哪個位置投放的

這個主要是考慮banner圖與周圍的關系，比如首頁banner圖背景色避免和左側導航背景同色，如果投放的位置周圍都是熱鬧的圖，那這個時候你可以試一下安靜的，大面積留白的，與周圍形成對比反差。

4、與需求人溝通聽下ta的看法或建議

我們作為設計師在視覺方面可能是要專業些，但是不防也聽取一下運營或需求方的看法或經驗，因為點擊數據掌握在他們那里，他們可能比我們更了解用戶喜歡什么，需要什么，同時他們往往是拍板說ok的人啦，但不是說完全聽他們的，我們自己要有判斷能力，對于他們的意見或看法適當引導和取舍（這個過程可以展現設計師的專業素養，增加好感，從而比較容易過稿）。

5、什么時候交稿

這個大家都知道，好的設計是需要時間的，假設有幾個設計方向可以選擇，如果時間充裕當然選擇那個最優方案，如果時間比較趕，那就選那個不出錯的、能快速實現的方案咯。

二、了解以上幾點信息之后，腦海中應該會出現一些風格定位關鍵詞：

促銷、熱鬧、大牌、簡約、可愛、穩重，時尚、文藝、一些特定元素（節日、季節），好嘛，其實這些關鍵詞往往是一個或多個同時出現在一個banner廣告里的，下面我們看些案例：

關鍵詞：大牌、穩重

說到大牌，我們觀察感受一下，就是：

1、背景大量留白。

2、色彩單一，常見黑、白、灰作為主色（因為這些是無彩色，它的存在只是為了凸顯主體而已）。

3、商品或模特一定要夠大（不是指字體或logo哦），截取部分細節展示（因為就是這么自信）。

4、不需要太多文案描述，有時只需一個logo擺在那就好了（仿佛在說：你愛買不買咯）。

5、需要說明的是，這種高冷的比較適用于數碼電子產品，奢侈品牌等，彰顯bigger。

關鍵詞：時尚、品質感、促銷（時尚感大于促銷感）

平時是不是經常遇到別人給你說既要大牌又要促銷的無理要求？下次糾正一下吧，是既時尚又促銷，不是既大牌又促銷，就像你說一個人他穿的好時尚啊，因為時尚不一定非要花大價錢才可以達到，而大牌是真的需要很多錢才可以達到的，而促銷代表打折，低價，熱鬧，這與大牌是相違背的。

這種分析一下會發現有以下幾點：

1、注重排版，文字規整排版，比如左對齊右對齊，居中對齊，不會去做一些怪異的字體變形，而是有一個著重突出的文字信息放大形成 一個面，壓住全局，適當留白。

2、色彩不會太多，3種至多（如果商品本身就是五顏六色的就另當別論了），配色參照商品本身或鄰近色來提取，只有某一個需要突出的文字信息才會用對比反差比較大的顏色，比如折扣信息或重要的功能信息。

3、商品角度要好看，品質要高（常見商品角度：45°角，俯拾，平視，可別整出個仰視了。。。）

4、一般都會有主標題、副標題、利益點這幾個文案信息，利益點要大大大。

5、這種一般比較適用于與時尚相關的美妝護膚、男女鞋箱包、配飾，食品、母嬰也會有。

關鍵詞：可愛、熱鬧、親合力

這種比較適合食品、可愛服飾，母嬰品類,因為這些屬性跟這些品類的特點是相符的，要給人可愛、可口、甜美、親和力的感覺。

這種分析一下會發現有以下幾點：

1、商品很多，畫面會比較滿，會有很多小色塊，手繪圖形什么的點綴。

2、色彩豐富，配色柔和，偏暖，給人熱情的感覺

3、會有某一個特別突出的信息，但是整體畫面又注重比例的和諧（后面我會具體講到這塊）

總之，整體畫面感覺是不會有攻擊性的，是友好熱情的。

關鍵詞：素雅、安靜、大面積留白、文藝，簡約

這種比較適合家居、茶藝、布藝、棉麻森女系、文藝、日系服飾鞋包（在這個浮躁的社會就是需要有人去做那個安靜的美女子，來保證社會的和諧和多樣性，你說是不是呀）

這種分析一下會發現有以下幾點：

1、超級大面積留白，東西都小小的（這一點跟前面講的大牌是截然相反地，雖然都是大面積留白）

2、色彩單一，以淺灰、淡藍白、米白、棕色，飽和度和純度低的綠色等色彩居多

3、文案要么很少，要么很多，但都是打動人小情緒的一些文字，并且小小的放置在畫面里

總之，如果你們身邊有這樣的女子，你觀察一下她你就知道了，就是這樣子的安靜素雅，不愛說話，淡淡的猶如一陣清風吹過.....）

關鍵詞：促銷，形式感佳（促銷甩貨目的更大）

這種比較適合尾貨大清倉、綜合賣場促銷活動，適合任何品類(那種常見的路邊攤設計我就不舉例了，大家有興趣可以自己去找，一大堆哦）

這種分析一下會發現有以下幾點：

1、要么文案超級多，要么商品種類超級多，要么文案和品類都超級多

2、色彩多樣、留白較少，注重排版，選品需要注意顏色和形狀的選擇（這個我稍后會提到）

3、醒目大大的sale 或價格信息，就是要告訴全天下人我現在很便宜啊快來買我啊（就是這么熱情咧~）

總之，它就像一個熱情的促銷員，同時打扮的很nice，拿著喇叭喊：全場清倉大甩賣啦，快來看快來瞧啊，你買了不吃虧，你買了不上當啊--)

關鍵詞：促銷（比較diao的促銷）

這種比較適合商家店鋪banner圖或者實體店促銷招牌，因為banner圖上沒有任何商品，要不是因為你本身就處在這個店鋪里面，鬼才曉得你要賣什么咯。

這種分析一下會發現有以下幾點：

1、形式感，大大的sale和大紅背景告訴你，恩，人家是來促銷的~

2、哼~就不告訴你我要促銷什么，你來猜啊，你來點我點我我才告訴答案哦（很傲嬌吧）

總之，這種要么是為了吸引有點好奇心的消費者，要么是吸引已經是老顧客的消費者，運用在實體店比較常見。

寫到這里就算是把“Banner圖設計之商品圖該怎么玩”（上集）講完了，由于內容比較多，剩下的內容我放到下集再講，所以，我們下次再見咯。

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

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

「優設2月份優秀教程合集」

地圖圖標教程：
《PS教程！手把手教你打造一個配色小清新的地圖圖標》

卡通動物肖像：
《AI教程！教你繪制六個扁平化風格的卡通小動物肖像》

卡通人物肖像：
《AI教程！教你繪制扁平化風格的卡通人物肖像（四人組合篇）》

作者：@TTTing1

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

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