👋 Hi

我是 Taony，我們又見面了～

你知道嗎？「篩選 & 排序」功能的設計往往容易被設計師忽視，覺得這都是開發工程師的事。

好的篩選、排序使用體驗，可以降低跳出率並且提高轉換率。

這期私房菜，和你分享我精心整理的「 篩選 & 排序設計 Checklists 」

你只需要收藏它並且在設計工作中，對照檢查就可以嘍！

OK, 下面是今天的主要內容

一：篩選功能 Filtering 設計重點

• 當用戶啟用篩選條件後，明確提示用戶處在篩選狀態中

• 保存用戶篩選偏好，重新訪問時能否自動恢復

• 需充分考量到 RWD 響應式設計的顯示效果一致

• 預設顯示熱門或相關的篩選條件

• 用戶可以在相同位置反覆點擊開啟 / 關閉篩選嗎？

• 滾動時篩選按鈕會浮動於畫面中嗎？

• 已選的條件能輕鬆被移除嗎？

• 動態更新篩選條件，自動隱藏無效或不適用的條件

• 每個篩選條件下顯示結果的數量

• 使用 icon 圖標，幫助區分不同的篩選條件

• 複雜的篩選提供內部搜尋功能

• 提供快速重設所有篩選條件的功能

• 圖標 icon 的尺寸與留白，足夠方便用戶點擊

• 圖標 icon 擺放位置恰當嗎（頂部、底部或浮動）？

• 選用定義明確的圖標 icon，避免用戶困惑

• 如果有較多篩選條件，考慮添加橫向滾動的方式進行瀏覽

• 可以根據不同選項推薦相關篩選條件

• 直接顯示篩選條件，不要點擊 icon 再顯示

• 確保點擊 icon 後的互動反饋足夠明確

• 確保點擊 icon 後，圖標有明顯變化

• 錯誤或警示信息，足夠明確易懂嗎？

• 盡可能避免 Dropdown，採用按鈕、Chips、Toggle 形式

• 複雜的篩選條件請用分組或者階層的方式呈現

• 篩選區域的呈現方式是否恰當？全頁、部分覆蓋或滑入

二：排序功能 Sorting 設計重點

• 排序是否需手動確認後才可以套用？

• 排序元件的呈現形式合理嗎（按鈕、Dropdown、Chips）？

• 需充分考量 RWD 響應式設計的效果一致

• 提供升冪與降冪排序，並且給出清晰標示

• 當排序改變時，是局部還是全頁更新？

• 根據用戶習慣或歷史紀錄，主動推薦適合的排序方式

• 需要快速跳過不相關項目的輔助功能選項

• 排序提示文字以使用效益為重點，例如：最高評分，而不是評分從高到低

• 排序變更時支持返回操作

• 組合排序使用標籤形式清楚呈現

• 提供快速重設所有排序方式的功能

• 確保排序功能在滾動時浮動於畫面

• 預設的排序需要充分考量產品的多樣性

• 提供篩選內細分排序功能 Faceted Sorting

• 預設排序有明確的標識嗎？

• 支援評論內的排序條件嗎？

• 排序方式與排序方向可用鍵盤操作

• 排序是否需要自動套用？

• 不同狀態的操作反饋 Hover \ Focus \ Active 足夠明確

• 確保排序功能圖標 icon 清晰可見

• 保存用戶的排序偏好，重新訪問時可以自動恢復

• 提供足夠的排序選項（價格、字母順序、評分）

• 是否在內容底部也重複顯示排序功能？

• 將熱門程度作為排序的條件選項之一

• 預設排序建議具備「相關性」或「精選內容」

• 是否支援多個排序方式的組合？

• 排序改變時，加載內容過程提供 loading 提示

希望這份檢查清單能夠幫助你輕鬆打造出優秀的使用者體驗，持續優化設計，提升用戶滿意度！

btw，週末我會上架最新影片 👉《 UIUX 設計師，應該盡早知道的 7 件事 》，了解並做好這幾件事將會大大的幫助你的職涯發展！一定不要錯過～

Thanks for reading, 期待下次見面！

Taony