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