商品頁怎麼設計？從首屏、規格、配送到上線驗收

商品頁不是把照片、價格和購買按鈕排在一起，而是讓顧客在同一個地方完成幾個判斷：這是什麼、哪個版本適合我、實際會收到什麼、何時收到，以及不適合時怎麼處理。任何一項資訊對不上選項或結帳狀態，版面再漂亮也會讓人停下來確認。

規劃時應先列出顧客要做的決定，再安排圖片、文字與互動。本文談的是單一商品或同系列變體的頁面架構；攝影、商品圖製作、整站視覺和結帳流程各有不同工作邊界。

封面採用荔枝豆食品坊網頁週邊設計 中的牛奶牛軋糖包裝：Milk 字樣、藍色色帶與商品影像共同指向口味，呈現商品頁首張圖片需要支援的辨識任務。下文另以同案例的完整茶包商品頁，對照茶款、包裝與沖泡資訊如何分區；頁面視覺與購物車、庫存、配送功能應分開驗收。

一、先看重點：商品頁要對齊五件事

二、先分工：商品頁、商品圖和購物流程不是同一件事

商品頁會串接多種專業。若沒有先分工，常見結果是設計稿完成了，才發現照片不能裁、規格資料尚未核准，或購物系統根本不支援畫面中的選項邏輯。

三、不要先排區塊，先列顧客要做的決定

同一套商品頁模板不會自動適合所有商品。食品可能先確認口味、份量與保存；服飾要處理尺寸、顏色與版型；客製商品則要說明可變動範圍、校稿方式與交期。開稿前先列出「購買前一定要回答」「特定版本才要回答」「可放到延伸說明」三層問題，頁面才不會平均分配篇幅。

每個問題都要有資料負責人。商品名稱、售價、庫存、材質、尺寸、內容物、產地、使用限制、配送與退換政策，應標記來源、版本和核准者。設計師可以整理層級，不能替營運端猜一個看似合理的數字。

四、商品頁首屏要讓人認出、選對並知道下一步

首屏不必塞完所有資訊，但至少要讓顧客確認商品名稱、目前選中的版本、對應圖片、價格或價格範圍，以及下一個可執行動作。若選項會影響價格、庫存或交期，變動結果應出現在選項附近，而不是只在結帳後才揭露。

手機畫面尤其要檢查順序：標題過長時是否遮住關鍵選項、圖片滑動後能否知道目前張數、規格未選時按鈕如何提示、固定購買列會不會擋住內容。首屏高度沒有通用公式，應以真實商品名稱、促銷狀態和最長選項實測。

五、多規格商品要把「選到哪一款」說清楚

顏色、尺寸、容量、包裝或組合不只是幾顆按鈕。每個可販售組合都要能對應 SKU、圖片、價格、庫存與交期；不可搭配的組合應直接停用並說明，而不是讓顧客按到最後才收到錯誤。若色票本身難以辨識，也應同時顯示文字名稱，不能只靠顏色差異傳達狀態。

切換選項後，頁面焦點不應突然跳走，已選內容也要在加入購物車前再次可見。缺貨、預購、停售、僅門市供應各是不同狀態，文案和按鈕行為要由營運與開發一起定義，避免所有情況只顯示模糊的「暫時無法購買」。

六、促銷資訊要說清適用對象與結帳條件

折扣價、會員價、滿額、加價購和優惠碼各有不同成立條件。商品頁應在價格旁說明適用版本、期間、數量門檻與是否需要登入；若優惠只在購物車計算，也要先告知，不讓顧客把尚未成立的價格當成應付金額。原價、售價與折扣文字必須由同一份規則產生，活動結束後也不能只移除 Banner，卻留下過期標籤。

驗收時至少測試符合與不符合條件各一次，也要確認優惠能否和其他活動併用、退貨後門檻如何重算。這些屬營運與系統規則，設計稿的責任是把結果和限制放在做決定的位置，不自行創造促銷邏輯。

七、教學示例：把優惠算式與選項放在同一條閱讀路徑

以下數字只用來說明資訊設計，非客戶或法西納的商品售價、服務價格或優惠。假設商品每盒 800 元，滿 10 盒以商品小計九折計算，運費另列；畫面應先顯示已選數量，再說明優惠是否成立，最後呈現應付金額。

這個例子刻意讓 9 盒與 10 盒的小計相同，提醒核稿者不能只看總額。數量、每盒單價、優惠條件與購物車內容必須一起確認；若實際規則含四捨五入、會員價或其他活動，另列規則再驗算。

八、商品圖片的順序，要跟著疑問走

圖片不是越多越好。第一張通常負責清楚辨識商品；接著才依實際疑問安排其他角度、材質細節、尺寸比例、內容物、開合方式或使用情境。若兩張圖回答同一件事，保留更清楚的一張即可；精確數字仍應來自核准規格，不能由透視照片推算。

圖片上的賣點文字不應是唯一資訊來源。重要名稱、規格、警語和操作步驟保留為頁面文字，顧客才能複製、放大或透過輔助工具閱讀。需要跨包裝、型錄與廣告共用素材時，再回到 產品影像版位與交付規劃建立可追溯的版本。

圖片序列可先寫成「全貌 → 內容物 → 規格差異 → 使用方式」。例如茶包先讓顧客辨認系列，再核對茶款與每盒包數，最後說明沖泡方式；不需要在每一段重複整組情境照。

以一份品項對照表同步核稿：中文品名、英文品名、SKU、照片檔名與規格須在同一列。英文不只核對拼字，也要確認產品種類與口味一致；商品頁、圖片內文及包裝各有文字時，分別核對。

九、規格表先處理比較，再處理完整

規格區的第一個任務不是展示資料很多，而是幫助顧客判斷差異。把真正影響選擇的欄位放在前面，例如尺寸、容量、材質、相容條件或內容物；型號、製造資訊與完整技術資料可在後段展開。欄位名稱必須一致，不能同一頁交替使用「重量」「淨重」或「尺寸」「包裝尺寸」卻未說明差別。

比較表只放可用同一尺度比較的資料。某版本沒有該功能時應寫清楚「不適用」或「未包含」，不要留空讓人誤以為資料遺漏。組合商品則列出實際件數與內容，不以情境照中的道具代替清單。

法西納的荔枝豆食品坊網頁週邊設計 將茶款、包裝與沖泡內容分區呈現。茶款清單支援比較，包裝畫面幫助辨識內容物，沖泡資訊則回答收到後如何使用；這三種任務各自成段，比把資料均勻堆在長頁上更好找。圖中為歷史作品內容，實際商品規格與販售資訊以品牌現行資料為準。

十、配送、付款與退換資訊不要藏到頁尾

會影響是否下單的條件，應在價格與購買入口附近提供摘要，再連到完整政策。包含預估出貨條件、配送範圍、可能費用、付款方式、退換申請入口，以及特殊商品的限制。摘要和政策頁必須使用同一版資料，活動結束或規則變更時一起更新。

台灣 《消費者保護法》第十八條 要求通訊交易以清楚易懂的文句提供業者聯絡資料、商品或服務內容、對價、付款與交付方式、解除契約資訊、合理例外及申訴方式，網路交易並應以可完整查閱與儲存的電子方式提供。第十九條另有七日解除契約與合理例外的規定。不同商品和交易模式仍有個案差異，頁面文字應由營運或法律專業人員依實際條件確認，不能直接複製別站退換範本。

十一、評價、保證與比較都要能追溯

評價應讓讀者知道它對應哪個商品或版本，並保留必要的時間與來源脈絡；不能把另一款商品的回饋移來共用。保證、檢驗、獲獎或比較主張則要能回到有效文件，清楚寫出適用範圍與限制。若資料已過期，移除比以模糊小字補救更安全。

十二、可讀內容、畫面狀態與結構化資料要一致

商品名稱、圖片、價格、幣別、庫存與退換政策可能同時存在於畫面、後台、商品資料串接與結構化資料中。任何一處不同步，都可能讓顧客或外部服務讀到舊資訊。應指定單一資料來源，並把同步責任列進上架流程。

Google 的 產品結構化資料說明 區分可直接購買的 merchant listing 與非直接購買的 product snippet，也說明價格、庫存、運送、退貨和商品變體等資料。結構化標記應忠於頁面可見內容，通過測試也不代表一定會顯示特定搜尋樣式；它不能替代正確的商品頁文字與狀態。

十三、設計交付要包含狀態，不只交一張正常畫面

商品頁至少要針對實際功能整理狀態矩陣：尚未選規格、可購買、庫存不足、缺貨、預購、價格變動、輸入錯誤、加入成功與系統失敗。每個狀態要說明文字、控制項、焦點位置和下一步。不是每個專案都需要同一套狀態，但已存在的情況不能留給工程端自行猜測。

W3C 的 WCAG 2.2 成功準則 4.1.3 要求狀態訊息可由程式判定，讓輔助技術不必先取得焦點也能呈現。加入成功、庫存更新或錯誤摘要因此不能只靠顏色或短暫動畫；設計交付需標明訊息內容與出現時機，開發後再用實際輔助技術驗收。

設計稿應使用代表性的真實名稱、最長規格與完整政策摘要，並標記哪些資料來自後台。若要委託外部團隊，可先用 網站設計公司評估清單 核對資料串接、測試環境、帳號與交付責任，而不是只比較首頁風格。

十四、上線前，用真實購買任務走一次

驗收時把問題記成「裝置／商品版本／操作步驟／實際結果／預期結果」，修正後用同一路徑複驗。上線後可觀察客服反覆問題、規格選錯、搜尋無結果與退換原因，判斷哪段資訊需要補強；這些訊號能指出頁面摩擦，卻不能單獨證明某個版面必然帶來成交。

十五、商品頁設計常見問題

十六、先把商品事實對齊，再談畫面風格

商品頁的專業感來自一致：顧客看到的版本、價格、內容物與交易條件，都能一路對應到購物車和實際交付。若你正整理商品資料、頁面狀態與手機版驗收，可先帶著 SKU、現行政策和系統限制聯絡法西納，再判斷需要補攝影、商品圖、頁面設計或開發調整。