轉換優化

電商商品分類頁與列表頁設計：讓逛的人快速找到想買的

2026年8月8日・ViewInternet 編輯部

很多人談電商設計都聚焦在首頁與商品頁，卻忽略了夾在中間的分類頁與列表頁，其實是使用者花最多時間、也最會決定買不買的地方。訪客從搜尋或分類進來，面對的往往就是一整片商品縮圖，這一頁排得好不好，直接決定他是繼續逛還是關掉。分類頁的任務不是把所有商品攤出來就算數，而是幫一個還在猶豫的人快速篩掉不要的、鎖定想看的，最後點進某個商品。這篇談商品分類頁與列表頁該怎麼設計，把逛的人一路帶到加入購物車。

商品卡：一眼能比較的資訊密度

列表頁的主角是一張張商品卡，它的設計原則是讓人一眼就能比較。一張商品卡通常要放圖片、品名、價格這三樣核心資訊，再視情況加上折扣標、評價星等或關鍵賣點。重點在於資訊的層次要一致，所有卡片的圖片比例、文字位置、價格樣式都要對齊，這樣訪客的眼睛才能沿著同一條線快速掃過去做比較。最常見的毛病是每張卡片高矮不一、圖片有的滿版有的留白，整頁看起來雜亂，人一亂就懶得逛。商品圖盡量用一致的背景與角度，品名不要長到擠成三行，價格與折扣要夠明顯但不喧賓奪主。若同一商品有多色或多款，可以在卡片上放小色塊讓人不用點進去就知道有得選。

每頁幾個與排版：手機優先的欄數拿捏

一頁要放幾個商品、排成幾欄，是分類頁最實際的取捨。欄數太少，訪客得一直滑，看不到幾個就累了；欄數太多，每張卡片被壓得太小，資訊看不清也點不準。以台灣電商多數流量來自手機來看，手機版通常排兩欄最順手，既能一次看到四到六個商品做比較，卡片又不至於太小。電腦版則可依商品性質排三到四欄。不管幾欄，卡片之間都要留足夠的間距，讓每個商品有呼吸空間，也降低手指點錯的機率。這裡要提醒的是，設計時一定要用手機實際預覽，因為很多在電腦上排得漂亮的欄位，到手機上就變得太擠或跑版，等上線才發現就來不及了。

排序與篩選入口：把選擇權交回給訪客

當一個分類底下商品很多，排序與篩選就是幫訪客快速收斂的關鍵工具。列表頁上方要留清楚的排序入口，常見的像人氣、新品、價格高低，讓不同需求的人各取所需。篩選則要放消費者真正會用的維度，例如價格區間、尺寸、顏色、風格，而不是把後台所有欄位全丟上去。篩選與排序在手機上尤其要處理好，因為空間有限，通常會收成一個明顯的按鈕，點開才展開選項，收合時也要能一眼看出目前套用了哪些條件。一個好的原則是讓訪客隨時知道自己現在看的是篩選後的結果、還有幾個商品，而不是改了條件卻不知道畫面有沒有變。把選擇權清楚地交回給訪客，逛起來才有掌控感。

分頁與空狀態：別讓動線斷在半路

列表頁的下半段藏著兩個容易被忽略卻很影響體驗的細節：分頁與空狀態。商品多的時候要決定用傳統分頁、還是滑到底自動載入更多，兩種各有取捨，但重點是別讓訪客滑到一半就卡住不知道還有沒有下一頁。若採用自動載入，也要留意頁尾的聯絡與政策資訊會不會因此永遠碰不到。另一個常被漏掉的是空狀態，也就是當篩選條件太嚴、篩到沒有商品時該顯示什麼。這時千萬別給一片空白，而要友善地說明沒有符合的商品，並主動推薦放寬條件或改看相關的熱門分類，把快要離開的訪客再拉回動線上。這些收尾細節做好，整頁的體驗才算完整。

分類頁與列表頁是那種每天被大量訪客使用、卻很少被認真重新檢視的頁面，優化它往往比重做首頁更快看到轉換的變化。若品牌的分類頁還停留在把商品硬排一排、篩選難用又不好逛，可以把列表頁的規劃交給熟悉逛街動線的設計團隊，透過電商官網設計與改版服務，從商品卡、欄數到篩選排序一次理順，讓進到分類頁的訪客真的逛得下去、也買得下手。