轉換加分題,網站素材設計

2019-07-16 13:32:00 回應( 經營小技巧

 

在電商這個幾乎可說是第一眼決勝負的戰場,網站上素材的設計顯得格外重要。
要如何設計吸睛且有效的素材呢?



1. 確定每一個素材要達到的目標

 

在網站中可以放素材的版位很多,在製作之前先問問自己:「這個素材我要放在哪裡?客戶會在什麼情況下看到他?我希望客戶看完後做什麼動作?」

 

之前和大家分享過延長訪客停留時間的流程設計,網站中的內容其實是環環相扣的,因此有時候我們在設計素材時,不能只考慮「單一」素材,而必須拉高到整個「流程」的視角,也許需要設計「一組」素材,才能發揮出COMBO技不斷打中客戶。

 

舉例來說,如果今天你要做一檔「玩水必備防曬 2件8折」的活動,那你可能會需要:

 

首頁Banner:引起客戶興趣,引導下一步點擊到活動頁

活動頁:詳細說明活動內容,引導往下滑選擇商品

商品圖:商品外觀、售價一目了然

商品介紹頁:商品介紹、使用情境、客戶見證等內容

 



2. 風格和選色 

 

不同的顏色其實會給人非常不同的印象,在設計素材時,除了考慮品牌本身風格外,也可以依據活動內容或要主打的商品,來選擇合適的色調。

 

 紅色:熱情、力量、性感

 橘色:友善、溫暖

黃色:活力、天真、活力

綠色:健康、清新、和平

藍色:冷靜、信任

紫色:神秘、尊貴、科學

灰色:樸素、中立

黑色:專業、高雅



舉幾個例子:

 

溫暖 v.s. 清涼

 

                             圖片來源                                                                   圖片來源

同樣是防曬產品,橘黃色給人非常耐曬的感覺;藍色則給人清爽保濕的感覺

 

清爽 v.s. 奢華

 

圖片來源:甜味之間




 積極 v.s. 平靜

 

一般來說,綠色是一個比較不容易引起消費者購買衝動的顏色,因此如果是做促銷、下殺相關比較價格敏感的活動時,建議避開這個顏色選擇。

 

(對於配色比較苦手的話,也可以參考:實用的素材製作小工具)




3. 版面設計

解決了風格色系,接下來到了排版的問題,常見可快速應用的排版形式有以下幾種

 

左右分割

置中擴散

半透明覆蓋

上下排列

         



  • 左右分割

將畫面分成左右兩邊來進行圖文排版,可快速置換圖片

圖片來源:Color C’ode 凱莉小姐




  • 置中擴散

文案置中,圖放於兩側,適用於一次必須展現多樣商品的情況

圖片來源:jojome 悄悄美




  • 半透明覆蓋

適用於圖片畫面較豐富,難以擺放文案時,可以考慮使用區塊遮罩,再將文案至於遮罩上方

圖片來源:時間寵愛




  • 上下排列

不在圖片上下手,直接於下方新增如字幕般的區塊來擺放文案。

圖片來源:妍霓絲

 

4. 重點強調

 

有時候Banner 裡面想溝通的內容比較多的時候,適時運用一些小圖示或強調的手法,能夠更凸顯想要傳達的內容。

 

  • 小圖示

將促銷相關的文字,例如折扣%數、限量、特價等字詞,放在小圖示中

  • 數字放大

將重點數字放大凸顯,例如「買一送一」、折扣後「金額」等

 

  • 變換樣式

善用底線、換顏色、不同字型等方式,將部分文字凸顯出來

 

  • 加背景

在一大串文字中,可以利用加背景光線、加背景顏色的方式,來讓特定文字變得更明顯





5. A/B測試

其實不只是平常下廣告時需要準備好幾組素材進行A/B測試,製作站內素材時,也可以不斷進行優化。

 

例如折扣的包裝方式,同樣的價格,可以用不同的方式寫:

  • 任選2件五折

  • 買一送一

 

如果是特定品項的促銷,也可以嘗試看看是寫出折扣比較吸引客戶,或是直接寫出省下的價格比較吸引客戶,例如:

  • 原價 1000 限時 8折

  • 原價 1000 現省 200