編輯導語：在B端產品設計中，數據的篩選是其中必不可少的一個步驟。數據的篩選并不僅僅是一個簡單的步驟，它包含了很多設計的細節，我們一起來看看吧。

一、什么是篩選

篩選（Filter）也叫做過濾器，是搜索框架中的一部分，用于數據抓取。

可以通過添加不同的屬性來創建篩選組件，用戶選擇其中某個屬性并定義其值。一個屬性可以有一組可供選擇的值，例如設備平臺可以分為PC、IOS、Android等。

用戶可以根據需要，對數據進行有規律的抓取，快速查找出特定內容，準確縮小數據的展示范圍。并且可以定義并保存篩選以備后用。執行篩選后，用戶也可以查看結果并進一步縮小結果的范圍。

大多數B端產品數據復雜，數據內容通常都是由用戶添加生成的，經常會有項目標題過長、自定義字段無規律、數值復雜的情況，篩選就顯得尤為重要了。

1. 使用場景

只要用戶有需要找到屏幕中任何相同元素的需求，都可以用到篩選，常見的使用情況有：

• 數據列表、卡片列表等任何列表類型的頁面，用于篩選可見項目的數量。
• 分析類型的屏幕和儀表板，用于篩選圖表中包含數據的范圍或類型（時間范圍、受眾類型、顯示的指標、價值范圍等）。

不管使用場景如何，其目的都是讓用戶對數據進行區分，找到想要的內容。流暢的篩選功能交互，可以減少用戶的負擔，使其將更多精力放到處理篩選后的數據中。同時，篩選屬性還可以用于向用戶介紹整個系統可以提供的內容。

二、篩選項的類型

在構建篩選時，需要非常了解產品的數據結構。哪些字段與時間或日期有關？哪些是定量值、哪些是定性值？不同類型的數據需要不同類型的選擇輸入，所有數據點都可以反映在篩選器中。

1. 日期

日期是B端產品中常見的篩選類型，一個場景事件的觸發離不開時間選擇。

日期選擇器是讓用戶在程序中選擇日期或時間段的一類控件，其作用是查詢過往時間發生的事情。通常根據用戶習慣設置一個默認時間。

一個好的日期選擇器，需要注意：

• 確保開始日期和結束日期按順序排列。
• 所選內容必須可見，對于已選的時間段需要有明顯的樣式區分。
• 通常根據用戶習慣設置一個默認時間，如今天。
• 添加快捷選項和自定義選擇。選擇時間范圍時，快捷選項是非常有用的。根據場景特征，增加昨天、最近7天、最近30天等快捷項。但是，如果用戶尋找的內容快捷選項未涵蓋，則允許他們設置自定義選擇。

2. 狀態

B端業務復雜，操作人員角色分工各不盡相同，根據實際的業務流程，同一條數據可能會產生多個狀態節點。操作關聯到系統的數據時，會觸發狀態的變更。狀態字段常用于列表中，可以讓用戶追蹤定責到具體環節，方便任務的交接。

3. 字典

用戶通過選擇的方式錄入系統預先配置篩選項信息時，可以使用字典格式。例如，標簽類字段：性別男、女，架構類字段：省、市、區等。

字典類字段的值較固定，涵蓋范圍廣，用戶可以通過確定性內容選擇范圍，提高篩選效率。

4. 多條件

列表中最常見的兩種字段內容是文本類和數值類字段，若想要精確的篩選這一類字段內容，需要提供含有運算符的篩選操作，常見的篩選操作有：等于、不等于、大于、小于、區間、有值、沒值等。

5. 聯動

聯動主要是指界面上的控件之間發生互相關聯的變化，比如選擇了某個值后，其他篩選項隨之發生變化。

6. 高級篩選

高級篩選是把篩選變成附加公式，而不是簡單地一個值。

在這種情況下，不僅可以讓用戶控制相對關系，還可以允許他們通過添加或排除條件來創建復雜的公式。通常有并級“且”、交級“或”兩種關系。

7. 篩選項優先級排序

通常在用戶眼中，不是所有字段都具有相同的可用性價值，不同的字段在不同使用場景中的重要程度也不一樣。我們需要為高使用頻率屬性值在篩選組件中更快被訪問。

所以在得到可能成為篩選的屬性后，需要根據業務需求的重要程度，對所有可成為篩選項的屬性做優先級排序。評估出需要實現哪些篩選項，排除哪些篩選項，哪些優先實現，哪些靠后實現等。

除此以外，還可以根據業務需求，對篩選進行分類。

三、篩選的設計

1. 位置

篩選器組件的位置有三種常見的類型。一是左側的垂直側邊欄形式，二是水平的篩選欄，三是嵌入到某個數據卡片或表頭的并列形式。選擇哪種類型取決于篩選對上下文的影響和產品的擴展性要求。

（1）側邊欄

• 全局影響：整個頁面
• 可擴展性：高

左側邊欄位置較固定，不會因為篩選項過多而影響頁面中主要內容的位置，可擴展性強，可在收起部分嵌套更多的值。

但是這種類型篩選器可以影響整個頁面。我們需要確保頁面上的每個元素都有效地受到篩選的影響，避免造成混亂。

（2）水平欄

• 全局影響：可能影響整個頁面，也可能影響頁面中的某一部分
• 可擴展性：一般

篩選欄可以放置在頁面的特定部分的上方，明確表示只有那些項目才會受控。對于那些由不同數據結構組成的頁面，是一個很好的選擇。

水平欄選項的可擴展性稍差，因為它局限于頁面寬度。篩選內容較多時，最好有收起功能，提升屏效。

（3）并列

• 全局影響：只影響某個部分
• 可擴展性：低

并列形式常見于列表中，是一種列表內置篩選形式，類似Excel表格的操作。點擊表頭篩選按鈕進行篩選，可以將篩選字段直接帶入表頭標題中。

如果產品數據結構不一致（如各種圖表、圖形組成的儀表板），需要謹慎使用全局篩選，這個并列的形式可能更合適?？梢栽陧撁婕墑e保留一些全局篩選，但也需要提供較小規模的篩選機制。

這種類型為用戶提供了快速進入篩選的通道，但是篩選的圖標各平臺不一，會影響用戶對表頭的識別。

2. 初始狀態

（1）展開/折疊

篩選較多的頁面，考慮到屏效性，可以使用折疊/展開的形式，避免頁面滾動影響用戶操作效率。

如果界面篩選中沒有默認的值，用戶必須通過設置一個篩選以獲取表的第一個結果集，則默認展開篩選欄。

如果界面在加載時執行的默認值，圖表內容已預先填充內容，并且用戶很少更改篩選欄，則界面可以默認折疊篩選欄。而如果篩選功能的使用頻次不高，可將他它隱藏在下一個層級中，為關鍵信息預留更多位置。

（2）平鋪/彈出

平鋪篩選在B端產品中較為少見，它將篩選項全部羅列在當前頁面內，用戶可以直觀對比各個選項，操作便捷，但是也有一定限制。這種類型展現條目本身必須可以標簽化，條目的字節數受限，不可過長。如果篩選條目數量太多，甚至多到一屏放不下，需要考慮彈出式篩選。

彈出式的典型樣式是下拉列表，當篩選條目數量較多時，給出一個額外的空間更有利于操作。對于多層級的信息（如省、市、區）彈出式也更為友好。

3. 執行時間

過濾器欄有兩種不同的模式：實時更新模式和手動更新模式。

（1）實時更新

在實時更新模式下，篩選欄會立即對每個輸入更改做出反應。一旦用戶做出選擇，數據就會刷新并顯示篩選結果，因此不需要查詢按鈕。界面將與所有設置的篩選相匹配并對結果進行實時更新。

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

（2）手動更新

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

這種模式最適用于非常繁重的數據集或低性能的應用程序。

（3）使用哪種模式

實時更新模式對用戶更方便，但是，如果用戶必須配置多個篩選器才能獲得有用的結果集、或者預期產生的數據量過大，請考慮改用手動更新模式。

選擇哪種模式需要考慮：數據量、系統性能以及用戶期望。

4. 顯示結果

（1）篩選進度

篩選操作需要一些時間才能顯示結果。在此等待狀態期間，需要給出進度的反饋。加載圖標是常見加載方法。如果加載結果時出現問題，應以適當的形式將結果傳達給用戶。

（2）突出篩選結果

應用篩選后，選項可能會隱藏在其下拉菜單或可擴展部分中。這時候需要突出執行過哪些篩選值。否則，用戶很容易忘記操作內容。

需要注意：

• 保持篩選條件在其內容上下文中可見。
• 對于篩選結果應給出明確的指示（數字標記、粗體文本、背景顏色等）
• 在專門的篩選條件概述/摘要部分集中顯示它們。

如果多選并且沒有足夠的空間將它們全部列出時，需要給出明確數字提示用戶選擇的個數。標簽內容可給出最大字符限制，超過部分用 … 代替。如果用戶需要再次查看他們的選擇，可以指明讓用戶再次打開下拉菜單查看。

（3）結果計數

傳達反饋的另一個關鍵要素是顯示結果的數量。常見的結果計數通常與翻頁功能配合使用。

（4）空結果

如果搜索結果不包含任何數據，需要給出空結果消息提示。最好能給用戶一些建議以響應空結果。

（5）在結果中過濾和搜索

篩選結果通常包含大量用戶信息，最好提供一些用戶可以應用于結果的邏輯篩選器。這可用于進一步限制結果的數量。

排序功能可幫助用戶按所需順序對結果進行排序。

此外，還可以讓用戶更改視圖以在最佳布局中查看結果。

（6）結果清除/結果重置

無論用哪種模式，都不要忘記添加一個易于訪問的“全部清除”按鈕。這為用戶提供了退出篩選、返回初始結果的通道。如果初始篩選欄中有系統默認值，可以添加“重置”按鈕。

四、小結

篩選的定義：根據用戶需要，對數據進行有規律的抓取，快速查找出特定內容，準確縮小數據的展示范圍。

篩選項的類型：日期、狀態、字典、多條件、聯動、高級篩選。

篩選的設計：位置（側邊欄、水平欄、并列）、初始狀態（展開/折疊、平鋪/彈出）、執行時間（實時更新、手動更新）、顯示結果（篩選進度、突出篩選結果、結果計數、空結果、在結果中過濾和搜索、結果清除/結果重置）。

參考：

• https://pencilandpaper.io/articles/user-experience/ux-pattern-analysis-enterprise-filtering/
• https://experience.sap.com/fiori-design-web/filter-bar/
• http://www.aharts.cn/pd/4609527.html
• http://www.aharts.cn/pd/3622313.html
• http://www.aharts.cn/pd/1947124.html

本文由 @LIZ醬 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議