官網『篩選側欄』(Filter Sidebar / Faceted Search) 設計完整攻略：中小企業如何用一排勾選框把商品列表變成客戶秒下單的成交機器

訪客點進商品列表滑三下就跑，你家的官網有這問題嗎？

先講一個我們最常在客戶身上看到的場景：他們花了不少預算做官網、上了 60 個產品、每張照片還特地重拍過。結果 GA4 打開來看，商品列表頁的跳出率高得嚇人——訪客進來平均只滑兩下就走了，一件商品都沒點開，更別說詢問單。

然後老闆會問我：「我東西這麼多、拍得也不差，為什麼客戶都不看？」

大部分時候，問題不在照片、也不在產品，而是你的官網根本沒讓客戶「挑得動」。他一次要看 60 樣東西，價格區間差三倍、規格差五種、應用情境也不一樣，他連從哪裡看起都不知道，當然就滑一下走人。

這篇要聊的就是解決這件事情的關鍵功能——篩選側欄（Filter Sidebar / Faceted Search）。它就是商品列表左邊那一排看起來很平凡的勾選框和滑桿，但用對了，它會直接把「隨便逛逛」的訪客變成「我就是要買這個」的準客戶。

Photo by Rifki Kurniawan on Unsplash

為什麼中小企業官網最容易忽略篩選側欄

老實說，中小企業做官網最常見的心態是：「我又不是 momo，商品也才幾十件，加篩選幹嘛？分類選單就好了吧？」

這個想法看起來合理，但實務上有三個盲點：

第一，客戶要的不是「分類」，是「條件」。分類是給你自己看的邏輯（例如：辦公椅／餐椅／沙發），客戶心裡想的其實是「兩萬以內、可拆洗、灰色系」。這中間差了整整一層轉換，靠分類選單根本走不過去。

第二，商品越少的官網其實越需要篩選。反直覺對吧？但道理很簡單：momo 有幾百萬件，客戶進來本來就預期要挑；你只有 60 件，客戶反而期待你能「幫他快速找到剛好的那一件」。如果 60 件都用同一個瀑布流丟給他，看起來就是「你根本不了解我要什麼」。

第三，篩選側欄是最便宜的轉換率工具。比起改 Hero、換攝影、加動畫，做一個好用的篩選側欄的技術成本其實不高（如果是 WordPress 甚至有現成外掛），但對詢問轉換率的影響通常是十位數百分比在跳的。

篩選側欄的 5 種常見形態，你官網適合哪一種？

不是每一種篩選都長一樣，先搞清楚形態才選得對：

1. 勾選框（Checkbox）：適合「品牌」「顏色」「材質」這類可多選的分類條件。客戶一次可以勾好幾個，例如同時想看「原木＋灰色＋北歐風」的椅子。

2. 單選按鈕（Radio）：適合互斥選項，例如「新品／二手／全部」。用勾選框做這件事會讓客戶困惑，因為兩個同時勾等於沒篩。

3. 價格滑桿（Range Slider）：適合連續型數值，例如「價格 3,000～8,000」「螢幕尺寸 24～32 吋」。滑桿的好處是操作快、視覺直覺，缺點是精準度不夠——所以最好搭配左右兩邊的數字輸入框，讓客戶可以打精確數字。

4. 標籤群組（Chip / Tag）：適合快速切換的熱門條件，例如「本週新品」「熱賣」「特價中」。它們通常不放在側欄，而是放在列表最上方橫排。

5. 下拉選單（Dropdown）：適合選項超過 15 個、但客戶通常只選一個的情境，例如「品牌」有 40 家。全部展開會佔死版面，收起來就好。

實務上一個好的篩選側欄，通常會混合用上以上 3～4 種。不要為了統一而全部用勾選框，操作起來會很累。

好的篩選側欄，都遵守這 6 條核心設計原則

原則一：篩選條件永遠顯示「該分類剩下幾件」。例如「紅色 (12)」「藍色 (0)」。這個小小的數字有兩個作用：讓客戶知道還有沒有貨、避免他選了條件才發現什麼都沒有。這是我們自己做過的網站裡，改前改後跳出率差最多的細節之一。

原則二：已選條件要「疊在最上面明顯處」，並且一鍵可移除。客戶勾了 5 個條件之後，他不會想再滑到左邊那 5 個框去一個個取消。一個「已選：紅色 × / 三千以下 × / 全部清除」的橫條，會讓他更敢多嘗試。

原則三：篩選結果要「即時更新」，不要按「套用」。2010 年代的網站常常要按下「套用篩選」才會刷新，那是因為當時 AJAX 還不成熟。現在的技術做即時篩選很簡單，客戶勾一下就看到結果，決策速度會快 3 倍以上。

原則四：條件多的時候要摺疊，不要全部攤開。如果側欄有 8 個分類，全部展開會變成一根長到看不到底的柱子。預設只展開「品牌」「價格」「顏色」這種最常用的 3 個，其他都收起來，客戶要用再展開。

原則五：搜尋框優先出現在「品牌」「產地」這種選項多的分類裡。例如你賣紅酒，「產地」有 30 個國家，客戶不會想從頭滑到尾找義大利。品牌選單上面加個小搜尋框，打「義」就跳出來。

原則六：URL 要隨著篩選同步改變。這件事客戶不會看到，但很重要——當客戶把「灰色沙發 3 萬以下」的篩選結果傳給老婆時，那個網址要能重現同樣的畫面。這對 SEO 也有好處，Google 會把每一種常見的篩選組合當成一個獨立的著陸頁來收錄。

Photo by Igor Miske on Unsplash

這些是我們看過最常見的「篩選側欄地雷」

地雷一：條件太多，選項不合理。賣衣服的網站，尺寸下面竟然列了 20 個「S / M / L / XL / 25 / 26 / 27 / 28 / EU36 / EU38...」——因為後端資料庫裡就是這樣亂建的。客戶看了會覺得你這家很亂，直接跳走。

地雷二：選了條件卻搜出 0 件。這通常是因為沒有做「條件互斥檢查」。客戶勾了「紅色＋XXL」結果空空如也，他不會想「應該換個條件試試」，他會直接關掉分頁。解法就是原則一——一開始就告訴他「XXL (0)」。

地雷三：篩選條件跟商品照片不相符。客戶勾了「白色」但跳出來的商品照片是一堆彩色的，因為後台建檔的時候商品 tag 打錯了。這種問題長期累積下來會讓你官網信任度崩掉。所以篩選側欄不是設計問題，而是商品資料主檔（PIM）品質問題——建議定期抽 20 件檢查一次。

地雷四：手機版直接把整個側欄塞在畫面左邊。手機螢幕就那麼寬，側欄佔一半，商品縮到只剩兩個字，等於全毀。

手機版篩選：至少花 30% 的心思在這裡

台灣中小企業官網的手機流量占比通常是 65%～80%，篩選功能能不能在手機上用得順，直接決定了大半詢問。手機版最推薦的做法是：

1. 商品列表最上方放一顆「篩選 (3)」按鈕，括號裡是「目前已套用幾個條件」。

2. 點下去之後，用從底部滑出的全螢幕遮罩顯示所有條件，不要用小視窗、也不要用側邊拉出。全螢幕才有空間讓客戶好好挑。

3. 底部固定兩顆按鈕：「重設（次要）」「套用（主要，有反白）」，並且套用按鈕上要顯示「（顯示 24 件）」，客戶按下去之前就知道會看到什麼。

4. 手機版建議「套用後才刷新」，因為即時刷新在手機的網路情境下反而會讓畫面一直跳，體驗差。

Photo by Money Knack on Unsplash

怎麼衡量篩選側欄有沒有做對？三個免費就能看的指標

做完篩選側欄之後，別急著把它當背景圖，開 GA4 看以下三個指標：

指標一：篩選使用率——有多少商品列表頁的訪客實際點了篩選？如果不到 20%，代表你的側欄太不明顯，或者客戶根本不知道那些勾選框有反應。可以把它視覺加重、加上動畫提示。

指標二：篩選後商品點擊率——用了篩選之後，客戶點進單一商品頁的比率，通常會是「沒用篩選」的 2～4 倍。如果差不多、甚至更低，代表你的篩選結果不夠精準（條件跟商品 tag 沒對到）。

指標三：熱門條件組合——GA4 事件裡可以撈出「客戶最常勾哪三個條件」。這是價值超高的商業情報：例如你發現有 40% 的訪客都會勾「三萬以下＋可拆洗」，那你首頁就應該直接放一個 CTA「三萬以下可拆洗沙發全系列」，直接帶他跳過整個瀏覽過程。

結語：花在篩選側欄上的錢，是官網最不虧的投資

回到最開頭：官網跳出率高，通常不是照片不夠美，是沒讓客戶挑得動。而篩選側欄是解這件事最直接的工具。

如果你正在評估要不要花錢做這個功能，我的建議是這樣拆解投入順序：

第一步，先在後台把商品的主要規格欄位補齊（顏色、價格區間、材質、應用情境等）。沒有資料，做再好的側欄也是空殼。

第二步，決定要用WordPress 現成外掛（例如 FacetWP、WOOF），還是走客製化前端。前者兩三萬解決，後者六到十萬起跳但可以完全客製手機體驗。

第三步，上線後兩週固定看一次 GA4，用剛才那三個指標優化。這個功能不是做完就結束，越調越有感。

如果你的官網現在還沒有篩選側欄，或者有但客戶根本沒在用，可以到奧隆的聯絡表單丟一份需求給我們，我們會先幫你看一次目前的商品列表頁健檢，再告訴你最快、最省的改法在哪裡。⚡