電商知識庫
商品篩選器設計完整指南
讓 100 件商品從茫茫大海，變成 30 秒就能找到想要的那一件
商品篩選器是電商分類頁最重要的轉換工具。商品超過 30 件就應該有完整篩選功能，否則使用者會在大量商品中迷路然後離開。研究顯示，使用篩選器的顧客比沒用的轉換率高 50-100%。本文教你篩選類型規劃、桌機與行動版差異設計、SEO 友善網址處理、空結果救援等實作。
每個類目選擇 5-8 個對該品類最重要的篩選軸，不要全部都放，反而稀釋使用者注意力。
桌機分類頁的經典佈局：左側欄 200-280px 寬的篩選區（垂直擺放各篩選類型）；右側商品列表佔主要版面。篩選類型用可摺疊區塊呈現，預設展開最重要的 3-4 個類型（如價格、顏色、尺寸），其他類型摺疊。每個選項旁顯示商品數量（如「紅色 (23)」），讓使用者知道勾選後會剩多少。
手機螢幕窄，篩選器設計完全不同：頂部放一個明顯的「篩選」按鈕（旁邊顯示「3 個篩選中」當有選擇時）；點擊後從右側或底部滑出全螢幕篩選層；篩選層內容垂直滾動，包含所有篩選類型；底部固定「套用」與「清除」雙按鈕；套用時關閉篩選層回到商品列表。重點：不要把桌機左側欄硬塞到手機畫面。
使用者勾選篩選後，要清楚顯示「目前篩選狀態」：商品列表上方顯示已選擇的篩選 tag（如 [紅色 ×] [NT$500-1000 ×] [4 星以上 ×]）；每個 tag 都可單獨移除；提供「清除全部篩選」按鈕一鍵歸零；篩選後的結果數量明確顯示（如「找到 12 件符合條件的商品」）。讓使用者隨時清楚自己的篩選狀態。
篩選會產生大量 URL 組合，SEO 處理策略：基本篩選用網址參數（如 ?color=red&size=m）；canonical 指向分類主頁避免重複內容；對於高搜尋量的篩選組合（如「男士黑色皮夾」）可建立獨立靜態頁取代參數網址，獲得更好 SEO 排名；robots.txt 阻擋過深篩選層被爬蟲索引；hreflang 與多語系篩選頁要正確對應。
使用者把篩選條件設太嚴格沒結果時，要設計溫和救援：明確顯示「目前沒有符合的商品」（不要只是空白）；建議「移除某項篩選看更多」（如「移除『紅色』可看到 23 件商品」）；推薦相似類別商品；提供「儲存搜尋條件」功能，新商品上架符合條件時通知；放上客服 LINE「找不到想要的商品？聯絡我們」。把每次空結果變成關係建立機會。
NT$24,800/年起，享受完整電商解決方案：
電商常見篩選類型：價格區間、品牌、顏色、尺寸、材質、評分、折扣狀態、上架時間、出貨時間。每個類目選擇 5-8 個篩選軸即可，太多反而讓使用者眼花撩亂。
桌機版建議放左側欄垂直擺放，這是電商使用者的習慣位置；頂部橫式只適合 1-3 個快速篩選。行動版完全不同：把篩選包進按鈕，點擊後從右邊或下方滑出全螢幕篩選層。
桌機建議即時篩選；行動版建議點擊套用。即時篩選的優點是反應快；點擊套用的優點是組合操作明確，使用者掌控感較強。
篩選器最好讓 URL 反映篩選狀態。SEO 處理：使用 canonical 標籤指向分類主頁，但允許主要篩選組合被獨立索引。
空結果處理要溫和：明確顯示沒有符合的商品；建議放寬篩選條件；推薦移除某個篩選後的結果預覽；提供全部清除按鈕；推薦熱門類似商品。