B端篩選設(shè)計的多種類型和多種場景運用，超多案例！

FIRST
~
前言

時隔兩月我又來更新了，休息了兩個月，總感覺周末過的很悠閑，放松的同時也感覺有點虛度光陰，會有一種罪惡感。而我一直想要換一臺筆記本，這樣方便我外出攜帶，玩耍的同時也能做一些有意義的事情。在家里總結(jié)文章時，我總會被各種事情影響，無法全身心地投入到總結(jié)文章這件事情上。

還是快速進入到正題吧，這一期主要是全面的總結(jié)了關(guān)于B端產(chǎn)品中的篩選，之前也有總結(jié)一篇簡潔版的關(guān)于篩選的文章【TO B 搜索和篩選的多種使用場景】，回頭查看原來總結(jié)的文章時才發(fā)現(xiàn)確實之前總結(jié)的有點太過簡潔，很多篩選類型和使用場景都考慮得不夠全面，這也是之前對該功能不夠了解，局限于自己在工作中常見的場景，對于不了解的場景自然就不清楚。由于接觸得比較片面，了解得不夠全面，導(dǎo)致之前總結(jié)的也不夠完整。

當(dāng)然產(chǎn)品本身也是隨著實際業(yè)務(wù)場景的變化，從而考慮設(shè)計不同的形式來達到該功能的使用。產(chǎn)品需要優(yōu)化，交互和布局同樣需要優(yōu)化，所以在B端產(chǎn)品中并不是一個同樣的功能就僅限于只有一種解決方案。

對于產(chǎn)品而言，只有參與的項目越多，設(shè)計和思考的場景越全面，了解的產(chǎn)品越多，才能更好的掌握一個功能的多種類型和使用場景，這一次能夠在原來的基礎(chǔ)上更加全面的總結(jié)同一個功能的類型和場景，主要是在工作中也有遇到類似的業(yè)務(wù)場景，加上對其他產(chǎn)品的體驗，從而讓我更加全面的了解到該功能的多樣性。

SECOND
~
篩選的多種類型及排版布局使用場景

以下我對自己在實際工作中運用到的多種篩選類型再次做了總結(jié)，不同的篩選類型對應(yīng)的排版布局各不相同，并且在實際業(yè)務(wù)中的使用場景也具有差異，下面我還是會通過不同的類型列舉不同的場景案例，便于理解和運用到實際工作業(yè)務(wù)中。

現(xiàn)在總結(jié)文章的習(xí)慣是將需要總結(jié)的文章通過思維導(dǎo)圖的形式畫出整體的導(dǎo)線，這樣讓自己的腦海里面形成一個大致的方向，也是一個整體的構(gòu)思，后期只需要根據(jù)導(dǎo)線一步一步往下描述具體的內(nèi)容和案例即可。這個總結(jié)方式也可以運用到工作任務(wù)中，例如：當(dāng)接到一個設(shè)計任務(wù)時，先理解該任務(wù)的整體方向，再細化每一個細節(jié)展開設(shè)計，這樣能避免遺漏也能讓自己對整體的把握更明確。

篩選的類型我分為以下四大類：
A、常規(guī)搜索篩選B、按條件篩選
C、分類tab篩選
D、高級篩選

篩選的排版布局我分為以下三大類：
A、平鋪選項篩選B、隱藏選項篩選
C、折疊選項篩選

篩選的類型是根據(jù)業(yè)務(wù)場景而定，篩選的排版布局是根據(jù)篩選的類型而定，篩選的使用場景是根據(jù)實際業(yè)務(wù)場景而定，所以首先我們需要理解清楚真實的業(yè)務(wù)場景，再通過分析選擇適合的篩選類型，當(dāng)已經(jīng)知道了篩選類型，我們只需要根據(jù)篩選的條件和頁面的交互及空間利用情況選擇合適的布局方式即可。

A、常規(guī)搜索篩選

常規(guī)的搜索篩選不難理解，即常見的搜索框，根據(jù)輸入文本關(guān)鍵詞進行模糊搜索或者根據(jù)記憶準(zhǔn)確輸入完整的信息，精準(zhǔn)搜索。文本關(guān)鍵詞搜索需要通過用戶的記憶來完成，只有當(dāng)用戶對需要搜索的內(nèi)容（關(guān)鍵詞）有記憶才能完成搜索篩選，搜索的結(jié)果范圍根據(jù)關(guān)鍵詞的精準(zhǔn)度而定。

當(dāng)搜索的關(guān)鍵詞少且模糊時，搜索的結(jié)果數(shù)量就會很多，需要用戶在眾多的結(jié)果中再次查找自己的目標(biāo)值，難度較大。而如果搜索的關(guān)鍵詞多且準(zhǔn)確時，搜索的結(jié)果數(shù)量就會較少，用戶只需要在少量的結(jié)果集中查找自己的目標(biāo)值，難度較小。

（注意：搜索結(jié)果的數(shù)量也會受到原本數(shù)據(jù)量的影響。）

例如在微信公眾號發(fā)表記錄中的搜索，當(dāng)只輸入“設(shè)計”關(guān)鍵詞時，搜索結(jié)果一共有202條，需要在這202條數(shù)據(jù)中找到自己的目標(biāo)值是比較難的。

當(dāng)我將關(guān)鍵詞改為“設(shè)計來源于生活”后，搜索結(jié)果只有14條，這樣我在查找我的目標(biāo)值時就變得容易很多。所以如果用戶具有更深的記錄，能夠輸入更多的關(guān)鍵信息，就可以縮短查到的時間，能更快的找到自己的目標(biāo)值。

案例實操

下面我再列舉一個關(guān)于搜索篩選在B端產(chǎn)品中的運用：（此例子將運用到后面所有案例，以下案例只作為簡單舉例，總數(shù)據(jù)量為10條，實際業(yè)務(wù)根據(jù)真實業(yè)務(wù)數(shù)據(jù)量而定）

需求背景：客戶A需要在文件清單表格中，根據(jù)清單名稱查找目標(biāo)值。

設(shè)計要點：如果只需要在清單中通過清單名稱來查看目標(biāo)值的話，這里就可以選擇直接使用搜索篩選來完成，因為清單名稱復(fù)雜不清晰，是不確定的值。所以直接在表單上方加一個搜索框，用戶只需要輸入關(guān)鍵詞即可完成搜索。

當(dāng)輸入關(guān)鍵詞“策略”后，我們得到了三條名稱帶有關(guān)鍵詞“策略“的數(shù)據(jù)結(jié)果，減小了數(shù)據(jù)范圍，讓用戶在查找目標(biāo)值時更加容易。

（注：搜索按鈕根據(jù)數(shù)據(jù)量的多少決定是否需要，當(dāng)數(shù)據(jù)量較多時，列表刷新負(fù)荷較大，建議增加搜索按鈕，反之則不加）

B、按條件篩選

按照條件篩選是對于數(shù)據(jù)內(nèi)具有明確的條件分類，在篩選條件中將這些類單獨作為篩選的條件，當(dāng)選擇某一個選項作為篩選條件時，篩選出現(xiàn)的數(shù)據(jù)結(jié)果集將是同類數(shù)據(jù)。篩選類型又分多種選擇方式：下拉框選項篩選、平鋪選框篩選、表頭篩選、組合篩選。

下拉框選項篩選：

類別選項篩選，根據(jù)具體的選項在小范圍內(nèi)篩選。

下拉框選項展示提前預(yù)設(shè)好的選項，用戶只需要選擇需要篩選的類型，即可快速篩選出這類數(shù)據(jù)的數(shù)據(jù)結(jié)果集。此類篩選優(yōu)點在于能快速篩選同類數(shù)據(jù)，不需要用戶過多的記憶。缺點是無法快速達到精準(zhǔn)篩查的效果，如果需要達到精準(zhǔn)篩選的效果需要同時選擇多項。

案例實操

需求背景：客戶A想要快速篩選文件清單中發(fā)布狀態(tài)為“審批中”的數(shù)據(jù)，能夠快速統(tǒng)計審批中的數(shù)據(jù)量，并且完成后續(xù)任務(wù)操作。

設(shè)計要點：客戶需要根據(jù)文件清單的狀態(tài)快速篩選數(shù)據(jù)，文件的狀態(tài)一共分為三類：已發(fā)布、審批中、未發(fā)布，雖然客戶只說需要篩選審批中的數(shù)據(jù)，但是另外兩個狀態(tài)的數(shù)據(jù)也同樣有篩選的場景，所以我們直接將狀態(tài)類型作為選項，客戶使用時只需要選擇狀態(tài)類型即可快速完成篩選。
（注：搜索按鈕根據(jù)數(shù)據(jù)量的多少決定是否需要，當(dāng)數(shù)據(jù)量較多時，列表刷新負(fù)荷較大，建議增加搜索按鈕，反之則不加）

平鋪選框篩選：

下拉框選項篩選的另外一種展示形式，將選項平鋪展示，類別選項篩選，根據(jù)具體的選項在小范圍內(nèi)篩選。

案例實操

需求背景：客戶A想要快速篩選文件清單中發(fā)布狀態(tài)為“審批中”的數(shù)據(jù)，希望能夠直接看到文件的狀態(tài)類型，快速選擇類型。

設(shè)計要點：這次客戶的需求點是在上一個方案中提出的優(yōu)化，由于上個方案是將狀態(tài)選項放在下拉框中的，導(dǎo)致客戶不能直觀的看到狀態(tài)選項，需要點擊下拉框后才能看到，原操作路徑為：點擊展開下拉框??選擇審批中選項??點擊搜索。

為解決狀態(tài)選項不直觀的問題，我選擇將狀態(tài)選項直接平鋪展示在外面，這樣客戶就可以直觀的看到所有的選項。并且操作路徑變成了：勾選審批中選項??搜索，操作路徑和操作步驟也得到了優(yōu)化。

表頭篩選：

將篩選選項內(nèi)置在表頭中（更好地利用頁面空間，隱蔽不直觀）。當(dāng)頁面空間有限時，可以考慮此方案。另外當(dāng)表格表頭字段數(shù)據(jù)較多時，需要橫向滑動查看數(shù)據(jù)時，建議還是直接將篩選條件單獨放在外面?；蛘弋?dāng)需要篩選的選項太多時，表頭字段都能篩選時，也可以考慮放在表頭中。

案例實操

需求背景：客戶希望界面更加干凈、整潔，并且能夠達到根據(jù)狀態(tài)篩選的功能。

設(shè)計要點：平鋪選項的方案直觀，但是平鋪與后面的搜索框排版在一起時，整體頁面看著比較零散。將篩選選項直接放在表頭字段后，通過hover展示下拉框，點擊選項后不需要再次點擊搜索按鈕，直接進入搜索。操作路徑為：圖標(biāo)hover??選擇選項。

這個方案缺點在于篩選的選項不直觀，但是操作點擊步驟只有一步。

組合篩選：

多種篩選類型組合為篩選組，組合篩選一般是是篩選的條件較多，選項較多時，將不同類型的篩選組件結(jié)合為一個篩選組。用戶在使用時，只需要將所有的條件輸入/選擇后，點擊搜索即可完成篩選，得到的結(jié)果將是多個條件組合后的并集/合集的值。

案例實操

需求背景：客戶需要同時滿足根據(jù)名稱和編號關(guān)鍵詞搜索篩選、狀態(tài)類型篩選、責(zé)任人/責(zé)任部門篩選、類型和時間區(qū)間篩選。也就是說客戶想要將表格中所有的表頭字段作為篩選條件。

設(shè)計要點：由于這里包含多種篩選類型，名稱和編號是關(guān)鍵詞篩選，發(fā)布狀態(tài)和、責(zé)任人、責(zé)任部門、類型是選項篩選，發(fā)布日期是時間區(qū)間篩選。所以我們需要采用組合篩選的模式。
（右側(cè)箭頭：組合篩選占據(jù)空間較大，可考慮展開和收起篩選組件）

延展思考：
這里的篩選條件都來自于表頭，并且表頭字段一屏能展示完整，我們也可以將表頭部分字段篩選直接放在表頭中，采用搜索篩選+表頭篩選的模式組合。

（注：篩選類型選擇需要根據(jù)實際業(yè)務(wù)場景而定，選擇適合真實業(yè)務(wù)場景的，此處只是舉例延展。）

C、分類tab篩選

分類tab篩選在軟件中一般是作為系統(tǒng)的全局搜索才會使用到，主要是通過搜索關(guān)鍵詞后，分類展示不同類別下帶有該關(guān)鍵詞的數(shù)據(jù)信息。等同于全局搜索是一個大的漏篩，通過輸入關(guān)鍵詞后，將符合該范圍內(nèi)的數(shù)據(jù)篩選出來，并且分類展示，用戶再到每個分類下再次通過其他條件篩選，從而得到自己的目標(biāo)值。

（此類型案例不適用，另舉例說明）

例如：在飛書文檔中，通過搜索關(guān)鍵詞后，分別展示該關(guān)鍵詞在文檔、表格、多維表格、思維筆記、文件五大類別中展示結(jié)果集，用戶通過類別區(qū)分，再縮小范圍尋找目標(biāo)值。

D、高級篩選

篩選條件自定義組合（靈活且占空間小）。高級篩選占用空間比較小，用戶可以根據(jù)需要自定義篩選條件，不必將所有篩選條件都展示在界面中。使用更靈活，界面更美觀。

案例實操

需求背景：客戶需要同時滿足根據(jù)名稱和編號關(guān)鍵詞搜索篩選、狀態(tài)類型篩選、責(zé)任人/責(zé)任部門篩選、類型和時間區(qū)間篩選。并且頁面簡潔，篩選靈活度高。

設(shè)計要點：篩選的條件較多，并且還需要界面能夠簡潔，篩選靈活度較高，所以我們可以選擇高級篩選模式，雖然這里可以直接用表頭篩選，但是表頭篩選的入口太多，不易查找，所以就采用高級篩選統(tǒng)一入口。如下圖：

方案一：下拉選擇式
通過下拉展示可篩選的條件類型，再根據(jù)類型選擇具體的篩選條件，從而得到結(jié)果值。
交互細節(jié)：點擊篩選??選擇需要篩選的條件類型??選擇具體的值

方案二：條件組合式

通過自定義條件，并且自定義篩選結(jié)果值。

當(dāng)選擇發(fā)布狀態(tài)等于審批中中時，篩選的結(jié)果為數(shù)據(jù)中所有發(fā)布狀態(tài)為審批中的數(shù)據(jù)。
當(dāng)選擇發(fā)布狀態(tài)不等于審批中時，選的結(jié)果的數(shù)據(jù)中不包含狀態(tài)為審批中的數(shù)據(jù)，只包含已發(fā)布和未發(fā)布的數(shù)據(jù)。

作者：設(shè)計小余
鏈接：https://www.zcool.com.cn/article/ZMTQ4NzU5Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢～希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司