在平臺的系統(tǒng)和業(yè)務(wù)流程中，篩選功能在一定程度上扮演了相對重要的角色，它的存在可以幫助用戶快速地、便捷地找到自己想要的信息。那么，篩選設(shè)計應(yīng)該怎么做，才能更符合實際業(yè)務(wù)場景，從而給用戶帶來好的使用體驗？本文作者就對篩選設(shè)計進行了總結(jié)，一起來看。

下半年，分配到樓下業(yè)務(wù)線做體驗改造，面對B端龐大的平臺系統(tǒng)和業(yè)務(wù)流程，發(fā)現(xiàn)篩選扮演了基礎(chǔ)且非常重要的角色。就最近的一些工作經(jīng)歷和感悟，對篩選做了一下復(fù)盤。

在B端系統(tǒng)中，不同的用戶操作著不同的業(yè)務(wù)流程，面對大量的數(shù)據(jù)，能快速且準確的找到自己需要的數(shù)據(jù)，可以明顯提升任務(wù)完成效率。因此篩選作為任務(wù)節(jié)點中的重要媒介工具，設(shè)計師如何才能準確全面的匹配場景，那就先讓我們?nèi)娴恼J識一下篩選。

一、篩選的類型

篩選的存在無非就是幫助用戶準確、快速的找到目標數(shù)據(jù)，這個數(shù)據(jù)可能是單個，也可能是一組。在《信息架構(gòu)：超越Web設(shè)計》中，篩選系統(tǒng)與導(dǎo)航系統(tǒng)、標簽系統(tǒng)、組織系統(tǒng)被列為信息架構(gòu)的一部分，因此篩選也會與其他系統(tǒng)有一定的聯(lián)系，比如狀態(tài)、類型篩選就需要依賴標簽系統(tǒng)。

篩選的類型分為輸入類篩選、選擇器類篩選、平鋪類篩選、分頁篩選、高級篩選。

1. 輸入類篩選

輸入類篩選需要用戶輸入一定的文本關(guān)鍵詞，篩選出對應(yīng)的數(shù)據(jù)。

輸入類篩選從篩選準確性上，可以分為模糊篩選和精準篩選。

1）模糊搜索

按照用戶輸入的檢索詞，篩選出字段中帶有該檢索詞的所有數(shù)據(jù)。

• 優(yōu)點：可以篩選出同類數(shù)據(jù)。
• 缺陷：精準度不高。

2）精準搜索

按照用戶輸入的關(guān)鍵詞，僅篩選出整個字段與篩選詞相同的數(shù)據(jù)。

• 優(yōu)點：檢索精準。
• 缺陷：由于過于精準，會考驗用戶的記憶能力。

由于精準搜索的精準性，一個字的偏差，都會造成搜索失敗，因此，在正常的設(shè)計應(yīng)用中，模糊搜索的使用頻率會更高一些。

輸入類篩選從篩選形式上，可以分為單標簽搜索和多標簽可切換搜索。

3）單標簽

單標簽搜索只能在輸入框中的一個既定范圍中搜索。

• 優(yōu)點：便捷，應(yīng)用普遍。
• 缺陷：范圍少，面對復(fù)雜數(shù)據(jù)需要多個組合篩選。

4）多標簽可切換

在一組標簽中選擇搜索的范圍。

• 優(yōu)點：便捷，節(jié)省空間。
• 缺陷：展示不直觀；多一步選擇標簽的操作；不能組合篩選。

如果空間有限，沒有組合搜索的可能性，可以使用多標簽可切換；正常情況下，不要剝奪用戶使用組合篩選的機會。

2. 選擇器類篩選

選擇器類篩選可以是單選或者多選，用戶點擊選擇待選項即可。這類篩選往往是篩選的某類標簽或者某組數(shù)據(jù)，方便用戶批量處理。

• 優(yōu)點：無需準確記憶，適合批量數(shù)據(jù)。
• 缺陷：展現(xiàn)方式不直觀，匹配結(jié)果的精準度不夠。

此類篩選往往和表單的選擇器使用的是同一個組件，而且可以使用第三方的開源庫，應(yīng)用范圍比較廣，同輸入類搜索一樣，是最優(yōu)先被考慮的類型。

3. 平鋪類篩選

平鋪類篩選是將所有的待選項鋪出來，方便用戶直觀選擇?？梢允菃芜x，也可以是多選。

• 優(yōu)點：待選項平鋪，選擇方便直觀。
• 缺陷：占用空間，待選項數(shù)量過多的時候，可能會存在折行或隱藏，沒有關(guān)鍵詞搜索，選擇效率變低。

平鋪類篩選大多應(yīng)用在電商、招聘等網(wǎng)站；如果篩選維度很少，空間充足且待選項的數(shù)量在5個左右，可以考慮在表格、列表頁面使用平鋪類篩選。

4. 分頁篩選

分頁Tabs類似于平鋪類篩選，都是將待選項平鋪出來，不一樣的是，分頁Tabs的視覺級別更高一些，相當(dāng)于標題存在，并且不支持重置，有一些平臺也稱之為分組。

• 優(yōu)點：幫助用戶提前做了一輪篩選；待選項平鋪，選擇方便直觀。
• 缺陷：占用空間，需要考慮待選項的數(shù)量和頁面空間的適配。

分頁Tabs對用戶來講無疑是便捷的數(shù)據(jù)篩選，但前提是需要保證大多數(shù)用戶篩選維度的共通性，否則就會對部分用戶造成困擾，或者提供用戶自定義的機會。

5. 高級篩選

高級篩選的判斷關(guān)系較多，一般會包括篩選條件、篩選關(guān)系（且、或）、篩選類型（包含、不包含、等于、不等于等）、篩選值和添加等屬性。

• 優(yōu)點：可以滿足的用戶應(yīng)用場景最多。
• 缺陷：操作比較繁瑣。

二、篩選的布局

由于篩選組件的數(shù)量和業(yè)務(wù)應(yīng)用的場景有所不同，所形成的布局模式會有所差異，大致會分上下布局、側(cè)邊布局、浮層布局、表頭布局。

1. 上下布局

上下布局是值篩選條件位于數(shù)據(jù)的頂部。

• 優(yōu)點：展示直觀，篩選條件和數(shù)據(jù)關(guān)系聯(lián)系更緊密；橫向空間上可以展示更多的數(shù)據(jù)。
• 缺陷：數(shù)量多的話會壓縮縱向空間。

上下布局是當(dāng)前用戶使用方式中最常用的方式，如果系統(tǒng)給的篩選條件過多，需要對篩選條件進行分層，低頻類的需要收起。

2. 側(cè)邊布局

側(cè)邊布局是指將篩選條件列在數(shù)據(jù)的左側(cè)或者右側(cè)。

• 優(yōu)點：可以展示更多的篩選條件。
• 缺陷：寬度大的會壓縮橫向空間；從視線覆蓋面積來講，側(cè)邊布局用戶對照查看數(shù)據(jù)的耗時會更長。

使用側(cè)邊布局的時候，需要考量當(dāng)前內(nèi)容區(qū)數(shù)據(jù)的字段展示量如何。因為一般情況下，側(cè)邊會存在導(dǎo)航，再加側(cè)邊篩選，數(shù)據(jù)壓縮比較嚴重。還要看一下當(dāng)前用戶的使用習(xí)慣如何，對側(cè)邊布局的接受度。

3. 浮層布局

浮層布局一般會有抽屜、對話框、懸浮框。

• 優(yōu)點：節(jié)省空間，能容納更多的篩選條件。
• 缺陷：用戶無法快捷的對比篩選值和篩選數(shù)據(jù)；具有一定的打斷性，特別是對話框和抽屜；用戶再次修改比較麻煩。

浮層布局一般在空間有限，又有篩選需求的時候使用；使用過程中需要標記當(dāng)前有篩選值，最好能將篩選值單獨顯示出來，方便用戶數(shù)據(jù)對比和清除重置。

4. 表頭布局

表頭布局是將篩選條件的圖標固定在表格表頭的右側(cè)，用戶點擊后篩選。

• 優(yōu)點：篩選流程更直觀。
• 缺陷：用戶無法快捷的對比篩選值和篩選數(shù)據(jù)；表頭的空間有限，如果是橫向滾動，隱藏后不容易發(fā)現(xiàn)。

1）一般不推薦優(yōu)先使用表頭篩選；像個別場景，空間有限，使用過程要標記當(dāng)前有篩選值的狀態(tài)。

2）如果為方便用戶篩選，又沒必要單獨給界面加一個選擇器類篩選，可以嘗試使用排序代替篩選，讓數(shù)據(jù)以一定的順序進行分組。比如按照優(yōu)先級：高、中、低排序，倒序按照高、中、低的順序排列，正序反之，可以滿足大部分用戶的查詢需求。

三、篩選的觸發(fā)方式

1. 實時觸發(fā)

在輸入或者選擇篩選值的時候，數(shù)據(jù)實時匹配。

• 優(yōu)點：篩選效率高。
• 缺陷：比較考驗系統(tǒng)的穩(wěn)定性；對于想要精準搜索范圍的場景，會延長整體的加載時間。

與手動觸發(fā)相比，更推薦實時觸發(fā)，但是要考慮系統(tǒng)的穩(wěn)定性，在答應(yīng)用戶之前先和研發(fā)團隊預(yù)研方式的可行性。

2. 手動觸發(fā)

在輸入或者選擇篩選值的之后，需要手動點一下搜索或者查詢按鈕。

• 優(yōu)點：穩(wěn)定性更高。
• 缺陷：多一步操作，效率低。

四、幫助用戶

1. 幫助用戶做收納

無論使用哪種布局或者篩選類型，都會遇到篩選條件數(shù)量很多的情況。如果當(dāng)下不能輕易改變用戶習(xí)慣或者優(yōu)化成本太高，可以試試以下三種方式。

1、）對篩選條件進行分層，將高頻的篩選條件放在外面，低頻的收起，用戶用到的時候再展開。

2）一些復(fù)雜B端系統(tǒng)，篩選條件是根據(jù)用戶自定的數(shù)據(jù)生成，因此數(shù)量和內(nèi)容不可控，多角色場景下使用習(xí)慣也不一致，這時可以給幾個系統(tǒng)常用篩選條件，讓用戶可以自定義選擇。

3）考慮極限情況，如果用戶確實添加了很多的篩選條件，要考慮頁面內(nèi)局部滾動。

2. 幫用戶標記篩選狀態(tài)

如果在使用可收起篩選、浮層篩選、表頭篩選等方式的時候，一定要為用戶標記當(dāng)前有篩選值的狀態(tài)。如果不標記，用戶在篩選后沒有重置，離開頁面再回來的時候容易遺忘當(dāng)前已經(jīng)篩選過。

或者將選擇后的篩選值外顯，在數(shù)據(jù)頂部放置一份，方便用戶對比和清除。

3. 幫助用戶記住篩選值

1）用戶篩選過后，點擊數(shù)據(jù)查看詳情，如果詳情是一個單獨頁面，往往都會刷新，再返回的時候，篩選條件已經(jīng)清空了，如果用戶需要多次查看該篩選值下的數(shù)據(jù)，需要多次選擇。

所以，用戶從下級頁面返回上級頁面的時候，需要幫用戶記住篩選值。至于是研發(fā)記住，還是優(yōu)化設(shè)計表達避免刷新，要具體場景具體分析。

2）篩選器的使用

有的平臺也會叫過濾器、視圖等，名稱有出入，但是功能大體是一致的。一般在篩選條件數(shù)量和使用角色都比較多的業(yè)務(wù)場景中使用。系統(tǒng)會默認給幾個篩選器：全部、我負責(zé)的、我創(chuàng)建的等。

這是從另外一個維度幫助用戶記?。簩⒊Ｓ玫膸в泻Y選值的篩選條件作為一個篩選組保存起來，方便用戶下次進來的時候直接選擇使用，方式便捷迅速。

以下是幾種篩選器在頁面中的常見表現(xiàn)形式。

4. 幫助用戶更容易到達

在有篩選條件的表格頁面，應(yīng)該確保頂部篩選條件和操作欄固定。如果數(shù)據(jù)太多，滾動會隱藏篩選區(qū)，應(yīng)該只允許表格內(nèi)容區(qū)滾動，方便用戶對比篩選值和篩選數(shù)據(jù)。另外，如果用戶要修改篩選值，這樣的話不需要再回滾，容易再次觸及。

文章架構(gòu)

當(dāng)然，除了以上設(shè)計復(fù)盤，還可以對篩選組件做一些創(chuàng)新設(shè)計，有機會再和大家討論。業(yè)務(wù)場景的不同會導(dǎo)致設(shè)計師的表現(xiàn)也會有所不同，上述是我對最近工作的復(fù)盤，如果還有其他的篩選內(nèi)容，歡迎大家再補充和交流～