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

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

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

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

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

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

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

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

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

2. 風格和選色 

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

 紅色：熱情、力量、性感

 橘色：友善、溫暖

黃色：活力、天真、活力

綠色：健康、清新、和平

藍色：冷靜、信任

紫色：神秘、尊貴、科學

灰色：樸素、中立

黑色：專業、高雅

舉幾個例子：

溫暖 v.s. 清涼

                             圖片來源                                                                   圖片來源

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

清爽 v.s. 奢華

圖片來源：甜味之間

 積極 v.s. 平靜

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

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

3. 版面設計

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

• 左右分割

將畫面分成左右兩邊來進行圖文排版，重點清晰一目瞭然

圖片來源：時寓

• 置中擴散

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

圖片來源：BHK's

• 半透明覆蓋

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

圖片來源：貓樂園

• 上下排列

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

圖片來源：妍霓絲

4. 重點強調

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

• 小圖示

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

• 數字放大

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

• 變換樣式

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

• 加背景

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

5. A/B測試

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

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

• 任選2件五折

• 買一送一

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

• 原價 1000 限時 8折

• 原價 1000 現省 200