電商設計怎麼規劃？首頁、分類、商品與活動頁的視覺系統

首頁做得精緻，點進分類頁卻換了字級；商品卡寫「限時優惠」，商品頁卻找不到條件；活動結束後，舊標籤仍留在不同角落。這些問題通常不是某一張圖不好看，而是頁面之間沒有共用的視覺與內容規則。

電商視覺系統不是把每一頁做成同一個版型，而是先說清楚首頁、分類、商品與活動頁各自負責什麼，再讓導覽、商品卡、價格、促銷、按鈕、圖片比例與內容欄位能彼此銜接。團隊日後上新品、換檔期或增加分類，才不必每次重新猜一次。

封面採用法西納的有紀 Yougi 網站設計作品 ，可直接觀察商品卡如何一致呈現品名、價格與優惠、售完標籤。這是該案的商品列表畫面，不代表已驗證本文所有頁型、後台同步或交易功能；下方的跨頁狀態圖另為教學示例。

一、文章重點

二、電商整站要先建立頁型與共用規則

規劃整站時，重點是讓不同頁面依共同規則運作，再針對個別環節深入設計。若品牌定位、識別與故事尚未轉成網站架構，可先讀 品牌網站設計指南 ；已有基本方向後，再用下表確認這次要處理的是跨頁系統，還是單一環節。

跨頁系統的產出不是「漂亮首頁加幾張內頁」，而是頁型責任、共用元件、內容欄位、例外狀態與維護方式。它不預設所有品牌需要相同數量的頁面，也不把某個平台的模板結構當成唯一答案。

三、從首頁、分類、商品、活動四種頁型建立地圖

先列出目前真的存在與近期會使用的入口，標明每種頁型的主要任務。首頁協助辨認品牌、理解本期重點並前往合適入口；分類頁支援瀏覽、篩選與比較；商品頁承接單品資訊和購買判斷；活動頁則集中解釋檔期主題、適用範圍與限制。頁型名稱可以依平台調整，任務不可互相推卸。

接著畫出內容如何流動：首頁的主打商品會連到哪個分類或商品？分類卡片顯示的售價與標籤從哪個欄位取得？活動結束時，入口、促銷文字和商品標記由誰撤下？只要同一訊息需要手動貼到多處，就要判斷是否應改為共用欄位，或至少建立明確的更新清單。

用同一款商品，走一次四頁型

下圖是教學示例，非客戶交付。假設「莓果餅乾禮盒」同時出現在首頁精選、餅乾分類、商品詳情與主題活動：四處都讀取正式品名及可售狀態，首頁以主張引導、分類支援比較、商品頁完整列出規格與配送，活動頁另外交代適用條件。

將該商品改為售完後，商品卡與詳情頁都應顯示售完，活動頁也不能繼續承諾可立即購買。再把品名換成較長的測試名稱，確認卡片可換行、不遮住價格，且讀者仍能辨識完整品名。這比交四張使用不同假資料的畫面，更能測出共用規則是否成立。

四、共用的是內容欄位與元件規則，不是讓每頁長一樣

共用規則應先回答：哪些資訊要保持一致，哪些地方可以因情境改變。導覽位置、商品名稱、價格層級、促銷標示、主要按鈕與基本狀態需要穩定；首頁可以較有敘事感，分類頁可以更緊密，活動頁也能使用當期色彩。差異要建立在任務上，而不是各頁各自發明。

以 Shopify 為例，其官方 Theme architecture 用 layout、template、section 與 block 組織共用外殼、不同頁型及可重複模組。這是 Shopify 的實作例子，不代表每個平台都採用相同檔案結構；可借鏡的是把頁型和可重用內容分層，而不是照抄名詞。

五、首頁與分類頁：先安排入口，再支援瀏覽與比較

首頁先決定「此刻最重要的入口」，再安排品牌介紹、主題、分類與推薦內容。主視覺不必承擔全部訊息；如果活動條件需要長篇解釋，就讓首頁說明核心利益，連往可完整閱讀的頁面。新品、常態商品與期間活動也應有視覺層級，避免每一區都用最大字、最亮顏色互相競爭。

分類頁的工作是讓人快速辨認差異。商品卡至少要有穩定的圖片裁切、名稱、價格呈現與必要狀態；篩選或排序名稱應使用顧客理解的語言，並確保選取後的結果看得出來。若商品資訊差異很大，先整理欄位，不要靠縮小字或臨時加徽章硬塞。

六、商品頁與活動頁：共用商品資料，各自回答購買問題

商品頁與活動頁應共用名稱、價格、標籤、主圖與庫存狀態，避免同一商品出現不同資訊。商品頁要回答規格、用途與選購疑問；活動頁則要說清楚商品組合、優惠條件與有效期間。商品照片若尚未建立白底、角度、細節與版本規則，可另看 電商商品攝影指南，不要把拍攝缺口留給版面臨時補救。

活動頁需要把主題和規則分開：視覺先讓人辨認檔期，內容則明確交代適用對象、商品與限制。系統還要預想活動未開始、進行中、已結束，以及商品售完時的畫面。結束後保留說明、替換入口或下架頁面，應依營運需要決定，不能只把日期文字刪掉。

七、把產品、價格、促銷與素材整理成可維護欄位

畫版面前，先做內容欄位表。每個欄位要有來源、格式、允許長度、必填與否、可出現頁型及維護人。這張表不必追求欄位越多越完整，而要讓編輯知道缺資料時怎麼處理，設計也能測試真實內容。

同一促銷若在商品卡、商品頁與活動頁出現，應使用一致的名稱和條件來源；視覺可以因空間縮短呈現，意思不能改變。素材也要保留原始檔、輸出用途和更新版本，避免新圖覆蓋舊圖後，已排程內容無法追溯。

八、導覽、元件狀態與手機版要跨頁一致

W3C 的 WCAG 2.2 成功準則 3.2.3 指出，在一組頁面中重複出現的導覽機制，應維持相同的相對順序，除非改變是由使用者發起。這不等於所有頁面都必須長得一樣，而是讓人跨頁時不必重新學習主要導覽。

除了一般畫面，還要檢查 hover、鍵盤焦點、選取、停用、載入、空資料、錯誤與售完等狀態。只交付正常狀態，工程端便只能自行補齊例外，最後常出現不同頁面的按鈕與提示各說各話。若需要把色彩、字體、間距和元件狀態整理成更完整的規格，可銜接 數位設計規範指南。

手機驗收要用實際文字、促銷組合與圖片載入狀況測試。特別注意固定元件是否遮住內容、彈出層能否關閉、錯誤提示是否靠近問題欄位，以及按鈕在不同狀態下是否仍能被辨認。視覺一致的前提，是操作結果也一致。

窄視窗也要檢查內容能否重排。W3C 的 Reflow 說明 指出，垂直捲動內容在等同 320 CSS 像素寬度時，除必要的二維內容外，應能在不遺失資訊或功能的情況下呈現，且不必同時水平捲動。可將這項原則轉成驗收條件：文字、商品卡與操作元件縮窄後仍完整，表格或圖像等例外則限制在自己的容器，不讓整頁產生無意義的橫向捲動。

九、法西納案例：從商品視覺延伸到網頁內容編排

法西納為 荔枝豆食品坊網頁週邊設計 完成一系列品牌產品、網頁與週邊小物設計。下方選用其中的商品包裝畫面：橘色袋身、湖水藍側面、牛軋糖名稱、扣帶圖樣與吊牌構成可辨識的產品形象。這類素材進入首頁主打、分類卡片或商品詳情時，應沿用品名與系列識別，再依各頁任務安排裁切和說明。

這組作品呈現法西納如何把品牌配色、產品系列與內容編排延伸到網頁及週邊。本案由法西納負責品牌產品、網頁與週邊視覺設計；攝影、網站程式、購物車、後台與營運未列於公開分工，實際責任依專案資料確認。

黑芝麻與蜂蜜柚子兩款包裝顯示系列版式如何保留共同欄位，再用口味名稱、色彩與產品畫面區分品項。規劃電商內容時，可把這套系列關係轉譯為可維護的名稱、口味、圖片與狀態欄位，讓不同品項保持一致，也更容易更新。

十、用代表任務做跨頁驗收，不靠單張設計稿

驗收時選擇真實任務走完整段路，例如從首頁找到某類商品、在分類頁比較狀態、進入商品頁確認條件，再回到活動頁理解適用範圍。每一步檢查名稱、價格、促銷和按鈕是否一致，也記錄返回上一層後是否保留合理的瀏覽位置。

再用容易出錯的內容壓力測試：較長商品名、不同價格狀態、沒有第二張圖片、活動提前結束、分類無結果、商品售完或素材載入失敗。驗收不是要求畫面永遠完美對稱，而是確認資訊仍完整、操作仍可理解，且團隊知道例外由誰處理。

最後做跨尺寸與跨角色檢查。內容人員試著上架，確認欄位名稱與預覽結果對得上；營運人員試著換檔，確認不必逐頁尋找舊促銷；設計與開發則對照元件狀態和斷點行為。問題要回寫到規則，而不是只修當下截圖。

十一、交付不是頁面截圖，而是頁型、元件、欄位與責任

可維護的交付至少要讓接手者找到頁型地圖、共用元件及其狀態、內容欄位與範例、素材版本、手機與桌機差異，以及上架和換檔責任。檔案命名需能對應用途，規則也要標明何時可以例外、例外如何記錄。

電商接觸點不只停在螢幕。若出貨箱、封口、說明卡與開箱順序也在本次範圍，應另外建立 電商出貨包裝設計 的資訊與製作規格，並在交接表標明由誰提供尺寸、文案與印製檔。這能保持品牌連續性，但不應把網站元件規範硬套到印刷品。

上線後的調整以事件觸發較實際：新增商品類型、平台功能改變、促銷規則更動、客服反覆遇到同一疑問，或元件在真實內容下失效時，就回頭更新欄位和規則。版本要記錄改動原因與影響頁型，避免新舊做法並存。

十二、電商視覺系統常見問題

十三、先把頁型、欄位和狀態對齊，再畫頁面

成熟的電商設計，不靠某一張主視覺撐起全站，而是讓首頁負責入口、分類頁支援瀏覽、商品頁承接單品判斷、活動頁說清檔期，並由共用欄位與元件維持一致。先釐清責任和例外，設計才能兼顧品牌表現與日常更新。

實際開始時，可先盤點現有頁型與重複資訊，挑一條代表任務走查，再找出最常發生的上架與換檔問題。這些答案會比套用固定版型更接近品牌真正需要的系統，也讓後續設計、開發與營運有共同依據。

若你正準備整理首頁、分類頁、商品頁與活動頁的共用規則，可先查看法西納的設計服務 ；若已有現行網站、商品資料與預計改版時程，也可透過聯絡頁說明需求。