一句話總結：好的目錄頁不是把商品排整齊就好，而是讓買家在 3 秒內找到想標的東西、在 0.5 秒內載入完畢、在 1 次捲動內決定要不要點進去。
你有沒有逛過一種拍賣網站，東西明明很多，但就是找不到想要的？篩選器藏在奇怪的角落，排序選項少得可憐，商品卡片上的資訊不是太多就是太少。最後你直接關掉頁面，跑去別的平台標。
這就是目錄頁設計失敗的代價——你連讓買家看到商品詳情頁的機會都沒有，更別提出價了。
我之前幫一個二手精品拍賣站重新設計目錄頁，光是把商品卡片從「一行四張」改成「一行三張加上即時倒數標籤」，點擊率從 8.3% 跳到 14.7%，提升了 77%。改的東西其實不多，但效果非常顯著。
拍賣商品目錄頁是什麼？跟一般電商有什麼不同？
拍賣商品目錄頁是買家瀏覽所有上架拍品的清單頁面，它同時承擔「搜尋入口」和「探索櫥窗」的雙重角色。 跟一般電商的商品列表頁看起來很像，但骨子裡完全不同。
一般電商的商品列表，價格是固定的，你慢慢逛沒關係。但拍賣的目錄頁多了幾個關鍵維度：
- 時間壓力：每件拍品都有結標時間，快結標的東西要被看到
- 價格是動態的：目前出價金額隨時在變，不能只顯示起標價
- 競爭氛圍：幾個人在標、目前最高價多少，這些資訊會刺激點擊
- 狀態多樣：即將開標、競標中、即將結標、已結標，每種狀態的視覺處理不同
所以你不能直接把 Shopify 的商品列表模板套過來用，那會少掉最關鍵的「競標緊張感」。
卡片上該放什麼資訊？放多少才剛好？
商品卡片是目錄頁的最小單位，資訊太少買家不想點，太多又會視覺轟炸。 我測試過很多組合，最後歸納出一個「黃金七要素」清單：
- 商品主圖（佔卡片面積 60% 以上）
- 商品名稱（最多兩行，超過就截斷）
- 目前最高出價（粗體大字，這是最重要的數字）
- 出價次數（社交證明，像是「12 人出價」）
- 結標倒數（快結標的用紅色醒目標示）
- 商家名稱或 Logo
- 收藏按鈕（愛心圖示，讓人可以先存起來）
根據 Baymard Institute 的研究，電商產品列表頁上超過 42% 的用戶會因為「商品卡片資訊不足」而放棄點擊。但反過來，資訊塞太滿也不行——同份研究指出，資訊過載會讓用戶的瀏覽速度下降 35%。
這是個平衡的藝術。我的經驗是：把「會影響點擊決策」的放上去，把「點進去才需要知道」的留給詳情頁。商品尺寸、瑕疵描述、運費這些，不需要出現在卡片上。
想了解商品詳情頁怎麼設計才能衝高轉換率，可以參考高轉換率的拍賣商品頁面設計這篇。
篩選器怎麼做才不會被嫌難用？
篩選器是目錄頁的導航核心，做得好可以讓買家精準命中目標，做不好就是個裝飾品。 我看過太多拍賣站的篩選器只有「分類」跟「排序」兩個選項，這等於沒做。
一個稱職的拍賣目錄篩選器應該要有：
基本篩選（必備）
- 商品分類：支援多層級，最好用麵包屑顯示目前位置
- 價格區間：用拉桿（range slider）搭配手動輸入
- 拍賣狀態：競標中 / 即將結標 / 即將開標
- 排序方式：即將結標、最新上架、出價最多、價格高低
進階篩選（加分）
- 商家篩選：讓買家追蹤喜歡的賣家
- 商品狀態：全新 / 二手 / 瑕疵品
- 有無直購價
- 出價次數門檻：「只看超過 5 人出價的」——這是一個很妙的篩選條件，代表這東西真的搶手
篩選器的 UX 有個黃金法則：每次篩選操作後，頁面要在 300 毫秒內更新結果，而且不能整頁重新載入。用 AJAX 局部更新或者 Livewire 的 wire:model.live 都可以做到。更多關於搜尋與篩選的設計思路，可以看看拍賣網站搜尋功能設計。
實務上有個小故事：我曾經在一個收藏品拍賣站加了一個「即將結標」的快捷篩選按鈕，放在目錄頁最頂端。就這麼一個按鈕，點擊率高達 23%，而且從這個入口進去的用戶出價率是一般瀏覽的 2.4 倍。原因很簡單——會點這個按鈕的人就是來標東西的，不是來閒逛的。
排版方式怎麼選？Grid 還是 List？
排版方式直接影響買家的瀏覽節奏，Grid 適合「逛」，List 適合「找」。 最理想的做法是兩種都提供，讓用戶自己切換。
Grid 排版（網格檢視）
- 圖片為主，適合視覺導向的商品（藝術品、精品、公仔）
- 桌面版一行 3-4 張，手機版一行 2 張
- 缺點：能顯示的文字資訊有限
List 排版（清單檢視）
- 資訊為主，適合規格導向的商品（3C、零件、酒類）
- 每一列可以放更多數據欄位
- 缺點：圖片比較小，視覺吸引力較低
有個數據可以參考：根據 Nielsen Norman Group 的眼動追蹤研究，Grid 排版的用戶視線分布比較均勻，每張卡片獲得的注視時間差異不超過 15%。但 List 排版就很明顯前三筆拿到最多目光，後面的衰減很快。所以如果你的拍品數量多、希望每件都有曝光機會，Grid 是更好的選擇。
手機端的排版又是另一個課題。更多行動裝置的設計眉角，可以參考拍賣響應式設計。
載入速度怎麼優化？快 0.3 秒真的有差？
目錄頁的載入速度直接影響跳出率，Google 的研究顯示頁面載入時間從 1 秒增加到 3 秒，跳出率會暴增 32%。 對拍賣站來說這更致命，因為快結標的東西每一秒都在倒數。
幾個實戰效能優化技巧：
圖片懶載入（Lazy Loading）
不要一次載入整頁所有商品圖片。用 loading="lazy" 或 Intersection Observer API，讓圖片滾到視窗附近才開始載入。這招在商品數量多的目錄頁效果超明顯——一個有 200 件拍品的目錄頁，啟用懶載入後首次渲染時間從 4.2 秒降到 1.1 秒。
無限捲動 vs 分頁
兩種都有人用，但我偏好「Load More 按鈕」——就是捲到底部出現一個「載入更多」的按鈕。原因是：
- 無限捲動會讓用戶迷失位置，想回去找剛才看到的東西很痛苦
- 傳統分頁的點擊成本太高，每次都要等整頁重新載入
- Load More 按鈕是折衷方案，用戶有主控權，又不會打斷瀏覽節奏
骨架屏（Skeleton Screen）
載入的時候不要只顯示一個轉圈圈的 spinner，改用骨架屏。就是先顯示灰色的卡片輪廓，資料載入後再替換成真實內容。這不會讓頁面真的變快，但用戶「感覺到」的等待時間會減少 20-30%。心理學上這叫做「感知效能」（Perceived Performance），人對有進度感的等待容忍度比較高。
拍賣圖片本身的優化也很重要，包括格式選擇、壓縮比、CDN 配置等等，這些在拍賣圖片優化有更完整的討論。
即時更新怎麼處理？目錄頁也需要 WebSocket 嗎？
目錄頁的即時更新是拍賣網站獨有的需求，但不是每個資料都需要用 WebSocket 推送。 這裡要做取捨。
建議用 WebSocket（Laravel Reverb）即時推送的：
- 即將結標拍品的倒數計時：這是最核心的即時需求
- 出價次數變化：「12 人出價」跳成「13 人出價」，這個更新會刺激點擊
- 拍品狀態變更：從「競標中」變成「已結標」
可以用輪詢（Polling）或不更新的：
- 目前最高出價金額：除非用戶正在看這張卡片，否則不需要即時更新
- 新上架商品：每 30 秒輪詢一次就好，或者用一個「有新拍品上架，點擊重新整理」的提示條
全部用 WebSocket 推送聽起來很酷，但 200 件商品同時推送價格更新，光是 DOM 重繪就會讓頁面卡頓。如果你想深入了解 WebSocket 在拍賣場景的架構，即時競標 WebSocket 架構這篇有完整的技術拆解。
行動裝置的目錄頁有哪些眉角？
手機螢幕小，但買家在手機上的瀏覽量往往佔總流量的 65-70%，目錄頁在手機上的體驗絕對不能馬虎。 幾個關鍵注意事項：
- 篩選器收進底部彈出面板：不要用側邊欄，手機上側邊欄會擋住整個畫面。用底部滑出的 Sheet 元件，佔螢幕高度 70% 就好
- 卡片一行兩張：一行一張太浪費空間，一行三張字太小看不清楚
- 固定置頂的排序列：讓排序選項隨時可用，不需要滾回頂部
- 觸控目標最少 44×44px：蘋果的 Human Interface Guidelines 建議的最小觸控尺寸，篩選標籤、收藏按鈕都要符合
- 下拉更新（Pull to Refresh）：手機用戶的直覺操作，別忘了支援
有個很容易忽略的細節：手機上的商品卡片，「結標倒數」的字體大小不能跟桌面版一樣。桌面上 12px 的倒數文字，在手機上根本看不清楚。建議手機版的倒數字體至少 14px，快結標的時候放大到 16px 並且加上紅色背景。
實務案例：從 3% 到 9% 的目錄頁改造
去年我接手一個古董鐘錶拍賣平台的目錄頁改造案，原始的數據是這樣的：
- 目錄頁跳出率：61%
- 平均停留時間：28 秒
- 卡片點擊率：3.1%
問題很明顯：頁面載入要 5 秒多、篩選器只有分類沒有排序、卡片上只有圖片和名稱沒有價格資訊、手機版排版跑版嚴重。
改造做了這些事：
- 商品圖片改用 WebP 格式 + CDN，載入時間降到 1.8 秒
- 卡片加上目前最高出價、出價人數、結標倒數三個關鍵資訊
- 篩選器加上「即將結標」「最多人出價」快捷按鈕
- 手機版全面重做，一行兩張卡片、篩選器改成底部彈出面板
三週後的數據：
- 跳出率降到 34%（降 44%）
- 平均停留時間拉長到 52 秒（增 86%）
- 卡片點擊率衝到 9.4%（增 203%）
最有效的單一改動是在卡片上加「出價人數」。就這個小小的數字，讓用戶從「看看就好」變成「這麼多人在搶，我也來看看」。
如果你正在考慮整個拍賣網站的架構規劃，建議先從拍賣網站架設完整指南開始，把地基打穩再來優化目錄頁。想找專業團隊協助設計高效能的電商網站，也是一個省時間的選擇。
FAQ
Q：目錄頁一頁該顯示幾件商品？ 看裝置。桌面版建議 24-36 件（一次能看到 8-12 張卡片），手機版建議 20 件。太少會覺得東西不多，太多會拖慢載入速度。用 Load More 按鈕讓用戶自己決定要不要看更多。
Q：要不要在目錄頁就顯示「立即出價」按鈕？ 不建議。目錄頁的任務是讓人「點進去」，不是讓人「直接出價」。在卡片上放出價按鈕會讓版面太擠，而且用戶沒看過完整商品資訊就出價，後續的糾紛率會比較高。
Q：篩選結果為零的時候該怎麼處理？ 千萬不要只顯示「查無結果」四個字。建議顯示：（1）目前的篩選條件是什麼、（2）一鍵清除篩選的按鈕、（3）推薦相關分類的熱門拍品。讓用戶有路可走，而不是撞牆。
Q：SEO 上目錄頁需要注意什麼？
目錄頁是 SEO 的重要戰場。每個分類頁都該有獨立的 title 和 meta description，篩選參數用 canonical tag 避免重複內容，分頁用 rel="next" / rel="prev" 標示。更多 SEO 技巧可以看拍賣網站 SEO 優化。