B 端表格頁面的核心競爭力，在于是否能讓用戶高效、精準地觸達目標數據，而篩選功能正是這一核心的關鍵載體。作為 B 端產品 “增刪改查” 中 “查” 的核心手段，篩選組件的設計直接影響業務操作效率。蘭亭妙微ui設計公司將從篩選與搜索的核心差異切入，拆解篩選底層邏輯，系統梳理 9 類主流篩選組件的設計要點、適用場景，同時明確設計原則與避坑方案，幫你掌握適配不同業務場景的篩選設計落地 SOP。
那好話不多說，我們正式開始～
在開始之前先來說說 什么是 B 端產品，我們通常也叫做管理后臺。
這里會有兩個問題：“它管理什么？到底如何管理？”給大家三秒鐘可以思考一下。
首先它管理的是數據，無論是 ERP 系統的訂單數據、CRM 的客戶數據、OA 的流程數據，你都會發現管理后臺就是在不停的對數據進行補充、整合。
那到底應該如何管理？簡單來說就是 數據的“增刪改查”，篩選其實就是查詢的一種重要方式。
比如一個客戶關系管理系統（CRM），銷售人員去拜訪客戶就會提前查詢客戶信息，來了解客戶關注內容進而去組織銷售話術。
那這里的篩選應該如何設計？怎樣設計既能高效便利，同時也具備擴展性？那今天我們系統盤點篩選組件究竟應該如何設計？
這里我們先來講講篩選的鄰居“搜索”，因為很多同學其實對于這兩者之間的差別不太了解，只知道它們都是在工具欄當中，都是在做查詢數據的工作。但在功能上是有明顯的區分：
搜索是對系統的關鍵詞進行精準匹配，比如用戶 ID、手機號、昵稱、地址等信息內容
篩選則是給出產品的固定條件選項，比如歸屬人、狀態、類型 等，你可以按需勾選條件，就能得出對應數據
這里稍微多說一句，因為所有的 B 端系統都是由字段組成，而在大的分類上，字段主要包含有輸入、選擇、上傳三大類型。
搜索服務于輸入類字段，比如剛才講到了 用戶 ID、手機號、昵稱、地址等 都是得讓用戶自行輸入才會得到，因此在表單里輸入，在表格當中也是輸入搜索，所以系統是關聯的。
篩選則是選擇類字段，也就是歸屬人、狀態、類型 等，在 B 端系統當中，選擇字段尤為重要，所以在表單處選擇同樣在篩選處也是相同邏輯。
理解篩選與搜索的差異后，我們再來說說篩選～
在篩選的過程當中，有著非常多重要的邏輯需要提前掌握，我們通過簡單的快問快答，幫助大家快速拆解。
第一題：什么是 且、或、非
這是篩選當中必須要了解的基礎運算條件。
且就是篩選的條件必須同時滿足才能出結果，比如一個電商數據分析師，需要篩選潛在高意向客戶，在篩選條件為「時間在近 30 天有支付訂單、近 30 天累計消費金額≥800 元、近 30 天訂單次數≥2 次」，必須同時滿足才會滿足用戶需求。
或就是這些條件滿足任意一個就能出結果，比如還是電商數據，需要尋找對產品有興趣的潛在客戶，就需要篩選「近 90 天內有過人工咨詢記錄、近 30 天內訪問產品詳情頁≥6 次、近 180 天內提交過試用申請」，三個條件滿足任意一個，這樣就能涵蓋更為全面。
非就是這些條件必須排除掉才能出結果，比如電商數據，因為涉及到刷單、退款的情況，需要將其進行清洗，因此在篩選條件上就需要滿足「訂單狀態≠測試訂單、支付狀態≠已退款、客戶類型≠內部員工」，需要同時排除這些數據。
所以對應的篩選運算規則，其實背后都是用戶在使用時需要深度分析使用的最為重要的工具～
第二題：在B端系統當中多個篩選條件默認的運算規則是什么？
A：且 B：或 C：非
在 B 端系統當中，最常用的運算規則就是且，也就是取多個篩選當中的交集。
比如下面這三個篩選項，所計算的呈現規則就是 「銷售負責人是李強」且「銷售時間是 近一個月」且「價值為高價值」的客戶，這樣就是一個典型的且的關系。
因為這種思維方式是最符合用戶的思考邏輯，這也是眾多 B 端系統當中的常見邏輯。
第三題：且、或、非可以同時存在于一個篩選組合當中嗎？
A.可以
B.不可以
它們可以出現在同一個篩選組合當中，因為實際的業務往往是“多條件、多邏輯” 的復合場景。
比如在教育管理系統當中，班主任要篩選 初三年級且數學月考不及格 或 非 住校生 的學生，來針對這兩類人群進行重點管理與監控。
但在篩選的設計當中，為了讓用戶理解邏輯，我們需要通過 條件組（如括號、層級縮進、虛線框）讓用戶直觀感知分組關系，避免依賴抽象的優先級規則。
第四題：如果你是一個設計師，應該如何降低成本表達這個關系？
因為邏輯較為復雜，所以在篩選時有些基礎辦法可以降低門檻。
① 可視化展示篩選運算，如果用戶對于且、或邏輯不太了解，可以使用圖標快速表示
② 實時校驗邏輯規則，不要出現相互矛盾的篩選邏輯
這個功能其實不太好做，但 ONES 做了一個最簡單的邏輯判斷。在且條件當中，同一篩選條件不得選擇兩次，這樣用于避免在且條件當中經常出現的相互矛盾的篩選邏輯。
好的，準備工作已經完成，我們就可以順利了解篩選的類型。
由于篩選的類型眾多，我們會按照 業務復雜度、容器差異 兩個維度，來對篩選進行歸類。
通過業務復雜度，將其分為：基礎篩選、高級篩選、自定義篩選
按照容器差異，將其分為：標簽篩選、折疊篩選、浮窗篩選、抽屜篩選、表頭篩選、AI 篩選
1. 基礎篩選
基礎篩選是將 高頻使用（使用頻率≥80%）的篩選條件進行固定，一直保持在頁面中的核心位置，不折疊、不隱藏，讓用戶能夠直接看到的篩選類型。
這是一個最為基礎的篩選方式，在常見的 Ant Design、Arco Design 的頁面模板當中都會有基礎篩選的身影。
使用基礎篩選最為重要的便是 快速觸達，用戶打開頁面就會查看篩選條件，不需要點擊“更多”“展開” 等入口，這能滿足 B 端用戶 高效完成日常操作 的核心需求。
在使用基礎篩選時，我們需要注意以下問題：
① 基礎篩選條件的數量不宜過多，一般 3-4 個最為合適
因為篩選條件過多，就失去了常駐的意義。但在實際業務當中，我們也需要考慮 5 個、7 個這類極端場景，畢竟常駐是最為基礎的方案，難免會遇到特殊情況。（需要在篩選的規則當中進行梳理，將交互邏輯呈現清楚）
② 基礎篩選當中，排序規則會非常重要
一般按照 高頻-低頻 的方式，從左到右依次排列，對于高頻低頻的獲取方式，我們可以數據埋點、卡片分類、問卷調研等多種方式進行搜集。
③ 篩選基礎，樣式就不基礎
基礎篩選有著較多的篩選樣式，大家可以結合自身業務進行選擇，這里推薦樣式一與二，因為展示效率更高～
這里列舉一些常見的基礎篩選產品，大家可以一并查看：
2. 高級篩選
高級篩選是較為復雜的篩選形式，它為了滿足更多 低頻、復雜、個性 的業務需求，通常會提供相對獨立篩選面板，展示更多的篩選條件。
獨立面板也就是我們后續會提到的 浮窗篩選、抽屜篩選、表頭篩選...，所以它們的關系也會相對復雜。
高級篩選與基礎篩選最大的區別在于：
基礎篩選只能覆蓋 3 個左右的高頻篩選，而高級篩選可支持 10 + 維度的靈活組合；常駐只能使用且的邏輯相對簡單，而高級可以有條件組嵌套支持復雜業務邏輯；常駐位置較為固定，而高級則有面板加持，可以更為靈活。
其實選擇高級篩選或者基礎篩選，最大的話語權還是場景。
如果你的篩選是簡單篩選幾個條件，那基礎篩選就已經足夠，反之對篩選條件、篩選效率有著更高要求，我們則會考慮更為復雜的篩選方式。
在使用高級篩選時，這些問題尤為重要：
① 因為高級篩選需要訪問獨立面板，因此在入口的設計就會尤為重要。一般會用文字鏈接或者圖標來提示用戶，便于尋找。
② 基礎篩選與高級篩選可以并存，因為角色不同、使用場景不同，常駐可以作為高頻使用的固定模塊，高級則作為特定角色需要更多篩選的補充，這部分放在下面 篩選的原則-篩選角色化 給大家詳細說明。
這里列舉一些常見的高級篩選產品，大家可以一并查看：
3. 自定義篩選
自定義篩選則是在高級篩選的基礎上，進一步業務化。
它是為了滿足 字段不固定、需求差異化 的業務場景，用戶能夠自定義選擇 篩選字段，配置字段的篩選規則。
使用自定義字段最重要的核心要素就是 突破固定字段限制，因為高級篩選是針對產品預設好的固定字段進行篩選，自定義則是用戶可以自行選擇字段，用于適配更為靈活、多變的業務場景，如 CRM 的客戶自定義字段、OA 的流程表單（因為不同的公司對于 流程、客戶信息的管理不太相同，因此需要提供自定義字段進行支持）
在設計自定義篩選時，我們的方案選擇主要受到“篩選頻率、條件復雜度、界面空間”的影響。
① 小入口+大彈窗，以篩選圖標作為入口，點擊過后彈窗展示所有篩選條件。這種方式適合 中低頻（每天 1-3 次）使用篩選，界面空間緊張用大彈窗容納復雜配置
② 展開收起式，當用戶點擊篩選后，將表格與工具欄之間的部分展開，用于呈現篩選條件。它能夠避免彈窗的跳轉感，篩選時用戶的視線可以無需離開表格區域，適用于 篩選條件數量多、高頻使用的場景
③ 固定常駐式，在頂部區域固定，默認展開，這樣就無需點擊入口，這樣更適合“篩選是核心工作流” 的場景
自定義篩選是最難設計的，在使用過程中會有 四大基本元素。
篩選入口：需要讓用戶快速找到入口，同時不干擾主界面。
邏輯運算區：主要就是 且、或 邏輯的展示，只是在運算區域里面，需要考慮切換時究竟應該如何做？
神策數據是通過文字方式，快速展示 且、或 邏輯，并且支持手動直接切換，這個方案目前看來是用戶最容易理解的。
字段選擇區：選擇你所需要篩選的字段，點擊 添加、選擇，整體邏輯較為簡單。
條件組管理區：篩選條件全部展示過的后續動作，比如保存，批量錄入 等相關動作都可以放在條件組管理當中，進行呈現。
4. 標簽篩選（外露篩選）
接下來的 標簽篩選、折疊篩選、浮窗篩選、抽屜篩選，都是對容器進行分類。因此我們需要進行展開講解，窮舉一下不同容器的形式和變化。
先來說說標簽篩選（外露篩選）
標簽篩選是將重要的篩選選項設計成“可點擊的標簽按鈕”，將篩選過程當中的選項直接來進行展示，目的是為了能夠讓篩選條件，直接暴露出來給到用戶進行使用。
它最重要的是提升效率，針對高頻使用的篩選維度將其外露展示，將多步操作壓縮為 一步點擊，同時能夠凸顯當前的篩選狀態，避免用戶忘記自己選了什么。
在使用標簽篩選時，需要注意這些內容：
- 在標簽的設計上，因為存在的樣式相對較多，所以我們可以根據自身產品的視覺層級，進行逐一選擇。
- 涉及到多角色使用標簽篩選時，需要重點考慮角色化的差異，因為其常駐，如果內容都不是用戶關注的點，標簽常駐的意義也不會很大。
- 當標簽選項超過 7 個時，則需要考慮對此篩選內容是否需要進行單獨處理，因為選項過多，用戶使用標簽篩選也不會特別清晰。
比如我想外露的內容是各種狀態，我就可以將其放在頂部，進行指標圖+篩選功能的雜糅，像在小紅書千帆系統當中，對于訂單的多種狀態，就會使用這一技巧，進行呈現。
5. 折疊篩選
折疊篩選則是用隱藏的方式，按照使用頻率將篩選條件分層。高頻條件平鋪展示、低頻條件收折在面板當中，點擊展開的篩選類型。
它最重要的價值是要平衡“空間與效率”的問題，當篩選條件 4-8 個時，如果全部平鋪頁面就會過于冗余，如果全部隱藏又會增加操作步驟，折疊篩選通過 “高頻展示 + 低頻折疊”，讓用戶既能快速操作高頻條件，又能按需調用低頻條件，兼顧 “便捷性” 與 “功能完整性”。
正因為這樣的特性，所以很多基礎固定的篩選一旦變多后，通常就會使用折疊的方式進行呈現。
6. 浮窗篩選
浮窗其實是將篩選包起來，用浮窗進行承載，臨時喚起，用完即走。
在設計時首先會有一個統一的篩選入口，浮窗彈出后設置對應條件，然后點擊確認、取消，浮窗自動收起，不占用頁面只提示有篩選條件。
對于系統而言，它為什么需要浮窗篩選？本質上會有三個原因：
- 節約空間，因為在列表當中，如果把篩選條件進行常駐會擠壓核心內容，列表當中的屏效相對較低，這時候篩選則會呈現為隱藏-喚起的模式，我們列表所展示的信息數量就會變多。
- 降低頁面復雜度，當篩選條件是常駐時，條件多了過后就會導致使用起來異常困難，特別是針對那些使用頻率本身偏低的用戶來說，更是無效信息，因此收納起來就能降低復雜度，使用戶的專注度能夠更加聚焦于核心任務當中。
- 更強的適配性，假如在需要設計移動端的篩選，也可以復用統一的交互，并且用戶點擊篩選圖標已形成記憶。
我們之前就有相同的業務，需要將桌面端的部分移植到 Pad 端與移動端，使用浮窗性價比就會更高。
7. 抽屜篩選
抽屜篩選就是浮窗篩選的另一種表達，它主要是平衡 篩選條件與界面空間 的另一種選擇。
但確實會發現現在的抽屜篩選已經沒有當年的雄風，感覺大家就避之不談，基本不會使用它。其實也會有幾個原因：
- 抽屜需要來回滑動，操作上不如彈窗直接高效，視覺上也缺乏彈窗的簡潔與高級感；
- 展開時內容常偏向主屏幕一側，容易造成明顯的視覺偏移，影響整體體驗
很多之前沿用抽屜篩選的產品，現在都在調整自己的交互方案。
并且因為抽屜的不穩定性，我們其實不太建議同學們使用抽屜進行選擇自己的選項條件。
8. 表頭篩選
表頭篩選是一種相對特殊的篩選形式，它是將篩選入口放置在頭部，提供給到用戶進行快捷的篩選操作。
本質上是在滿足長時間使用 Excel 用戶的使用習慣，因為在 Excel 當中表格眾多，對于篩選只能使用一種影響較小，最為通用的做法，隨著 B 端產品的發展，也會發現很多設計方式都被得到了延續。
在理解表頭篩選時，會有兩種使用場景：
① 空間較少，使用表頭篩選可以進行輕量的篩選動作。
這樣點擊篩選過后便可直接選擇篩選選項，執行篩選操作。你可以看到飛書文檔，在主頁列表中就會這樣設計便可以輕量滿足篩選需求。
② 字段太多，需要表頭篩選帶入更多篩選值，進行篩選安排。
這種方案本質上是針對高級篩選的體驗補充，記??！是需要高級篩選 or 自定義篩選時才會用到篩選策略。
因為在這兩種篩選當中，需要選擇篩選字段，有大量的選項，這對用戶來說會十分影響其正常使用，通過表頭處的點擊，就能夠將字段默認帶入，縮短篩選路徑，提高篩選效率。
這種方案的表頭篩選也會有相應弊端，首先是表頭空間問題，因為表頭本身需要展示的信息就相對較多，比如凍結、排序、等等，過多的操作會導致表頭過于復雜，如果還加上篩選，表頭空間就會更大，更不適合進行使用。
其次用戶理解成本也會相對過高，因為很多行業屬性相對較為簡單的 B 端產品并不會使用這類篩選，對于用戶初次使用也會有不小的負擔。但表頭篩選目前的普及率仍然比較低，使用比較頻繁的便是紛享銷客。
9. AI 篩選
來到重點，AI 篩選。它不僅僅是未來篩選設計的大趨勢，更是能夠在產品層面解決 篩選復雜化的問題。
比如剛才的高級篩選、自定義篩選，無疑都是在增加用戶的操作層面，他們需要不斷的選擇，才會得到自己想要的結果。而 AI 篩選的價值在于它解決了 用戶自然語言與程序邏輯執行 之間的壁壘，讓篩選能夠響應用戶的自然語言訴求。
比如我想篩選最近一個月的高價值客戶，就只需要在 AI 輸入框中說出自己想法，然后就能得到篩選結果。
程序邏輯執行，程序就可以根據自身知識庫，對高價值客戶進行拆解，邏輯變為 客戶時間為：最近創建一個月客戶、類型為高價值。
這樣一來，其得到的結果就會更為簡單合理，但是在設計 AI 篩選時，它的難度還是會相對較大。
因為 AI 的結果可能會出現差錯，那對應的修改策略就會極為重要。
所以我們可以看到，像 Jira 對于 AI 篩選就會有更多的修改入口讓用戶對于篩選結果進行快速修正，同時在入口上也需要做更多的設計進行提示。
轉載：優設
蘭亭妙微（藍藍設計）www.xintaizi.com 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
