雙 11 剛過，雙 12又來了

每年這個時候

作為一名設計師，真的很難...

老板壓著做電商 banner

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

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

結果banner 的點擊率還不高

其實，只需要稍微調整視覺重點

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

這次讓平面設計實戰營講師@HE毛蛋?

幫你解決banner 設計中的常見問題之：

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

本文主要包括以下?3 點

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

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

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

下面為正文?

相信不少剛接觸banner設計的同學，你會經常遇見這樣的問題：

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

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

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

01

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

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

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

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

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

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

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

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

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

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

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

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

通過替換擁有更為豐富且帶有重點素材的背景，將所有文案信息增大對比且進行居中對齊后的畫面，聚焦的作用更為明顯。

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

02

為什么要強調畫面重點？

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

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

??

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

03

如何解決畫面空的問題？

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

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

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

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

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

by Insigniada

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

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

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

by MD Rashed Mamun

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

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

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

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

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

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

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

多種色彩的混合漸變，能夠對色彩較為單一畫面重點形成強烈的色彩群組與純色之間的對比。

3.?疊印

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

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

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

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

通過合適的素材以及適當的合成手段，將背景與畫面重點合理地融入一個空間中，這能夠讓用戶在熟悉的場景中快速獲取信息。

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

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

優設平面設計實戰營

即將開課！

?? ? ? ?? ? ? ??

現在介紹下這門平面設計必修課：「優設平面設計實戰營」

核心訓練原創能力，培養具備專業素養的設計師，先從設計理論開始，為你打好平面基礎，再經過層層原創實戰考核，像玩游戲般打怪通關。

掃碼添加課程咨詢師

私聊并發送暗號【1201】

可獲得?30?元粉絲專屬優惠卷哦

課程介紹

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

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

?? ? ??? ? ? ??

通過文案的梳理，學會信息層級的劃分，結合平面構成等理論知識，讓你創作出富有變化的版面。

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

?? ? ? ?? ? ? ?

還會從色彩構成開始，學習色彩的理論與使用邏輯，并以此搭配出不同風格的作品。

? ? ? ?? ? ?

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

? ? ? ? ?? ? ?

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

?? ?? ? ? ?

進入平面設計實戰營

你即將擁有以下超值內容

除了課程本身內容以外，進入『優設平面設計實戰營』，你即將擁有：

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

1.不擅長和甲方溝通？沒關系！設計理念陳述訓練，幫你提高溝通力。

? ? ? ? ? ? ?

2.還想繼續學習？想有個交流溝通的專業設計圈？進階營里，往期學員們在等你！

? ? ? ? ? ? ?

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

? ? ? ? ? ? ?

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

? ? ? ? ? ? ?

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

? ? ? ? ? ? ?

6.時間花在找優質素材？老師們常年積累的資料包、大佬作品集等等，都等你早點進群領取

? ? ? ?? ? ? ?

「優設平面設計實戰營」的所有內容，可能都是你無法在校園教科書里學到的。

課程適合每一位對平面設計感興趣的你，課程摒棄枯燥填鴨式教學，通過商業實戰考核，以及大量優秀案例，引導你建立自己的平面思考能力。

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

現在掃碼添加課程咨詢師

私聊并發送暗號【1201】

可獲得?30?元粉絲專屬優惠卷哦

? ? ?

看更多課程詳情哦

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。