Yahoo購物中心 網站白皮書
廠商版
白皮書 > 新版規範 > SHP2.0新版首頁 > 超品/品牌模組（直式4品版）
SHP2.0新版首頁
當頁內容錨點
規格資訊
基本規格

超品/品牌模組（直式4品版）需做兩張圖 PC Mobile
寬長尺寸 400 × 400 (px) 600 × 882 (px)
K數限制 400KB內 1000KB內
檔案格式 JPG/ PNG JPG/ PNG
內容呈現
設計原則
  1. 畫面中的主標與商品主體需簡潔明確，背景單純、適度留白。
  2. 請勿設計過多裝飾元素、複雜或沒有意義的商品與背景。
  3. 設計時請儘量做整體性編排，避免小圖拼貼呈現以防畫面太過破碎。
標題與內文編排 - PC

格線系統   文字規範
  • 均分版面為25等分。
  • 遵循上文下圖之規範。
  • 文字可編輯區為左側6等分，商品可編輯區為右側15等分。
  
  • 行數限制：遵循格線系統，並維持在3行以內
  • 建議字級：32px。
  • 字數限制：遵循每行最多6字之規範。
  • 建議特效：降低文字特效之使用，避免過多陰影與光影特效，建議以單色文字呈現。
  • PC版需加上超品/品牌日logo。
標題與內文編排 - Mobile（與平板共用）

格線系統   文字規範
  • 均分版面為25等分。
  • 遵循上文下圖之規範。
  • 文字可編輯區為左側6等分，商品可編輯區為右側15等分。
  
  • 行數限制：遵循格線系統，並維持在3行以內
  • 建議字級：64px。
  • 字數限制：遵循每行最多6字之規範。
  • 建議特效：降低文字特效之使用，避免過多陰影與光影特效，建議以單色文字呈現。
商品/ 背景規範
  • 遵循格線系統，並維持在2品以內；如有代言人，代言人應視為1品。
  • 不需按鈕元素。
  • 以淺色背景為主，盡量與Tatal look有主從之別。
  • 文字區域：不可放商品、裝飾性元素，以提高易讀性。
  • 圖像區域：可以擺放裝飾性元素，請以兩種元素為限。
  • 為突顯商品內容，裝飾性元素請避免使用過多顏色與特效。
範例檔下載
超品/品牌模組（直式3品版）Banner範例

前置需求
影像軟體 photoshop
範例內容
格線輔助 文字範例      

下載範例檔

▲