提高點擊率!banner 設計時 5 個藏在魔鬼裡的細節

不管製作哪種 banner ,尤其是電商類型,都通用的banner 設計要點

看完文章收穫
『 瘋狂被退稿的不服輸心態,banner 設計值得注意的方方面面 』


 — Cora 千錘百鍊的第 002 篇原創文章  —

初來乍到的勇氣

在選擇入職日期時,其實很糾結,到底要多休息幾天呢?還是直接展開未知的生活,人的惰性與逃避心理在作祟。

人生地不熟加上還沒開始工作,多一天不工作同時也代表更多不確定性。心一橫,提前到11月初入職,剛好趕上阿里十週年的雙十一。

2018年阿里十週年雙十一園區

深刻記得,在中國工作接到的第一個需求是 – 投放在淘系會員鏈路裡的一張 banner 製 作,原本天真以為製作 banner 應該不會太難,但我錯了,實際上並非如此。

由於崗位編制,很幸運搭配一位設計導師 – 老大,我所有的稿子,她只要說可以,那跟其他設計師合作上幾乎沒有問題,過了老大這關,後面無往不利一路綠燈。

老大 釘釘 Talk 對話

光改 banner 30次換來的領悟

一開始光 banner 調整了 30 次,後續各種介面設計的細節,每每都是改了50次以上….,深夜改稿是家常便飯,老鬍在旁邊偷瞄我狀況邊算的。

這邊不贅述,後面各種介面設計眉角的文章會分篇寫,需要耐心梳理總結的,只是想起來感觸酸酸甜甜。



一開始天真的樣子

先看一開始做出來瘋狂被退回的幾版,這邊挑出四個比較具有明顯差異性的(現在看之前仍慘不忍睹,但起碼知道問題在哪。)

練習版本模擬示意圖

設計修修改改也在情理之中,但每發出一版,老大就婉轉並客氣說:還有更多的優化空間啊,多嘗試。

言下之意就是這版不能用,只能不斷嘗試。

那時候我最想知道:好希望有人可以告訴我到底要怎麼調整,問題出在哪裡?哪個元素要再調整才會更好?

很久之後,通過多次老大出手相救,現在也能評斷出問題點。

設計修修改改很正常,一次兩次三次沒過也正常,最怕是沒有方向跟不知道問題在哪邊。



製作 banner (橫幅) 要點

理解業務內容、投放位置、製作尺寸

∷ 理解負責的業務內容

舉例:
同樣是會員鏈路下,
➙ 會員中心:目的是利用購物得到的積分兌換,再去不同店家進行關注等操作,獲得更多積分進行商品消費折扣。
會員店:目的是開通會員,再利用紅包、折抵券來進行消費。

會員中心 / 會員店

一個運用已有的購物積分,一個需要花錢開通會員享有更多折扣。這兩者本身需要達到的目的性不同,連帶投放位置不一樣、製作內容與尺寸也不會相同。




banner 內容的製作細節

ⓐ 文字 – 大標題、小標題字數
配置的文字多數來源於運營給的文字內容,當拿到文字內容要開始製作時,要考慮排版上語句是否通順?字數長短是否需要因為版面而調整?閱讀上是否合理?而不是單純的人家給什麼放上去就好了。

banner 細節說明示意圖

行動點 – 字數與內容、樣式
行動點目的是讓瀏覽者通過引導方式採取點擊動作,在視覺上有明顯暗示行為。文字內容常見為了解詳情、點擊這裡、立即查看、GO 等等…

因此在樣式上,顏色填滿?單純線框?填滿的色塊比線框樣式更讓人想點嗎?配色上,藍色比紅色更刺激讓消費者想點嗎?都值得嘗試。

哪個讓人更想點擊呢? (資料來源:花瓣网

ⓒ 背景 – 元素使用
是不是覺得:阿不就是❶的配圖 + ❸的氛圍 + ❹的元素組合起來就好?好像是欸,但是為什麼?為什麼那樣可以,阿這樣不行,是在買樂透賭一把組合機率嗎?

嗯,當然不是。

練習版本組合圖說明

為什麼❷的圓形元素不行,❹的線條可以❓

中國電商每個業務體系下都有屬於的一套規範,如:淘系的88 VIP,已有一套規範好的顏色與背景及相對應能使用的元素,在非特定場景情況下,只能靈活使用並做適當的變化。

所以不是隨便拿一個圓形丟上去就好,如果可以那正方形也行,幹麼一定要用線形。

簡略規範模擬示意圖

如果設計只會盲目拼拼湊湊跟修修改改,不懂它的可行性或局限性,也不理解原理為何?那還是別做了吧。


ⓓ 配圖 – 圖片內容
假設 banner 放在商品導購頁做投放,目的要增加商品賣出機率,那配圖直接聯想應與商品有關。

反之,目的為促使用戶開通付費會員,付費後享有的會員權益有哪些?是否開通一個帳號能同時使用其他 APP ?是的話,那配圖是不是能延伸不同 APP logo 來輔助呢?

會員權益頁面 / 首焦廣告商品透出

ⓔ 其他 – 氛圍烘托、構圖方式
兩者是相輔相臣的存在,同樣相似的圖片,為什麼有一者優於對方,取決於精細程度。以例圖來說,會覺得都很相似,但仔細看發現物品的光影主體層次與背景融合的不到位,這完全看個人功力。(儘管我非常討厭做banner,但也有一堆需要加強的地方)

細節連接的差異示意圖

❸ 整體總結:

∷ 重點大方向 ∷
理解業務 ➙ 知道投放位置 ➙ 決定製作內容、尺寸大小

∷ 製作細節 ∷
ⓐ 文字 – 大標題、小標題字數 ➙ 閱讀舒適與排版合理性
ⓑ 行動點 – 文字內容、樣式 ➙ 怎樣做能提高目標?(點擊率/轉化率等)
ⓒ 背景 – 元素使用 ➙ 根據規範是否能靈活運用
ⓓ 配圖 – 圖片內容 ➙ 看此 banner 投放位置,需要達到目的是什麼
ⓔ 其他 – 氛圍烘托、構圖方式 ➙ 精細程度與整體處理,完全取於個人功力和技巧(多看案例)

∷ 最後確認 ∷
整張 banner 完成後,也要顧及手機介面中已有的規範並達成一致性,所有東西都是閱讀整體性,達到合理性同時也要有靈活運用的創意表現 ☺

越挫越勇的嘗試

說心裡話,
其實有本篇文章,一方面是記錄持續成長的過程,一方面是之前在台灣設計工作時多次不明不白的修修改改很多次。

很常遇到老闆的需求如聖旨,不改不行,想要不改也找不到一個好的說服理由,或是有理有據的回覆與發出質疑,這也是曾經崩潰到想要放棄繼而產生出逃離的念頭。

正因為這股受不了的情緒,促使後來到中國工作,繼而悟出此篇文章。

最後放上一些當天趕稿完,第一次體會的景象。

11/11 這天會掛很多的宣傳
夜晚繽紛的園區



Banner 設計只是介面設計中的其中一環,相關 UI 設計系列文章:

💡 品牌定位、產品心智帶入,影響細節、整體舒適度:
影響品牌成敗,設計 icon 圖標容易忽視的 2 個細節

💡 選擇照片、文字排版,影響頁面整體閱讀、產品曝光展示率:
凸顯產品優勢!提高圖片瀏覽量 3 個選擇心法

這篇文章有幫助到您嗎?歡迎留言跟我說 ~

Hi ,我是 Cora – UI 設計師,興趣畫室內3D渲染圖,提供設計相關服務 (點擊去瞧瞧作品),今年過著自由接案的間隔年生活,歡迎來找我聊天。

如果想找人說說話,也剛好喜歡寫文字的我,不侷限任何事情或單純發設計案子給我,在下方留言區輸入電子郵件並認真寫下內容,我真的會在收到信息後仔細回覆您哦 😉

喜歡文章免費 👏 按 5 下 Like 及點擊『收藏』,我將收到鼓勵與有機會得到錢錢!祝順心,下篇見了

4 thoughts on “提高點擊率!banner 設計時 5 個藏在魔鬼裡的細節”

  1. 好同意你的文章喔,我也是剛從菜鳥設計師轉變的設計師
    以前只會抱怨業主,但是經歷了這一兩年職場洗禮。
    才發現有很多自己應該要虛心檢討的地方

    1. 謝謝你的留言,看到很激動🥰。
      真的,隨著時間推移,
      先看看自己,真的會發現有很多不足進步的空間。
      我現在也是如此,讓我們一起進步~🤝

  2. 這種用途的banner要改到50次?我覺得只是在浪費時間。
    我相信你做的50種banner上去的效果九成都一樣,
    你也不是沒有受過訓練,
    只要提供的元素意義、資訊重要性的排版正確,
    真的差不了那麼多。

    1. 很感謝你的閱讀,我當初在瘋狂修改過程中也覺得非常耗時,也會疑惑多次反覆修改對於實際成效的差異,常常很沮喪,不過我想這就當作給自己的設計修煉了😂。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top