這里列舉一些常見的基礎(chǔ)篩選產(chǎn)品，大家可以一并查看：

2. 高級篩選

高級篩選是較為復(fù)雜的篩選形式，它為了滿足更多 低頻、復(fù)雜、個性 的業(yè)務(wù)需求，通常會提供相對獨(dú)立篩選面板，展示更多的篩選條件。

獨(dú)立面板也就是我們后續(xù)會提到的 浮窗篩選、抽屜篩選、表頭篩選...，所以它們的關(guān)系也會相對復(fù)雜。

高級篩選與基礎(chǔ)篩選最大的區(qū)別在于：

基礎(chǔ)篩選只能覆蓋 3 個左右的高頻篩選，而高級篩選可支持 10 + 維度的靈活組合；常駐只能使用且的邏輯相對簡單，而高級可以有條件組嵌套支持復(fù)雜業(yè)務(wù)邏輯；常駐位置較為固定，而高級則有面板加持，可以更為靈活。

其實(shí)選擇高級篩選或者基礎(chǔ)篩選，最大的話語權(quán)還是場景。

如果你的篩選是簡單篩選幾個條件，那基礎(chǔ)篩選就已經(jīng)足夠，反之對篩選條件、篩選效率有著更高要求，我們則會考慮更為復(fù)雜的篩選方式。

在使用高級篩選時，這些問題尤為重要：

① 因?yàn)楦呒壓Y選需要訪問獨(dú)立面板，因此在入口的設(shè)計(jì)就會尤為重要。一般會用文字鏈接或者圖標(biāo)來提示用戶，便于尋找。

② 基礎(chǔ)篩選與高級篩選可以并存，因?yàn)榻巧煌⑹褂脠鼍安煌ｑv可以作為高頻使用的固定模塊，高級則作為特定角色需要更多篩選的補(bǔ)充，這部分放在下面 篩選的原則-篩選角色化 給大家詳細(xì)說明。

這里列舉一些常見的高級篩選產(chǎn)品，大家可以一并查看：

3. 自定義篩選

自定義篩選則是在高級篩選的基礎(chǔ)上，進(jìn)一步業(yè)務(wù)化。

它是為了滿足 字段不固定、需求差異化 的業(yè)務(wù)場景，用戶能夠自定義選擇 篩選字段，配置字段的篩選規(guī)則。

使用自定義字段最重要的核心要素就是 突破固定字段限制，因?yàn)楦呒壓Y選是針對產(chǎn)品預(yù)設(shè)好的固定字段進(jìn)行篩選，自定義則是用戶可以自行選擇字段，用于適配更為靈活、多變的業(yè)務(wù)場景，如 CRM 的客戶自定義字段、OA 的流程表單（因?yàn)椴煌墓緦τ?流程、客戶信息的管理不太相同，因此需要提供自定義字段進(jìn)行支持）

在設(shè)計(jì)自定義篩選時，我們的方案選擇主要受到“篩選頻率、條件復(fù)雜度、界面空間”的影響。

① 小入口+大彈窗，以篩選圖標(biāo)作為入口，點(diǎn)擊過后彈窗展示所有篩選條件。這種方式適合 中低頻（每天 1-3 次）使用篩選，界面空間緊張用大彈窗容納復(fù)雜配置

② 展開收起式，當(dāng)用戶點(diǎn)擊篩選后，將表格與工具欄之間的部分展開，用于呈現(xiàn)篩選條件。它能夠避免彈窗的跳轉(zhuǎn)感，篩選時用戶的視線可以無需離開表格區(qū)域，適用于 篩選條件數(shù)量多、高頻使用的場景

③ 固定常駐式，在頂部區(qū)域固定，默認(rèn)展開，這樣就無需點(diǎn)擊入口，這樣更適合“篩選是核心工作流” 的場景

自定義篩選是最難設(shè)計(jì)的，在使用過程中會有 四大基本元素。

篩選入口：需要讓用戶快速找到入口，同時不干擾主界面。

邏輯運(yùn)算區(qū)：主要就是 且、或 邏輯的展示，只是在運(yùn)算區(qū)域里面，需要考慮切換時究竟應(yīng)該如何做？

神策數(shù)據(jù)是通過文字方式，快速展示 且、或 邏輯，并且支持手動直接切換，這個方案目前看來是用戶最容易理解的。

字段選擇區(qū)：選擇你所需要篩選的字段，點(diǎn)擊 添加、選擇，整體邏輯較為簡單。

條件組管理區(qū)：篩選條件全部展示過的后續(xù)動作，比如保存，批量錄入 等相關(guān)動作都可以放在條件組管理當(dāng)中，進(jìn)行呈現(xiàn)。

4. 標(biāo)簽篩選（外露篩選）

接下來的 標(biāo)簽篩選、折疊篩選、浮窗篩選、抽屜篩選，都是對容器進(jìn)行分類。因此我們需要進(jìn)行展開講解，窮舉一下不同容器的形式和變化。

先來說說標(biāo)簽篩選（外露篩選）

標(biāo)簽篩選是將重要的篩選選項(xiàng)設(shè)計(jì)成“可點(diǎn)擊的標(biāo)簽按鈕”，將篩選過程當(dāng)中的選項(xiàng)直接來進(jìn)行展示，目的是為了能夠讓篩選條件，直接暴露出來給到用戶進(jìn)行使用。

它最重要的是提升效率，針對高頻使用的篩選維度將其外露展示，將多步操作壓縮為 一步點(diǎn)擊，同時能夠凸顯當(dāng)前的篩選狀態(tài)，避免用戶忘記自己選了什么。

在使用標(biāo)簽篩選時，需要注意這些內(nèi)容：

1. 在標(biāo)簽的設(shè)計(jì)上，因?yàn)榇嬖诘臉邮较鄬^多，所以我們可以根據(jù)自身產(chǎn)品的視覺層級，進(jìn)行逐一選擇。
2. 涉及到多角色使用標(biāo)簽篩選時，需要重點(diǎn)考慮角色化的差異，因?yàn)槠涑ｑv，如果內(nèi)容都不是用戶關(guān)注的點(diǎn)，標(biāo)簽常駐的意義也不會很大。
3. 當(dāng)標(biāo)簽選項(xiàng)超過 7 個時，則需要考慮對此篩選內(nèi)容是否需要進(jìn)行單獨(dú)處理，因?yàn)檫x項(xiàng)過多，用戶使用標(biāo)簽篩選也不會特別清晰。

比如我想外露的內(nèi)容是各種狀態(tài)，我就可以將其放在頂部，進(jìn)行指標(biāo)圖+篩選功能的雜糅，像在小紅書千帆系統(tǒng)當(dāng)中，對于訂單的多種狀態(tài)，就會使用這一技巧，進(jìn)行呈現(xiàn)。

5. 折疊篩選

折疊篩選則是用隱藏的方式，按照使用頻率將篩選條件分層。高頻條件平鋪展示、低頻條件收折在面板當(dāng)中，點(diǎn)擊展開的篩選類型。

它最重要的價值是要平衡“空間與效率”的問題，當(dāng)篩選條件 4-8 個時，如果全部平鋪頁面就會過于冗余，如果全部隱藏又會增加操作步驟，折疊篩選通過 “高頻展示 + 低頻折疊”，讓用戶既能快速操作高頻條件，又能按需調(diào)用低頻條件，兼顧 “便捷性” 與 “功能完整性”。

正因?yàn)檫@樣的特性，所以很多基礎(chǔ)固定的篩選一旦變多后，通常就會使用折疊的方式進(jìn)行呈現(xiàn)。

6. 浮窗篩選

浮窗其實(shí)是將篩選包起來，用浮窗進(jìn)行承載，臨時喚起，用完即走。

在設(shè)計(jì)時首先會有一個統(tǒng)一的篩選入口，浮窗彈出后設(shè)置對應(yīng)條件，然后點(diǎn)擊確認(rèn)、取消，浮窗自動收起，不占用頁面只提示有篩選條件。

對于系統(tǒng)而言，它為什么需要浮窗篩選？本質(zhì)上會有三個原因：

1. 節(jié)約空間，因?yàn)樵诹斜懋?dāng)中，如果把篩選條件進(jìn)行常駐會擠壓核心內(nèi)容，列表當(dāng)中的屏效相對較低，這時候篩選則會呈現(xiàn)為隱藏-喚起的模式，我們列表所展示的信息數(shù)量就會變多。
2. 降低頁面復(fù)雜度，當(dāng)篩選條件是常駐時，條件多了過后就會導(dǎo)致使用起來異常困難，特別是針對那些使用頻率本身偏低的用戶來說，更是無效信息，因此收納起來就能降低復(fù)雜度，使用戶的專注度能夠更加聚焦于核心任務(wù)當(dāng)中。
3. 更強(qiáng)的適配性，假如在需要設(shè)計(jì)移動端的篩選，也可以復(fù)用統(tǒng)一的交互，并且用戶點(diǎn)擊篩選圖標(biāo)已形成記憶。

我們之前就有相同的業(yè)務(wù)，需要將桌面端的部分移植到 Pad 端與移動端，使用浮窗性價比就會更高。

7. 抽屜篩選

抽屜篩選就是浮窗篩選的另一種表達(dá)，它主要是平衡 篩選條件與界面空間 的另一種選擇。
但確實(shí)會發(fā)現(xiàn)現(xiàn)在的抽屜篩選已經(jīng)沒有當(dāng)年的雄風(fēng)，感覺大家就避之不談，基本不會使用它。其實(shí)也會有幾個原因：

1. 抽屜需要來回滑動，操作上不如彈窗直接高效，視覺上也缺乏彈窗的簡潔與高級感；
2. 展開時內(nèi)容常偏向主屏幕一側(cè)，容易造成明顯的視覺偏移，影響整體體驗(yàn)

很多之前沿用抽屜篩選的產(chǎn)品，現(xiàn)在都在調(diào)整自己的交互方案。

并且因?yàn)槌閷系牟环€(wěn)定性，我們其實(shí)不太建議同學(xué)們使用抽屜進(jìn)行選擇自己的選項(xiàng)條件。

8. 表頭篩選

表頭篩選是一種相對特殊的篩選形式，它是將篩選入口放置在頭部，提供給到用戶進(jìn)行快捷的篩選操作。

本質(zhì)上是在滿足長時間使用 Excel 用戶的使用習(xí)慣，因?yàn)樵?Excel 當(dāng)中表格眾多，對于篩選只能使用一種影響較小，最為通用的做法，隨著 B 端產(chǎn)品的發(fā)展，也會發(fā)現(xiàn)很多設(shè)計(jì)方式都被得到了延續(xù)。

在理解表頭篩選時，會有兩種使用場景：

① 空間較少，使用表頭篩選可以進(jìn)行輕量的篩選動作。

這樣點(diǎn)擊篩選過后便可直接選擇篩選選項(xiàng)，執(zhí)行篩選操作。你可以看到飛書文檔，在主頁列表中就會這樣設(shè)計(jì)便可以輕量滿足篩選需求。

② 字段太多，需要表頭篩選帶入更多篩選值，進(jìn)行篩選安排。

這種方案本質(zhì)上是針對高級篩選的體驗(yàn)補(bǔ)充，記住！是需要高級篩選 or 自定義篩選時才會用到篩選策略。

因?yàn)樵谶@兩種篩選當(dāng)中，需要選擇篩選字段，有大量的選項(xiàng)，這對用戶來說會十分影響其正常使用，通過表頭處的點(diǎn)擊，就能夠?qū)⒆侄文J(rèn)帶入，縮短篩選路徑，提高篩選效率。

這種方案的表頭篩選也會有相應(yīng)弊端，首先是表頭空間問題，因?yàn)楸眍^本身需要展示的信息就相對較多，比如凍結(jié)、排序、等等，過多的操作會導(dǎo)致表頭過于復(fù)雜，如果還加上篩選，表頭空間就會更大，更不適合進(jìn)行使用。

其次用戶理解成本也會相對過高，因?yàn)楹芏嘈袠I(yè)屬性相對較為簡單的 B 端產(chǎn)品并不會使用這類篩選，對于用戶初次使用也會有不小的負(fù)擔(dān)。但表頭篩選目前的普及率仍然比較低，使用比較頻繁的便是紛享銷客。

9. AI 篩選

來到重點(diǎn)，AI 篩選。它不僅僅是未來篩選設(shè)計(jì)的大趨勢，更是能夠在產(chǎn)品層面解決 篩選復(fù)雜化的問題。

比如剛才的高級篩選、自定義篩選，無疑都是在增加用戶的操作層面，他們需要不斷的選擇，才會得到自己想要的結(jié)果。而 AI 篩選的價值在于它解決了 用戶自然語言與程序邏輯執(zhí)行 之間的壁壘，讓篩選能夠響應(yīng)用戶的自然語言訴求。

比如我想篩選最近一個月的高價值客戶，就只需要在 AI 輸入框中說出自己想法，然后就能得到篩選結(jié)果。

程序邏輯執(zhí)行，程序就可以根據(jù)自身知識庫，對高價值客戶進(jìn)行拆解，邏輯變?yōu)?客戶時間為：最近創(chuàng)建一個月客戶、類型為高價值。

這樣一來，其得到的結(jié)果就會更為簡單合理，但是在設(shè)計(jì) AI 篩選時，它的難度還是會相對較大。

因?yàn)?AI 的結(jié)果可能會出現(xiàn)差錯，那對應(yīng)的修改策略就會極為重要。

所以我們可以看到，像 Jira 對于 AI 篩選就會有更多的修改入口讓用戶對于篩選結(jié)果進(jìn)行快速修正，同時在入口上也需要做更多的設(shè)計(jì)進(jìn)行提示。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。