商品列表頁怎麼設計？商品卡片資訊、列表與格狀、排序和載入更多

顧客從首頁點進「洗面乳」分類、或從搜尋框打入關鍵字後，看到的第一個畫面就是商品列表頁。這一頁的任務是讓人快速比較、排除不要的、找到值得點進去看的商品。如果商品卡片看不出差異、價格要點進去才知道、滑到第五十個商品後點進去再按返回又回到最上面，顧客很快就會放棄。

這篇文章綜合 Baymard Institute 的商品列表研究，以及 Google 搜尋中心關於分頁的官方文件，整理商品列表頁的五個設計重點：商品卡片資訊、列表與格狀版面、排序、載入方式，以及容易被忽略的 SEO 設定。

商品列表頁為什麼值得重新檢查

Baymard 在 2026 年 8 月發表的商品列表頁（PLP）指南指出，在其評比的 330 多個主要電商網站中，有 80% 的商品列表頁存在嚴重的使用性問題。另一份 2025 年更新的列表研究也發現，桌機版有 58%、手機版有 78% 的網站，整體商品列表表現落在「差」到「普通」之間。

換句話說，連歐美的大型電商都還沒做好，台灣中小電商只要把基本功做到位，就有機會在使用體驗上勝出。商品列表頁的上一層是分類架構與篩選，這部分請參考電商網站架構設計：分類、搜尋與篩選，本文專注在「商品怎麼排、卡片怎麼設計」。

商品卡片：讓顧客不用點進去也能初步篩選

商品卡片資訊不夠，顧客只好一個個點進商品頁再返回，非常耗時；資訊太多，又會擠成一團看不清楚。Baymard 2023 年的研究發現，50% 的網站沒有在列表項目中呈現恰當的資訊平衡，並整理出五項基本資訊：

• 商品圖：每個商品都要有縮圖，沒有圖的商品常被直接略過。
• 商品名稱或類型：名稱太文青時，補上商品類型，例如「晨露（保濕化妝水 150ml）」。
• 價格：一定要直接顯示，藏起價格的商品容易被跳過。
• 評價星等與則數：只有星等沒有則數，顧客很難判斷可信度。
• 可選規格：例如顏色色塊，讓人知道同款還有其他選擇。

除此之外，Baymard 建議依品類加上 1–3 個關鍵屬性，例如電器的容量、行李箱的尺寸、保養品適合的膚質。「熱銷」「新品」「特價」或台灣電商常見的「超商取貨」「24 小時出貨」，也很適合用小標籤呈現，但不要每張卡片都貼滿標籤，否則就沒有重點了。

同款不同色，合併成一張卡片

Baymard 的列表研究發現，42% 的網站沒有把同一商品的不同規格合併成一個列表項目。同一件 T 恤五個顏色排成五張卡片，會把其他商品擠到後面。建議合併成一張卡片，用色塊讓顧客切換，點色塊時縮圖跟著變。

列表還是格狀？依商品類型決定

這是最常被問的問題。Baymard 的建議很直接：

在手機上，外觀導向的商品通常用兩欄格狀，圖片才夠大、一次也能看到較多商品；規格導向的商品則用一欄列表，保留空間給規格文字。版面切換按鈕可以提供，但多數人只會停留在預設版面，所以預設版面選對，比提供切換按鈕更重要。

排序：提供四種基本選項，預設用「推薦」

Baymard 認為有四種排序是基本配備：價格、評價、熱銷、最新；2025 年的研究顯示，有 69% 的網站沒有完整提供這四種。台灣電商最常漏掉的是「依評價排序」。

設計排序時注意兩件事：

• 評價排序要考慮則數：只依平均星等排序時，只有一兩則 5 星評價的商品，會排在上百則 4.7 星的商品前面，違反顧客直覺。建議設定最低則數門檻（例如至少 5 則），或用平均分數與則數的加權公式。
• 預設排序：不要預設「最新上架」或「價格低到高」，而是用綜合熱銷、庫存與多樣性的推薦排序，讓第一排就呈現不同類型的好商品。

載入更多、無限捲動還是分頁？

Baymard 的研究長期偏好「載入更多」按鈕：先載入一批商品，滑到底時由顧客按下按鈕再載入下一批。這樣既不會像無限捲動那樣永遠到不了頁尾，也不像分頁需要一直按頁碼。Baymard 2024 年更新後的立場是：載入更多仍是首選，分頁也可以用，但細節要做對。

每批要載入多少？Baymard 2020 年的研究建議桌機約 50–150 個（外觀導向商品偏多、規格導向偏少），手機約 15–30 個；同一份研究也指出 52% 的桌機網站預設載入的商品數量太少或太多。台灣中小電商一個分類常常只有二三十個商品，那就直接全部顯示，不需要分批。

還有一個最容易被忽略的細節：顧客從商品頁按返回時，要回到原本的位置。Baymard 建議每次載入更多都更新網址，讓瀏覽器的返回鍵能帶顧客回到剛剛看到的商品，而不是回到列表最上方重新滑。

商品列表頁的 SEO 設定

分類頁往往是電商網站排名最好的頁面，例如「天然手工皂」「登機箱 20 吋」這類關鍵字。Google 搜尋中心的分頁與增量載入文件提醒幾個重點：

• 每一頁都要有自己的網址：例如 ?page=2，不要用 # 片段標示頁碼，Google 會忽略。
• 不要把所有分頁的標準網址都指向第一頁，每一頁用自己的 canonical。
• 用一般的 HTML 超連結（a 標籤加 href）串起各頁：Google 不會點按鈕或觸發需要使用者操作的程式。如果用「載入更多」，背後最好仍保留可抓取的分頁連結。
• 篩選與排序產生的網址：避免大量重複頁面被索引，可用 noindex 或 robots.txt 控制。

分類頁上方也可以放一段 100–200 字的分類介紹與選購重點，對 SEO 與顧客都有幫助。完整的電商 SEO 規劃請參考電商 SEO 完整攻略。

商品列表頁設計檢查清單

• 每張商品卡片都有圖、名稱或類型、價格？
• 有評價的商品同時顯示星等與則數？
• 同款不同色已合併成一張卡片，並有色塊可切換？
• 依品類選擇格狀或列表，手機版預設兩欄格狀？
• 提供價格、評價、熱銷、最新四種排序？
• 評價排序有考慮則數？
• 商品多時使用「載入更多」，且返回時回到原位置？
• 已套用的篩選條件有顯示並可單獨移除？
• 分頁網址可被 Google 抓取，沒有全部指向第一頁？
• 分類頁有一段簡短的分類說明？

常見問題

商品列表頁一頁要放多少商品？

依商品類型與裝置而定。Baymard 建議桌機一次約 50–150 個、手機約 15–30 個，再用「載入更多」接續。如果你的分類只有二三十個商品，直接全部顯示即可，不需要拆頁。

商品列表頁要用無限捲動嗎？

不建議單獨使用。無限捲動會讓顧客永遠滑不到頁尾的退換貨、客服等連結，返回時也容易跑回最上面。Baymard 的測試較推薦「載入更多」按鈕，若要兼顧 SEO，背後仍要保留可被抓取的分頁網址。

開店平台的分類頁版型不能改，還能做什麼？

仍然有很多可以調整：商品名稱補上類型、統一主圖風格、設定預設排序、合併同款規格、填寫分類說明文字、檢查每個商品都有價格與評價。這些多半在後台設定就能完成，不一定要改版型。

結語：讓顧客在列表頁就做好一半的決定

好的商品列表頁，讓顧客不用一個個點進去，就能排除不適合的、留下想看的。把卡片資訊補齊、依品類選對版面、提供合理的排序、做好載入與返回位置，再顧好分頁的 SEO 設定，列表頁就能同時服務顧客與搜尋引擎。想看整體建站規劃，可以參考電商網站架設完整指南。

如果你的分類頁流量不錯、點進商品頁的比例卻偏低，網軍行銷的電商 SEO 服務可以協助檢查分類頁的內容、網址與版面設定。

參考資料

• Baymard Institute，Product Listing Page (PLP) UX: Definition & Ecommerce Best Practices：https://baymard.com/blog/product-listing-page-plp-ux
• Baymard Institute，Product List UX 2025: 8 Common Pitfalls & Best Practices：https://baymard.com/blog/current-state-product-list-and-filtering
• Baymard Institute，Product Listing UX: What Information to Display in Product Listings：https://baymard.com/blog/product-listing-information
• Baymard Institute，Product List: Number of Products to Load by Default：https://baymard.com/blog/number-of-items-loaded-by-default
• Google Search Central，Pagination, incremental page loading, and their impact on Google Search：https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading