2023-9-19 鶴鶴
B端篩選設計的多種類型和多種場景運用，超多案例！
FIRST
~
前言
時隔兩月我又來更新了，休息了兩個月，總感覺周末過的很悠閑，放松的同時也感覺有點虛度光陰，會有一種罪惡感。而我一直想要換一臺筆記本，這樣方便我外出攜帶，玩耍的同時也能做一些有意義的事情。在家里總結文章時，我總會被各種事情影響，無法全身心地投入到總結文章這件事情上。
還是快速進入到正題吧，這一期主要是全面的總結了關于B端產品中的篩選，之前也有總結一篇簡潔版的關于篩選的文章【TO B 搜索和篩選的多種使用場景】，回頭查看原來總結的文章時才發現確實之前總結的有點太過簡潔，很多篩選類型和使用場景都考慮得不夠全面，這也是之前對該功能不夠了解，局限于自己在工作中常見的場景，對于不了解的場景自然就不清楚。由于接觸得比較片面，了解得不夠全面，導致之前總結的也不夠完整。
當然產品本身也是隨著實際業務場景的變化，從而考慮設計不同的形式來達到該功能的使用。產品需要優化，交互和布局同樣需要優化，所以在B端產品中并不是一個同樣的功能就僅限于只有一種解決方案。
對于產品而言，只有參與的項目越多，設計和思考的場景越全面，了解的產品越多，才能更好的掌握一個功能的多種類型和使用場景，這一次能夠在原來的基礎上更加全面的總結同一個功能的類型和場景，主要是在工作中也有遇到類似的業務場景，加上對其他產品的體驗，從而讓我更加全面的了解到該功能的多樣性。
SECOND
~
篩選的多種類型及排版布局使用場景
以下我對自己在實際工作中運用到的多種篩選類型再次做了總結，不同的篩選類型對應的排版布局各不相同，并且在實際業務中的使用場景也具有差異，下面我還是會通過不同的類型列舉不同的場景案例，便于理解和運用到實際工作業務中。
現在總結文章的習慣是將需要總結的文章通過思維導圖的形式畫出整體的導線，這樣讓自己的腦海里面形成一個大致的方向，也是一個整體的構思，后期只需要根據導線一步一步往下描述具體的內容和案例即可。這個總結方式也可以運用到工作任務中，例如：當接到一個設計任務時，先理解該任務的整體方向，再細化每一個細節展開設計，這樣能避免遺漏也能讓自己對整體的把握更明確。
篩選的類型我分為以下四大類：
A、常規搜索篩選B、按條件篩選
C、分類tab篩選
D、高級篩選
篩選的排版布局我分為以下三大類：
A、平鋪選項篩選B、隱藏選項篩選
C、折疊選項篩選
篩選的類型是根據業務場景而定，篩選的排版布局是根據篩選的類型而定，篩選的使用場景是根據實際業務場景而定，所以首先我們需要理解清楚真實的業務場景，再通過分析選擇適合的篩選類型，當已經知道了篩選類型，我們只需要根據篩選的條件和頁面的交互及空間利用情況選擇合適的布局方式即可。
A、常規搜索篩選
常規的搜索篩選不難理解，即常見的搜索框，根據輸入文本關鍵詞進行模糊搜索或者根據記憶準確輸入完整的信息，精準搜索。文本關鍵詞搜索需要通過用戶的記憶來完成，只有當用戶對需要搜索的內容（關鍵詞）有記憶才能完成搜索篩選，搜索的結果范圍根據關鍵詞的精準度而定。
當搜索的關鍵詞少且模糊時，搜索的結果數量就會很多，需要用戶在眾多的結果中再次查找自己的目標值，難度較大。而如果搜索的關鍵詞多且準確時，搜索的結果數量就會較少，用戶只需要在少量的結果集中查找自己的目標值，難度較小。
（注意：搜索結果的數量也會受到原本數據量的影響。）
例如在微信公眾號發表記錄中的搜索，當只輸入“設計”關鍵詞時，搜索結果一共有202條，需要在這202條數據中找到自己的目標值是比較難的。
當我將關鍵詞改為“設計來源于生活”后，搜索結果只有14條，這樣我在查找我的目標值時就變得容易很多。所以如果用戶具有更深的記錄，能夠輸入更多的關鍵信息，就可以縮短查到的時間，能更快的找到自己的目標值。
案例實操
下面我再列舉一個關于搜索篩選在B端產品中的運用：（此例子將運用到后面所有案例，以下案例只作為簡單舉例，總數據量為10條，實際業務根據真實業務數據量而定）
需求背景：客戶A需要在文件清單表格中，根據清單名稱查找目標值。
設計要點：如果只需要在清單中通過清單名稱來查看目標值的話，這里就可以選擇直接使用搜索篩選來完成，因為清單名稱復雜不清晰，是不確定的值。所以直接在表單上方加一個搜索框，用戶只需要輸入關鍵詞即可完成搜索。
當輸入關鍵詞“策略”后，我們得到了三條名稱帶有關鍵詞“策略“的數據結果，減小了數據范圍，讓用戶在查找目標值時更加容易。
（注：搜索按鈕根據數據量的多少決定是否需要，當數據量較多時，列表刷新負荷較大，建議增加搜索按鈕，反之則不加）
B、按條件篩選
按照條件篩選是對于數據內具有明確的條件分類，在篩選條件中將這些類單獨作為篩選的條件，當選擇某一個選項作為篩選條件時，篩選出現的數據結果集將是同類數據。篩選類型又分多種選擇方式：下拉框選項篩選、平鋪選框篩選、表頭篩選、組合篩選。
下拉框選項篩選：
類別選項篩選，根據具體的選項在小范圍內篩選。
下拉框選項展示提前預設好的選項，用戶只需要選擇需要篩選的類型，即可快速篩選出這類數據的數據結果集。此類篩選優點在于能快速篩選同類數據，不需要用戶過多的記憶。缺點是無法快速達到精準篩查的效果，如果需要達到精準篩選的效果需要同時選擇多項。
案例實操
需求背景：客戶A想要快速篩選文件清單中發布狀態為“審批中”的數據，能夠快速統計審批中的數據量，并且完成后續任務操作。
設計要點：客戶需要根據文件清單的狀態快速篩選數據，文件的狀態一共分為三類：已發布、審批中、未發布，雖然客戶只說需要篩選審批中的數據，但是另外兩個狀態的數據也同樣有篩選的場景，所以我們直接將狀態類型作為選項，客戶使用時只需要選擇狀態類型即可快速完成篩選。
（注：搜索按鈕根據數據量的多少決定是否需要，當數據量較多時，列表刷新負荷較大，建議增加搜索按鈕，反之則不加）
平鋪選框篩選：
下拉框選項篩選的另外一種展示形式，將選項平鋪展示，類別選項篩選，根據具體的選項在小范圍內篩選。
案例實操
需求背景：客戶A想要快速篩選文件清單中發布狀態為“審批中”的數據，希望能夠直接看到文件的狀態類型，快速選擇類型。
設計要點：這次客戶的需求點是在上一個方案中提出的優化，由于上個方案是將狀態選項放在下拉框中的，導致客戶不能直觀的看到狀態選項，需要點擊下拉框后才能看到，原操作路徑為：點擊展開下拉框??選擇審批中選項??點擊搜索。
為解決狀態選項不直觀的問題，我選擇將狀態選項直接平鋪展示在外面，這樣客戶就可以直觀的看到所有的選項。并且操作路徑變成了：勾選審批中選項??搜索，操作路徑和操作步驟也得到了優化。
表頭篩選：
將篩選選項內置在表頭中（更好地利用頁面空間，隱蔽不直觀）。當頁面空間有限時，可以考慮此方案。另外當表格表頭字段數據較多時，需要橫向滑動查看數據時，建議還是直接將篩選條件單獨放在外面。或者當需要篩選的選項太多時，表頭字段都能篩選時，也可以考慮放在表頭中。
案例實操
需求背景：客戶希望界面更加干凈、整潔，并且能夠達到根據狀態篩選的功能。
設計要點：平鋪選項的方案直觀，但是平鋪與后面的搜索框排版在一起時，整體頁面看著比較零散。將篩選選項直接放在表頭字段后，通過hover展示下拉框，點擊選項后不需要再次點擊搜索按鈕，直接進入搜索。操作路徑為：圖標hover??選擇選項。
這個方案缺點在于篩選的選項不直觀，但是操作點擊步驟只有一步。
組合篩選：
多種篩選類型組合為篩選組，組合篩選一般是是篩選的條件較多，選項較多時，將不同類型的篩選組件結合為一個篩選組。用戶在使用時，只需要將所有的條件輸入/選擇后，點擊搜索即可完成篩選，得到的結果將是多個條件組合后的并集/合集的值。
案例實操
需求背景：客戶需要同時滿足根據名稱和編號關鍵詞搜索篩選、狀態類型篩選、責任人/責任部門篩選、類型和時間區間篩選。也就是說客戶想要將表格中所有的表頭字段作為篩選條件。
設計要點：由于這里包含多種篩選類型，名稱和編號是關鍵詞篩選，發布狀態和、責任人、責任部門、類型是選項篩選，發布日期是時間區間篩選。所以我們需要采用組合篩選的模式。
（右側箭頭：組合篩選占據空間較大，可考慮展開和收起篩選組件）
延展思考：
這里的篩選條件都來自于表頭，并且表頭字段一屏能展示完整，我們也可以將表頭部分字段篩選直接放在表頭中，采用搜索篩選+表頭篩選的模式組合。
（注：篩選類型選擇需要根據實際業務場景而定，選擇適合真實業務場景的，此處只是舉例延展。）
C、分類tab篩選
分類tab篩選在軟件中一般是作為系統的全局搜索才會使用到，主要是通過搜索關鍵詞后，分類展示不同類別下帶有該關鍵詞的數據信息。等同于全局搜索是一個大的漏篩，通過輸入關鍵詞后，將符合該范圍內的數據篩選出來，并且分類展示，用戶再到每個分類下再次通過其他條件篩選，從而得到自己的目標值。
（此類型案例不適用，另舉例說明）
例如：在飛書文檔中，通過搜索關鍵詞后，分別展示該關鍵詞在文檔、表格、多維表格、思維筆記、文件五大類別中展示結果集，用戶通過類別區分，再縮小范圍尋找目標值。
D、高級篩選
篩選條件自定義組合（靈活且占空間小）。高級篩選占用空間比較小，用戶可以根據需要自定義篩選條件，不必將所有篩選條件都展示在界面中。使用更靈活，界面更美觀。
案例實操
需求背景：客戶需要同時滿足根據名稱和編號關鍵詞搜索篩選、狀態類型篩選、責任人/責任部門篩選、類型和時間區間篩選。并且頁面簡潔，篩選靈活度高。
設計要點：篩選的條件較多，并且還需要界面能夠簡潔，篩選靈活度較高，所以我們可以選擇高級篩選模式，雖然這里可以直接用表頭篩選，但是表頭篩選的入口太多，不易查找，所以就采用高級篩選統一入口。如下圖：
方案一：下拉選擇式
通過下拉展示可篩選的條件類型，再根據類型選擇具體的篩選條件，從而得到結果值。
交互細節：點擊篩選??選擇需要篩選的條件類型??選擇具體的值
方案二：條件組合式
通過自定義條件，并且自定義篩選結果值。
當選擇發布狀態等于審批中中時，篩選的結果為數據中所有發布狀態為審批中的數據。
當選擇發布狀態不等于審批中時，選的結果的數據中不包含狀態為審批中的數據，只包含已發布和未發布的數據。
作者：設計小余
鏈接：https://www.zcool.com.cn/article/ZMTQ4NzU5Ng==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢～希望得到建議咨詢、商務合作，也請與我們聯系01063334945
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司