如何做好一張靠譜的banner設(shè)計(jì)，下面就多方位多角度圍繞例子詳細(xì)解說。

求職某公司電商設(shè)計(jì)師一職而做的Banner設(shè)計(jì)測試題：

這2張Banner，其實(shí)單純從視覺設(shè)計(jì)上來說，好像并沒有什么大的問題的，只是看起來比較常見和中規(guī)中矩而已，不算是吸引人的那種。但電商設(shè)計(jì)師的職責(zé)可不單只是考慮視覺層面的設(shè)計(jì)就夠的，比如只是把一些文案和圖片按一定的設(shè)計(jì)原理堆放在一張畫布里而已。

因?yàn)槲覀冏龅氖巧虡I(yè)設(shè)計(jì)，所以需要明白做這個Banner設(shè)計(jì)的商業(yè)目的是什么，然后弄清楚為了達(dá)到這個目的，什么樣的文案才適合放上去，以及什么樣的設(shè)計(jì)效果＋氛圍＋配色＋排版布局更合適。

并且你也得明白以上所有這些內(nèi)容和要素所呈現(xiàn)出來的視覺感受最終都只是為了達(dá)成目的而服務(wù)的，也就是賣貨。

一、當(dāng)我們設(shè)計(jì)一張Banner時，到底需要考慮哪些內(nèi)容？

看完前面的內(nèi)容，我們就不難發(fā)現(xiàn)，其實(shí)身為一枚電商設(shè)計(jì)師，我們是要對在這幅Banner里能看到的所有內(nèi)容負(fù)責(zé)的：

從元素的角度來說

比如文案、商品或模特、背景、氛圍點(diǎn)綴元素等等；

從視覺設(shè)計(jì)的角度來說

比如該用什么配色配色、該用什么效果、該采用哪種排版布局等；

從運(yùn)營的角度來說

比如什么信息是該突出展現(xiàn)的，要不要放大、加粗或者用顏色等其他方式凸顯出來，而什么信息是不那么重要的，要不要縮小一點(diǎn)、顏色弱一點(diǎn)等等，是用小細(xì)節(jié)圖還是完整的產(chǎn)品圖可以更好的展示賣點(diǎn)等等；

從色彩心理學(xué)的角度來說

比如我是用暗色調(diào)來渲染一種沉寂神秘的感覺呢？還是用明亮的色調(diào)來渲染一種歡快活躍的感覺呢？是用大面積暖色來渲染熱鬧促銷的感覺呢？還是用大面積的冷色調(diào)來彰顯低調(diào)平靜的感覺呢？等等；

還有從營銷和用戶體驗(yàn)的角度來說

文案字?jǐn)?shù)多少合適？多大字號合適？這張Banner是要放在什么環(huán)境里展示的？如何讓用戶多看幾眼，如何讓它在這個環(huán)境里脫穎而出？等等；

還有很多其他方面我就不繼續(xù)細(xì)說了，因?yàn)橐陨衔姨岬降乃羞@些問題其實(shí)都在我的書里寫的很清楚了，如果你們手里有我的書，可以翻翻看-《這么設(shè)計(jì)能熱賣》。

二、為什么會出現(xiàn)反復(fù)改稿和求職做試題被否的情況？

看完前面的這些內(nèi)容，然后我們再重新回到這位求職者身上，不知道大家發(fā)現(xiàn)其中存在的問題沒有？

嗯，其實(shí)我一開始就指出了文案方面存在的問題：

但他并不是很在意，而是覺得文案不應(yīng)該是自己要管的事情，反而是很糾結(jié)于是不是自己的排版太差了，是不是因?yàn)樽约旱脑O(shè)計(jì)效果做的不夠炫酷，是不是自己的設(shè)計(jì)做得太low了等等，所以才導(dǎo)致求職的公司沒有給他回應(yīng)。

一直到后面我還想繼續(xù)開導(dǎo)他來著，結(jié)果他還是掉進(jìn)了是不是電商設(shè)計(jì)就應(yīng)該做炫酷的效果這個漩渦里出不來。

所以，可以很確信的說，這位求職者現(xiàn)在還只是停留在了很淺顯的視覺層面去做設(shè)計(jì)而已，離公司實(shí)際需要的電商設(shè)計(jì)師該具備的運(yùn)營思維和我上面提到的其他各方面的設(shè)計(jì)沉淀差距還很遠(yuǎn)。

這也是很多剛?cè)胄谢蛘吖ぷ髁撕脦啄暌琅f沒有開竅的設(shè)計(jì)師所處的現(xiàn)狀：反復(fù)改稿被折磨的不行，但最終還是一直無法到達(dá)運(yùn)營或老板要求。

因?yàn)槌思寄苌系牟蛔阋酝猓艽蟪潭壬弦彩且驗(yàn)槿狈ξ疑厦嫣岬降哪切┧季S認(rèn)知方面的東西，所以很難準(zhǔn)確理解別人給出的設(shè)計(jì)要求，也很難把這些需求信息準(zhǔn)確的傳達(dá)到消費(fèi)者手里的。

這也是很多電商設(shè)計(jì)師求職者得到的待遇：好不容易獲得了面試和做試題的機(jī)會，但是做完試題后就不了了之了，別人壓根就不想繼續(xù)回應(yīng)。

因?yàn)槿思彝ㄟ^你做出來的測試題就可以判斷你這個人到底符不符合要求：如果單純只是技能上的原因，努努力，可能短時間就可以彌補(bǔ)回來了；但如果是思維方面的原因或者認(rèn)知態(tài)度方面的原因，那企業(yè)一般都會直接放棄這類求職者，因?yàn)榕囵B(yǎng)成本太高，這不是短時間能改善的。

從作品和談話內(nèi)容來看，很顯然這位求職者2者都占了。

三、分析一下目前的Banner設(shè)計(jì)存在的問題

那回到他做的這個Banner試題本身，我們再詳細(xì)地說一說這個Banner問題到底出在哪里。

問題一：畫面沒有重點(diǎn)

因?yàn)椤安恋卮蛳灐边@幾個字號非常大而且是粗體，所以是引人注目的；但“一鍵噴水／快速清潔”這幾個字號雖然小但是用了亮黃色，導(dǎo)致信息也非常突出；還有價格698也突出，同時左邊的文案整體的面積和右邊商品圖的面積大小其實(shí)相差不大，所以左右的視覺吸引力其實(shí)也是相當(dāng)?shù)摹?/p>

那我就問你，從這張Banner看，你的第一視覺注意力是哪里？到底哪里才是重點(diǎn)？

嗯，沒有重點(diǎn)，因?yàn)槟愕脑O(shè)計(jì)里到處都是重點(diǎn)，所以就相當(dāng)于沒有重點(diǎn)。

問題二：文案表述有問題

他這里是將“擦地打蠟”四個字提取出來當(dāng)作大標(biāo)題來用了，但其實(shí)“擦地打蠟”只是跟他下面的小字“一鍵噴水／快速清潔”一樣的功能性描述文字，所以它們其實(shí)是平級的關(guān)系，但他在這里強(qiáng)行將其中一個功能描述文案提取出來做了突出強(qiáng)調(diào)，這么做也不是不可以，但這個強(qiáng)調(diào)的非常莫名其妙。

我站在一個用戶的角度去思考的話，如果我要買你這個拖地的機(jī)器，本質(zhì)上我要買的的是這個機(jī)器給我?guī)淼牡孛媲鍧嵑捅ｐB(yǎng)服務(wù)、省時省力服務(wù)等等，我在意的是這個，結(jié)果你讓我看“擦地打蠟”？然后還瘋狂促銷698元？

不知道的還以為你這是要提供擦地打蠟服務(wù)，一次698元呢。

但其實(shí)你是要賣這個機(jī)器對不對？

所以你這里其實(shí)是缺少一個類似于“XXXX拖地機(jī)專場”“XXX拖地機(jī)降價了！”這樣的文案，你要把你賣什么東西說清楚。

問題三：設(shè)計(jì)目的沒搞清

關(guān)于文案這一塊的排版，到底要突出什么文字信息，這就取決于你的目的是什么：

如果你想突出功能賣點(diǎn)，那你就把那3個功能賣點(diǎn)文案用一樣的設(shè)計(jì)樣式突出展示就好了，然后在產(chǎn)品圖周圍配合著做一些氛圍效果圖，其他的信息都可以處理的比這個信息弱一點(diǎn)；

如果你想突出利益點(diǎn)低價，那你就把價格這塊突出強(qiáng)調(diào)就好了，其他的信息都可以處理的比這個信息弱一點(diǎn)；

如果你想突出這個產(chǎn)品的型號或活動名稱，那你就把“XXX拖地機(jī)降價了！”這塊突出強(qiáng)調(diào)就好了，其他的信息都可以處理的比這個信息弱一點(diǎn)；

如果你想突出這個產(chǎn)品的外觀顏值，那你把產(chǎn)品圖搞精致一點(diǎn)，搞大一點(diǎn)，甚至可以放一些細(xì)節(jié)圖展示，其他的信息都可以處理的比這個信息弱一點(diǎn)；

如果你想突出這個產(chǎn)品的外觀顏值，那你把產(chǎn)品圖搞精致一點(diǎn)，搞大一點(diǎn)，甚至可以放一些細(xì)節(jié)圖展示，其他的信息都可以處理的比這個信息弱一點(diǎn)；

如果你想強(qiáng)調(diào)的是一種使用的場景代入感，那你可以把這個產(chǎn)品放在某個特定的場景環(huán)境里給大家看，用合成或攝影的方式都可以實(shí)現(xiàn)，文案排版依舊可以遵循上面的方式；

總之，你要突出展示什么內(nèi)容并沒有標(biāo)準(zhǔn)答案，這是由運(yùn)營目的決定的。

比如我隨手截圖一張?zhí)熵埵醉摰腂anner圖，看似很簡單，但是人家的信息層級關(guān)系很明確啊，雖然文字很多，但是你會跟著他給你的視覺指引走。

所以這個Banner我就看了幾秒我就知道了：“哦，賣智能馬桶的，可以滿1000減500，還能免費(fèi)拆舊換新，點(diǎn)進(jìn)去看看吧！～”

訣竅在于：

相同等級的文案信息在大小、顏色、字形、字號上盡量保持一致，不做得太復(fù)雜；

即便是相同顏色的字體，如果它們里面的信息層級是不一樣的，那么可以根據(jù)文案信息的重要層級做一些大小方面的區(qū)分；

其他著重想突出的文案信息可以通過換個顏色的方式跳出來；

（當(dāng)然我這里的舉例只是和你們探討視覺層級關(guān)系的處理，至于間距方面和美感方面的問題我們這里暫且先不討論。）

總之，你會發(fā)現(xiàn)，一個合格的電商設(shè)計(jì)師其實(shí)應(yīng)該是一個導(dǎo)演，同時是一名指引者，他在設(shè)計(jì)的時候思維是很清晰的：這一步他要你看什么，下一步他要你看什么，最終要把你帶去哪里，然后達(dá)到自己的某種目的。

而且假如自己功力還不夠的情況下，你可以保守一點(diǎn)，一幅畫面里最好只有一個主角，其他都是配角，把層級關(guān)系搞明確一點(diǎn)。

不要一上來就嘩啦嘩啦的全都搞成主角重點(diǎn)了，如果你是導(dǎo)演的話，你這是家里有礦啊還是喜歡搞潛規(guī)則啊，哪來這么多主角啊！～

寫在最后

很多人都對電商設(shè)計(jì)有一些誤解，比如一提到電商設(shè)計(jì)就覺得這個沒啥技術(shù)含量，再比如一提到電商設(shè)計(jì)就覺得要做出什么非常炫酷的效果才牛逼，其實(shí)這些思想都是不對的，那只能說明ta們對于電商設(shè)計(jì)的認(rèn)知太淺了。

如果你也比較迷糊，那么看完這篇文章，相信應(yīng)該是有一點(diǎn)開竅了吧。

而且越到后面你就越會發(fā)現(xiàn)這里面的奧秘多著呢，涉及到了運(yùn)營、營銷、新設(shè)計(jì)、文案、策劃、攝影、修圖、手工等等各種，非常有意思。