對(duì)B端產(chǎn)品來(lái)說(shuō)，由于業(yè)務(wù)邏輯與系統(tǒng)設(shè)計(jì)的限制，所以篩選邏輯更為復(fù)雜，為設(shè)計(jì)增加了不少難度。而筆者也結(jié)合為公司B端系統(tǒng)做的一次設(shè)計(jì)調(diào)整，為我們分享篩選功能的基本知識(shí)，希望對(duì)你有所啟發(fā)。

首先我們先從篩選本身講起吧～

篩選可以說(shuō)是我使用比較頻繁的一種交互形式，比如我點(diǎn)外賣(mài)，會(huì)選擇滿(mǎn)減優(yōu)惠力度大，同時(shí)我也可以選擇在哪一個(gè)價(jià)格區(qū)間內(nèi)的產(chǎn)品，這就會(huì)用到篩選。

而到了B端產(chǎn)品上來(lái)，一個(gè)CRM系統(tǒng)當(dāng)中，篩選的邏輯也會(huì)比移動(dòng)端的復(fù)雜，伴隨著：且關(guān)系、或關(guān)系、大于、小于等等這樣復(fù)雜的篩選形式，也為設(shè)計(jì)本身增加了很多難度。因此，今天我們就來(lái)討論討論篩選控件。

01 篩選存在的意義

篩選存在的對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的，它可以幫助用戶(hù)在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的數(shù)據(jù)定位；可以對(duì)表單進(jìn)行快速數(shù)據(jù)按照自己想要的方式進(jìn)行劃分，縮短用戶(hù)對(duì)于數(shù)據(jù)的尋找時(shí)間；能夠滿(mǎn)足用戶(hù)在工作中，實(shí)際業(yè)務(wù)場(chǎng)景的篩選。

對(duì)于實(shí)際B端場(chǎng)景來(lái)說(shuō)，篩選是日常數(shù)據(jù)分類(lèi)的一個(gè)重要途徑，我們先來(lái)看看實(shí)際場(chǎng)景到底有哪些？

1. 以CRM用戶(hù)日常使用的場(chǎng)景為例

比如今天作為一個(gè)電話(huà)銷(xiāo)售人員，想要聯(lián)系最近注冊(cè)的用戶(hù)時(shí)，通常會(huì)通過(guò)篩選來(lái)選出最近幾天注冊(cè)過(guò)，同時(shí)又沒(méi)有銷(xiāo)售更近的客戶(hù)，進(jìn)行一個(gè)優(yōu)先級(jí)的排布；

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

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

篩選可以通過(guò)多個(gè)篩選條件進(jìn)行多維度的尋找，而導(dǎo)航、搜索只能通過(guò)單一條件進(jìn)行指定篩選。

雖然在現(xiàn)在很多搜索引擎都可以支持多維度用空格去進(jìn)行多字段的關(guān)鍵詞搜索，但本質(zhì)上區(qū)別不大。

所以在B端項(xiàng)目當(dāng)中，如果你有表單，那你就需要篩選。

02 篩選的類(lèi)型

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

1 .基礎(chǔ)篩選

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

• 篩選條件：是指用戶(hù)可以篩選的范圍，
• 篩選項(xiàng)：是指用戶(hù)可以選擇的篩選項(xiàng)目
• 已選項(xiàng)：是指用戶(hù)已經(jīng)選中的篩選項(xiàng)
• 備選項(xiàng)：是指用戶(hù)還沒(méi)有選擇的篩選選項(xiàng)

基礎(chǔ)篩選更多作為用戶(hù)快捷篩選的一種方式，因?yàn)橐话闶褂脠?chǎng)景當(dāng)中用戶(hù)幾個(gè)篩選邏輯為“且”。

同時(shí)篩選的邏輯也為簡(jiǎn)單篩選，所以在使用場(chǎng)景上只適合在對(duì)篩選要求不高的場(chǎng)景下使用。

2. 高級(jí)篩選

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

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

高級(jí)篩選一般滿(mǎn)足更多的用戶(hù)場(chǎng)景，為用戶(hù)多條件多字段篩選提供有利保障。

03 篩選的布局

1. 上下布局

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

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

2. 左右布局

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

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

04 篩選的形式

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

1. 平鋪型

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

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

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

優(yōu)點(diǎn)：將篩選項(xiàng)的結(jié)果全部或者部分放出，能夠幫助用戶(hù)快速理解篩選項(xiàng)以及快讀找到自己想要的結(jié)果。

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

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

2. 收折式

收折型篩選是一種簡(jiǎn)單直接的篩選形式，將用戶(hù)常用的篩選形式通過(guò)下拉框的形式進(jìn)行篩選。每一個(gè)篩選條件就是一個(gè)下拉框，這種形式看上去很簡(jiǎn)單，但是在B端場(chǎng)景中，下拉框?qū)τ谟脩?hù)來(lái)說(shuō)認(rèn)知成本低，操作性也較強(qiáng)，同時(shí)在用戶(hù)重度使用時(shí)，又能給用戶(hù)很好的使用體驗(yàn)的一種方式。

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

3. 單側(cè)篩選

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

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

4. 表頭篩選

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

5. 彈窗式

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

優(yōu)點(diǎn)：是能夠在節(jié)省面積的情況下，可以進(jìn)行很復(fù)雜的篩選，同時(shí)可以支持復(fù)雜情況下的篩選。

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

05 選擇更合適的篩選

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

1. 使用頻率

我們認(rèn)為影響篩選控件最重要的是用戶(hù)的使用頻率，因?yàn)橛脩?hù)的使用頻率和使用方式，直接影響到我們篩選是用普通篩選or高級(jí)篩選，也會(huì)影響到篩選的形式。

2. 滿(mǎn)足實(shí)際業(yè)務(wù)所需

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

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

在B端系統(tǒng)當(dāng)中，最可能遇見(jiàn)的就是你給用戶(hù)設(shè)計(jì)的路徑但是其實(shí)用戶(hù)根本沒(méi)有往你想的方向去操作。我們系統(tǒng)最開(kāi)始給用戶(hù)設(shè)計(jì)好了很多功能點(diǎn)，但是用戶(hù)對(duì)于這個(gè)點(diǎn)的認(rèn)知成本實(shí)在過(guò)低，也導(dǎo)致了后面系統(tǒng)功能點(diǎn)很多都被埋沒(méi)。因?yàn)樵谀阍O(shè)計(jì)好了一個(gè)功能點(diǎn)后，要適當(dāng)引導(dǎo)用戶(hù)，解釋這個(gè)功能的使用場(chǎng)景才不會(huì)讓你設(shè)計(jì)的功能被淹沒(méi)。

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

作者：CE，公眾號(hào)：CeDesign

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

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