用一篇超全面的文章，幫你掌握B端系統(tǒng)篩選控件的知識點

最近的工作一直在和篩選打交道，為公司 B 端系統(tǒng)做了一次設(shè)計調(diào)整，去解決目前系統(tǒng)中篩選功能交互繁瑣的問題。

首先我們先從篩選本身講起。

篩選可以說是我使用比較頻繁的一種交互形式，比如我點外賣，會選擇滿減優(yōu)惠力度大，同時我也可以選擇在哪一個價格區(qū)間內(nèi)的產(chǎn)品，這就會用到篩選，而到了 B 端產(chǎn)品上來，一個 CRM 系統(tǒng)當(dāng)中，篩選的邏輯也會比 移動端的復(fù)雜，伴隨著：且關(guān)系、或關(guān)系、大于、小于等等這樣復(fù)雜的邏輯，也為設(shè)計本身增加了很多難度。因此，今天我們就來討論討論篩選控件。

篩選存在的意義

篩選存在的對于整個表單來說是非常重要的，它可以幫助用戶，在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的定位；可以對表單進(jìn)行快速劃分，縮短用戶對于數(shù)據(jù)的尋找時間；能夠滿足用戶在工作中，實際業(yè)務(wù)場景的篩選。

對于實際 B 端場景來說，篩選是日常數(shù)據(jù)分類的一個重要途徑，我們先來看看實際場景到底有哪些？

用幾個我們 CRM 用戶日常使用的場景來說：

比如今天作為一個電話銷售人員，想要聯(lián)系最近注冊的用戶時，通常會通過篩選來選出最近幾天注冊過，同時又沒有銷售更進(jìn)的客戶，進(jìn)行一個優(yōu)先級的排布；

再比如說，在銷售周報當(dāng)中，銷售主管可以通過篩選得到每個人這周完成的狀態(tài)，也可以通過篩選得出每個人對于線索的更進(jìn)情況和對客戶的流失狀態(tài)等等，這些都可以通過各種各樣的篩選形式來滿足用戶對于特定情況下的使用。

篩選和搜索、導(dǎo)航的區(qū)別？

篩選可以通過多個篩選條件進(jìn)行多維度的尋找，而導(dǎo)航、搜索只能通過單一條件進(jìn)行指定篩選。雖然在現(xiàn)在很多搜索都可以支持多維度用空格去進(jìn)行多字段的關(guān)鍵詞搜索，但本質(zhì)上區(qū)別不大。所以在 B 端項目當(dāng)中，如果你有表單，那你就需要篩選。

篩選的類型

我們將篩選分為基礎(chǔ)篩選和高級篩選兩種，兩種篩選會根據(jù)業(yè)務(wù)場景不同，在不同的頁面去使用。

1. 基礎(chǔ)篩選

基礎(chǔ)篩選一般為系統(tǒng)預(yù)設(shè)好的篩選字段，具有很強(qiáng)的業(yè)務(wù)和場景的需求。基礎(chǔ)篩選一般分為四個部分：

• 篩選條件：是指用戶可以篩選的范圍
• 篩選項：是指用戶可以選擇的篩選項目
• 已選項：是指用戶已經(jīng)選中的篩選項
• 備選項：是指用戶還沒有選擇的篩選選項

基礎(chǔ)篩選更多作為用戶快捷篩選的一種方式，因為一般使用場景當(dāng)中用戶幾個篩選邏輯為「且」

同時篩選的邏輯也為簡單篩選，所以在使用場景上只適合在對篩選要求不高的場景下使用。

2. 高級篩選

高級篩選一般為篩選中含有運(yùn)算符，同時篩選當(dāng)中包含條件關(guān)系，比如且關(guān)系或者否關(guān)系。一般高級篩選包含以下幾類關(guān)鍵詞：

• 篩選關(guān)系：是指幾個篩選條件之間的關(guān)系，一般為 且、或關(guān)系，即「且」關(guān)系為幾個條件之間的并集；「或」關(guān)系為幾個條件之間的聯(lián)集。
• 篩選字段：是指在篩選當(dāng)中，所要的篩選項，一般為表單當(dāng)中的所有可篩選的字段。
• 篩選操作：是指篩選字段和篩選值之間的關(guān)系，常見的篩選操作有：大于、小于、是、否、包含、不包含、為空、不為空等等。
• 篩選值： 你所需要篩選的數(shù)值。

高級篩選一般滿足更多的用戶場景，為用戶多條件多字段、多個篩選關(guān)系、多個篩選操作提供有利保障。

篩選的布局

1. 上下布局

當(dāng)在篩選器條件少于 5 個的情況下，最常使用的就是上下布局，這樣篩選能與網(wǎng)站保持統(tǒng)一，也更方便用戶進(jìn)行閱讀。

當(dāng)篩選器過多的情況下（一般在 5-15 個之間），篩選器過多，需要滾屏才能看到篩選結(jié)果，用戶使用起來會很別扭。所以在 5-15 個的情況下，一般會將篩選項進(jìn)行收折，這樣保證篩選整體面積不會太大，同時將用戶常用的篩選放在前面，可以滿足用戶基本的業(yè)務(wù)需求和使用場景。

2. 左右布局

左右布局在 PC 端一般是以字段選擇進(jìn)行篩選，通俗來講就是將用戶可以篩選的所有字段全部羅列出來，然后通過勾選，擇出你需要篩選的字段，進(jìn)行篩選器的使用。

左右布局的好處是能夠?qū)⒑Y選的所有條件都直接的展示出來，可以適應(yīng)很多場景，在篩選器用 15 個以上時。通過左右布局的方式，能夠讓篩選條件進(jìn)行滾動，最大限度保證用戶使用體驗。

篩選的形式

在日常的 B 端產(chǎn)品中，篩選的形式有哪些？篩選到底應(yīng)該怎么設(shè)計？接下來為大家總結(jié)梳理一些在? B 端產(chǎn)品中的篩選玩法，希望為你開啟新大陸。

1. 平鋪型

平鋪型一般為用戶搜索結(jié)果數(shù)據(jù)量過大，使用戶搜索出來的結(jié)果與其預(yù)期差距過大，用戶然后可以通過篩選對數(shù)據(jù)的再一次分類，使用戶能夠精準(zhǔn)尋找其想要的結(jié)果。

平鋪型一般為篩選條件少于 6 個，這樣能夠通過 1 行或者 2 行去展示篩選項的結(jié)果。

多用于信息量大的產(chǎn)品，比如電商、視頻網(wǎng)站等等。常見的淘寶、京東、騰訊視頻 PC 端都采取用這樣的方式，將所有的篩選條件列出來。

優(yōu)點：

平鋪型的好處是將篩選項的結(jié)果全部或者部分放出，能夠幫助用戶快速理解篩選項以及快速找到自己想要的結(jié)果。

缺點：

平鋪型的控件占比大，需要占據(jù)大量面積展示平鋪出的篩選結(jié)果。

比如淘寶 PC 端，搜索一個產(chǎn)品后花去 40% 的面積去展示所有的篩選條件，其實就是想引導(dǎo)用戶，淘寶搜索過后 spu 的數(shù)量仍然過大，想通過進(jìn)一步的篩選，讓用戶明確自己對想要東西。同時因為面積占比大，通常平鋪型都是以收折的狀態(tài)，只有在搜索觸發(fā)后才會完全展開。

2. 收折型

收折型篩選是一種簡單直接的篩選形式，將用戶常用的篩選形式通過下拉框的形式進(jìn)行篩選。每一個篩選條件就是一個下拉框，這種形式看上去很簡單，但是在 B 端場景中，下拉框?qū)τ谟脩魜碚f認(rèn)知成本低，操作性也較強(qiáng)，同時在用戶再度使用時，又能給用戶很好的使用體驗的一種方式。

優(yōu)點：

用戶可以直接對其常用的字段篩選進(jìn)行一步操作，并且沒有復(fù)雜的篩選關(guān)系，全部都是「且」的篩選邏輯，能夠保證用戶進(jìn)行快速的篩選選擇。

缺點：

將所有信息全部平鋪展開，信息量過于冗雜繁多，同時在做通用性產(chǎn)品時，這種方式很難做到通用性。

3. 單側(cè)篩選

單側(cè)篩選是一種更通用的篩選形式，通過對于你想篩選的字段進(jìn)行勾選，勾選完成后就會出現(xiàn)篩選條件，然后選擇篩選字段、篩選操作、篩選值，一般選擇完成所有篩選后，還需要點擊查詢，篩選操作才算完成。

整個單側(cè)篩選，大量的篩選條件可以放置在表單的左側(cè)或者右側(cè)，通過表單縱向空間，去承載大量篩選條件。

優(yōu)點：

節(jié)省空間、通用性強(qiáng)。因為在很多 Saas 系統(tǒng)、Paas 系統(tǒng)當(dāng)中，無法針對每一個客戶進(jìn)行設(shè)計，就要考慮到系統(tǒng)通用性高，做一些大而全的功能。在每個表單所需要定制化修改的地方很少，同時能容納的信息量可以很大。

缺點：

就是在后臺系統(tǒng)當(dāng)中只有這一種篩選形式會面臨在我常用的幾種篩選的字段中，要通過不斷尋找，來滿足我的篩選需求，操作麻煩。

我們產(chǎn)品在某一次改版就將篩選由收折式修改為單側(cè)式，因為我們用戶使用篩選的場景非常的多，用戶每次篩選都要多進(jìn)行 2、3 步操作， 導(dǎo)致用戶進(jìn)行了大量的吐槽， 后來進(jìn)行修改，將篩選順序支持手動調(diào)整順序，用戶吐槽的次數(shù)才慢慢減少。

4. 表頭篩選

表頭篩選是一種復(fù)雜篩選的形式，其最開始是來源于 Excel 的篩選形式。點擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。之后在后臺產(chǎn)品的發(fā)展中，得以借鑒過來。

優(yōu)點：

可以通過表頭的點擊，使用戶更快捷進(jìn)入到自己的篩選條件，在通常情況下，在表單越左的數(shù)據(jù)顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場景基本還是得到滿足。

缺點：

用戶第一次進(jìn)入系統(tǒng)很難理解這種交互形式，且在每個表頭都會有一個 icon，影響用戶對于表頭的識別。

5. 彈窗式

通過點擊篩選按鈕，展現(xiàn)出篩選彈窗，進(jìn)行篩選。這種篩選適合在篩選功能在系統(tǒng)中不是很重要的層級。最常見的就是 Tapd，在其中篩選不是很強(qiáng)的一個功能，同時也是系統(tǒng)中十分有必要的。

優(yōu)點：

是能夠在節(jié)省面積的情況下，可以進(jìn)行很復(fù)雜的篩選，同時可以支持復(fù)雜情況下的篩選。

缺點：

彈窗會遮擋一部分表單數(shù)據(jù)，會影響篩選人的判斷，其次篩選條件的添加也相對更繁瑣。

選擇更合適的篩選

在我們一系列篩選的調(diào)整過后，我們團(tuán)隊也總結(jié)了對于我們來說更重要的條件和形式，來和大家分享探討一下。

1. 使用頻率

我們認(rèn)為影響篩選控件最重要的是用戶的使用頻率，因為用戶的使用頻率和使用方式，直接影響到我們篩選是用普通篩選 or 高級篩選，也會影響到篩選的形式。

2. 滿足實際業(yè)務(wù)所需

篩選功能的做法，取決于我們產(chǎn)品未來是想往哪一個方向發(fā)展，如果想把功能做的強(qiáng)大，就得考慮到篩選的后續(xù)擴(kuò)展性。因此滿足實際業(yè)務(wù)也是十分重要。

3. 用戶認(rèn)知成本

在 B 端系統(tǒng)當(dāng)中，最可能遇見的就是你給用戶設(shè)計的路徑但是其實用戶根本沒有往你想的方向去操作。我們系統(tǒng)最開始給用戶設(shè)計好了很多功能點，但是用戶對于這個點的認(rèn)知成本實在過低，也導(dǎo)致了后面系統(tǒng)功能點很多都被埋沒。因為在你設(shè)計好了一個功能點后，要適當(dāng)引導(dǎo)用戶，解釋這個功能的使用場景才不會讓你設(shè)計的功能被淹沒。

其實在 B 端產(chǎn)品中，易用本身就是難且長的過程，在每一個功能的設(shè)計都需要你去思考很多方面：用戶易用、信息層級、未來擴(kuò)展，你都要做出取舍，而對于每個模塊都需要你思考、結(jié)合用戶場景， B 端 web 的設(shè)計一直都是摸黑前進(jìn)，我也只是將自己一段時間的工作進(jìn)行總結(jié)，說如有的不正確，歡迎大家指正。

歡迎關(guān)注作者的微信公眾號：「CeDesign」