寫在前面
首先我們先從篩選本身講起吧～
篩選可以說是我使用比較頻繁的一種互動形式，比如我點外賣，會選擇滿減優惠力度大，同時我也可以選擇在哪一個價格區間內的產品，這就會用到篩選，而到了B端產品上來，一個CRM系統當中，篩選的邏輯也會比移動端的複雜，伴隨著：且關係、或關係、大於、小於等等這樣複雜的邏輯，也為設計本身增加了很多難度。因此，今天我們就來討論討論篩選控制元件
1、篩選存在的意義
篩選存在的對於整個表單來說是非常重要的，它可以幫助使用者，在表單茫茫多的資料當中進行快速的定位；可以對錶單進行快速劃分，縮短使用者對於資料的尋找時間；能夠滿足使用者在工作中，實際業務場景的篩選。
對於實際B端場景來說，篩選是日常資料分類的一個重要途徑，我們先來看看實際場景到底有哪些？
用幾個我們CRM使用者日常使用的場景來說：
比如今天作為一個電話銷售人員，想要聯絡最近註冊的使用者時，通常會透過篩選來選出最近幾天註冊過，同時又沒有銷售更進的客戶，進行一個優先順序的排布；
再比如說，在銷售週報當中，銷售主管可以透過篩選得到每個人這周完成的狀態，也可以透過篩選得出每個人對於線索的更進情況和對客戶的流失狀態等等，這些都可以透過各種各樣的篩選形式來滿足使用者對於特定情況下的使用
篩選和搜尋、導航的區別？
篩選可以透過多個篩選條件進行多維度的尋找，而導航、搜尋只能透過單一條件進行指定篩選。
雖然在現在很多搜尋都可以支援多維度用空格去進行多欄位的關鍵詞搜尋，但本質上區別不大
所以在B端專案當中，如果你有表單，那你就需要篩選
2、篩選的型別
我們將篩選分為基礎篩選和高階篩選兩種，兩種篩選會根據業務場景不同，在不同的頁面去使用
2。1、基礎篩選
基礎篩選一般為系統預設好的篩選欄位，具有很強的業務和場景的需求。基礎篩選一般分為四個部分：
篩選條件：
是指使用者可以篩選的範圍
篩選項：
是指使用者可以選擇的篩選專案
已選項：
是指使用者已經選中的篩選項
備選項：
是指使用者還沒有選擇的篩選選項
基礎篩選更多作為使用者快捷篩選的一種方式，因為一般使用場景當中使用者幾個篩選邏輯為“且”
同時篩選的邏輯也為簡單篩選，所以在使用場景上只適合在對篩選要求不高的場景下使用。
2。2、高階篩選
高階篩選一般為篩選中含有運算子，同時篩選當中包含條件關係，比如且關係或者否關係。一般高階篩選包含以下幾類關鍵詞
篩選關係：
是指幾個篩選條件之間的關係，一般為 且、或關係，即 且 關係為幾個條件之間的交集；或 關係為幾個條件之間的聯集（並集）
篩選欄位：
是指在篩選當中，所要的篩選項，一般為表單當中的所有可篩選的欄位
篩選操作：
是指篩選欄位和篩選值之間的關係，常見的篩選操作有：大於、小於、是、否、包含、不包含、為空、不為空等等。
篩選值：
你所需要篩選的數值
高階篩選一般滿足更多的使用者場景，為使用者多條件多欄位、多個篩選關係、多個篩選操作 提供有利保障。
3、篩選的佈局
3。1、上下佈局
當在篩選器條件少於5個的情況下，最常使用的就是上下佈局，這樣篩選能與網站保持統一的情況下，上下佈局也更方便使用者進行閱讀
當篩選器過多的情況下（一般在5-15個之間），篩選器過多，需要滾屏才能看到篩選結果，使用者使用起來會很彆扭。所以在5-15個的情況下，一般會將篩選項進行收折，這樣保證篩選整體面積不會太大，同時將使用者常用的篩選放在前面，可以滿足使用者基本的業務需求和使用場景
3。2、左右佈局
左右佈局在PC端一般是以欄位選擇進行篩選，通俗來講就是將使用者可以篩選的所有欄位全部羅列出來，然後透過勾選選，擇出你需要篩選的欄位，進行篩選器的使用
左右佈局的好處是能夠將篩選的所有條件都直接的展示出來，可以適應很多場景，在篩選器用15個以上時。透過左右佈局的方式，能夠讓篩選條件進行滾動，在最大限度保持使用者使用體驗
4、篩選的形式
在日常的B端產品中，篩選的形式有哪些？篩選到底應該怎麼設計？接下來為大家總結梳理一些在 B端產品 中的篩選玩法，希望為你開啟新大陸。
4。1、平鋪型
平鋪型一般為使用者搜尋結果資料量過大，使使用者搜尋出來的結果與其預期差距過大，使用者然後可以透過篩選對資料的再一次分類，使使用者能夠精準尋找其想要的結果。
平鋪型一般為篩選條件少於6個，這樣能夠透過1行或者2行去展示篩選項的結果
多用於資訊量大的產品，比如電商、影片網站等等。常見的淘寶、京東、騰訊影片PC端 都採取用這樣的方式，將所有的篩選條件列出來。
平鋪型的好處是將篩選項的結果全部或者部分放出，能夠幫助使用者快速理解篩選項以及快讀找到自己想要的結果。
缺點也是很明顯，平鋪型的控制元件佔比大，需要佔據大量面積展示平鋪出的篩選結果。
比如淘寶PC端，搜尋一個產品後花去40%的面積去展示所有的篩選條件，其實就是想引導使用者，淘寶搜尋過後spu的數量仍然過大，想透過進一步的篩選，讓使用者明確自己對想要東西。同時因為面積佔比大，通常平鋪型都是以收折的狀態，只有在搜尋觸發後才會完全展開
4。2、收折型
收折型篩選是一種簡單直接的篩選形式，將使用者常用的篩選形式透過下拉框的形式進行篩選。每一個篩選條件就是一個下拉框，這種形式看上去很簡單，但是在B端場景中，下拉框對於使用者來說認知成本低，操作性也較強，同時在使用者重度使用時，又能給使用者很好的使用體驗的一種方式
優點：
使用者可以直接對其常用的欄位篩選進行一步操作，並且沒有複雜的篩選關係，全部都是“且”的篩選邏輯，能夠保證使用者進行快速的篩選選擇
缺點：
將所有資訊全部平鋪展開，資訊量過於冗雜繁多，同時在做通用性產品時，這種方式很難做到通用性
4。3、單側篩選
單側篩選是一種更通用的篩選形式，透過對於你想篩選的欄位進行勾選，勾選完成後就會出現篩選條件，然後選擇篩選欄位、篩選操作、篩選值，一般選擇完成所有篩選後，還需要點選查詢，篩選操作才算完成。
整個單側篩選，大量的篩選條件可以放置在表單的左側或者右側，透過表單縱向空間，去承載大量篩選條件。
優點：
節省空間、通用性強。因為在很多Saas系統、Paas系統當中，無法針對每一個客戶進行設計，就要考慮到系統通用型高，做一些大而全的功能。在每個表單也所需要定製化修改的地方很少，同時能容納的資訊量可以很大。
缺點：
就是在後臺系統當中只有這一種篩選形式會面臨在我常用的幾種篩選的欄位中，要透過不斷尋找，來滿足我的篩選需求，操作麻煩。
我們產品在某一次改版就將篩選由收折式修改為單側式，因為我們使用者使用篩選的場景非常的多，使用者每次篩選都要多進行2、3步操作，導致使用者進行了大量的吐槽，後來進行修改，將篩選順序支援手動調整順序，使用者吐槽的次數才慢慢減少。
4。4、表頭篩選
表頭篩選是一種複雜篩選的形式，其最開始是來源於Excel的篩選形式。點選表單的篩選按鈕，可以將表頭的篩選欄位直接帶入，方便使用者。之後在後臺產品的發展中，得以借鑑過來。
優點：
可以透過表頭的點選，使使用者更快捷進入到自己的篩選條件，在通常情況下，在表單越左的資料顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場景基本還是得到滿足。
缺點：
使用者第一次進入系統很難理解這種互動形式，且在每個表頭都會有一個icon，影響使用者對於表頭的識別。
4。5、彈窗式
透過點選篩選按鈕，展現出篩選彈窗，進行篩選。這種篩選適合在篩選功能在系統中不是很重要的層級。最常見的就是Tapd，在其中篩選不是很強的一個功能，同時也是系統中十分有必要的。
優點：
是能夠在節省面積的情況下，可以進行很複雜的篩選，同時可以支援複雜情況下的篩選
缺點：
彈窗會遮擋一部分表單資料，會影響篩選人的判斷，其次篩選條件的新增也相對更加繁瑣。
5、選擇更合適的篩選
在我們一系列篩選的調整過後，我們團隊也總結了對於我們來說更重要的條件和形式，來和大家分享探討一下。
5。1、使用頻率
我們認為影響篩選控制元件最重要的是使用者的使用頻率，因為使用者的使用頻率和使用方式，直接影響到我們篩選是用普通篩選or高階篩選，也會影響到篩選的形式。
5。2、滿足實際業務所需
篩選功能的做法，取決於我們產品未來是想往哪一個方向發展，如果想把功能做的強大，就得考慮到篩選的後續擴充套件性。因此滿足實際業務也是十分重要。
5。3、使用者認知成本
在B端系統當中，最可能遇見的就是你給使用者設計的路徑但是其實使用者根本沒有往你想的方向去操作。我們系統最開始給使用者設計好了很多功能點，但是使用者對於這個點的認知成本實在過低，也導致了後面系統功能點很多都被埋沒。因為在你設計好了一個功能點後，要適當引導使用者，解釋這個功能的使用場景才不會讓你設計的功能被淹沒。
其實在B端產品中，易用本身就是難且長的過程，在每一個功能的設計都需要你去思考很多方面：使用者易用、資訊層級、未來擴充套件，你都要做出取捨，而對於每個模組都需要你思考、結合使用者場景，B端web的設計一直都是摸黑前進，我也只是將自己的一段時間的工作進行總結，說的不正確，歡迎大家指正。
