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

一、什么是篩選

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

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

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

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

1. 使用場(chǎng)景

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

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

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

二、篩選項(xiàng)的類型

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

1. 日期

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

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

一個(gè)好的日期選擇器，需要注意：

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

2. 狀態(tài)

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

3. 字典

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

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

4. 多條件

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

5. 聯(lián)動(dòng)

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

6. 高級(jí)篩選

高級(jí)篩選是把篩選變成附加公式，而不是簡(jiǎn)單地一個(gè)值。

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

7. 篩選項(xiàng)優(yōu)先級(jí)排序

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

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

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

三、篩選的設(shè)計(jì)

1. 位置

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

（1）側(cè)邊欄

• 全局影響：整個(gè)頁(yè)面
• 可擴(kuò)展性：高

左側(cè)邊欄位置較固定，不會(huì)因?yàn)楹Y選項(xiàng)過多而影響頁(yè)面中主要內(nèi)容的位置，可擴(kuò)展性強(qiáng)，可在收起部分嵌套更多的值。

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

（2）水平欄

• 全局影響：可能影響整個(gè)頁(yè)面，也可能影響頁(yè)面中的某一部分
• 可擴(kuò)展性：一般

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

水平欄選項(xiàng)的可擴(kuò)展性稍差，因?yàn)樗窒抻陧?yè)面寬度。篩選內(nèi)容較多時(shí)，最好有收起功能，提升屏效。

（3）并列

• 全局影響：只影響某個(gè)部分
• 可擴(kuò)展性：低

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

如果產(chǎn)品數(shù)據(jù)結(jié)構(gòu)不一致（如各種圖表、圖形組成的儀表板），需要謹(jǐn)慎使用全局篩選，這個(gè)并列的形式可能更合適。可以在頁(yè)面級(jí)別保留一些全局篩選，但也需要提供較小規(guī)模的篩選機(jī)制。

這種類型為用戶提供了快速進(jìn)入篩選的通道，但是篩選的圖標(biāo)各平臺(tái)不一，會(huì)影響用戶對(duì)表頭的識(shí)別。

2. 初始狀態(tài)

（1）展開/折疊

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

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

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

（2）平鋪/彈出

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

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

3. 執(zhí)行時(shí)間

過濾器欄有兩種不同的模式：實(shí)時(shí)更新模式和手動(dòng)更新模式。

（1）實(shí)時(shí)更新

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

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

（2）手動(dòng)更新

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

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

（3）使用哪種模式

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

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

4. 顯示結(jié)果

（1）篩選進(jìn)度

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

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

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

需要注意：

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

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

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

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

（4）空結(jié)果

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

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

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

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

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

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

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

四、小結(jié)

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

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

篩選的設(shè)計(jì)：位置（側(cè)邊欄、水平欄、并列）、初始狀態(tài)（展開/折疊、平鋪/彈出）、執(zhí)行時(shí)間（實(shí)時(shí)更新、手動(dòng)更新）、顯示結(jié)果（篩選進(jìn)度、突出篩選結(jié)果、結(jié)果計(jì)數(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://theventurebank.com/pd/4609527.html
• http://theventurebank.com/pd/3622313.html
• http://theventurebank.com/pd/1947124.html

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

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