引言

篩選作為一個(gè)常用的功能，在產(chǎn)品設(shè)計(jì)中的應(yīng)用面是非常廣的。比如我們?nèi)ベ?gòu)物，會(huì)選擇銷(xiāo)量高、價(jià)格實(shí)惠并且包郵的商品，篩選區(qū)的設(shè)計(jì)就便于用戶(hù)進(jìn)行數(shù)據(jù)的查詢(xún)和定位，可以快速查詢(xún)到滿(mǎn)意的商品。本文就篩選這個(gè)話(huà)題展開(kāi)了分析和探討。

更多B端干貨：

一、篩選簡(jiǎn)介

篩選，也可以稱(chēng)作過(guò)濾器，它屬于搜索框架的一部分主要用于內(nèi)容提取，將一類(lèi)數(shù)據(jù)展示，一類(lèi)數(shù)據(jù)隱藏，同時(shí)可以整合很多的組件。

在 B 端設(shè)計(jì)中篩選存在的對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的，它可以幫助用戶(hù)，在茫茫的表單數(shù)據(jù)當(dāng)中進(jìn)行快速的定位；可對(duì)表單進(jìn)行快速劃分，縮短用戶(hù)對(duì)于數(shù)據(jù)的尋找時(shí)間；能夠滿(mǎn)足用戶(hù)在工作中，實(shí)際業(yè)務(wù)場(chǎng)景的篩選。

二、篩選的展示類(lèi)型

篩選區(qū)常見(jiàn)到的有搜索、條件篩選這兩類(lèi)控件。搜索和篩選雖然同在篩選區(qū)，但是二者還是有所差異的。

搜索：需要通過(guò)查找搜尋獲得的。

在 B 端系統(tǒng)界面設(shè)計(jì)中，搜索是通過(guò)指定任意條件，系統(tǒng)對(duì)此條件進(jìn)行檢索后，展示相對(duì)應(yīng)內(nèi)容，功能偏主動(dòng)性；條件篩選：好比一個(gè)個(gè)篩子將物料進(jìn)行粗細(xì)料分離的一個(gè)過(guò)程。

條件篩選是系統(tǒng)提供指定各種條件縮小范圍，可以選擇查找不同條件的內(nèi)容，功能偏被動(dòng)性。

無(wú)論被動(dòng)性還是主動(dòng)性，搜索和條件篩選這兩個(gè)功能都是讓用戶(hù)使用某個(gè)條件對(duì)內(nèi)容進(jìn)行區(qū)分，從而找到用戶(hù)想要的內(nèi)容。二者在功能上相輔相成，在 B 端系統(tǒng)的頁(yè)面中僅靠搜索或者篩選作為內(nèi)容篩選都是不夠的，這就需要組合篩選區(qū)了。

1. 搜索篩選

精確搜索

這種方式搜索準(zhǔn)確率高，所要即所得。但需要用戶(hù)自己輸入，然后進(jìn)行查詢(xún)。需要記憶搜索詳細(xì)信息。輸入框需要有提示輸入的內(nèi)容，方便用戶(hù)填寫(xiě)，以及確認(rèn)輸入的類(lèi)別或格式。適用于用戶(hù)有清晰的目標(biāo)，同時(shí)需要有查詢(xún)/搜索按鈕，來(lái)執(zhí)行篩選。搜索可配合篩選固有類(lèi)一起使用。

模糊搜索

模糊搜索可以用于搜索關(guān)鍵字的同義詞，提高搜索的精確性。字段匹配推薦搜索結(jié)果，減少記憶負(fù)擔(dān)，適用于不明確的信息篩選。但是會(huì)篩選出很多類(lèi)似相關(guān)的內(nèi)容，需要查找鑒別所要內(nèi)容，不便捷。適用于用戶(hù)對(duì)目標(biāo)模糊，模糊是指不用關(guān)心輸入了什么格式，哪怕錯(cuò)了，系統(tǒng)也會(huì)推薦給用戶(hù)相對(duì)正確的；用戶(hù)需要瀏覽操作過(guò)濾器提供的信息來(lái)輔助篩選達(dá)到目標(biāo)。同時(shí)也可配合篩選固有類(lèi)一起使用。

2. 條件篩選

下拉篩選

這個(gè)篩選的優(yōu)勢(shì)是頁(yè)面的空間利用率高，同時(shí)下拉起到了很好的收納作用，不占據(jù)頁(yè)面空間。但由于下拉的局限性無(wú)法觀看到所有的篩選字段，需要操作點(diǎn)擊查看。

固定選項(xiàng)類(lèi)，適用于下拉的篩選字段選項(xiàng)有限，并有明確的總結(jié)分類(lèi)。這種操作起來(lái)便捷，降低用戶(hù)的操作難度。一般情況下需要“搜索/查詢(xún)”按鈕，但是也有的產(chǎn)品是勾選即執(zhí)行的。需要結(jié)合具體的使用場(chǎng)景去判定。

矩陣（平鋪）篩選

用戶(hù)可以直接看到篩選內(nèi)容，支持輸入更多篩選條件，減少操作步驟提高了用戶(hù)篩選的效率。但平鋪的篩選類(lèi)目占據(jù)頁(yè)面空間較大，空間利用率低，信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn)，增加用戶(hù)的決策時(shí)間，不適合選項(xiàng)太多的情況。平鋪篩選控件的普適性為最強(qiáng)，當(dāng)沒(méi)有其他更好想法時(shí)，用平鋪總是一個(gè)好的選擇。需要注意的是，篩選條件不要過(guò)多（遵循 7±2 法則）。

表頭篩選

通過(guò)表頭的點(diǎn)擊，簡(jiǎn)潔、直觀地篩選當(dāng)前表格列。但只能篩選當(dāng)前列的內(nèi)容，篩選字段比較少，篩選形式比較單一。每個(gè)表頭都會(huì)有篩選的 icon，影響用戶(hù)對(duì)于表頭的識(shí)別。表頭篩選學(xué)習(xí)成本最高，且和表頭排序容易沖突，篩選值展示也不夠直觀。

表頭篩選類(lèi)似 Excel 表格的操作，是一種相對(duì)高級(jí)的交互，適合表格列比較單一內(nèi)容的篩選。

TAB 篩選

篩選條件一目了然，交互步驟少，一個(gè) Tab 標(biāo)簽代表一個(gè)緯度，平鋪展示篩選內(nèi)容方便識(shí)別，學(xué)習(xí)成本低。但 Tab 標(biāo)簽篩選字段數(shù)量有限制，不宜過(guò)多，分類(lèi)需覆蓋選項(xiàng)，并且保證每一項(xiàng)沒(méi)有交集，空間占用多、不夠靈活，對(duì)用戶(hù)自定義項(xiàng)支持較差。適用于 Tab 標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒(méi)有交集的數(shù)據(jù)內(nèi)容（可以是同性質(zhì)，也可以是不同性質(zhì)）。權(quán)重高，選項(xiàng)值不超過(guò) 5 個(gè)。

3. 組合篩選

在 B 端系統(tǒng)表格類(lèi)頁(yè)面中，字段屬性很多，簡(jiǎn)單的檢索方式很難準(zhǔn)確定位到目標(biāo)數(shù)據(jù)，所以在實(shí)際使用當(dāng)中，常會(huì)將大量非交叉關(guān)系的屬性進(jìn)行羅列，搜索、篩選、TAB 標(biāo)簽切換組合出現(xiàn)，形成多屬性的組合檢索。而篩選項(xiàng)互相組合，其展示方式有如下幾種：

平鋪式

優(yōu)點(diǎn)：用戶(hù)能直接看到選項(xiàng)內(nèi)容，方便用戶(hù)識(shí)別選項(xiàng)，且提高了用戶(hù)篩選的效率（節(jié)省了篩選操作），大而全的篩選字段最大限度避免篩選條件遺漏的問(wèn)題。

缺點(diǎn)：篩選項(xiàng)多會(huì)占據(jù)大量頁(yè)面空間，信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn)，增加用戶(hù)的決策時(shí)間，不利于表格數(shù)據(jù)的直觀展示，此類(lèi)型一般配合“勾選即執(zhí)行”使用。

適用從各個(gè)維度篩選的場(chǎng)景，多維度篩選對(duì)信息篩選的顆粒度需求不一致，同時(shí)希望備選項(xiàng)被選中。

折疊式

折疊式篩選是平鋪式篩選的改進(jìn)，一種簡(jiǎn)單直接的篩選形式，對(duì)平鋪的篩選項(xiàng)進(jìn)行收納，如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的，可以通過(guò)折疊的方式將這部分篩選字段隱藏起來(lái)，高頻篩選字段外露。適用于折疊低頻篩選，顯示高頻篩選，能滿(mǎn)足大多場(chǎng)景下不占用太多空間。針對(duì)有更多篩選需求的用戶(hù)也有更好的引導(dǎo)性。

三、篩選的反饋

篩選區(qū)有兩種不同的反饋模式：數(shù)據(jù)實(shí)時(shí)更新反饋和數(shù)據(jù)手動(dòng)更新反饋。

數(shù)據(jù)實(shí)時(shí)更新反饋

界面將與所有設(shè)置的篩選相匹配并對(duì)結(jié)果進(jìn)行實(shí)時(shí)更新。

這種模式的優(yōu)點(diǎn)是在執(zhí)行篩選時(shí)為用戶(hù)提供了一種方便簡(jiǎn)單的體驗(yàn)，可以在每次點(diǎn)擊后立即看到結(jié)果。適用于較低風(fēng)險(xiǎn)的交互，一旦處理多選過(guò)濾器或更復(fù)雜的輸入時(shí)可能會(huì)造成混亂。當(dāng)然還需要考慮處理數(shù)據(jù)的多少，如果應(yīng)用中數(shù)據(jù)量巨大，每次更新時(shí)間較長(zhǎng)，反而會(huì)降低用戶(hù)的使用效率。

手動(dòng)更新反饋

在手動(dòng)更新反饋模式下，過(guò)濾結(jié)果只有在用戶(hù)點(diǎn)擊查詢(xún)時(shí)才會(huì)更新。如果用戶(hù)想在每次更改后查看結(jié)果，必須單擊查詢(xún)按鈕。

這種模式適合多緯度復(fù)雜的篩選，所有篩選字段設(shè)置完畢之后，統(tǒng)一執(zhí)行操作，和實(shí)時(shí)反饋結(jié)果相比降低篩選等待時(shí)間，尤其是在大量數(shù)據(jù)進(jìn)行篩選中，優(yōu)化了用戶(hù)體驗(yàn)。

四、篩選要注意的問(wèn)題

什么情況不適合用篩選？

選用篩選組件的前提是信息能被清晰分類(lèi)。如用戶(hù) ID/電話(huà)號(hào)碼，姓名、郵箱這種無(wú)明顯規(guī)則的就不適合用篩選組件去查找，用搜索會(huì)更好。

篩選分類(lèi)有哪些要求？

1. 分類(lèi)需符合大眾認(rèn)知的條件。如：按照年月日的認(rèn)知來(lái)選擇，地理位置按照省市區(qū)街道…
2. 要求篩選類(lèi)目的分類(lèi)要合理、避免晦澀難懂的文案。這決定了用戶(hù)使用篩選功能的時(shí)候是否清晰無(wú)困惑。

五、總結(jié)

關(guān)于篩選設(shè)計(jì)指南這里就結(jié)束啦，在具體項(xiàng)目中大家可以根據(jù)產(chǎn)品的特性和需求進(jìn)行對(duì)應(yīng)的調(diào)整。如果文章中不對(duì)的地方也歡迎指出。

歡迎關(guān)注團(tuán)隊(duì)微信公眾號(hào)：兆日 UCD