電商網站架構設計：分類規劃、站內搜尋與篩選，讓顧客三步內找到商品

商品再好，顧客找不到就等於不存在。許多網店上架幾百個商品後，主選單越來越長、分類越切越細，顧客在選單裡迷路，只好用站內搜尋碰運氣；偏偏搜尋打錯一個字就跳出「查無結果」。電商網站架構沒規劃好，影響的不只是使用者體驗，也會讓 Google 難以理解哪些頁面才是重點。

這篇文章整理 Baymard Institute 的首頁與分類導覽研究、站內搜尋研究，Nielsen Norman Group（NN/g）的搜尋設計建議，以及 Google Search Central 的篩選網址文件，說明分類架構、主選單、站內搜尋與篩選四個環節該怎麼設計。

為什麼導覽與搜尋這麼重要

Baymard Institute 在 2026 年 10 月更新的導覽研究中，評比了 180 多個歐美主要電商網站，發現有 61% 的桌機網站、65% 的手機網站在首頁與分類導覽的表現屬於「普通」到「差」。站內搜尋方面，Baymard 2026 年的評比也指出 56% 的網站搜尋體驗屬於「普通或更差」。

在商品列表與篩選的研究中，Baymard 觀察到：列表與篩選工具設計平庸的網站，使用者在尋找商品的任務中放棄的比例高達 67–90%；而工具稍加優化的網站，同類任務的放棄比例只有 17–33%。找得到，才有機會買。

分類架構：用顧客的邏輯分類

分類架構是整個網站的骨架。規劃時有三個原則：

一、用顧客會用的詞

分類名稱要用顧客的說法，而不是公司內部的產品線代號。例如「機能系列」「A 系列」對顧客毫無意義，「防曬外套」「登山後背包」才是他們會想點、也會搜尋的詞。命名前可以先做關鍵字研究，看顧客實際怎麼搜尋。

二、層級深度與每層數量要平衡

Baymard 建議，當一個選單超過大約 10 個項目時就應該再細分；但最底層的分類最好至少有 10 個商品，避免顧客點進去只看到兩三件。常見的結構是「大分類 → 子分類 → 商品」，多數中小型網店兩到三層就足夠。

三、能用篩選解決的，不要再拆分類

Baymard 2026 年的導覽研究指出，有 79% 的網站把應該用篩選處理的屬性做成了分類。例如把「黑色包包」「紅色包包」「白色包包」各做成一個分類，顧客想比較不同顏色時就得來回切換。顏色、尺寸、價格這類共通屬性，交給篩選處理會更好用。

以一家假設的戶外用品店為例：

主選單設計：讓顧客一眼看到全貌

• 手機版主選單第一層就是商品分類：Baymard 的評比中，22% 的網站在手機版沒有把商品分類放在主選單第一層，讓顧客多點好幾次。
• 大分類標題要可以點：Baymard 指出 31% 的網站分類標題無法點擊。顧客點「背包」時，應該能進到所有背包的列表頁。
• 標示目前所在位置：96% 的網站沒有在主選單中標示使用者目前所在的大分類。加上底線或顏色變化，可以幫助顧客確認自己在哪裡。
• 下拉選單加延遲：桌機版滑鼠經過就展開的大型下拉選單，建議加上約 0.3–0.5 秒的延遲，避免滑鼠經過時選單閃爍誤觸。
• 中介分類頁先放子分類：點進大分類後，先用清楚的子分類圖示與名稱引導，再放促銷內容。

一般網站導覽的通則，也可以參考網站導覽設計。

站內搜尋：讓搜尋框好找、好用

會使用站內搜尋的顧客，通常已經知道自己想找什麼，意圖很明確。NN/g 長期建議，搜尋應該是一個看得見的輸入框，而不是一個連結；輸入框要夠寬，能完整顯示一般長度的搜尋字；而且每一頁都要能使用搜尋。

搜尋要聽得懂顧客的說法

顧客不會照你的商品名稱打字。搜尋功能至少要能處理：

• 錯字與同音字：Baymard 2021 年的研究指出，69% 的網站在搜尋字詞輕微拼錯時，自動完成無法提供相關建議。中文也有同樣的問題，例如「保溫杯」打成「保溫盃」。
• 同義詞：「後背包」「雙肩包」「背包」應該找到相同的結果。
• 非商品的搜尋：顧客也會搜尋「退貨」「運費」「門市」，Baymard 2019 年的研究指出 15% 的網站不支援這類查詢。
• 型號與規格：例如搜尋「28L」「iPhone 17 殼」。

自動完成建議

Baymard 2022 年的研究指出約 80% 的電商網站有自動完成功能，但只有 19% 做得完全正確。NN/g 2018 年的電商研究則觀察到，使用者在有建議可選的情況下，實際點選建議的比例約為 23%；不過即使沒有點，建議也能幫助使用者確認拼字、了解網站有哪些商品。設計重點：

• 只建議確實有結果的關鍵字。
• 顧客輸入的字與系統補上的字用不同樣式區分。
• 手機版以簡潔的文字建議為主，不要塞太多圖片。

查無結果頁不能是死路

搜尋沒有結果時，不要只顯示「查無資料」。可以提供拼字建議、熱門分類、暢銷商品，以及客服聯絡方式（例如 LINE 官方帳號），讓顧客還有下一步可走。也要定期查看站內搜尋紀錄，找出常見卻沒有結果的關鍵字，補上同義詞或新增商品。

篩選設計：幫顧客縮小範圍

篩選是分類的延伸，讓顧客從幾十、幾百個商品中快速縮小範圍。

• 依分類提供專屬篩選：服飾要有尺寸、版型；3C 要有規格、相容型號；保養品要有膚質、功效。
• 顯示已套用的篩選：在列表上方列出目前條件，並能一鍵移除單一條件或全部清除。
• 顯示每個選項的商品數量，避免點下去才發現沒有結果。
• 手機版篩選要好操作：用全螢幕面板呈現，套用後明確顯示結果數量。

篩選網址與 SEO

篩選對使用者很重要，但每一種篩選組合都可能產生新網址。Google Search Central 指出，大量篩選網址可能造成過度檢索，讓爬蟲把資源浪費在沒有價值的組合上。基本原則是：有搜尋需求的單一篩選（例如「防水登山鞋」）可以做成可索引的頁面；多重組合與排序頁則應控管爬取。詳細做法可參考電商 SEO 完整攻略。

架構檢查清單

1. 分類名稱是否使用顧客常用、有搜尋量的詞？
2. 最底層分類是否大多有 10 個以上商品？
3. 顏色、尺寸等屬性是否用篩選處理，而不是拆成分類？
4. 手機版主選單第一層是否就是商品分類？
5. 搜尋框是否在每頁都看得到，並能處理錯字與同義詞？
6. 查無結果頁是否提供替代路徑？
7. 篩選是否顯示已套用條件與商品數量？
8. 篩選網址是否有控管，避免大量無用網址被收錄？

常見問題

商品不多，還需要站內搜尋嗎？

商品少於幾十件時，清楚的分類通常就夠了，但搜尋框仍有價值，因為顧客也會搜尋退貨、運費等資訊。商品越多，搜尋的重要性越高。

一個商品可以放在多個分類嗎？

可以，例如一件外套同時屬於「新品」與「外套」。但要確保商品頁只有一個主要網址，避免同一商品因為不同分類路徑而產生多個重複網址。

開店平台的搜尋功能不夠好怎麼辦？

先確認平台是否支援同義詞設定與搜尋紀錄報表。若需求更進階，可以評估平台應用程式商店中的搜尋外掛，或在商品標題與標籤中補上常見的別名。

結語：好的架構讓商品自己被找到

電商網站架構的目標，是讓顧客不管從選單、搜尋還是篩選出發，都能在幾步之內找到想要的商品，同時讓 Google 看懂網站的層級。先盤點分類命名與搜尋紀錄，往往就能找到最快見效的改善點。想了解電商網站從平台到行銷的完整規劃，可以閱讀電商網站架設完整指南。

如果你的分類越來越亂、搜尋常常找不到東西，網軍行銷的電商網站建置服務可以協助重新規劃分類架構、搜尋與篩選。

參考資料

• Baymard Institute，Homepage and Category Navigation UX: Pitfalls and Best Practices：https://baymard.com/blog/ecommerce-navigation-best-practice
• Baymard Institute，E-Commerce Search UX Research：https://baymard.com/blog/ecommerce-search-report-and-benchmark
• Baymard Institute，Product Lists & Filtering UX Research：https://baymard.com/research/ecommerce-product-lists
• Nielsen Norman Group，Search: Visible and Simple：https://www.nngroup.com/articles/search-visible-and-simple/
• Nielsen Norman Group，Site Search Suggestions：https://www.nngroup.com/articles/site-search-suggestions/
• Google Search Central，Managing crawling of faceted navigation URLs：https://developers.google.com/search/docs/crawling-indexing/crawling-managing-faceted-navigation