篩選與排序系統
目的
篩選與排序系統提供了一套方法論，用於設計幫助使用者導覽大型資料集或產品目錄的探索介面。雖然技術實作處理邏輯，但此系統定義了探索工具的空間構成與視覺示意。它確保使用者能輕鬆地精簡檢視、了解當前的篩選狀態，並在不迷失方向或感到負擔過重的情況下切換優先排序模式（排序）。
使用案例
- 為電子商務網站設計側邊欄或頂部橫幅的探索層。
- 為目錄或資源中心組織複雜的搜尋結果頁面（SERP）。
- 為行動優先應用程式介面實作「探索抽屜」。
- 為內容豐富的文件或部落格歸檔建立分面導覽。
何時不該使用
- 小型資料集（<12 個項目）： 如果所有內容都能在單一畫面中顯示，加入篩選與排序會增加不必要的互動成本。
- 單一路徑工作流程： 當使用者應遵循線性順序而非瀏覽目錄時。
- 原始資料表格： 當使用者可能使用瀏覽器原生的「尋找」或進階試算表工具時（但高階排序仍有幫助）。
輸入
- 面向清單： 使用者可以篩選的所有屬性清單（例如：尺寸、顏色、評分、價格）。
- 優先順序： 哪些面向是「主要」（80% 使用者使用） vs. 「次要」（特殊規格）。
- 控制項類型： 將資料類型對應至 UI 控制項（例如：複選框用於多選、範圍滑桿用於價格）。
- 佈局上下文： 可用的水平與垂直空間（來自
responsive-grid-system）。
輸出
- 探索佈局藍圖： 篩選列（側邊欄 vs. 頂部橫幅）與結果網格的已定義位置。
- 面向元件規格： 在探索上下文內複選框、色票與範圍輸入的視覺設計。
- 狀態圖： 啟用狀態（膠囊/藥丸）、載入狀態（骨架）與空狀態的視覺處理。
- 回應式策略： 篩選器如何從桌面（例如側邊欄）轉換為行動（例如底部抽屜）的計畫。
工作流程
1. 選擇主要佈局模式
根據面向數量選擇空間安排：
- 側邊欄（左/右）： 最適合 5 個以上的面向。提供高度可見性與對探索工具的持續存取。
- 水平頂部橫幅： 最適合 1–4 個面向。最大化結果的寬度，但如果後續加入更多面向則可能變得混亂。
- 覆蓋/抽屜： 最適合行動裝置或探索為次要任務的「簡潔」桌面介面。
2. 定義面向視覺層級
將 visual-hierarchy-system 原則應用於篩選清單：
- 分組標題： 使用粗體、簡潔的標題（例如：類別、品牌）。
- 控制項大小： 確保複選框與文字連結有足夠的垂直節奏（通常為
--space-s間距）。 - 初始展開 vs. 折疊： 展開前 3 個最常用的面向；折疊其餘的以節省垂直空間。
3. 設計「啟用狀態」系統
使用者必須隨時知道哪些篩選器已套用：
- 摘要（膠囊/藥丸）： 在結果上方或側邊欄頂部放置一個水平清單，顯示啟用的篩選器。
- 全部清除： 提供一個單一、醒目的動作來重設整個檢視。
- 視覺回饋： 當切換篩選器時，結果容器應指示「更新中」（例如：20% 透明度或骨架螢幕）。
4. 建立排序示意
區分包含（篩選）與優先排序（排序）：
- 放置位置： 將排序放在結果區域的右上或左上，與篩選器分開。
- 標籤： 使用清晰的標籤，例如「排序依據：價格（低到高）」而非僅「價格」。
5. 規劃行動裝置探索
- 探索觸發按鈕： 在螢幕底部或頂部使用一個固定按鈕（例如「篩選與排序」）。
- 抽屜模式： 在全螢幕或底部抽屜中開啟篩選器，以最大化觸控目標大小。
- 即時 vs. 批次： 決定行動檢視應即時更新（分面）或需要「顯示 X 筆結果」按鈕來套用。
決策規則
- 「80/20」規則： 對於任何給定的面向，僅顯示前 5 個值；使用「顯示更多」連結來顯示其餘部分。
- 側邊欄 vs. 頂部橫幅： 如果您的面向清單在標準筆電螢幕上需要滾動，請使用側邊欄。如果它適合單行，請使用頂部橫幅。
- 選擇持久性： 已套用的篩選器必須保持可見，即使它們已滾出側邊欄（例如：使用固定膠囊列）。
- 空狀態備用： 絕不允許篩選組合導致死路；始終提供「重設」按鈕或建議的替代方案。
限制
- 無障礙性： 所有篩選控制項必須有可見的焦點環，並可透過鍵盤操作。在可折疊面向使用
aria-expanded，在結果計數/容器使用aria-live="polite"，以便螢幕閱讀器使用者知道結果何時更新。 - 回應式： 篩選器在行動裝置上必須堆疊或移入抽屜，以避免水平溢出或「壓縮」內容網格。當篩選列可能出現在多個佈局上下文（例如側邊欄 vs. 嵌入小工具）時，偏好使用容器查詢而非視口斷點。
- 對比度： 確保啟用/選取狀態（例如勾選的方塊或藍色膠囊）與背景的對比度至少為 3:1。
常見失敗模式
- 「神秘篩選器」： 使用者無法判斷哪些篩選器是啟用的，因為沒有摘要膠囊/藥丸列。
- 「無限側邊欄」： 側邊欄過長，管理起來變成一個任務，通常是因為沒有對長清單使用「顯示更多」。
- 行動裝置擁擠： 試圖將桌面側邊欄塞入行動檢視，使得結果網格無法閱讀。
- 缺乏「已套用」回饋： 切換篩選器時，結果網格沒有視覺上指示變化（即使變化很快）。
- 死路： 篩選到零個項目，且沒有提供返回的方法。
驗證標準
- 篩選（包含）與排序（優先排序）之間有明確區別。
- 啟用的篩選器以視覺方式摘要（例如：膠囊/藥丸）。
- 最常使用的面向預設為展開；其他可折疊。
- 「全部清除」或「重設」動作易於存取。
- 系統提供行動專屬的探索模式（例如：抽屜）。
- 定義了結果更新時的載入狀態（骨架/旋轉器）。
- 所有控制項符合觸控目標大小（根據 WCAG 2.2 SC 2.5.8 至少 24x24px，首選 44x44px）與鍵盤可存取性要求。