引言

篩選作為一個常用的功能，在產品設計中的應用面是非常廣的。比如我們去購物，會選擇銷量高、價格實惠并且包郵的商品，篩選區的設計就便于用戶進行數據的查詢和定位，可以快速查詢到滿意的商品。本文就篩選這個話題展開了分析和探討。

更多B端干貨：

一、篩選簡介

篩選，也可以稱作過濾器，它屬于搜索框架的一部分主要用于內容提取，將一類數據展示，一類數據隱藏，同時可以整合很多的組件。

在 B 端設計中篩選存在的對于整個表單來說是非常重要的，它可以幫助用戶，在茫茫的表單數據當中進行快速的定位；可對表單進行快速劃分，縮短用戶對于數據的尋找時間；能夠滿足用戶在工作中，實際業務場景的篩選。

二、篩選的展示類型

篩選區常見到的有搜索、條件篩選這兩類控件。搜索和篩選雖然同在篩選區，但是二者還是有所差異的。

搜索：需要通過查找搜尋獲得的。

在 B 端系統界面設計中，搜索是通過指定任意條件，系統對此條件進行檢索后，展示相對應內容，功能偏主動性；條件篩選：好比一個個篩子將物料進行粗細料分離的一個過程。

條件篩選是系統提供指定各種條件縮小范圍，可以選擇查找不同條件的內容，功能偏被動性。

無論被動性還是主動性，搜索和條件篩選這兩個功能都是讓用戶使用某個條件對內容進行區分，從而找到用戶想要的內容。二者在功能上相輔相成，在 B 端系統的頁面中僅靠搜索或者篩選作為內容篩選都是不夠的，這就需要組合篩選區了。

1. 搜索篩選

精確搜索

這種方式搜索準確率高，所要即所得。但需要用戶自己輸入，然后進行查詢。需要記憶搜索詳細信息。輸入框需要有提示輸入的內容，方便用戶填寫，以及確認輸入的類別或格式。適用于用戶有清晰的目標，同時需要有查詢/搜索按鈕，來執行篩選。搜索可配合篩選固有類一起使用。

模糊搜索

模糊搜索可以用于搜索關鍵字的同義詞，提高搜索的精確性。字段匹配推薦搜索結果，減少記憶負擔，適用于不明確的信息篩選。但是會篩選出很多類似相關的內容，需要查找鑒別所要內容，不便捷。適用于用戶對目標模糊，模糊是指不用關心輸入了什么格式，哪怕錯了，系統也會推薦給用戶相對正確的；用戶需要瀏覽操作過濾器提供的信息來輔助篩選達到目標。同時也可配合篩選固有類一起使用。

2. 條件篩選

下拉篩選

這個篩選的優勢是頁面的空間利用率高，同時下拉起到了很好的收納作用，不占據頁面空間。但由于下拉的局限性無法觀看到所有的篩選字段，需要操作點擊查看。

固定選項類，適用于下拉的篩選字段選項有限，并有明確的總結分類。這種操作起來便捷，降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕，但是也有的產品是勾選即執行的。需要結合具體的使用場景去判定。

矩陣（平鋪）篩選

用戶可以直接看到篩選內容，支持輸入更多篩選條件，減少操作步驟提高了用戶篩選的效率。但平鋪的篩選類目占據頁面空間較大，空間利用率低，信息量過多都是重點等于沒有重點，增加用戶的決策時間，不適合選項太多的情況。平鋪篩選控件的普適性為最強，當沒有其他更好想法時，用平鋪總是一個好的選擇。需要注意的是，篩選條件不要過多（遵循 7±2 法則）。

表頭篩選

通過表頭的點擊，簡潔、直觀地篩選當前表格列。但只能篩選當前列的內容，篩選字段比較少，篩選形式比較單一。每個表頭都會有篩選的 icon，影響用戶對于表頭的識別。表頭篩選學習成本最高，且和表頭排序容易沖突，篩選值展示也不夠直觀。

表頭篩選類似 Excel 表格的操作，是一種相對高級的交互，適合表格列比較單一內容的篩選。

TAB 篩選

篩選條件一目了然，交互步驟少，一個 Tab 標簽代表一個緯度，平鋪展示篩選內容方便識別，學習成本低。但 Tab 標簽篩選字段數量有限制，不宜過多，分類需覆蓋選項，并且保證每一項沒有交集，空間占用多、不夠靈活，對用戶自定義項支持較差。適用于 Tab 標簽切換一般用于和時間、狀態的流轉有關，且沒有交集的數據內容（可以是同性質，也可以是不同性質）。權重高，選項值不超過 5 個。

3. 組合篩選

在 B 端系統表格類頁面中，字段屬性很多，簡單的檢索方式很難準確定位到目標數據，所以在實際使用當中，常會將大量非交叉關系的屬性進行羅列，搜索、篩選、TAB 標簽切換組合出現，形成多屬性的組合檢索。而篩選項互相組合，其展示方式有如下幾種：

平鋪式

優點：用戶能直接看到選項內容，方便用戶識別選項，且提高了用戶篩選的效率（節省了篩選操作），大而全的篩選字段最大限度避免篩選條件遺漏的問題。

缺點：篩選項多會占據大量頁面空間，信息量過多都是重點等于沒有重點，增加用戶的決策時間，不利于表格數據的直觀展示，此類型一般配合“勾選即執行”使用。

適用從各個維度篩選的場景，多維度篩選對信息篩選的顆粒度需求不一致，同時希望備選項被選中。

折疊式

折疊式篩選是平鋪式篩選的改進，一種簡單直接的篩選形式，對平鋪的篩選項進行收納，如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的，可以通過折疊的方式將這部分篩選字段隱藏起來，高頻篩選字段外露。適用于折疊低頻篩選，顯示高頻篩選，能滿足大多場景下不占用太多空間。針對有更多篩選需求的用戶也有更好的引導性。

三、篩選的反饋

篩選區有兩種不同的反饋模式：數據實時更新反饋和數據手動更新反饋。

數據實時更新反饋

界面將與所有設置的篩選相匹配并對結果進行實時更新。

這種模式的優點是在執行篩選時為用戶提供了一種方便簡單的體驗，可以在每次點擊后立即看到結果。適用于較低風險的交互，一旦處理多選過濾器或更復雜的輸入時可能會造成混亂。當然還需要考慮處理數據的多少，如果應用中數據量巨大，每次更新時間較長，反而會降低用戶的使用效率。

手動更新反饋

在手動更新反饋模式下，過濾結果只有在用戶點擊查詢時才會更新。如果用戶想在每次更改后查看結果，必須單擊查詢按鈕。

這種模式適合多緯度復雜的篩選，所有篩選字段設置完畢之后，統一執行操作，和實時反饋結果相比降低篩選等待時間，尤其是在大量數據進行篩選中，優化了用戶體驗。

四、篩選要注意的問題

什么情況不適合用篩選？

選用篩選組件的前提是信息能被清晰分類。如用戶 ID/電話號碼，姓名、郵箱這種無明顯規則的就不適合用篩選組件去查找，用搜索會更好。

篩選分類有哪些要求？

1. 分類需符合大眾認知的條件。如：按照年月日的認知來選擇，地理位置按照省市區街道…
2. 要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時候是否清晰無困惑。

五、總結

關于篩選設計指南這里就結束啦，在具體項目中大家可以根據產品的特性和需求進行對應的調整。如果文章中不對的地方也歡迎指出。

歡迎關注團隊微信公眾號：兆日 UCD