Yahoo奇摩購物中心 網站白皮書
廠商版
白皮書 > 活動頁規範 > HTML活動頁 > 活動頁
活動頁規格
HTML檔案命名

命名公式:all-00-日期-自定.htm
例:all-00-180624-onsale.htm

    HTM命名可以使用的字元有
  • 英文字母大小寫 “a ~ z
  • 阿拉伯數字 “0 ~ 9
  • dash (橫線) “-
版面尺寸與K數限制
Desktop大看板 寬950,高建議700 以內
APP/Mobile大看板 寬640,高建議800 以內
頁面K數總和 10MB以內
其他限制

HTML編碼
使用Big5編碼,非Big5編碼前台產出的頁面可能會產生亂碼。

CSS
CSS請一律寫在HTM的style sheet內,請不要使用inline或是獨立CSS檔寫法。

java script
不支援JS檔以及JS語法。如需滑鼠變換影像效果,請使用css hover寫法。

圖檔切片
不規則的切片可能導致圖片間出現間距。請統一水平裁切或使用大區塊單圖。(本頁下方有專欄說明)。

iframe
iframe僅接受youtube影片內容。

超連結
所有連結僅限購物中心站內頁面,行銷部門核准的特殊專案除外。連結其餘規範請參考廣告連結設定原則

看板、Banner規範
設計原則
  1. 畫面中的主標與商品主體需簡潔明確,背景單純、適度留白。
  2. 設計時請儘量做整體性編排,避免做版面切割、小圖拼貼呈現以防畫面破碎。
  3. 使用原廠形象圖或模特兒於於活動看板與Banner上時,請務必確認圖上重點商品為購物中心販售商品。以加強銷售關聯性。
標題與內文編排
  1. 字型運用不超過3種、避免使用過多特效。
  2. 文字占比建議不超過整體圖像1/3。
標價格式

標價請參考以下結構與樣式設定 (顏色可依設計風格調整)。
點此瞭解更多標價格式規範

標題內售價表現規範

購物金、刷卡金、滿額折、折價券領券折 表現規範

手機版看板、Banner建議
精簡文案

廣告充斥在現實生活各個角落,用戶對於廣告的映像是惱人、到處都是、垃圾等負面想法。到底有多厭惡呢?國外研究數據顯示,用戶目光在每則廣告上停留的時間平均只有一秒上下。所以如果你的廣告訊息需要二至三秒以上才讀得完,那麼只怕你是在白費力氣,大部分用戶早已走遠了。

放大文字

不要忘記這是在手機螢幕上呈現的廣告,若你還用電腦桌機上的文字設計邏輯,那就大錯特錯。要記得手機上的銀幕小得多,過往在電腦上可閱讀的最小字是12pt,但這個字級放在手機螢幕上根本無法辨識。良心建議,行動裝置上廣告內最小字級設定至少需是電腦上的2到3倍大,也就是24pt以上,越大越清楚!

勿用細明體/新細明體

如此纖細的字體,你可以想像再把它縮手機螢幕上呈現時,他會有多單薄。用單薄的文字或影像推銷商品實在不夠有力。該用什麼字體好?黑體字系列是你可以優先考量的選項。

節制使用特殊效果

使用特殊效果有助於抓住目光,但是過多的特效則不免讓人感覺俗氣與商業化,犧牲了廣告質感與閱讀上的舒適度;此外,用戶在接觸明顯的推銷行為時,也可能對其產生防衛心態而選擇迴避。正所謂 物極必反,效果適度就好。

鞏固主軸 降低干擾

商品或主標訊息永遠必須是廣告裡的主角,你必須讓用戶一眼就能辨識在賣什麼以及怎麼賣。當廣告最搶眼的地方是在背景或是裝飾物元素上時,毫無疑問你的商品已在畫面上隱形,下一秒,用戶目光早已移開至其他更好解的商品或廣告上,你將因此錯失銷售先機。

切版完稿注意事項
圖片切版

請使用完整塊狀或水平方式切版,以防版面在圖片間出現縫隙、方便調整為RWD格式

影像地圖使用注意事項

影像地圖僅適用在沒有RWD處理的圖像上,如無RWD的活動看板,使用前請留意確認。 使用時,請留意下方提醒。

  • 影像地圖請勿太密集或太細小。
  • 建議修改預設Map名稱,以防命名過簡單被其他設定覆蓋。影像地圖命名公式 map_edm_日期+子站代碼