面對 B 端龐大的平臺系統和業務流程，篩選扮演了基礎且非常重要的角色。

在 B 端系統中，不同的用戶操作著不同的業務流程，面對大量的數據，能快速且準確的找到自己需要的數據，可以明顯提升任務完成效率。篩選作為任務節點中的重要媒介工具，設計師如何才能準確全面的匹配場景，先讓我們全面的認識一下篩選。

更多篩選功能設計方法：

一、篩選的類型

篩選的存在無非就是幫助用戶準確、快速的找到目標數據，這個數據可能是單個，也可能是一組。在《信息架構：超越 Web 設計》中，篩選系統與導航系統、標簽系統、組織系統被列為信息架構的一部分，因此篩選也會與其他系統有一定的聯系，比如狀態、類型篩選就需要依賴標簽系統。

篩選的類型分為輸入類篩選、選擇器類篩選、平鋪類篩選、分頁篩選、高級篩選。

1. 輸入類篩選

輸入類篩選需要用戶輸入一定的文本關鍵詞，篩選出對應的數據。輸入類篩選從篩選準確性上，可以分為模糊篩選和精準篩選。

① 模糊搜索

按照用戶輸入的檢索詞，篩選出字段中帶有該檢索詞的所有數據。

優點：可以篩選出同類數據

缺陷：精準度不高

② 精準搜索

按照用戶輸入的關鍵詞，僅篩選出整個字段都與篩選詞相同的數據。

優點：檢索精準
缺陷：由于過于精準，會考驗用戶的記憶能力。

由于精準搜索的精準性，一個字的偏差，都會造成搜索失敗，因此，在正常的設計應用中，模糊搜索的使用頻率會更高一些。

輸入類篩選從篩選形式上，可以分為單標簽搜索和多標簽可切換搜索

③ 單標簽

單標簽搜索只能在輸入框中的一個既定范圍中搜索。

優點：便捷，應用普遍
缺陷：范圍少，面對復雜數據需要多個組合篩選

④ 多標簽可切換

在一組標簽中選擇搜索范圍

優點：便捷，節省空間

缺陷：展示不直觀；多一步選擇標簽的操作；不能組合篩選

如果空間有限，沒有組合搜索的可能性，可以使用多標簽可切換；正常情況下，不要剝奪用戶使用組合篩選的機會。

2. 選擇器類篩選

選擇器類篩選可以是單選或者多選，用戶點擊選擇待選項即可。這類篩選往往是篩選的某類標簽或者某組數據，方便用戶批量處理。

優點：無需準確記憶，適合批量數據

缺陷：展現方式不直觀，匹配結果的精準度不夠

此類篩選往往和表單的選擇器使用的是同一個組件，而且可以使用第三方的開源庫，應用范圍比較廣，同輸入類搜索一樣，是最優先被考慮的類型。

3. 平鋪類篩選

平鋪類篩選是將所有的待選項鋪出來，方便用戶直觀選擇。可以是單選，也可以是多選。

優點：待選項平鋪，選擇方便直觀

缺陷：占用空間，待選項數量過多的時候，可能會存在折行或隱藏，沒有關鍵詞搜索，選擇效率變低

平鋪類篩選大多應用在電商、招聘等網站；如果篩選維度很少，空間充足且待選項的數量在 5 個左右，可以考慮在表格、列表頁面使用平鋪類篩選。

4. 分頁篩選

分頁 Tabs 類似于平鋪類篩選，都是將待選項平鋪出來，不一樣的是，分頁 Tabs 的視覺級別更高一些，相當于標題存在，并且不支持重置。有一些平臺也稱之為分組。

優點：幫助用戶提前做了一輪篩選；待選項平鋪，選擇方便直觀

缺陷：占用空間，需要考慮待選項的數量和頁面空間的適配

分頁 Tabs 對用戶來講無疑是便捷的數據篩選，但前提是需要保證大多數用戶篩選維度的共通性，否則就會對部分用戶造成困擾，或者提供用戶自定義的機會。

5. 高級篩選

高級篩選的判斷關系較多，一般會包括篩選條件、篩選關系（且、或）、篩選類型（包含、不包含、等于、不等于等）、篩選值和添加等屬性。

優點：可以滿足的用戶應用場景最多

缺陷：操作比較繁瑣

二、篩選的布局

由于篩選組件的數量和業務應用的場景有所不同，所形成的布局模式會有所差異，大致會分上下布局、側邊布局、浮層布局、表頭布局。

1. 上下布局

上下布局是值篩選條件位于數據的頂部

優點：展示直觀，篩選條件和數據關系聯系更緊密；橫向空間上可以展示更多的數據

缺陷：數量多的話會壓縮縱向空間

上下布局是當前用戶使用方式中最常用的方式，如果系統給的篩選條件過多，需要對篩選條件進行分層，低頻類的需要收起。

2. 側邊布局

側邊布局是指將篩選條件列在數據的左側或者右側。

優點：可以展示更多的篩選條件

缺陷：寬度大的話會壓縮橫向空間；從視線覆蓋面積來講，側邊布局用戶對照查看數據的耗時會更長

使用側邊布局的時候，需要考量當前內容區數據的字段展示量如何。因為一般情況下，側邊會存在導航，再加側邊篩選，數據壓縮比較嚴重。還要看一下當前用戶的使用習慣如何，對側邊布局的接受度。

3. 浮層布局

浮層布局一般會有抽屜、對話框、懸浮框。

優點：節省空間，能容納更多的篩選條件

缺陷：用戶無法快捷的對比篩選值和篩選數據；具有一定的打斷性，特別是對話框和抽屜；用戶再次修改比較麻煩

浮層布局一般在空間有限，又有篩選需求的時候使用；使用過程中需要標記當前有篩選值，最好能將篩選值單獨顯示出來，方便用戶數據對比和清除重置。

4. 表頭布局

表頭布局是將篩選條件的圖標固定在表格表頭的右側，用戶點擊后篩選

優點：篩選流程更直觀

缺陷：用戶無法快捷的對比篩選值和篩選數據；表頭的空間有限，如果是橫向滾動，隱藏后不容易發現

1. 一般不推薦優先使用表頭篩選；像個別場景，空間有限，使用過程要標記當前有篩選值的狀態。
2. 如果為方便用戶篩選，又沒必要單獨給界面加一個選擇器類篩選，可以嘗試使用排序代替篩選，讓數據以一定的順序進行分組。比如按照優先級：高、中、低排序，倒序按照高、中、低的順序排列，正序反之，可以滿足大部分用戶的查詢需求。

三、篩選的觸發方式

1. 實時觸發

在輸入或者選擇篩選值的時候，數據實時匹配。

優點：篩選效率高

缺陷：比較考驗系統的穩定性；對于想使用精準搜索范圍的場景，會延長整體的加載時間

與手動觸發相比，更推薦實時觸發，但是要考慮系統的穩定性，在答應用戶之前先和研發團隊預研方式的可行性。

2. 手動觸發

在輸入或者選擇篩選值的之后，需要手動點一下搜索或者查詢按鈕。

優點：穩定性更高

缺陷：多一步操作，效率低

四、幫助用戶

1. 幫助用戶做收納

無論使用哪種布局或者篩選類型，都會遇到篩選條件數量很多的情況。如果當下不能輕易改變用戶習慣或者優化成本太高，可以試試以下三種方式：

對篩選條件進行分層，將高頻的篩選條件放在外面，低頻的收起，用戶用到的時候再展開。

一些復雜 B 端系統，篩選條件是根據用戶自定的數據生成，因此數量和內容不可控，多角色場景下使用習慣也不一致，這時可以給幾個系統常用篩選條件，讓用戶可以自定義選擇。

考慮極限情況，如果用戶確實添加了很多的篩選條件，要考慮頁面內局部滾動。

2. 幫用戶標記篩選狀態

如果在使用可收起篩選、浮層篩選、表頭篩選等方式的時候，一定要為用戶標記當前有篩選值的狀態。如果不標記，用戶在篩選后沒有重置，離開頁面再回來的時候容易遺忘當前已經篩選過。

或者將選擇后的篩選值外顯，在數據頂部放置一份，方便用戶對比和清除。

3. 幫助用戶記住篩選值

用戶篩選過后，點擊數據查看詳情，如果詳情是一個單獨頁面，往往都會刷新，再返回的時候，篩選條件已經清空了，如果用戶需要多次查看該篩選值下的數據，需要多次選擇。

所以，用戶從下級頁面返回上級頁面的時候，需要幫用戶記住篩選值。至于是研發記住，還是優化設計表達避免刷新，要具體場景具體分析。

篩選器的使用有的平臺也會叫過濾器、視圖等，名稱有出入，但是功能大體是一致的。

一般在篩選條件數量和使用角色都比較多的業務場景中使用。系統會默認給幾個篩選器：全部、我負責的、我創建的等。這是從另外一個維度幫助用戶記住：將常用的帶有篩選值的篩選條件作為一個篩選組保存起來，方便用戶下次進來的時候直接選擇使用，方式便捷迅速。

以下是幾種篩選器在頁面中的常見表現形式：

4. 幫助用戶更容易到達

在有篩選條件的表格頁面，應該確保頂部篩選條件和操作欄固定。如果數據太多，滾動會隱藏篩選區，應該只允許表格內容區滾動，方便用戶對比篩選值和篩選數據。另外，如果用戶要修改篩選值，這樣的話不需要再回滾，容易再次觸及。

當然，除了以上設計復盤，還可以對篩選組件做一些創新設計，有機會再和大家討論。?業務場景的不同會導致設計師的表現也會有所不同，上述是我對最近工作的復盤，如果還有其他的篩選內容，歡迎大家再補充和交流～