設計實務

電商搜尋與篩選功能的 UX：讓找得到比逛得到更重要

2026年8月8日・ViewInternet 編輯部

在電商網站裡，會主動用站內搜尋的訪客往往是購買意願最高的一群人，因為他們心裡已經有明確的東西想找。但諷刺的是，搜尋與篩選卻是很多電商站做得最隨便的功能，搜尋框藏在角落、打了關鍵字跳出一片空白、篩選條件一堆卻沒一個是自己想要的。這些高意願的訪客一旦被卡住，通常不會慢慢逛，而是直接離開換一家。這篇談電商的站內搜尋與篩選功能該怎麼設計，把這群最想買的人穩穩留下來。

搜尋框：放在找得到的地方且夠大

搜尋功能的第一課，是讓想用的人一眼就找得到它。搜尋框應該放在頁面上方最顯眼的位置，通常是頂部導覽列的中央或右側，而且要夠大、夠明顯，不要縮成一個小小的放大鏡圖示藏在角落，逼訪客還得先找搜尋在哪。搜尋框裡可以放一句提示文字，暗示這裡能搜什麼，例如搜商品名或品牌。進階一點的做法是在使用者打字時就即時跳出建議，包含熱門關鍵字、可能的商品名或分類，幫他更快命中想找的東西，也順手修正打錯的字。對商品量大的電商站來說，這個即時建議常常就是把訪客快速送到商品頁的捷徑。

搜不到時：別給一片空白

搜尋 UX 最見真章的地方，是使用者打了關鍵字卻沒有結果的那一刻。很多站這時直接甩一片空白或冷冰冰的「查無資料」，等於把一個明明想買的人硬生生推出門。正確的做法是把無結果頁當成一個挽回的機會：先友善說明沒有找到相符的商品，接著主動提供出路，例如推薦相近的熱門商品、列出熱搜關鍵字、或建議檢查有沒有打錯字。若能判斷使用者可能想找的類別，直接把相關分類的商品帶出來更好。此外要留意搜尋本身要夠聰明，能容忍同義詞、簡繁、常見錯字與空格，因為真實使用者的輸入永遠比想像中隨性，搜尋引擎越能包容，命中率就越高，被逼走的人就越少。

篩選條件：放消費者會用的，不是後台有的

當搜尋或分類帶出一長串結果，篩選就是幫訪客收斂的主力工具。篩選設計最常犯的錯，是把後台資料庫裡所有欄位一股腦全搬上來，結果一整排條件裡沒幾個是消費者真正在意的。正確的順序是反過來想：買這類商品的人通常會用什麼條件挑選，就放什麼。多數情況離不開價格區間、尺寸、顏色、品牌、風格這幾類。條件的呈現也要講究，選項不多時直接攤開讓人勾選，選項很多時再收進可展開的區塊。很重要的一點是讓訪客隨時看得到自己套用了哪些條件、篩完剩幾個商品，並且能一鍵清除單一條件或全部重來。若某個條件篩下去會變成零結果，最好事先就標示或禁用，別讓人選了才發現撲空。

手機版：把強大功能收得順手

台灣電商的流量絕大多數來自手機，但手機螢幕小，要在有限空間裡塞進搜尋與一整套篩選，考驗的就是收納的功力。搜尋在手機上通常維持一個明顯的入口，點開後展開全螢幕的搜尋介面，讓輸入與建議都有足夠空間。篩選則常收成一顆明顯的按鈕，點開後從底部或側邊滑出一整面的條件選單，讓使用者從容地勾選，再按套用一次更新結果，而不是每勾一項就整頁跳動。收合狀態下也要能一眼看出目前套用了幾個條件，例如在按鈕上標個數字。這一整套的設計目標，是讓手機上的搜尋與篩選跟電腦一樣強大，卻不會因為擠而變得難用。設計過程一定要拿真手機實測，很多在電腦模擬器上順暢的操作，到真實手指與小螢幕上就會露出破綻。

搜尋與篩選是那種平常不起眼、卻在關鍵時刻決定高意願訪客去留的功能，投資報酬往往比想像中高。若品牌的電商站搜尋難用、篩選幫不上忙，讓最想買的人一再從指縫溜走，可以把這一塊的規劃交給熟悉購物體驗的設計團隊，透過電商官網設計與改版服務，從搜尋框、無結果頁到篩選與手機版一次做好，讓每一個帶著明確需求進站的人，都能快速找到並買下他想要的。