編輯導(dǎo)讀：篩選作為一個(gè)常用的功能，在B端產(chǎn)品設(shè)計(jì)中，篩選區(qū)的設(shè)置便于用戶進(jìn)行數(shù)據(jù)查詢和數(shù)據(jù)定位，可以快速按照需要對數(shù)據(jù)進(jìn)行查詢和篩選。本文作者圍繞篩選這個(gè)話題展開了分析，希望對你有幫助。

今天和大家分享的是項(xiàng)目改版中篩選區(qū)的功能設(shè)計(jì)。

一、那么什么是篩選？

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

在B端產(chǎn)品設(shè)計(jì)中，篩選區(qū)的設(shè)置便于用戶進(jìn)行數(shù)據(jù)查詢和數(shù)據(jù)定位，可以快速的按照需要對數(shù)據(jù)進(jìn)行查詢和篩選。

在B端產(chǎn)品設(shè)計(jì)中，篩選的存在對于整個(gè)表單來說是非常重要的，它可以幫助用戶在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的數(shù)據(jù)定位；可以對表單進(jìn)行快速數(shù)據(jù)按照自己想要的方式進(jìn)行劃分，縮短用戶對于數(shù)據(jù)的尋找時(shí)間。

二、篩選區(qū)有哪些展現(xiàn)形式？

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

通過百度百科我們可以了解到：

搜索，意思指仔細(xì)查找，搜尋。

篩選，篩選是利用篩子使物料中小于篩孔的細(xì)粒物料透過篩面，而大于篩孔的粗粒物料滯留在篩面上，從而完成粗、細(xì)料分離的過程。該分離過程可看作是物料分層和細(xì)粒透篩兩個(gè)階段組成的。物料分層是完成分離的條件，細(xì)粒適篩是分離的目的。

在B端系統(tǒng)界面設(shè)計(jì)中，搜索是通過指定任意條件，系統(tǒng)對此條件進(jìn)行的檢索后，展示相對應(yīng)內(nèi)容，功能偏主動(dòng)性；篩選是系統(tǒng)提供指定各種條件縮小范圍，可以選擇查找不同條件的內(nèi)容，功能偏被動(dòng)性。

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

1. 搜索篩選

精確搜索：

優(yōu)點(diǎn)：搜索準(zhǔn)確率高，所要即所得。

缺點(diǎn)：需要用戶自己輸入，然后進(jìn)行查詢。需要記憶搜索詳細(xì)信息。輸入框需要有提示輸入的內(nèi)容，方便用戶填寫，以及確認(rèn)輸入的類別或格式。

適用場景：適用于用戶有清晰的目標(biāo)，同時(shí)需要有查詢/搜索按鈕，來執(zhí)行篩選。搜索需要配合篩選固有類一起使用。

模糊搜索：

優(yōu)點(diǎn)：模糊搜索可以用于搜索關(guān)鍵字的同義詞，提高搜索的精確性。字段匹配推薦搜索結(jié)果，減少記憶負(fù)擔(dān)，適用于不明確的信息篩選。

缺點(diǎn)：篩選出很多類似相關(guān)的內(nèi)容，需要查找鑒別所要內(nèi)容，不便捷。

適用場景：用戶對目標(biāo)模糊，模糊是指不用關(guān)心輸入了什么格式，哪怕錯(cuò)了，系統(tǒng)也會推薦給用戶相對正確的；用戶需要瀏覽操作過濾器提供的信息來輔助篩選達(dá)到目標(biāo)。搜索需要配合篩選固有類一起使用。

搜索的設(shè)計(jì)原則：

關(guān)于搜索，幾乎沒有人不知道，哪怕是不從事設(shè)計(jì)、產(chǎn)品的人，他們也知道。同時(shí)每一個(gè)產(chǎn)品，隨著規(guī)模變大，搜索一定必不可少。那么如何設(shè)計(jì)好搜索呢？有哪些原則可以借鑒，總結(jié)了以下4個(gè)方面。

漸進(jìn)呈現(xiàn)：

在我們設(shè)計(jì)搜索時(shí)，可以考慮漸進(jìn)呈現(xiàn)的方式。這是指搜索結(jié)果不要一股腦兒都塞給用戶，而是使用逐步擴(kuò)大的方式，讓用戶慢慢進(jìn)入目標(biāo)。但這里要注意，漸進(jìn)的層級不要太深，漸進(jìn)的內(nèi)容要做到足夠?yàn)橛脩糁搿?/p>

結(jié)構(gòu)化：

結(jié)構(gòu)化是指搜索結(jié)果呈現(xiàn)的形式要有歸納和整理的意圖，不能反饋給用戶的是沒有層次的內(nèi)容。簡單來說，分類就是結(jié)構(gòu)化呈現(xiàn)的體現(xiàn)，內(nèi)容結(jié)構(gòu)化后用戶查找和定位才會更快速。

可操作：

對于搜索結(jié)果，我們可以給予操作選擇，例如收藏、分享等，這將會大大提升用戶與搜索結(jié)果之間的后續(xù)聯(lián)系。

可操作性是最佳優(yōu)先的好伙伴。同時(shí)給搜索結(jié)果添加使用類操作，這會讓用戶專注于目標(biāo)。

可保存：

無論搜索任何內(nèi)容，用戶都有權(quán)保存自己常用的搜索結(jié)果，保證用戶后續(xù)無需重復(fù)搜索。這點(diǎn)上已經(jīng)有很多C端產(chǎn)品做的很好了，我們在B端產(chǎn)品上也可以考慮起來。

2. 條件篩選

下拉篩選：

優(yōu)點(diǎn)：頁面的空間利用率高，同時(shí)下拉起到了很好的收納作用，不占據(jù)頁面空間。

缺點(diǎn)：由于下拉的局限性無法觀看到所有的篩選字段，需要操作點(diǎn)擊查看。

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

矩陣(平鋪)篩選：

優(yōu)點(diǎn)：用戶可以直接看到篩選內(nèi)容，支持輸入更多篩選條件，減少操作步驟提高了用戶篩選的效率。

缺點(diǎn)：平鋪的篩選類目占據(jù)頁面空間較大，空間利用率低，信息量過多都是重點(diǎn)等于沒有重點(diǎn)，增加用戶的決策時(shí)間，不適合選項(xiàng)太多的情況。

適用場景：平鋪篩選控件的普適性為最強(qiáng)，當(dāng)沒有其他更好想法時(shí)，用平鋪總是一個(gè)好的選擇。需要注意的是，篩選條件不要過多（遵循7±2 法則）。

當(dāng)確實(shí)需要支持大量的篩選條件時(shí)，有兩種解決方案可供參考：

1. 用戶自行配置篩選條件：對用戶來說，單次篩選會用到的條件是有限的；通過可配置的篩選條件，實(shí)現(xiàn)檢索效率和信息噪音的平衡，對于用戶自定義項(xiàng)的體驗(yàn)與應(yīng)用都有更好的支持。
2. 隱藏低頻的篩選條件：這種方法需要對用戶需求有明確的把握，哪些篩選條件是高頻、哪些是低頻需要有明確的分界，優(yōu)點(diǎn)是第一次使用時(shí)用戶能更快上手。

表頭篩選：

優(yōu)點(diǎn)：通過表頭的點(diǎn)擊，簡潔、直觀的篩選當(dāng)前表格列。

缺點(diǎn)：只能篩選當(dāng)前列的內(nèi)容，篩選字段比較少，篩選形式比較單一。每個(gè)表頭都會有篩選的icon，影響用戶對于表頭的識別。表頭篩選學(xué)習(xí)成本最高，且和表頭排序容易沖突，篩選值展示也不夠直觀。

適用場景：表頭篩選類似Excel表格的操作，是一種相對高級的交互，適合表格列比較單一內(nèi)容的篩選。

一般來說不推薦使用，僅建議在以下幾種情況考慮使用：

• 空間是在有限或者表格非常靈活；
• 用戶可能對每一列都有篩選需求（如數(shù)據(jù)報(bào)表、Excel）；
• 產(chǎn)品規(guī)劃時(shí)對于用戶篩選需求不夠明確，也可通過這種模式先采集數(shù)據(jù)，分析其使用頻次，對后期的界面優(yōu)化進(jìn)行指導(dǎo)。

TAB標(biāo)簽：

優(yōu)點(diǎn)：篩選條件一目了然，交互步驟少，一個(gè)Tab標(biāo)簽代表一個(gè)緯度，平鋪展示篩選內(nèi)容方便識別，學(xué)習(xí)成本低。

缺點(diǎn)：Tab標(biāo)簽篩選字段數(shù)量有限制，不宜過多，分類需覆蓋選項(xiàng)，并且保證每一項(xiàng)沒有交集，空間占用多、不夠靈活，對用戶自定義項(xiàng)支持較差。

適用場景：Tab標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒有交集的數(shù)據(jù)內(nèi)容（可以是同性質(zhì)，也可以是不同性質(zhì)）。權(quán)重高，選項(xiàng)值不超過5個(gè)。

3. 組合篩選

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

平鋪式：

平鋪式是將所有篩選項(xiàng)羅列出來平鋪在頁面上，可以兼容多種數(shù)據(jù)格式比如數(shù)字、文本、標(biāo)簽、枚舉值、布爾值等，包含但不限于日期選擇期、標(biāo)簽切換、單選框、復(fù)選框等多種控件

優(yōu)點(diǎn)：用戶能直接看到選項(xiàng)內(nèi)容，方便用戶識別選項(xiàng)，且提高了用戶篩選的效率（節(jié)省了篩選操作），大而全的篩選字段最大限度避免篩選條件遺漏的問題。缺點(diǎn)：篩選項(xiàng)多會占據(jù)大量頁面空間，信息量過多都是重點(diǎn)等于沒有重點(diǎn)，增加用戶的決策時(shí)間，不利于表格數(shù)據(jù)的直觀展示，此類型一般配合“勾選即執(zhí)行”使用。

適用場景：普適性為最強(qiáng)，當(dāng)沒有其他更好想法時(shí)，用平鋪總是一個(gè)好的選擇。適用于從各個(gè)緯度篩選的場景，多維度篩選對信息篩選的顆粒度需求不一致，同時(shí)希望備選項(xiàng)被選中。

折疊式：

折疊式篩選是平鋪式篩選的改進(jìn)，一種簡單直接的篩選形式，對平鋪的篩選項(xiàng)進(jìn)行收納，如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的，可以通過折疊的方式將這部分篩選字段隱藏起來，高頻篩選字段外露。

優(yōu)點(diǎn)：高頻篩條件可優(yōu)先快速篩選、一定程度上減少用戶的認(rèn)知負(fù)荷，同時(shí)占用空間較小。缺點(diǎn)：不好劃分不同用戶的高頻篩選項(xiàng)，當(dāng)高頻篩選項(xiàng)過多時(shí)，頁面同樣會出現(xiàn)信息冗雜、空間占比大等問題。

適用場景：折疊低頻篩選，顯示高頻篩選，能滿足大多場景下不占用太多空間。針對有更多篩選需求的用戶也有更好的引導(dǎo)性。

4. 篩選區(qū)的布局有哪些？

從位置上來說，組合篩選一般有如下幾種常見類型：上下布局水平篩選區(qū)、左右布局的垂直側(cè)邊篩選區(qū)、 內(nèi)嵌的的表頭篩選區(qū)。

上下布局水平篩選區(qū)：

最常用的上下布局，篩選區(qū)放置在表格頁面的上方，方便用戶識別選項(xiàng)，提高了用戶篩選的效率，明確哪些數(shù)據(jù)是用戶所需的。上下布局的篩選區(qū)也方便用戶進(jìn)行閱讀，對于那些由不同數(shù)據(jù)結(jié)構(gòu)組成的頁面，是一個(gè)很好的選擇。

上下布局的篩選區(qū)的可擴(kuò)展性差，當(dāng)篩選項(xiàng)目少于五個(gè)的情況下，最常使用的就是上下布局，而當(dāng)篩選項(xiàng)目多的時(shí)候，會占據(jù)大量頁面空間，內(nèi)容在較多時(shí)，推薦增加收起功能，這樣保證篩選整體面積不會很大，提升屏效比。

左右布局的垂直側(cè)邊篩選區(qū)：

左右布局的篩選區(qū)一般是以字段選擇進(jìn)行篩選，篩選區(qū)的位置較固定，不會因?yàn)楹Y選項(xiàng)過多而影響頁面中主要內(nèi)容的位置，可擴(kuò)展性強(qiáng)，可在收起部分嵌套更多的字段值。

左右布局的好處就是能夠?qū)⒑Y選的所有條件都直接的展示出來，可以適應(yīng)很多場景，但是這種類型篩選器可以影響整個(gè)頁面。我們需要確保頁面上的每個(gè)元素都有效地受到篩選的影響，避免造成混亂。

內(nèi)嵌的表頭篩選區(qū)：

表頭篩選是一種復(fù)雜的篩選形式，常見于列表中，是一種列表內(nèi)置篩選形式，適合表格列比較單一內(nèi)容的篩選，其最開始是源于Excel的篩選形式，點(diǎn)擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。

5. 篩選區(qū)的反饋

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

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

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

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

手動(dòng)更新反饋：

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

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

6. 篩選需要注意哪些問題

什么情況不適合用篩選？

選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話號碼，注冊用戶郵箱這種無明顯規(guī)則的就不適合用篩選組件去查找，用搜索會更好。

篩選分類條件有什么要求？

一是分類需符合大眾認(rèn)知的條件。如：按照年月日的認(rèn)知來選擇，地理位置按照省市區(qū)街道…

二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時(shí)候是否清晰無困惑。

高頻篩選操作怎么樣方便用戶操作？

首先高頻篩選操作不是產(chǎn)研團(tuán)隊(duì)自己主觀臆斷出來的，需要有數(shù)據(jù)支撐。很多產(chǎn)品為了滿足用戶快捷操作，會在篩選區(qū)幫用戶集成常用的快捷操作入口。比如很多電商產(chǎn)品的新品、包郵等快捷篩選。根據(jù)不同產(chǎn)品用戶習(xí)慣下操作整理出快捷操作入口能提高用戶體驗(yàn)方便度。

篩選和搜索的區(qū)別？

主要區(qū)別在于用戶對目標(biāo)的清晰度不同，需要選用不同組件功能來達(dá)到其目的。

在B端系統(tǒng)界面設(shè)計(jì)中，搜索是通過指定任意條件，系統(tǒng)對此條件進(jìn)行的檢索后，展示相對應(yīng)內(nèi)容；篩選是系統(tǒng)提供指定各種條件縮小范圍，可以選擇查找不同條件的內(nèi)容。

搜索和篩選都是讓用戶使用某個(gè)條件對內(nèi)容進(jìn)行區(qū)分，從而找到用戶想要的內(nèi)容。

三、工作中的設(shè)計(jì)思考

在設(shè)計(jì)組合篩選的時(shí)候，篩選區(qū)的設(shè)計(jì)需要根據(jù)業(yè)務(wù)實(shí)際情況進(jìn)行設(shè)計(jì)，考慮每個(gè)篩選字段和業(yè)務(wù)場景，來安排合理的篩選展示方式。

那么到底什么情況下使用何種篩選模式？我們在設(shè)計(jì)篩選的時(shí)候可以如何思考？顯然，使用頻率和界面空間是兩個(gè)非常重要的評判維度。除此之外，我們還可以以可見性、系統(tǒng)性能和用戶認(rèn)知等維度去深入思考，下面將逐一分析。

頻率：

使用頻率是界面設(shè)計(jì)的一個(gè)重要考量因素，我們通常都會把高頻使用的功能放在顯眼且容易操作的位置。同理，對于篩選模式，我們也會依據(jù)篩選條件的高低頻進(jìn)行設(shè)計(jì)。頻率除了影響使用什么模式外，還會影響篩選條件及篩選項(xiàng)的排列順序，這里就不多敘述了。

界面空間：

一些界面模式的出現(xiàn)就為了應(yīng)對界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過的事。

可見性太弱，當(dāng)篩選條件都被收納在一個(gè)個(gè)小小的入口按鈕時(shí)，它的可見性也會隨之降低，尤其在PC端，一個(gè)大屏幕下更難發(fā)現(xiàn)。

可見性：

既然說到可見性，不妨展開講講?？梢娦允且豁?xiàng)重要的設(shè)計(jì)原則之一。一個(gè)明顯的道理是，可見總比不可見好，但由于界面空間限制，我們不得不取舍。那么如何取舍才能保證可用性仍然友好？

針對篩選模式的可見性，我們可以分三個(gè)要點(diǎn)去考慮：

1）篩選條件本身的可見性

用戶越難發(fā)現(xiàn)，即可見性越低。通常，我們都可以以使用頻率來決定篩選條件的可見程度。但有時(shí)候也會失效，因?yàn)檎缟衔乃峒?，到了篩選這一步通常是顆粒度比較細(xì)的分類，否則我們可以用導(dǎo)航解決。但顆粒度越細(xì)，用戶對信息的需求就越不一致。比如，挑一件衣服，有人希望按品牌篩選，有人希望按價(jià)格，有人希望按顏色，我們很難判斷哪個(gè)頻率更高。面對這種情況，只能將所有的篩選條件平鋪出來供用戶選擇。例如，淘寶天貓等電商產(chǎn)品往往會使用矩陣式的篩選，而一些數(shù)據(jù)格式更多樣的B端產(chǎn)品則直接使用輸入式的篩選。

2）篩選項(xiàng)的可見性

篩選項(xiàng)的可見性同樣影響模式的選擇。頁簽式和矩陣式篩選的可見性比下拉式更高，因?yàn)橛脩艨梢灾苯涌吹胶Y選項(xiàng)。但篩選項(xiàng)一定要讓用戶看見嗎？對于這個(gè)問題，可直接以篩選項(xiàng)的多少去決策（少則可見，多則不可見），比如一些B端產(chǎn)品，如果將備選項(xiàng)都全平鋪出來可能一個(gè)屏幕都放不下，所以只能將所有篩選項(xiàng)收起。但這是一種極端的情況，缺乏說服力。

用戶對備選項(xiàng)是否足夠熟悉？比如對于一個(gè)尺碼的下拉框，我很清楚自己能選擇什么，但對于一個(gè)衣服風(fēng)格的下拉框，由于我對風(fēng)格不熟悉，不能預(yù)判這個(gè)篩選條件能起什么作用，很可能會將其忽略。

3）選中項(xiàng)的可見性

選中項(xiàng)的可見性，即當(dāng)我選中某幾項(xiàng)后再次查看選中項(xiàng)的難易程度。

性能：

數(shù)據(jù)量大才需要篩選，而數(shù)據(jù)量大必然會有性能問題。在不同場景下，用戶會發(fā)生不同的行為，對性能的要求也會不一樣。我們能經(jīng)常發(fā)現(xiàn)一些篩選模式會帶有“確認(rèn)”按鈕，當(dāng)用戶設(shè)置完篩選條件后不會即時(shí)刷新，而需點(diǎn)擊按鈕才能觸發(fā)。而有的篩選模式則沒有“確認(rèn)”按鈕。這分別對應(yīng)著兩種不同的場景。

第一種場景，如B端產(chǎn)品中的查詢報(bào)表場景。我需要找出符合條件A、B、C的所有信息，并進(jìn)行對比分析，那么我就會設(shè)置篩選條件A、B、C后一并篩選出來，這種情況是一步到位的，我不需要再額外添加條件D或E，所以有“確認(rèn)”按鈕的篩選模式更符合此場景。反而即時(shí)刷新會在我設(shè)置篩選條件時(shí)造成干擾。

另外一種場景，常見于B端產(chǎn)品中的查詢列表場景。如果我想找到信息α，通過篩選A后得出10個(gè)信息，那么憑肉眼即可找出信息α，任務(wù)結(jié)束，但如果篩選A后得出1000個(gè)信息，我可能會再添加篩選條件B、C或D，直到篩出的信息能讓我一眼分辨出信息α。換句話說，這時(shí)候我的心理模式是即時(shí)滿足的，只要信息縮窄到一定范圍我就會停止添加篩選條件，否則我會繼續(xù)添加篩選條件。所以即時(shí)刷新能更符合此場景，但與此同時(shí)就需要考慮到性能問題。

另外，我們也可從變更頻次和變更概率這兩個(gè)維度進(jìn)行思考。

變更頻次是指用戶反復(fù)使用篩選的次數(shù)，變更概率是指用戶使用篩選的可能性，一般來說，高頻次必然大概率，但大概率不一定高頻次。而這兩種情況對性能的要求是不同的。還是以報(bào)表和列表為例，在列表中，雖然很大概率會使用篩選來尋找信息，但由于用戶是即時(shí)滿足的，而且滿足即可，所以不會重復(fù)變更篩選條件。而在報(bào)表中，雖然用戶會一次性設(shè)置篩選條件，但需要分析的數(shù)據(jù)不只一種，所以會高頻更換篩選項(xiàng)，回想一下我們?nèi)シ治鲎约寒a(chǎn)品或競品的日活月活等數(shù)據(jù)時(shí)，是不是會高頻地切換數(shù)據(jù)來分析比對？所以，高頻次的篩選就會對性能有更強(qiáng)的要求，而為了避免性能問題，往往也會加上“確認(rèn)”按鈕。

用戶認(rèn)知：

最難解決的其實(shí)是用戶的認(rèn)知問題，尤其在模式相對固定的當(dāng)下，讓用戶適應(yīng)并習(xí)慣新的模式并非易事。我們想出一些創(chuàng)新性的篩選模式時(shí)，不要忽略用戶的認(rèn)知。

案例1：篩選區(qū)內(nèi)容樣式進(jìn)化-高級篩選

最近公司的系統(tǒng)正在進(jìn)行整體迭代改版，其中涉及到很多篩選頁面的改造，篩選需要適用于不同用戶角色從各個(gè)維度篩選的場景，應(yīng)對各種復(fù)雜的篩選情況。

現(xiàn)有的篩選形式都不完全滿足于需要，從現(xiàn)有業(yè)務(wù)出發(fā)，篩選功能的做法，需要考慮可擴(kuò)展性，滿足不同用戶角色不同的篩選場景需求；其中影響篩選控件最重要的是用戶的使用頻率，因?yàn)橛脩舻氖褂妙l率和使用方式，直接影響到篩選的形式。

如何解決不同角色不同篩選場景的需求？

對于不同角色不同篩選場景，我們從個(gè)性化入手，通過配置篩選來解決用戶想要的篩選，是否可以根據(jù)B端系統(tǒng)中的角色、權(quán)限來配置？

這種方式可以，通過B端系統(tǒng)的用戶角色權(quán)限，綁定篩選字段分類；這種方式看上去很美好，但是應(yīng)用起來卻比較麻煩，首先對于每個(gè)用戶角色所需的篩選字段需要做大量的調(diào)研，做到篩選字段適用于用戶，其中無法避免篩選字段與用戶角色不搭配的問題。

其次在用戶角色分配權(quán)限上，系統(tǒng)管理員需要配置大量的篩選權(quán)限信息，操作比較繁瑣，尤其是中、大型B端系統(tǒng)、后臺類會更加繁瑣耗時(shí)，這些都不符合B端降本增效的本質(zhì)。

既然通過角色、權(quán)限配置不可取，那么我們順著篩選可配置的思路來考慮……

那么是否可以在篩選區(qū)進(jìn)行個(gè)性化配置？

我們嘗試下，在篩選區(qū)增加設(shè)置功能，放個(gè)設(shè)置按鈕。

設(shè)置按鈕已經(jīng)放置了，可以設(shè)置篩選字段的排序、可以開啟、關(guān)閉篩選字段。不同的用戶可以根據(jù)自己的需要設(shè)置個(gè)性化的篩選區(qū)，這就是高級篩選，解決了不同角色不同篩選場景的需求。

四、總結(jié)

關(guān)于篩選區(qū)的文章到這就結(jié)束啦～

本文介紹了關(guān)于篩選區(qū)的一些內(nèi)容，在具體項(xiàng)目中，你可能需要根據(jù)產(chǎn)品特性和用戶需求進(jìn)行調(diào)整。我也只是將自己的一段時(shí)間的工作進(jìn)行總結(jié)，說的不正確，歡迎大家指正。

正文結(jié)束。

推薦：

B端產(chǎn)品垂直性比較強(qiáng)，這里推薦一些B端設(shè)計(jì)師和頁面設(shè)計(jì)推薦，多看多積累。

1、? Filters-Fintoryhttps://dribbble.com/shots/16154972–Filters

2、Advanced Search & Filters for Mylagro-Gapsy Studiohttps://dribbble.com/shots/15232468-Advanced-Search-Filters-for-Mylagro

3、Advanced Filters-UXDNhttps://dribbble.com/shots/14585643-Advanced-Filters

4、Advanced Filtering-Jon Moorehttps://dribbble.com/shots/15656463-Advanced-Filtering

5、Filters-Eugen E?anuhttps://dribbble.com/shots/14953107-Filters

6、himalayas.app — filtering 2.0 ?-Jordan Hugheshttps://dribbble.com/shots/16032266-himalayas-app-filtering-2-0

7、Filtering Component + Table Exploration-Micah Carrollhttps://dribbble.com/shots/15899953-Filtering-Component-Table-Exploration

8、Folders and Filters-Liam Boltonhttps://dribbble.com/shots/15193780-Folders-and-Filters

9、Material X design system UI kit – Figma Multiselect-Setproducthttps://dribbble.com/shots/14424197-Material-X-design-system-UI-kit-Figma-Multiselect

10、Manage Custom Filter-Eugen E?anuhttps://dribbble.com/shots/15481814-Manage-Custom-Filter

參考鏈接：

CE青年《B端設(shè)計(jì)指南01-是啊選》https://www.zcool.com.cn/article/ZMTA1NjAzMg==.html

Hi_Nick《數(shù)據(jù)表格設(shè)計(jì)》https://www.zcool.com.cn/article/ZMTIwMjg4NA==.html

小鹿lp《B端體驗(yàn)設(shè)計(jì)主題-表格篇》https://www.zcool.com.cn/article/ZMTIwNzUxMg==.html