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

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

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

一、篩選的類型

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

篩選的類型分為輸入類篩選、選擇器類篩選、平鋪類篩選、分頁(yè)篩選、高級(jí)篩選。

1. 輸入類篩選

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

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

1）模糊搜索

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

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

2）精準(zhǔn)搜索

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

• 優(yōu)點(diǎn)：檢索精準(zhǔn)。
• 缺陷：由于過于精準(zhǔn)，會(huì)考驗(yàn)用戶的記憶能力。

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

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

3）單標(biāo)簽

單標(biāo)簽搜索只能在輸入框中的一個(gè)既定范圍中搜索。

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

4）多標(biāo)簽可切換

在一組標(biāo)簽中選擇搜索的范圍。

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

如果空間有限，沒有組合搜索的可能性，可以使用多標(biāo)簽可切換；正常情況下，不要?jiǎng)儕Z用戶使用組合篩選的機(jī)會(huì)。

2. 選擇器類篩選

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

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

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

3. 平鋪類篩選

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

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

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

4. 分頁(yè)篩選

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

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

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

5. 高級(jí)篩選

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

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

二、篩選的布局

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

1. 上下布局

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

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

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

2. 側(cè)邊布局

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

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

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

3. 浮層布局

浮層布局一般會(huì)有抽屜、對(duì)話框、懸浮框。

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

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

4. 表頭布局

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

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

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

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

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

1. 實(shí)時(shí)觸發(fā)

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

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

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

2. 手動(dòng)觸發(fā)

在輸入或者選擇篩選值的之后，需要手動(dòng)點(diǎn)一下搜索或者查詢按鈕。

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

四、幫助用戶

1. 幫助用戶做收納

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

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

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

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

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

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

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

3. 幫助用戶記住篩選值

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

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

2）篩選器的使用

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

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

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

4. 幫助用戶更容易到達(dá)

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

文章架構(gòu)

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