會搜尋「電商網頁」的人，多半手上正有一個實際的頁面要處理：可能準備開站、正在改版，也可能是流量進來了但商品頁的轉換一直拉不起來。電商網站決勝負的地方通常不在首頁，而在分類頁與商品頁——前者決定訪客找不找得到想要的東西，後者決定他看完願不願意按下購買。這篇把這兩種版面拆開談，包括資訊排列順序、圖片與規格的呈現方式、篩選條件該怎麼給，以及從加入購物車到結帳這段路常見的斷點。
商品頁第一屏要先回答：這是什麼、多少錢、買不買得到
訪客打開商品頁的前幾秒，腦中只有三個問題：這件東西是什麼、價格多少、現在買得到嗎。第一屏就要把答案給足，包括主圖、完整商品名稱、售價、規格選項、庫存或到貨狀態，以及購買按鈕。把價格放在需要往下捲才看得到的位置，等於逼每一位訪客多做一次動作，而每多一次動作都會流失一批人。
另一個常見問題是主圖太過情境化。氣氛照當然重要，但第一張圖的任務是讓人確認商品長相，乾淨背景的正面照最不容易誤判，情境照往第二、三張擺。
規格選項與庫存狀態的呈現方式
選項欄位是商品頁最容易出事的地方。顏色、尺寸、容量如果用純文字下拉選單呈現，訪客得逐一點開才知道有哪些選擇；改成可直接看到的色塊或按鈕，選項一目了然，也能順便標示哪些已經售完。
- 已售完的選項不要直接隱藏，保留但標示為缺貨，訪客才知道這個規格存在，也才有機會留下補貨通知。
- 尺寸類商品一定要有對照表，而且要能在不離開頁面的情況下打開，跳到別的頁面等於中斷購買動線。
- 價格會隨規格變動時，切換選項後的金額要立刻更新，不要讓人到結帳頁才發現跟印象中不一樣。
- 重量、材質、產地、保存方式這類規格，用條列呈現比寫成長段落容易讀得多。
分類頁的任務是縮小範圍，不是把商品全部攤開
不少網站的分類頁只是把該類別的商品一次列完，一頁幾十個，訪客滑到一半就放棄。分類頁真正該做的是幫人快速縮小範圍：清楚的次分類入口、看得懂的排序方式、以及能組合使用的篩選條件。
分類頁上方也值得放一段簡短說明，介紹這個類別包含哪些商品、選購時該注意什麼。這段文字對搜尋引擎理解頁面主題有幫助，對第一次造訪的人也是指引，但不要長到把商品擠出螢幕。
篩選與排序：哪些條件真的有人用
篩選條件不是越多越好。條件一多，每一項的使用率都被稀釋，介面也變得笨重。判斷方法其實很單純：這個欄位是不是顧客拿來排除商品的依據？價格區間、尺寸、顏色、適用對象通常是；上架日期、商品編號通常不是。
排序的預設值也要想清楚。預設用最新上架，新品會一直霸佔前面；預設用價格由低到高，訪客第一眼看到的都是最便宜的入門款。多數情況下，用人工排定的推薦順序當預設，再開放其他排序方式，是比較穩的做法。
商品圖與文字說明各自負責什麼
圖片負責讓人相信商品長什麼樣、尺寸如何、細節是否精緻；文字負責回答圖片講不清楚的事，例如材質觸感、使用方式、保養注意事項、適合與不適合誰。兩者分工清楚，說明文就不會淪為把圖片內容再講一次。
把整段商品說明做成圖片是很常見的錯誤。這樣的內容搜尋引擎讀不到，訪客也無法複製或用瀏覽器搜尋，在手機上還常被縮到看不清楚。圖歸圖、字歸字，比較安全。
加入購物車之後那段路最容易掉人
按下加入購物車不代表訂單成立，中間還有一段路。這段路上的每一個未知數都可能讓人退出：運費多少、什麼時候會到、可以用哪些付款方式、不合適能不能退。與其等到結帳最後一步才揭露，不如提早在商品頁與購物車就寫清楚。
購物車頁面也要讓人能安心修改：數量可調整、可移除、修改後的總金額立刻反映。另外，是否強制註冊會員才能結帳是一個值得認真評估的取捨，多一道註冊流程就會少一批訂單。
手機版不是把桌機版等比例縮小
電商流量多半來自手機，而手機的限制完全不同：螢幕窄、只能用拇指操作、網路可能不穩。桌機上並排四欄的商品列表，在手機上通常一到兩欄才好讀；桌機上滑鼠移過去才出現的資訊，在手機上根本不存在，必須改成常駐顯示或點擊展開。
購買按鈕在手機上捲動一段距離後就會離開畫面，做成固定在底部的常駐列可以省下訪客往回捲的動作。圖片檔案也要特別留意，未經壓縮的大圖在行動網路上會拖慢整個頁面，而載入太慢的頁面根本沒有機會談轉換率。
常見問題
一個商品頁大概需要幾張圖？
沒有固定數字，判斷標準是訪客可能想確認的角度是不是都拍到了。正面主圖、側面與背面、細節特寫、實際使用情境、有比例參考物的照片，通常是基本盤。服飾與家具這類對尺寸敏感的品項需要更多角度；規格單純的耗材則不必硬堆圖片數量。
分類頁一頁要放多少商品？要用分頁還是無限捲動？
一頁的數量以不需要等太久就能載完為原則。無限捲動適合隨意瀏覽的逛街情境，缺點是訪客難以回到原本的位置，也記不得自己看到哪裡。目標明確的採購型網站，用分頁搭配清楚的頁碼通常比較好用，也方便把某一頁分享給別人。
商品描述應該寫多長？
長度取決於決策成本。單價低、規格單純的品項，幾行講完重點就夠；單價高或需要反覆比較的品項，寫得詳細反而能減少客服往返。重點是把最關鍵的資訊放在前面，其餘用小標與條列分段，讓人可以只挑自己在意的部分閱讀。
同一款商品有多種顏色，要開成不同頁面還是同一頁切換？
如果顏色只是外觀差異、價格與規格都相同，做成同一頁切換選項比較好，評價與瀏覽數不會被拆散。但如果不同顏色實際上是不同材質、不同價位，或顧客會直接搜尋某個顏色的名稱，分開建立獨立頁面比較有機會被找到。
缺貨的商品頁應該直接刪掉嗎？
長期停售且不會再進貨的品項，可以下架並把網址轉向到相近商品或所屬分類，避免訪客撞上錯誤頁面。只是暫時缺貨的話，保留頁面比較有利，累積的排名與外部連結不會消失，頁面上再加一個補貨通知的登記方式，還能把這段等待轉成後續訂單。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
相關主題
下一步
如果你正在評估「電商網頁」相關的規劃，可以參考我們的官網與電商網站服務，或直接與我們聯繫，我們會依你的產業與現況給出務實的建議。
