電商商品頁,這樣設計才會賣

廣告有投、流量有進,訂單卻一直沒跟上——這是我們最常被問的狀況。多數老闆第一個反應是「是不是廣告投錯受眾」,但把數據攤開來看,問題往往出在更前面一站:訪客其實有點進商品頁,只是看完就走了。商品頁是整個電商網站設計裡離錢最近的一頁,首頁做得再漂亮,消費者最後決定掏不掏錢,都是在商品頁上發生的。這篇用 Baymard Institute、Spiegel Research Center、Nielsen Norman Group 這些做過大規模實測的研究數據,把商品頁的圖片、文案、評論、資訊揭露、速度五個環節一項一項拆開講,最後附一段用 AI 工具做商品圖跟文案的實際流程,讓你看完就能回頭檢查自己的商品頁。

流量進來卻不下單?先看商品頁,不要先怪廣告

很多店家的檢討順序是反的:業績不好先加廣告預算,加了沒用再換代操,換了還是沒用,才回頭看網站。但廣告的工作只到「把人帶進來」為止,進來之後能不能成交,是商品頁的工作。一個簡單的判斷方法:打開你的分析工具,看商品頁的跳出率跟加入購物車率。如果流量正常、商品頁跳出率卻超過七成,或是看的人多、加入購物車的比例低於 5%,問題大概率不在廣告,而在頁面本身——訪客進來了,但頁面沒有給他足夠的理由留下來。

這不是少數店家的問題。Baymard Institute 長期追蹤 335 個歐美一線電商網站,發現高達 62% 的網站商品頁體驗被評為「普通」或更差,而且這些還是有預算、有團隊的大型電商。台灣中小企業的商品頁,多數是開店平台套版直接上,或是把型錄照片跟規格表貼上去就結束,情況只會更普遍。好消息是,正因為大家都做得普通,商品頁是中小品牌少數能靠「認真做」拉開差距的地方。

商品圖:消費者摸不到貨,圖片就是你的門市

實體店面消費者可以摸、可以試,網路上只剩圖片能代替這一切。數據很直接:高解析度商品圖比低品質圖片平均多帶來 33% 的轉換率,而且約半數消費者表示,更大、更清晰的圖片會直接影響他們的購買決定。這裡的重點不是「照片要多」,而是照片要回答消費者心裡的問題:正面長怎樣、背面長怎樣、材質近拍是什麼質感、實際拿在手上多大。

「多大」這件事特別容易被忽略。Baymard 的易用性測試發現,42% 的受測者因為網站缺少「比例參照圖」而無法判斷商品實際尺寸——也就是缺一張商品跟人、跟手、跟日常物件放在一起的照片,而有 47% 的網站根本沒提供這種圖。規格表上寫 28 公分,跟一張商品放在餐桌上的實拍照,給消費者的信心完全不同。尺寸誤判也是退貨的主要來源之一,這張照片省不得。

另外一個世代差異值得注意:91% 的 Gen Z 消費者在下單前會特別去找「其他買家拍的照片或影片」,官方照拍得再美,他們還是想看素人實拍。這代表商品頁如果能把買家評論裡的實拍圖拉出來展示,等於同時補上「真實感」跟「比例感」兩塊,對年輕客群的說服力比再多一張形象照都強。

商品文案:79% 的人用掃的,不是用讀的

Nielsen Norman Group 從 1997 年開始做的閱讀行為研究,到今天結論都沒變:79% 的使用者面對新頁面是用掃描的,逐字閱讀的只有 16%,而且平均只會讀到頁面上 20% 到 28% 的文字。這對商品文案的意義很殘酷——你花三小時寫的品牌故事,多數人根本沒看。但同一批研究也給了解法:把文案改成重點標示加精簡段落之後,易用性測量值提升了 47% 到 58%。

落到實作上,商品文案的結構應該是:第一段用兩三句話講清楚「這是什麼、解決什麼問題」;中段用短段落分別講材質、用法、適合誰,每段開頭直接放結論;規格用表格,不要塞在段落裡。判斷標準很簡單:一個只花八秒掃過頁面的人,能不能講出你這個商品的三個重點?能,文案就及格;不能,就是排版跟資訊層級要重做,而不是文字要寫得更多。

評論區:五則評論,下單意願差 270%

評論是商品頁上投資報酬率最高的區塊。美國西北大學 Spiegel Research Center 分析真實購物數據後發現,一個有五則評論的商品,被購買的可能性是零評論商品的 3.7 倍,下單意願整整高出 270%。更值得中小品牌注意的是價格帶的差異:低價商品放上評論可以讓轉換率提升 190%,高單價商品更是提升 380%——越貴的東西,消費者越需要別人先幫他踩過雷。

同一份研究還有兩個反直覺的發現。第一,星等落在 4.2 到 4.5 顆星的商品,購買可能性反而比滿分五星更高,因為清一色五星好評會讓人起疑;適度出現的負評搭配店家認真的回覆,是信任感而不是扣分。第二,評論的邊際效益在前五則之後就快速遞減,所以與其追求上百則評論,不如先確保每個主力商品都有五則以上有內容的評論。另外,標示「已驗證購買」的評論能再讓下單機率多 15%,如果你的購物車系統支援驗證買家標章,務必打開。剛起步沒評論怎麼辦?最實際的做法是出貨後七到十天發一封簡短的邀請信,附上小額回饋請買家留評價跟實拍照,先把前五則補起來,比任何廣告優化都划算。

運費和庫存別藏,64% 的人在商品頁就想知道

Baymard 的另一項統計直接點出台灣店家也很常見的問題:43% 的電商網站不在商品頁提供運費資訊,但 64% 的使用者會主動在商品頁尋找它。消費者的心理很好理解:他在評估總價,而不是商品標價。把運費、免運門檻、預計到貨時間藏到結帳頁才揭露,省下的版面換來的是結帳時的「驚訝成本」——而運費驚訝正是棄單的頭號原因之一。

同一份研究也發現,44% 的網站沒講清楚照片裡的配件到底有沒有包含在售價內。照片裡有腳架、有收納袋,結果寄來只有主體,這種落差換來的不只是退貨,還有一則憤怒的一星評論。做法上不用複雜:商品頁固定放一個「內容物清單」區塊,運費規則跟出貨時間直接寫在加入購物車按鈕附近,讓消費者在決定的那一刻,所有會影響總價跟期待的資訊都在眼前。

速度:手機上每慢一秒,都是真金白銀

台灣的行動交易已經佔整體電商交易量約六成,你的商品頁絕大多數時候是在手機上、在通勤的行動網路下被打開的。速度數據在這裡特別有感:Portent 分析上億次瀏覽發現,一秒內載入的電商網站轉換率是 3.05%,拖到五秒只剩 1.08%,差了將近三倍;在 0 到 5 秒之間,每多一秒轉換率平均掉 4.42%。而 Google 與 Deloitte 的聯合研究更誇張:行動端速度只要改善 0.1 秒,零售網站的轉換率平均就提升 8.4%。

商品頁偏偏是全站最容易變慢的頁面,因為圖多。常見的狀況是設計師交付的原圖一張 3MB,直接上傳,一頁十張圖就是 30MB,行動網路下開三秒還在轉圈圈——而53% 的行動裝置使用者在等待超過三秒後就會直接離開。解法不難:圖片一律轉成 WebP 格式、寬度壓在 1200 像素以內、開啟延遲載入(lazy load),再用 PageSpeed Insights 實測行動端分數。這些是網站維運的基本功,做完通常就能把商品頁載入時間壓回兩秒內。

AI 工具實戰:一人團隊也能產出像樣的商品頁

中小店家最缺的不是觀念,是人手。商品一多,每個商品頁都要拍情境照、寫文案,很快就做不完。這一段給一套用 AI 工具的實際流程,一個人也能跑得動。

第一步,用 ChatGPT 或 Claude 生成商品文案骨架。重點是把商品的真實資訊餵進去,而不是讓 AI 憑空發揮。可以照抄這段 prompt 再換成你的資料:

「我在台灣賣手工陶瓷馬克杯,單價 680 元,容量 350ml,鶯歌職人手拉坯,每個紋路都不同,可進微波爐和洗碗機。目標客群是 25 到 40 歲、重視生活質感的上班族。請幫我寫一個商品頁文案結構,包含:一句 15 字以內的主標、三句賣點短文案(每句不超過 25 字)、一段 80 字的商品故事、一個規格表格,以及三個消費者可能會有的疑慮跟對應的回答。語氣自然,不要用『匠心獨具』這類廣告腔。」

第二步,用 Canva Magic Studio 或 Adobe Firefly 做情境圖。流程是:先用手機在自然光下把商品本體拍清楚,進 Canva 用 Magic Grab 去背,再用 Magic Expand 或背景生成功能,把商品放進「木質餐桌」「窗邊書桌」這類符合客群生活場景的背景;Firefly 的做法類似,用文字描述場景生成背景再合成。一個下午可以把十個商品的情境圖做完,成本遠低於棚拍。

第三步,用 PageSpeed Insights 收尾。把做好的商品頁網址丟進去跑行動端測試,照著建議清單處理圖片格式與大小,確認 LCP(最大內容繪製)壓在 2.5 秒內。

誠實講限制:AI 生成的情境背景偶爾會出現透視或光影不合理的破綻,消費者看得出來;商品本體的材質、顏色絕對不能用 AI 重繪,否則實物落差會直接反映在退貨率上。正確的分工是「實拍保真、AI 補場景、人工做最後把關」——尺寸、規格、價格這些數字,AI 寫的每一個都要親手核對過才能上線。

常見錯誤:商品頁最容易踩的五個坑

第一,只放去背白底圖。白底圖適合列表頁,但商品頁只有白底圖,消費者判斷不了尺寸跟使用情境,42% 的人會因此卡在「不確定多大」這一關。

第二,文案用形容詞堆疊代替資訊。「頂級質感、精緻工藝」這種句子掃描式閱讀下等於隱形,消費者要的是材質、尺寸、怎麼保養這種能幫他做決定的具體內容。

第三,評論區空著卻不處理。零評論的商品頁等於把 270% 的下單意願差距白白讓給對手,前五則評論值得你主動花成本去邀請。

第四,運費資訊拖到結帳才揭露。省掉商品頁一行字,換來結帳頁的棄單,是整個購物流程裡最不划算的交換。

第五,原圖直接上傳不壓縮。一頁 30MB 的商品頁在行動網路下必死,再好的內容都撐不過三秒的等待。

商品頁不是美術題,是說服題

回頭看這五個環節會發現,商品頁做得好不好,跟美感的關係其實沒那麼大,跟「有沒有站在消費者的決策順序想事情」關係比較大:他先看圖判斷這是什麼、再掃文案確認適不適合、翻評論找別人背書、看運費算總價、整個過程還不能等太久。每一關都有明確的研究數據告訴你及格線在哪,也就每一關都能被檢查、被改善。如果你的商品頁流量都有、轉換就是上不來,歡迎找戀戀設計聊聊,我們可以直接幫你健檢現有的商品頁,指出是哪一關在漏訂單。