雙 11 剛過，雙 12又來了

每年這個時候

作為一名設(shè)計師，真的很難...

老板壓著做電商 banner

還有很多人指指戳戳讓你改稿

好不容易按照別人的想法過稿

結(jié)果banner 的點擊率還不高

其實，只需要稍微調(diào)整視覺重點

你的電商banner 就會變得變得更吸引人！

這次讓平面設(shè)計實戰(zhàn)營講師@HE毛蛋?

幫你解決banner 設(shè)計中的常見問題之：

「如何解決Banner畫面空洞，提升視覺效果？」

本文主要包括以下?3 點

1. 畫面不吸引人的 4 個常見問題

2. 必須突出重點的 3 個理由

3. 解決畫面空洞的 4 大常見手法

下面為正文?

相信不少剛接觸banner設(shè)計的同學(xué)，你會經(jīng)常遇見這樣的問題：

做出來的 banner，整體的視覺重點不明顯，畫面空洞，看起來平平無奇，無法吸引人。

面對這些情況，要怎么才能做出點擊率高的 banner 呢？你可以這樣做：拆解banner的視覺層次，分析導(dǎo)致banner“平淡無奇”的原因或問題，再思考解決辦法調(diào)整 banner 。流程如下：

下面，我會用案例來詳細說明如何做：

01

為什么你的banner不夠吸引人？

首先，我們來說說「畫面不夠吸引人點擊」的問題，因為知道問題出在哪里，你才會有針對性的改改改。一般會有4個問題：1. 畫面失去焦點；2. 畫面留白過多，單調(diào)空洞又枯燥；3. 畫面太擠，導(dǎo)致“臟亂差”；4.?細節(jié)無修飾，畫面真會“平平無奇”?接下來，我用一些不同錯誤類型的banner舉例，解析畫面出現(xiàn)缺陷的真正原因。1.?畫面失去焦點該banner的情況：目標(biāo)主體與背景的對比不足，從而導(dǎo)致畫面的焦點缺失，對于banner這種通常需要引導(dǎo)用戶點擊，吸引用戶關(guān)注的內(nèi)容，畫面的焦點缺失則為致命傷。

該初稿中，售賣的產(chǎn)品主體模糊不清,識別度低。對于信息展示層級較為紊亂,較難將重點信息更快更方便的傳遞至用戶視線中。并且畫面整體重心不平衡，文本信息的編排中，行距，字重等細節(jié)對比太大，容易造成信息閱讀的斷層，導(dǎo)致閱讀體驗較差。

修改后的主體呈現(xiàn)簡潔清晰,通過漸變色塊調(diào)整畫面重心與聚焦中心，這樣便可使得主體在畫面中的層級更高。文字信息的重新編排合理調(diào)整了不同層級之間的文字對比，讓閱讀體驗更加良好。

2.?畫面留白過多，單調(diào)空洞又枯燥?這種畫面就屬于大家都很常見的問題，除了主體素材和文字，其他一臉懵。導(dǎo)致畫面留白過多，變得單調(diào)空洞且枯燥。

在這份初稿中，我們可以看到畫面中的視覺元素過于單一。除了需要傳遞的文本信息與素材以外，畫面其實就只有幾塊拼接的色塊。對于整體畫面而言，畫面留白過多，視覺效果單一，非常容易導(dǎo)致觀感枯燥。其中主標(biāo)題字效與主題關(guān)聯(lián)性弱，且整體的文本編排比較凌亂。這些都是導(dǎo)致這個banner單調(diào)枯燥的原因。

修改后,通過添加場景并借助場景細節(jié)彌補畫面留白的單調(diào)。通過主題相關(guān)的元素修飾主體增強其在畫面的對比,利用細節(jié)豐富的字效以及明顯的色彩對比,以此突出畫面的重點。

3.?畫面太擠，導(dǎo)致“臟亂差”如果說剛剛的常見問題是畫面太空，那么這個則剛好相反，用力過猛，整體畫面太擠。最后容易導(dǎo)致畫面“臟亂差”。

畫面使用了大量的強對比高飽和色彩元素,并且充斥在畫面的各個角落。在太過紛雜的畫面中我們在閱讀信息的過程中,視線很容易受到其他元素的干擾,導(dǎo)致閱讀中斷。而且紛雜的畫面還會影響banner主體的展示，降低其視覺層級。

修改后的 banner 將信息布局合理地放置在各個劃分好的區(qū)域中。色塊與色塊之間，還有低彩度的色彩作為降低強烈對比的手段。畫面使用的元素簡繁的比例進行了調(diào)整，有效的避免原有的“凌亂”視覺觀感，為主體的突出掃清障礙。

4.?細節(jié)無修飾，畫面“平平無奇”還有一種情況是大家做完后，發(fā)現(xiàn)明明排版沒問題，但仍然很“普通”。這種情況通常是因為沒有對畫面細節(jié)進行修飾，最后只能得到一個“平平無奇”的結(jié)果。

上圖文案信息與重點素材的布局中規(guī)中矩，整體畫面的視覺層次單一視覺上的整體效果并不突出。整體的畫面氛圍太大眾化，難以使用戶視線停留。

通過替換擁有更為豐富且?guī)в兄攸c素材的背景，將所有文案信息增大對比且進行居中對齊后的畫面，聚焦的作用更為明顯。

為增強主題特點的關(guān)聯(lián)性，對主標(biāo)題字體進行重設(shè)計并增加對比與字效。在整體視覺上達到了畫面和諧且細節(jié)豐富的同時，還具有一定的聚焦能力，能夠讓用戶快速獲取核心信息。

02

為什么要強調(diào)畫面重點？

對于以上幾種情況，我們可以從畫面的視覺層次上入手，在背景與畫面視覺元素和諧的情況下，強調(diào)畫面重點。為什么我們需要強調(diào)畫面重點？這里有 3 個原因：原因一：banner 用于引流宣傳,必須突出重點第一個是banner的一般屬性所決定的，banner設(shè)計輸出的產(chǎn)物，大多情況下的需求就是為了引流或宣傳，當(dāng)凸顯畫面的重點后，才能更容易引起用戶的興趣，使其產(chǎn)生點擊欲望。

原因二：幫用戶快速抓取有效信息，讓用戶停留視線因為在網(wǎng)頁的瀏覽中若要讓用戶的視線快速抓取到有效信息，最為直接有效的做法就是通過突出banner中的畫面重點，與頁面中的其他元素產(chǎn)生區(qū)分與對比，讓用戶的視線停留。通過畫面中鮮明的色彩對比，增強視覺吸引力。在瀏覽網(wǎng)頁時，仍然能夠從眾多的信息中心找到這個banner。

??

作者：安全蛋原因三：拉開畫面層級，避免用戶閱讀信息沒有引導(dǎo)防止畫面過于單調(diào)，突出畫面重點，另一個含義就是拉開了畫面的層級。這樣可以有效避免畫面無焦點，導(dǎo)致信息閱讀缺乏引導(dǎo)，畫面缺乏吸引力。

03

如何解決畫面空的問題？

在banner設(shè)計的過程中，為了避免摸不著頭腦，或者丟了重點。做圖前，首先我們應(yīng)該考慮當(dāng)前banner的宣傳核心(中心要義/產(chǎn)品)，再從相應(yīng)的活動中找到合適的畫面重點形式。緊隨其后的就是“突出”畫面的重點，通常我們從兩個方向增強畫面重點：方向一：修飾畫面重點主體物；方向二：增加背景與重點的對比，凸顯主體物方向一：修飾畫面重點主體物1. 首先，對于主體的修飾，有一些常見的手法類型：(1)重復(fù)排列(2)打光聚焦(3)細節(jié)展示(4)呼應(yīng)元素接下來我們通過幾個例子逐個來看一下，這些手法實現(xiàn)的方式與思路：(1)重復(fù)排列重復(fù)排列「重點信息/元素」，這樣的布局可以增強信息/元素的辨識度，讓畫面產(chǎn)生相應(yīng)的秩序感。就如下圖，重復(fù)排列「襯衣」，不僅能夠產(chǎn)生秩序感，斜項排列法，還能幫助凸顯產(chǎn)品的文字信息。

在畫面背景不斷重復(fù)的產(chǎn)品樣式,加強辨識度的同時，也為了不同視覺屬性的信息更好的做出對比,在豐富而規(guī)律的背景下，形成聚焦。

而且不同類型的重復(fù)排列，只要在畫面中的面積，重復(fù)的基本單位足夠小，我們就能將其視為畫面中的一個“點”，再擴展到“線”“面”等的作用。這樣重復(fù)的單位，甚至能夠為畫面帶來不一樣的展示形式。比如下圖，排列作為「點」的茶具，再擴展成線，可以引導(dǎo)讀者去閱讀上面的文字。

按照一定規(guī)律排列的重復(fù)元素，可以具有方向性，或者在畫面塑造造型，形成視覺重心。還能引導(dǎo)瀏覽方向與閱讀順序。(2)打光聚焦打光聚焦就如同舞臺上的主角身上的聚光燈一樣，為主體元素進行打光，能夠有效拉開其余畫面周圍元素的對比，形成聚焦。

除此之外，你還可以通過不同色彩的“光”，形成新的對比，以及不一樣的畫面氣質(zhì)。下圖就是用光聚焦人物主體人物，分開背景，又可以讓人物與左邊暗部的文字產(chǎn)生對比。

by Insigniada

通過打光的效果可以使得畫面重點具備有區(qū)別于背景的亮度,然后通過亮度對比形成的聚焦,可以以此提升重點所受到的關(guān)注度。

(3)展示細節(jié)展示細節(jié)是最為簡單，也是最麻煩的一種情況，最為簡單的是：只要足夠多的素材，或者元素細節(jié)，那么我們就可以通過放大的形式，來直接呈現(xiàn)最為細膩的細節(jié)，以此凸顯品質(zhì)。

而麻煩的點則是：如果元素細節(jié)不足、素材質(zhì)量差的話，那么在banner的畫面中，將重點的“缺點”無限放大，形成的只是簡陋而單調(diào)的畫面。下面的 banner 就采用了優(yōu)質(zhì)的素材圖，再用體現(xiàn)高級的黑白橙顏色組，展現(xiàn)出產(chǎn)品的質(zhì)感和品質(zhì)。

by MD Rashed Mamun

將精致的素材細節(jié)以較大的面積占比在畫面中呈現(xiàn)，能夠起到支撐版面的作用，同時，也提升了畫面的豐富度。這種細節(jié)展示的手法，在素材質(zhì)量優(yōu)秀的情況下，對于用戶瀏覽時的觀感有不少的提升。

(4)呼應(yīng)元素在符合banner主題的情況下，我們能夠為畫面主體物添加各種裝飾性的相關(guān)元素。這種方式能夠增加主體與banner主題的相關(guān)性，以及可以讓主體獲得“聚焦”的效果。

通過主題相關(guān)性的元素與畫面重點的組合,能夠形成一個新的畫面重點。并且可以加強其在畫面中的話語權(quán)。在這之下，細節(jié)更多的畫面重點與背景的視覺層級差距將會更加明顯，從而達到聚焦的目的。方向二：增加背景與重點的對比，凸顯主體物通過增加「背景」與「 畫面重點主體 」的對比，我們可以拉開兩者之前的層級，從而達到“凸顯”的目的。而對于背景的塑造，有以下的幾種常見形式：(1)色塊(2)漸變(3)疊印(4)場景接下來,同樣通過幾個例子，我們來看下如何凸顯不同背景的畫面重點：1.?色塊我們所說的色塊并非單一色塊作為背景的形式。當(dāng)然，如果留白較多的畫面，單一純色塊適合用于呈現(xiàn)主體物的背景。而多個色塊，我們可以通過拼接的形式，凸顯畫面重點。如下圖所示：

通過局部的色塊面與周圍的色彩形成的明顯對比，從而將視線引導(dǎo)至色塊面上的畫面重點。

通過不同色塊面相接處所形成的切割線，對視線形成線性的方向引導(dǎo)。2.?漸變當(dāng)畫面的背景使用漸變時，除了可以通過漸變的不同形式，為背景帶來不同的變化；還可以制作“炫彩”的背景，進行不一樣的畫面聚焦。

少量色彩的線性漸變能夠模擬平行光照射的效果，從而產(chǎn)生類似光線照射引導(dǎo)視線的作用。

徑向漸變背景的聚焦，類似色塊面的聚焦與打光聚焦的結(jié)合，通過與周圍色彩的對比而聚焦對象。

多種色彩的混合漸變，能夠?qū)ι瘦^為單一畫面重點形成強烈的色彩群組與純色之間的對比。

3.?疊印

疊印的形式可以分為：「元素疊印」和「材質(zhì)疊印」，不同的疊印形式為整體帶來的觀感視覺是不一樣的。

利用大量元素的疊印，成為畫面中規(guī)律或不規(guī)律的背景，大多通過與畫面重點的“多少”、“大小”所形成的差距而制造對比。

使用細膩的自然材質(zhì)肌理疊印于畫面背景之中，與畫面重點形成“簡繁”的明顯對比。

?4.?場景場景背景的塑造，你可以用較為現(xiàn)實的空間，讓人一下子就識別出畫面重點。不過，制作這種形式較復(fù)雜，因為它可能會影響到主體的光影，而且需要一定量的素材+合成手段，才能達到舒適的視覺效果。

通過合適的素材以及適當(dāng)?shù)暮铣墒侄?#xff0c;將背景與畫面重點合理地融入一個空間中，這能夠讓用戶在熟悉的場景中快速獲取信息。

當(dāng)你合理編排好 Banner 之后，再同步進行這兩種方式，畫面重點的突出效果會有一定提升。

但是對于整體畫面而言，畫面重點并非全部，你還需要檢查和完善畫面存在的其他問題，這樣才能最大程度發(fā)揮出 banner 的價值。Banner雖然看著簡單，但是你想要把信息最大化展示，達到最佳的帶貨效果，也是很講究的！哪怕相同的產(chǎn)品，不同的設(shè)計，如果顏色、產(chǎn)品擺放數(shù)量不同，都會使點擊率相差好多倍！如果你想要做出高轉(zhuǎn)貨率的banner，你還需要系統(tǒng)學(xué)習(xí)色彩搭配、消費者心理學(xué)、版式布局、字體的使用等等。

優(yōu)設(shè)平面設(shè)計實戰(zhàn)營

即將開課！

?? ? ? ?? ? ? ??

現(xiàn)在介紹下這門平面設(shè)計必修課：「優(yōu)設(shè)平面設(shè)計實戰(zhàn)營」

核心訓(xùn)練原創(chuàng)能力，培養(yǎng)具備專業(yè)素養(yǎng)的設(shè)計師，先從設(shè)計理論開始，為你打好平面基礎(chǔ)，再經(jīng)過層層原創(chuàng)實戰(zhàn)考核，像玩游戲般打怪通關(guān)。

掃碼添加課程咨詢師

私聊并發(fā)送暗號【1201】

可獲得?30?元粉絲專屬優(yōu)惠卷哦

課程介紹

?????????????????????????????????????????????????

透過字體的細節(jié)特征、明確它的使用場景，掌握字體搭配的秘訣，讓你的文字組更有品質(zhì)。

?? ? ??? ? ? ??

通過文案的梳理，學(xué)會信息層級的劃分，結(jié)合平面構(gòu)成等理論知識，讓你創(chuàng)作出富有變化的版面。

同時解決“什么是好圖片，如何找到好圖片，好圖片該怎么使用”這一系列問題，結(jié)合圖片調(diào)整，教會你版面中的圖片使用方法。

?? ? ? ?? ? ? ?

還會從色彩構(gòu)成開始，學(xué)習(xí)色彩的理論與使用邏輯，并以此搭配出不同風(fēng)格的作品。

? ? ? ?? ? ?

另外，設(shè)計師也需要從文案角度思考，了解常見的消費心理、學(xué)會提煉有效信息的技巧，誘發(fā)用戶點擊的文案技巧。

? ? ? ? ?? ? ?

距離真正接觸商業(yè)項目，你還需要具備綜合拓展能力，每次作業(yè)考核，我們將鍛煉你解決問題的能力，訓(xùn)練你把一張圖延展成多張系列作品，適配不同場景，提升對視覺的綜合把控。

?? ?? ? ? ?

進入平面設(shè)計實戰(zhàn)營

你即將擁有以下超值內(nèi)容

除了課程本身內(nèi)容以外，進入『優(yōu)設(shè)平面設(shè)計實戰(zhàn)營』，你即將擁有：

? ? ? ? ?? ? ? ?? ? ? ? ? ? ??

1.不擅長和甲方溝通？沒關(guān)系！設(shè)計理念陳述訓(xùn)練，幫你提高溝通力。

? ? ? ? ? ? ?

2.還想繼續(xù)學(xué)習(xí)？想有個交流溝通的專業(yè)設(shè)計圈？進階營里，往期學(xué)員們在等你！

? ? ? ? ? ? ?

3.想深入學(xué)平面？形成枝葉繁茂的平面知識樹？我們特意加贈 15 節(jié)福利小課堂！

? ? ? ? ? ? ?

4.擔(dān)心人太多，老師點評不到你的作業(yè)？所有作業(yè)，老師都會一對一語音幫你梳理思路，檢查設(shè)計合理性，有針對地指出問題。

? ? ? ? ? ? ?

5.覺得審美不行，不知道怎么取他人作品之長處？每天審美訓(xùn)練幫你提升分辨能力和分析能力。

? ? ? ? ? ? ?

6.時間花在找優(yōu)質(zhì)素材？老師們常年積累的資料包、大佬作品集等等，都等你早點進群領(lǐng)取

? ? ? ?? ? ? ?

「優(yōu)設(shè)平面設(shè)計實戰(zhàn)營」的所有內(nèi)容，可能都是你無法在校園教科書里學(xué)到的。

課程適合每一位對平面設(shè)計感興趣的你，課程摒棄枯燥填鴨式教學(xué)，通過商業(yè)實戰(zhàn)考核，以及大量優(yōu)秀案例，引導(dǎo)你建立自己的平面思考能力。

每幅優(yōu)秀的設(shè)計作品背后都有跡可循，平面營老師們認為學(xué)習(xí)各種技巧理論都只處于淺層，學(xué)會運用已有知識，反復(fù)思考設(shè)計背后的底層邏輯，用專業(yè)能力滿足客戶和市場的需求，才能成為一名會思考不可替代的平面設(shè)計師！

現(xiàn)在掃碼添加課程咨詢師

私聊并發(fā)送暗號【1201】

可獲得?30?元粉絲專屬優(yōu)惠卷哦

? ? ?

看更多課程詳情哦

總結(jié)

以上是生活随笔為你收集整理的qdialog 只有点击才能获得焦点_4 个突破点，让你的 Banner 点击率提升10倍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。