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

FIRST
~
前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

案例實(shí)操

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

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

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

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

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

B、按條件篩選

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

下拉框選項(xiàng)篩選：

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

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

案例實(shí)操

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

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

平鋪選框篩選：

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

案例實(shí)操

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

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

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

表頭篩選：

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

案例實(shí)操

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

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

這個(gè)方案缺點(diǎn)在于篩選的選項(xiàng)不直觀，但是操作點(diǎn)擊步驟只有一步。

組合篩選：

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

案例實(shí)操

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

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

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

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

C、分類tab篩選

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

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

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

D、高級篩選

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

案例實(shí)操

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

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

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

方案二：條件組合式

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

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

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

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

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

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