官網『商品排序下拉選單』(Sort Dropdown) 設計完整攻略：中小企業如何用一個看似普通的下拉選單，把訪客的『不知道從哪看起』變成『這個順序最合我意』

你有沒有發現，客戶進到商品列表頁，第一件事往往不是往下滑

而是眼睛先掃一圈——找有沒有可以「排序」的選項。

為什麼？因為每個人買東西的思考方式不一樣。有人一定要「便宜的先看」；有人相反，「貴的先看，我要看看你們最頂規的樣子」；有人只想看「大家都在買什麼」；還有人只在乎「有沒有新品」。你把一整頁商品原封不動端出來，等於逼所有人用同一個順序看，這對每一種買家都不夠貼心。

商品排序下拉選單（Sort Dropdown）就是那個右上角、常常被設計成灰灰小小、卻其實默默影響成交率的角色。做對了，客戶找得快、比得準、下單也快；做錯了，客戶滑三頁就走人，還會覺得你這網站「東西怎麼這麼亂」。

Photo by Shutter Speed on Unsplash

排序選項不是越多越好，是「越貼近客戶決策」越好

先講一個常見錯誤：很多中小企業官網一上排序選單，就把後台能給的選項全塞進去，什麼「按 SKU 編號」「按建檔日期」「按廠商代碼」都出現。這些是後台管理員的邏輯，不是客戶要的。

客戶只在乎四件事：便宜、貴、新、熱。所以你的排序選項，應該從這四個維度往下想：

1. 價格由低到高 / 由高到低：永遠是排第一名的選項，因為預算是最強的過濾器。實體店客戶看標價就知道自己買不買得起，官網要靠這個選項替代這個動作。

2. 最新上架：對於服飾、美妝、3C、季節性商品這類會頻繁上新的類別，這是回頭客最常按的選項——「有沒有新的？我上次來看過了。」

3. 熱門度／銷量：猶豫型的客戶最愛這個，因為「大家都買」等於幫我做決定。這個排序背後其實是社會認同（Social Proof）在做工。

4. 評價高低（如果你有累積評論的話）：比熱門更進一階的信任訊號，代表買了的人願意花時間回頭給分。

如果你賣的是有「規格差異」的商品（燈具、家電、園藝資材），還可以加上「按容量／功率／尺寸」這種規格排序，讓比較型客戶自己去挑。但一般中小企業官網，先把上面四項做好就贏過八成同行了。

預設排序選什麼？這是全站轉換率的隱形開關

大部分官網的預設排序都是「最新上架」或「隨機」，但這其實不見得對你有利。

預設排序的原則是：讓最能成交的商品最先被看到。「最能成交」的定義因產業而異：

• 賣一次性快消品（清潔劑、耗材、零食）：預設「熱門度」，因為新客戶會直接跟著大家買。
• 賣高單價客製品（家具、精品）：預設「精選推薦」，讓行銷團隊人工挑幾個轉換率高的擺前面。
• 賣季節性商品（服飾、園藝）：預設「最新上架」，因為當季新品的毛利最高。
• 賣工業品、B2B 型商品：預設「型號由低到高」或「品牌 A→Z」，因為客戶通常知道自己在找什麼型號。

不知道選哪個，就用一個超簡單的判斷：如果你要親自站在店門口推銷，你會先拿哪三樣商品給客戶看？預設排序就該把那三樣排在最前面。

「相關性 / 精選推薦」這個選項要不要放？

Amazon、蝦皮這類大平台的預設排序永遠是「Relevance（相關性）」，背後是複雜的演算法在跑。中小企業做不到這種演算法，但你可以做「精選推薦（Featured）」：由行銷或老闆手動排一個順序，把想推的商品置頂。

好處是完全可控——這週想推清倉商品就把清倉品排前面，下週想推新品就換新品。壞處是需要有人定期維護，如果你的商品幾百上千件，維護成本會不小。

實務上的做法是：只針對前 6~12 個「置頂位」做人工排序，剩下的用系統邏輯排。因為訪客滑到第 12 個之後，大多會直接切換排序選項自己選了。

Photo by Growtika on Unsplash

下拉選單的視覺設計：小細節決定會不會被找到

排序下拉選單本身是個超小的元件，但「找不到」跟「找不太到」是完全不同的體驗。幾個實作重點：

位置固定在商品列表右上角。這是全世界電商已經約定成俗的位置，不要亂改。左上角是分類、右上角是排序與檢視方式（大圖／清單／小圖切換），這是客戶的肌肉記憶。

選單前面要加一個小標籤：「排序：」不要只丟一個下拉選單讓客戶猜。加上「排序：」兩個字，理解成本瞬間降到零。有些網站會用小小的排序圖示（上下箭頭）替代文字，但在中文語境裡，直接寫兩個字更快。

當前選中的排序方式要顯示在按鈕上。比如按鈕直接寫「排序：價格由低到高 ▼」，而不是只寫「排序 ▼」。這樣客戶滑到第三頁還記得自己目前是用什麼順序在看。

下拉展開時，用打勾或粗體標示當前選項。讓客戶一眼看到「我現在在哪」以及「我可以切到哪」。

切換排序後，畫面不要整頁跳。用 AJAX 局部更新商品列表就好，最好保留客戶目前的捲動位置（如果他已經滑到第 20 個商品，切完排序不要把他丟回頁首）。這一點違反直覺，但實測會發現，「保留位置＋只重排」比「回到頁首＋新排序」的深度瀏覽次數多 30% 以上。

行動裝置上，下拉選單根本不夠用

手機螢幕小、手指粗、系統原生 select 選單又醜，如果你直接用一顆 HTML 的 <select> 標籤，會有兩個問題：一是視覺跟你網站的品牌設計完全脫節，二是選項數超過 6 個時，iOS 的滾輪選單會非常難操作。

手機版的排序有兩種主流做法：

做法一：底部彈出面板（Bottom Sheet）。點下「排序」按鈕後，從螢幕下方滑出一個面板，把所有排序選項用大按鈕列出來，每個選項都是一整行、有 44px 以上的觸控區。這是目前大型電商（蝦皮、momo、PChome）的標準做法，也是我們最推薦的方式。

做法二：與篩選整合成一顆按鈕。手機版把「篩選」跟「排序」合併成一顆「篩選 & 排序」按鈕，點下去進到一個全螢幕的設定頁，讓客戶一次搞定要看什麼、怎麼看。這適合商品數超級多、篩選條件也複雜的網站。

不管用哪一種，行動版排序的觸控區至少要 44x44px，因為 iOS 的 Human Interface Guidelines 直接規定，這是手指能穩定點擊的最小尺寸。做小了，客戶會一直誤觸旁邊的商品。

Photo by Brett Jordan on Unsplash

排序記憶功能：讓回頭客不用每次都重選

這是一個 90% 的中小企業官網都沒做、但成本很低的優化：把客戶上次選的排序方式記在瀏覽器裡，下次來自動套用。

技術上就是把選中的排序值存進 localStorage 或 Cookie，下次進到商品列表頁時讀取並自動套用。這樣熱愛「便宜先看」的客戶，每次都不用再點一次；愛「新品先看」的客戶，也不用每次都掃過整排熱銷品。

要注意的是，這個記憶要「按分類」記，不能全站共用。比如客戶在「服飾」分類選了「最新上架」，切到「家電」分類時應該重置（因為家電他可能更在乎價格）。做全站共用會出現「我在買冰箱，為什麼跳出上週看衣服的排序」的錯亂感。

幾個容易踩的坑，順便提醒

坑一：URL 沒帶排序參數，導致無法分享頁面。客戶好不容易挑好排序、想把連結傳給老公老婆一起看，結果對方一打開回到預設排序。做法是把排序參數放進 URL query string（例如 ?sort=price_asc），這樣連結一貼過去就能還原。

坑二：排序邏輯與後端不一致。前端寫「價格由低到高」，結果後端排序時把「售價 0 元」或「未上架商品」的價格當成 0 排最前面，畫面上全是空白商品。解法是後端排序時要過濾掉價格為 0 或 null 的品項，或至少放到最後。

坑三：切換排序後篩選條件被清掉。客戶花五分鐘勾了 8 個篩選條件，一按排序全部消失，鐵定摔手機。前端要確保排序切換只重排、不清篩選；篩選切換只重篩、不重排。這兩者要獨立。

坑四：SEO 沒處理好，排序頁面被 Google 當重複內容。不同排序的商品列表其實內容一樣、只是順序不同。要記得在排序頁面加上 canonical 標籤指回原分類頁，避免 Google 認為你有一堆重複頁面在稀釋權重。

結語：小小一個下拉選單，反映的是你懂不懂你的客戶

回到最開頭那句話——客戶滑進商品列表頁第一件事，就是找排序。這個動作幾乎是本能。你把排序做得順手、貼近他的思考方式，他就會在你的網站多待五分鐘、多看十件商品、成交機率就會多好幾成。

如果你的官網目前只有系統預設的「新到舊」，明天就可以先加上「價格由低到高」跟「熱門度」兩個選項，觀察一個月後看看每個排序被使用的次數。你會很意外——原來客戶的購買思路，跟你以為的完全不同。

而這個看似不起眼的下拉選單，就是你重新認識客戶的第一個入口。