編輯導(dǎo)語：在B端產(chǎn)品設(shè)計中，數(shù)據(jù)的篩選是其中必不可少的一個步驟。數(shù)據(jù)的篩選并不僅僅是一個簡單的步驟，它包含了很多設(shè)計的細節(jié)，我們一起來看看吧。

一、什么是篩選

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

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

用戶可以根據(jù)需要，對數(shù)據(jù)進行有規(guī)律的抓取，快速查找出特定內(nèi)容，準確縮小數(shù)據(jù)的展示范圍。并且可以定義并保存篩選以備后用。執(zhí)行篩選后，用戶也可以查看結(jié)果并進一步縮小結(jié)果的范圍。

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

1. 使用場景

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

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

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

二、篩選項的類型

在構(gòu)建篩選時，需要非常了解產(chǎn)品的數(shù)據(jù)結(jié)構(gòu)。哪些字段與時間或日期有關(guān)？哪些是定量值、哪些是定性值？不同類型的數(shù)據(jù)需要不同類型的選擇輸入，所有數(shù)據(jù)點都可以反映在篩選器中。

1. 日期

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

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

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

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

2. 狀態(tài)

B端業(yè)務(wù)復(fù)雜，操作人員角色分工各不盡相同，根據(jù)實際的業(yè)務(wù)流程，同一條數(shù)據(jù)可能會產(chǎn)生多個狀態(tài)節(jié)點。操作關(guān)聯(lián)到系統(tǒng)的數(shù)據(jù)時，會觸發(fā)狀態(tài)的變更。狀態(tài)字段常用于列表中，可以讓用戶追蹤定責(zé)到具體環(huán)節(jié)，方便任務(wù)的交接。

3. 字典

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

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

4. 多條件

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

5. 聯(lián)動

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

6. 高級篩選

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

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

7. 篩選項優(yōu)先級排序

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

所以在得到可能成為篩選的屬性后，需要根據(jù)業(yè)務(wù)需求的重要程度，對所有可成為篩選項的屬性做優(yōu)先級排序。評估出需要實現(xiàn)哪些篩選項，排除哪些篩選項，哪些優(yōu)先實現(xiàn)，哪些靠后實現(xiàn)等。

除此以外，還可以根據(jù)業(yè)務(wù)需求，對篩選進行分類。

三、篩選的設(shè)計

1. 位置

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

（1）側(cè)邊欄

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

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

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

（2）水平欄

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

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

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

（3）并列

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

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

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

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

2. 初始狀態(tài)

（1）展開/折疊

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

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

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

（2）平鋪/彈出

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

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

3. 執(zhí)行時間

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

（1）實時更新

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

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

（2）手動更新

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

這種模式最適用于非常繁重的數(shù)據(jù)集或低性能的應(yīng)用程序。

（3）使用哪種模式

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

選擇哪種模式需要考慮：數(shù)據(jù)量、系統(tǒng)性能以及用戶期望。

4. 顯示結(jié)果

（1）篩選進度

篩選操作需要一些時間才能顯示結(jié)果。在此等待狀態(tài)期間，需要給出進度的反饋。加載圖標是常見加載方法。如果加載結(jié)果時出現(xiàn)問題，應(yīng)以適當(dāng)?shù)男问綄⒔Y(jié)果傳達給用戶。

（2）突出篩選結(jié)果

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

需要注意：

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

如果多選并且沒有足夠的空間將它們?nèi)苛谐鰰r，需要給出明確數(shù)字提示用戶選擇的個數(shù)。標簽內(nèi)容可給出最大字符限制，超過部分用 … 代替。如果用戶需要再次查看他們的選擇，可以指明讓用戶再次打開下拉菜單查看。

（3）結(jié)果計數(shù)

傳達反饋的另一個關(guān)鍵要素是顯示結(jié)果的數(shù)量。常見的結(jié)果計數(shù)通常與翻頁功能配合使用。

（4）空結(jié)果

如果搜索結(jié)果不包含任何數(shù)據(jù)，需要給出空結(jié)果消息提示。最好能給用戶一些建議以響應(yīng)空結(jié)果。

（5）在結(jié)果中過濾和搜索

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

排序功能可幫助用戶按所需順序?qū)Y(jié)果進行排序。

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

（6）結(jié)果清除/結(jié)果重置

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

四、小結(jié)

篩選的定義：根據(jù)用戶需要，對數(shù)據(jù)進行有規(guī)律的抓取，快速查找出特定內(nèi)容，準確縮小數(shù)據(jù)的展示范圍。

篩選項的類型：日期、狀態(tài)、字典、多條件、聯(lián)動、高級篩選。

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

參考：

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

本文由 @LIZ醬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議