官網『商品分類頁』(Product Listing Page / PLP) 設計完整攻略：中小企業如何用一頁排排站的商品，把訪客從『隨便逛逛』變成『我要這個』

你花錢把人拉進官網，結果他們卡在同一頁走不下去

做電商或型錄型網站的老闆一定有過這個經驗：Google Ads、Meta 廣告、SEO 好不容易把訪客帶進來，一看後台停留時間卻停在同一頁——那個頁面不是首頁、不是商品頁，而是最容易被忽略的商品分類頁（Product Listing Page，簡稱 PLP）。

PLP 是什麼？就是那個「一整排商品排排站」的頁面：你點「男裝上衣」、「保養品」、「戶外家具」進去之後看到的那頁。訪客其實不是不想買，他們是被這頁勸退的——因為選項太多、篩選不好用、載入太慢、每張圖看起來都差不多，看兩眼手一滑就跳走。

根據 Baymard Institute 針對電商 UX 的長期研究，訪客從分類頁跳離的比例，往往是整站最高的環節之一，PLP 的操作痛點更是全站最常被抱怨的地方。換句話說，PLP 沒設計好，前面所有廣告費都是白花的。

Photo by sarah b on Unsplash

PLP 的角色：不是型錄，是「選擇的加速器」

很多中小企業老闆一開始把 PLP 當「型錄」在做——把所有商品塞進去、資訊擺齊、一頁能塞多少算多少。但 PLP 真正的任務只有一個：幫訪客快速淘汰、快速決策、快速點進單一商品頁（PDP）。

換個角度想，訪客到 PLP 通常已經有大概想要的東西了。他們的心裡話是：「我大概想找 XX，你這裡有沒有？如果有，哪一個最適合我？」你的 PLP 要做的不是把所有東西攤給他看，而是讓他三次滑動之內就能鎖定一個候選。做不到這件事的分類頁，其實就是變相在對訪客說「你自己慢慢挑吧」——結果就是他真的慢慢挑，然後挑到別家去了。

五個決定成敗的 PLP 設計重點

1. 篩選（Filter）：讓客戶第一時間告訴你他要什麼

PLP 上最關鍵的元件不是商品縮圖，而是篩選側欄。訪客一進來如果看到「50 件商品」，第一個念頭一定是「幫我先縮小到我要的範圍」。這時候篩選條件出得好不好，直接決定他會繼續滑還是回上一頁。

幾個實務原則：

• 先問「怎麼選」，再列「有什麼」：不同品類篩選條件不一樣。賣衣服的一定要有尺寸、顏色、身高；賣家電要功率、容量、能源效率；賣服務要地區、預算、時間。用你自己客戶最常問的問題當篩選項。
• 篩完之後不要整頁刷新：現在多數框架都支援即時篩選（Ajax / Live Filter），選一個條件商品就動一次，訪客不用等待、也不會失去捲動位置。
• 顯示每個條件下的商品數量：例如「紅色 (12)」「白色 (3)」，訪客一眼就知道哪個是主力，哪個是點進去只會空手回來。
• 手機版把篩選變成一個顯眼按鈕：不要把側欄往下塞，那樣訪客根本不會滑到。手機一定要有固定在畫面上的「篩選 / 排序」浮動按鈕。

2. 商品卡片（Product Card）：4 秒內把重點說完

PLP 上訪客平均在每張商品卡片停留的時間，通常不到 4 秒。這 4 秒你要塞進什麼？三個要素缺一不可：

• 清楚的商品圖：白底、單一角度、比例統一。整排圖形狀不一樣的 PLP 看起來像地攤，感覺瞬間掉一級。
• 可讀的價格：原價、折扣後價格、單位（每公斤 / 每片）都要一目了然。特別是保養品、食品、耗材類，客戶其實是在比「單位價」。
• 一個「決策提示」：例如「熱銷第 1 名」「新品」「本週 12 人購買」「限量」——任何一個能幫他縮短思考的社會證明訊號。

不需要放的東西：一長串規格描述、五顆星評分細節、多段促銷文案。那些是 PDP 該做的事，PLP 塞太多只會讓卡片變雜、視線散掉。

3. 排序（Sort）：讓「懶得篩」的人也有得選

不是每個訪客都會用篩選，有一半以上的人比較習慣「先看預設排序」。所以你的預設排序邏輯很重要：

• 不要用「新增日期」當預設：那是站主想看的順序，不是客戶想看的。
• 用「熱銷」或「推薦」當預設：把主推商品、毛利好的、庫存充足的商品排前面，這是官網最重要的曝光策略。
• 提供「價格低到高 / 高到低」「評分高到低」「上架時間」：這四個是行業共識，訪客一看就知道怎麼用。

提醒一件事：如果你的排序做完會整頁跳回頂端，訪客會非常痛苦。務必保留原本的捲動位置。

Photo by Shoper on Unsplash

4. 分頁 vs 無限捲動 vs Load More：選錯就掉 SEO

PLP 的載入方式有三種主流做法，各有優缺點：

• 傳統分頁（Pagination）：SEO 最友善、每頁都能被 Google 收錄。缺點是操作有點慢。適合商品數多、需要 SEO 流量的網站。
• 無限捲動（Infinite Scroll）：訪客滑到底自動載入，體驗最順。缺點是 Google 爬不到後面商品、也很難記位置。適合社群感重的品牌站。
• Load More 按鈕：折衷方案，訪客主動按才載入。體驗和 SEO 兼顧，是目前多數電商推薦的做法。

如果你的網站商品多、SEO 是重要流量來源，建議用「Load More 按鈕」+「頁碼備援」的組合：預設顯示按鈕、但底層還是有 ?page=2 這種可爬取的網址，兩邊都不放棄。

5. 空狀態（Empty State）：篩到沒東西時怎麼救

這個小地方最容易被忽略，但它決定了訪客會不會給你第二次機會。當訪客篩到 0 個商品時，多數網站直接顯示「找不到商品」四個大字——訪客只能按上一頁走人。

正確做法是：

• 清楚說明「哪個條件太嚴」：例如「符合『紅色 + XL + 999 元以下』的商品目前是 0 件」。
• 給一個「退一步」按鈕：例如「移除價格條件試試」「看類似顏色」。
• 推薦替代商品：底下再貼「你可能會喜歡」的 4-6 件熱銷品。
• 提供「缺貨通知」或「客服詢問」入口：把找不到的需求變成一筆詢問單，這是撿漏最好的方法。

Photo by Oxana Melis on Unsplash

PLP 效能：一秒之差就是十幾趴訪客

PLP 通常是網站最重的頁面之一——大量圖片、篩選 JS、排序邏輯全擠在一頁。Google Web Vitals 的數據長期顯示，載入時間每多一秒，跳出率就往上跳一段。實務上要注意：

• 圖片一定要壓 WebP / AVIF：JPG 動輒 300KB 一張，AVIF 通常可以壓到 1/3 以下。
• Lazy Load（延遲載入）第一屏以下的圖：訪客沒滑到的圖不要浪費頻寬。
• 篩選 UI 用骨架屏：Ajax 篩選的時候顯示灰色框，讓訪客知道系統在動，不會以為當機。
• 行動版優先設計：台灣電商流量七成以上來自手機，PLP 一定要用手機打開自己走一遍。

結語：PLP 不是型錄，是「把訪客往下一步推」的關卡

回頭檢視一下自己網站的 PLP，先問三個問題：

第一，一個新訪客從 PLP 進來，能不能在 30 秒內找到一件他想點進去看的商品？
第二，手機打開篩選好不好用？會不會滑到頭暈？
第三，篩到沒商品時，有沒有給訪客第二個選項？

這三題有一題答不出來，你的 PLP 就有優化空間。不需要打掉重做，通常從篩選側欄、商品卡片統一、預設排序改熱銷這三個地方下手，就會看到跳出率明顯下降、加入購物車比例明顯上升。

PLP 做好了，前面的廣告費、SEO 努力才會真的收成。它不是「順便做一下就好」的頁面，它是整個網站最需要斤斤計較的關卡之一。