mybid
競標技巧 · 8 分鐘閱讀 · 13 次閱讀

如何設計拍賣網站的推薦系統介面?

從推薦演算法到介面呈現,完整解析拍賣網站推薦系統的 UI 設計策略,包含推薦卡片、觸發時機與 A/B 測試實務。

一句話總結:拍賣推薦系統的介面設計重點不是演算法多厲害,而是推薦內容出現在對的位置、對的時機,讓買家覺得「這平台很懂我」。

逛拍賣網站的時候,你一定看過「猜你喜歡」「瀏覽此商品的人也看了」這類推薦區塊。有些做得好,你真的會順手點進去逛;有些做得爛,滿版推薦全是你完全不感興趣的東西,看了只覺得煩。

差別在哪裡?不全是演算法的問題。推薦系統的 UI 設計——怎麼呈現、放在哪裡、什麼時候出現——往往比演算法本身更影響使用者的點擊意願。 Amazon 在 2023 年的報告指出,他們 35% 的銷售額來自推薦系統,但這個數字背後有一大半功勞要歸給介面設計團隊對推薦區塊的持續優化。

來聊聊拍賣網站的推薦介面該怎麼做。

推薦系統介面設計架構

拍賣推薦系統跟一般電商有什麼不同?

拍賣推薦系統是根據使用者的瀏覽、出價與關注行為,在適當位置推薦相關拍賣品的功能模組。 跟一般電商比起來,拍賣場景有幾個獨特的挑戰:

商品有時效性

一般電商的商品長期上架,推薦一件你三天前看過的洋裝很正常。但拍賣品有結標時間,推薦一件已經結標的商品不只沒用,還會讓人覺得這平台很不專業。推薦系統得隨時過濾掉已結標、已下架的品項。

庫存永遠是 1

電商推薦的商品通常有庫存,10 個人同時點進去都能買。拍賣品只有 1 件,推薦給 100 個人,最後只有 1 個人能得標。這代表推薦的多樣性更重要——不能所有人都被推薦同一件熱門品,否則競爭集中在少數拍品,其他冷門品乏人問津。

價格是動態的

推薦卡片上顯示的價格隨時在變。你推薦一件「目前 NT$500」的翡翠手鐲,使用者點進去可能已經喊到 NT$2,000 了。卡片上的價格要即時更新,或者至少標註「即時競標中」。

推薦區塊該放在頁面的哪個位置?

位置決定了推薦區塊的曝光率和點擊率,放錯位置等於做白工。 根據我們在多個拍賣平台的 A/B 測試經驗,以下是各位置的表現:

位置 平均點擊率 適合的推薦類型
商品詳情頁底部 3.2% - 4.8% 「瀏覽此商品的人也看了」
出價成功後彈窗 5.1% - 7.3% 「同賣家其他拍品」
首頁個人化區塊 2.0% - 3.5% 「為你推薦」
搜尋無結果頁 4.5% - 6.0% 「你可能也有興趣」
結標通知信 1.8% - 2.5% 「類似拍品即將結標」

點擊率最高的是「出價成功後」的推薦——因為使用者剛完成一個行動,心理上處於「購物心流」狀態,這時候推薦相關品項的接受度特別高。

不過要注意,出價後的推薦不能太貪心。推 2-3 件就好,推 10 件只會讓人覺得你在逼他花錢,反感度直線上升。

如果你想更深入了解拍賣商品頁的設計,可以參考高轉換率拍賣商品頁設計

推薦區塊版面配置比較

推薦卡片該呈現哪些資訊?

推薦卡片是使用者決定「要不要點進去」的第一道關卡,資訊太少沒吸引力,太多則造成認知負擔。 拍賣場景的推薦卡片,我們建議包含以下元素:

必要資訊

  • 主圖:比例建議 4:3 或 1:1,至少 200px 寬。拍賣品的圖片品質參差不齊,建議做等比裁切而非拉伸,背景統一用淺灰色。關於圖片處理可以看拍賣商品圖片優化指南
  • 品名:最多兩行,超過截斷加「...」
  • 當前出價:用醒目色標示(推薦用紅或橘),金額要即時或標註「約 X 分鐘前」
  • 結標時間:倒數格式(如「剩 2 小時 15 分」)比日期格式更有急迫感

加分資訊

  • 出價人數:「12 人競標中」能營造社交證明
  • 關注數:「38 人關注」暗示商品受歡迎
  • 推薦理由標籤:「因為你出價了 A 品項」或「你關注的分類」,讓使用者知道為什麼被推薦這件

千萬別放的資訊

  • 賣家評價(這是商品推薦不是賣家推薦,混在一起使用者會混淆)
  • 商品長描述(卡片不是詳情頁)
  • 太多行動按鈕(一個「查看」或「加入關注」就夠了)

什麼時機觸發推薦最有效?

除了靜態的版面位置,動態觸發的推薦也很重要。幾個黃金時機:

被超價時

使用者被別人超價了,這時候他有兩個選擇:加價,或者放棄。如果他決定放棄,馬上推薦「價格相近的類似拍品」,能有效挽留他繼續逛下去。

我們實測過一個古董拍賣平台,在超價通知裡加入 2 件推薦品項後,被超價使用者的跳出率從 65% 降到 48%,等於多留住了 17% 的買家。

關注的品項即將結標

推播通知:「你關注的 XX 還有 30 分鐘結標,同分類還有這些拍品你可能有興趣。」把推薦自然融入通知裡,使用者不會覺得被打擾。關於通知系統的設計策略可以進一步了解。

首次造訪的冷啟動

新使用者沒有行為紀錄,推薦系統沒素材可用。這時候用「熱門拍品」「即將結標」「編輯精選」來填充推薦區塊,搭配快速偏好設定(讓使用者勾選感興趣的分類),3-5 次互動後就能產生個人化推薦。

推薦觸發時機與效果對照

實務案例:推薦卡片的 A/B 測試

分享一個真實的 A/B 測試案例。某收藏品拍賣平台想優化商品詳情頁底部的推薦區塊,他們測試了三種卡片設計:

  • 版本 A:純圖片 + 品名 + 當前出價(極簡風)
  • 版本 B:圖片 + 品名 + 當前出價 + 出價人數 + 結標倒數
  • 版本 C:版本 B + 推薦理由標籤(「因為你瀏覽了 XX」)

測試跑了 2 週,各版本分配 33% 的流量,結果:

指標 版本 A 版本 B 版本 C
點擊率 2.8% 4.1% 4.6%
出價轉換率 0.9% 1.5% 1.7%
平均停留時間 12 秒 18 秒 20 秒

版本 C 的點擊率比版本 A 高了 64%,出價轉換率幾乎翻倍。推薦理由標籤的加入效果顯著,因為它回答了使用者心中的疑問:「為什麼推這個給我?」

如果你想系統化地做這類測試,可以參考 A/B 測試在拍賣網站的應用

推薦介面的常見地雷有哪些?

幾個我們看過最容易犯的錯:

推薦區塊太像廣告

如果推薦區塊的視覺設計跟站內廣告太像(背景色差異大、有明顯邊框、「推薦」兩個字太大),使用者會本能地跳過——這就是所謂的「Banner 盲點」效應。推薦區塊應該融入頁面的自然流程,用跟其他內容一致的卡片風格。

推薦內容重複

使用者在 A 頁面看到推薦了 X 品項,滑到 B 頁面又看到 X 品項,到 C 頁面還是 X 品項。這種重複會讓人覺得「這平台是不是只有這一件東西?」後端要做去重邏輯,同一個 session 內已曝光的推薦品項不重複出現。

已結標品項沒清除

前面提過但值得再強調。推薦清單的快取如果更新太慢,使用者點進去發現已經結標了,體驗非常差。建議推薦 API 的快取 TTL 不超過 5 分鐘,或者在前端渲染時即時檢查結標狀態。

沒有「不感興趣」的反饋機制

讓使用者可以按「X」關掉不想看的推薦,或者標記「不感興趣」。這不只改善體驗,還能回饋給推薦演算法做負面信號學習,讓推薦越來越準。

技術實作的注意事項

推薦介面的前端實作有幾個容易踩坑的地方:

延遲載入

推薦區塊通常在頁面下半部,不需要首次載入就請求。用 Intersection Observer 做延遲載入,等使用者捲動到推薦區塊附近再呼叫 API,可以減少首屏載入時間約 200-400ms。這對Core Web Vitals 的優化也有幫助。

骨架屏

推薦 API 的回應時間通常在 100-300ms,這段時間顯示骨架屏(灰色方塊動畫)比空白或 loading spinner 的體驗好得多。使用者會知道「這裡等一下會有東西出來」。

圖片預載

推薦卡片的主圖可以用 loading="lazy" 搭配適當的 srcset,確保不同裝置載入合適尺寸的圖片。如果你的拍賣平台需要同時在手機和電腦上良好呈現,這點特別重要。

如果你正在規劃拍賣平台的前端架構,找有經驗的網頁設計團隊合作,能避免很多推薦介面的 UX 問題。

FAQ

Q:推薦演算法該自己做還是用第三方服務? 中小型拍賣平台(月活 5 萬以下)建議先用規則式推薦(同分類、同賣家、同價位帶),不需要上機器學習。等資料量夠了(至少 10 萬筆行為紀錄),再考慮 Collaborative Filtering 或用 AWS Personalize 這類託管服務。

Q:推薦區塊一次顯示幾件最適合? 行動裝置 2-4 件(水平滑動),桌面端 4-6 件(一排)。超過 6 件使用者的注意力就分散了,點擊率反而下降。如果有更多推薦品項,做分頁或「查看更多」按鈕。

Q:推薦需要即時更新嗎? 價格資訊建議即時(或接近即時),但推薦清單本身不需要。每 5-10 分鐘更新推薦清單是合理的頻率。使用者在同一頁停留期間,推薦內容不斷跳動反而會造成干擾。

Q:怎麼衡量推薦系統的效果? 核心指標有三個:推薦點擊率(CTR)、推薦帶來的出價率、推薦帶來的成交金額占比。健康的拍賣推薦系統,CTR 應該在 3-5%,推薦成交占比 10-20%。

相關文章

自動出價工具有用嗎:代理出價與狙擊工具解析

代理出價跟狙擊工具到底差在哪?這篇從實戰角度拆解兩種自動出價方式的運作原理、優缺點和適用場景,讓你搞清楚什麼時候該用哪一種。

· 7 分鐘 · 4 次閱讀
閱讀 →

拍賣出價的心理學:用理性策略打贏心理戰

拍賣是一場心理戰,學會讀懂對手的出價模式,用策略性出價取得優勢,而不是靠衝動贏得拍賣。

· 8 分鐘 · 3 次閱讀
閱讀 →

拍賣網站的 A/B 測試:用數據驅動設計決策

別再靠感覺改版了!A/B 測試讓拍賣網站的每次改動都有數據撐腰

· 10 分鐘 · 10 次閱讀
閱讀 →