一、前言

篩選雖然是一個(gè)較小的設(shè)計(jì)模塊，但對(duì)于整個(gè) B 端系統(tǒng)來(lái)說(shuō)非常重要。

因?yàn)楹Y選的設(shè)計(jì)形式看上去單一，但其實(shí)內(nèi)在的變化還是非常之多，導(dǎo)致很多時(shí)候我們?cè)谧鲈O(shè)計(jì)的時(shí)候，就會(huì)非常迷茫。

其實(shí)早在 2019 年的時(shí)候，篩選就是我寫過(guò)的第一篇文章，不知道還有沒(méi)有從那篇文章就關(guān)注的讀者，應(yīng)該都是老粉了，可以評(píng)論區(qū)里留一下言讓我看看。那個(gè)時(shí)候 B 端的整體要求比較簡(jiǎn)單，也就導(dǎo)致對(duì)于篩選的內(nèi)容剖析并不深入，隨著這些年的行業(yè)發(fā)展，你會(huì)發(fā)現(xiàn)篩選的變化非常之大。

既然我是從篩選開(kāi)始講起的，那我們就嘗試重新將整個(gè)篩選進(jìn)行相應(yīng)的梳理，帶領(lǐng)大家重新認(rèn)識(shí)整個(gè) B 端組件。

二、篩選的定義

對(duì)于篩選而言，其實(shí)就是數(shù)據(jù)檢索的一種方式。

它主要用于系統(tǒng)中數(shù)據(jù)量較大的情況，會(huì)根據(jù)數(shù)據(jù)的條件、屬性進(jìn)行細(xì)致的分類，以便于縮小數(shù)據(jù)的結(jié)果范圍。在去使用時(shí)，會(huì)存在有幾個(gè)重要知識(shí)點(diǎn)：

1. 數(shù)據(jù)量大

在使用篩選時(shí)，一定是系統(tǒng)當(dāng)中表格會(huì)存在大量數(shù)據(jù)。但由于在一個(gè)系統(tǒng)當(dāng)中，我們很難做到對(duì)用戶的真實(shí)數(shù)據(jù)進(jìn)行預(yù)判，因此在設(shè)計(jì)表格頁(yè)面時(shí)就需要搭配設(shè)計(jì)篩選，它幾乎是一個(gè)必要條件。

2. 篩選運(yùn)算關(guān)系

在用戶使用多個(gè)篩選條件時(shí)，系統(tǒng)會(huì)默認(rèn)使用 "AND"的條件關(guān)系。

除了 AND 之外，還會(huì)存在 "OR"以及"NOT"條件關(guān)系（也就是：且、或、非），如果要同時(shí)使用 且、或、非 的關(guān)系，則需要使用復(fù)雜篩選組件才能滿足（在文章后半段會(huì)講）

3. 篩選與表單關(guān)聯(lián)

篩選當(dāng)中的數(shù)據(jù)，其實(shí)會(huì)與其表單數(shù)據(jù)互通。

比如用戶填寫表單用了 商品類型、商品分類、商品類目 等選擇類組件時(shí)，在表格當(dāng)中就會(huì)使用篩選進(jìn)行檢索；用戶填寫表單用了 商品名稱、商品條碼 等輸入類組件，在表格當(dāng)中就會(huì)使用搜索框進(jìn)行檢索。

4. 篩選的意義

其實(shí)我們了解篩選的定義，并不能設(shè)計(jì)一個(gè)好的篩選。

在去做篩選需求，我認(rèn)為最重要是理解用戶使用表格的目的與習(xí)慣。

比如，我們現(xiàn)在你是一名 HR，在表格處會(huì)有 800 份簡(jiǎn)歷，你的任務(wù)是找到 10 份合適的簡(jiǎn)歷。

由于數(shù)據(jù)太多，你不能一個(gè)個(gè)去查看，因此就需要通過(guò)篩選來(lái)去做快速的尋找，會(huì)有那些篩選條件呢？

所以你會(huì)發(fā)現(xiàn)想要做好篩選，就必須得去明確表格的真實(shí)場(chǎng)景。因?yàn)槊恳粋€(gè)人的工作習(xí)慣不同，對(duì)于系統(tǒng)理解不同，因此需要去尋找到一個(gè)最折中的解決方案。

而在設(shè)計(jì)時(shí)，我們會(huì)更關(guān)注用戶的使用習(xí)慣，也就是通過(guò)數(shù)據(jù)埋點(diǎn)、現(xiàn)場(chǎng)觀察的方式，通過(guò)定性、定量的方式去做系統(tǒng)的分析。

三、篩選的布局

篩選的布局，也就是篩選會(huì)與表格如何進(jìn)行搭配呈現(xiàn)。我們先來(lái)了解一下不同的布局形式：

1.上下布局

上下布局是最常使用的一種布局方式，將篩選放在表格內(nèi)容上方，用戶可以操作篩選條件并閱讀數(shù)據(jù)。

上下布局本身沒(méi)有字段的限制，如果字段較少，就能占據(jù)在表格上方，能夠讓用戶快速操作；如果字段較多，就會(huì)讓用戶使用 收折、自定義 等方式進(jìn)行優(yōu)化，盡可能減少頁(yè)面占比。

通常建議篩選高度不宜過(guò)高，如果超過(guò)三行（100px 左右）就要通過(guò)設(shè)計(jì)進(jìn)行處理。

2. 左右布局

左右布局是系統(tǒng)當(dāng)中較為特殊的方式，因?yàn)闀?huì)將其放置在頁(yè)面的左右兩側(cè)，讓用戶優(yōu)先進(jìn)行篩選操作，再閱讀數(shù)據(jù)。

但由于左右布局通常都是縱向排列，在篩選項(xiàng)的呈現(xiàn)上會(huì)更為容易，因此會(huì)更適配篩選條件較多的情況。

3. 容器布局

通過(guò) 彈窗、抽屜、氣泡卡片 等方式，將篩選條件進(jìn)行呈現(xiàn)。在頁(yè)面當(dāng)中由于是非常駐的情況，因此只能適配非高頻使用的場(chǎng)景。

4. 布局背后的邏輯

在這里大家一定要先明白一個(gè)概念，頁(yè)面當(dāng)中的布局，其實(shí)會(huì)與整個(gè)用戶的屏幕尺寸（表格可使用尺寸）密切相關(guān)。

如果要明確篩選在哪個(gè)位置？我們必須優(yōu)先了解兩種數(shù)據(jù)：

1. 用戶常用表格尺寸
2. 系統(tǒng)當(dāng)中的類型

① 首先表格尺寸會(huì)決定我們整體的布局方式

這里要解決大家一個(gè)誤區(qū)，在篩選當(dāng)中我們更關(guān)注的是表格內(nèi)容所能呈現(xiàn)的具體尺寸，而非屏幕尺寸。
（如果對(duì)屏幕尺寸不太了解，之前寫過(guò)一篇詳細(xì)的文章，感興趣大家可以跳轉(zhuǎn)查看。）

如果表格尺寸以寬屏為主，那我們就可以考慮使用左右布局方式排列；

如果表格尺寸以方屏為主，那我們就可以將布局進(jìn)行上下排列；

如果表格尺寸本身太小，屏效很低，那我們就可以進(jìn)行收折排列。

關(guān)于屏效，其實(shí)就是表格所占用整體面積的大小比例，計(jì)算公式為：頁(yè)面面積 / 表格面積 = 屏效比

② 在系統(tǒng)當(dāng)中的類型也很重要

在之前的文章中寫到過(guò)，系統(tǒng)一共會(huì)分為四類，不同的類型對(duì)應(yīng)的用戶群體并不相同。

如果是 運(yùn)營(yíng)管理型、行業(yè)屬性型 的產(chǎn)品，比如 ：有贊、小鵝通、美團(tuán)商家后臺(tái)、小紅書(shū)千帆... 由于用戶水平各異，導(dǎo)致我們?cè)偃ピO(shè)計(jì)的時(shí)候，需要去考慮將交互的難度降低，因此在設(shè)計(jì)的篩選的時(shí)候會(huì)更為簡(jiǎn)單。

如果是一些復(fù)雜系統(tǒng)，則會(huì)采取更難、占比更低的呈現(xiàn)形式，比如 容器布局，將篩選信息收折，因?yàn)橐环矫鏁r(shí)復(fù)雜系統(tǒng)信息不可控，因此 使用容器會(huì)更容易解決篩選當(dāng)中的多字段的情況；另一方面是復(fù)雜系統(tǒng)的信息密度很高，很難騰出大量空間去呈現(xiàn)篩選。

四、篩選的類型

隨著時(shí)間的推移，你會(huì)發(fā)現(xiàn)篩選的類型非常多不同的形式。很多設(shè)計(jì)師都會(huì)根據(jù)自己的業(yè)務(wù)情況，開(kāi)始自定義不同的類型形式。

因此我們就嘗試將其進(jìn)行總結(jié)～ 希望能夠有一個(gè)更為完整的類型表幫助大家進(jìn)行理解。

1. 表單篩選

表單篩選就是將篩選模塊通過(guò)表單的形式進(jìn)行呈現(xiàn)，通常位于頁(yè)面頂部，能夠使用戶快速點(diǎn)擊。它的門檻很低，幾乎所有的產(chǎn)品都可以使用表單篩選。

當(dāng)然，在頂部空間有限的情況下，我們也可以使用左右兩側(cè)的方式，去呈現(xiàn)表單內(nèi)容。

如果表單過(guò)長(zhǎng)，我們就會(huì)去考慮通過(guò)收折的方式進(jìn)行排布，這幾乎是每一個(gè)表單篩選的必備選項(xiàng)。

如果篩選字段本身不多，又想讓篩選的樣式變得很好，也可以考慮將整個(gè)篩選作為一個(gè)標(biāo)簽，放置在輸入框內(nèi)，這會(huì)和表單輸入框形成區(qū)分，能夠讓用戶快速知道這是篩選的內(nèi)容。

2. 外露篩選

外露篩選嚴(yán)格來(lái)說(shuō)是表單篩選當(dāng)中的一個(gè)分支，其更加強(qiáng)調(diào)在篩選中的選項(xiàng)內(nèi)容直接外露展示，能夠更快更高效地進(jìn)行數(shù)據(jù)選擇。

比如在京東網(wǎng)頁(yè)端搜索完一件商品后，就會(huì)提供較多的外漏選項(xiàng)來(lái)幫助我們提前進(jìn)行數(shù)據(jù)的聚焦。

這里我們可以思考一下，京東為什么會(huì)將選項(xiàng)外露？

在這里其實(shí)就是由于搜索出來(lái)的結(jié)果過(guò)于寬泛，并且很難針對(duì)用戶提供個(gè)性化的推送，因此可以將外露的篩選放置出來(lái)，盡可能的精準(zhǔn)搜索的結(jié)果。

當(dāng)然在目前的 B 端產(chǎn)品當(dāng)中，由于外露的方式所占的空間過(guò)大，因此目前在行業(yè)中存在兩種解法：

① 像有贊一樣，基于傳統(tǒng)的表單篩選。但會(huì)提供部分高頻使用的篩選項(xiàng)進(jìn)行外露，進(jìn)而可以提高效率。

比如在 淘寶、京東的網(wǎng)頁(yè)端，它們?cè)谏唐穬r(jià)格處提供了金額的快捷選擇，外露的方式會(huì)比用戶單獨(dú)進(jìn)行金額的輸入效率要高。

② 像紛享銷客一樣，由于本身的篩選邏輯異常復(fù)雜，會(huì)將選項(xiàng)外露的權(quán)限給到用戶，讓其進(jìn)行自定義，從而解決用戶高頻使用的情況。

3. 指標(biāo)篩選

嚴(yán)格意義上來(lái)說(shuō)，指標(biāo)算不上一種篩選類型，只是想把它拎出來(lái)，給到同學(xué)們進(jìn)行學(xué)習(xí)。

在使用時(shí)，就是當(dāng)用戶想要確切了解不同類型中的具體數(shù)值時(shí)，可以使用指標(biāo)圖+篩選融合的方式，實(shí)現(xiàn)高效地操作。

比如在一個(gè) HRM 系統(tǒng)當(dāng)中，候選人表格里 HR 最關(guān)注的便是 候選人當(dāng)前的進(jìn)度狀態(tài)。這時(shí)候我們就可以將指標(biāo)圖放置在表格頂部，幫助用戶進(jìn)行點(diǎn)擊，從而快速實(shí)現(xiàn)篩選操作，同時(shí)也會(huì)有數(shù)據(jù)下鉆的感覺(jué)，比起讓用戶重新進(jìn)行下拉選擇，易用性會(huì)更強(qiáng)。

4. 復(fù)雜篩選

復(fù)雜篩選其實(shí)是業(yè)務(wù)當(dāng)中字段不可控的無(wú)奈之舉。

如果你要去使用復(fù)雜篩選，也就意味著你的系統(tǒng)當(dāng)中會(huì)存在有非常多的自定義字段，用戶在篩選時(shí)會(huì)使用 且、或、非 等篩選條件，這時(shí)候你的篩選就沒(méi)辦法只能這么復(fù)雜。

比如 紛享銷客、Coding、ONES、明道云、簡(jiǎn)道云... 它們其實(shí)都是在系統(tǒng)當(dāng)中，提供大量的自定義字段需要用戶進(jìn)行配置，因此只能使用復(fù)雜篩選進(jìn)行呈現(xiàn)。
為了讓大家理解這個(gè)無(wú)奈，我舉一個(gè)例子：

比如在 ONES 當(dāng)中，由于自己是一個(gè)研發(fā)管理產(chǎn)品，每一個(gè)企業(yè)的研發(fā)流程與字段屬性配置并不相同，因此會(huì)使用自定義字段讓用戶自行配置自己的業(yè)務(wù)。

那自定義字段里面如何進(jìn)行篩選操作就會(huì)非常頭疼，大多數(shù)情況下就只能使用復(fù)雜篩選來(lái)解決問(wèn)題，因此就會(huì)出現(xiàn)下面的這種情況。

這里需要解釋一下復(fù)雜篩選的基本結(jié)構(gòu)，第一個(gè)選擇器為 篩選字段的選擇、第二個(gè)為 篩選對(duì)應(yīng)的運(yùn)算符、第三個(gè)為 所篩選對(duì)應(yīng)的值。

對(duì)于復(fù)雜篩選來(lái)說(shuō)，我們也會(huì)去考慮在設(shè)計(jì)上對(duì)其進(jìn)行優(yōu)化。

5. 表頭篩選

表頭篩選其實(shí)也是我們的老朋友，早在 19 年的時(shí)候我們就曾聊到過(guò)。

它就是在表格的表頭處提供篩選的入口，當(dāng)用戶點(diǎn)擊過(guò)后去執(zhí)行篩選的操作。不過(guò)在表頭篩選當(dāng)中，會(huì)存在部分特殊情況。

① 為復(fù)雜篩選進(jìn)行優(yōu)化，因?yàn)閺?fù)雜篩選需要進(jìn)行復(fù)雜的篩選項(xiàng)選擇，而用戶所關(guān)注的數(shù)據(jù)通常也是表格當(dāng)中的前半段數(shù)據(jù)，因此便可以實(shí)現(xiàn)點(diǎn)擊表頭，添加篩選項(xiàng)的操作。

② 在表頭直接篩選，點(diǎn)擊篩選圖標(biāo)后，直接展示下拉選項(xiàng)。這就和 Excel 的表格篩選如出一轍，使用門檻也會(huì)相對(duì)較低。

表頭篩選其實(shí)也是篩選過(guò)程當(dāng)中的一種補(bǔ)充，算是篩選不好用時(shí)我們可以考慮的一個(gè)范疇，比如在復(fù)雜篩選時(shí)，就可以與表頭篩選進(jìn)行結(jié)合。

6. 篩選組

既然篩選很麻煩，那如果我每天進(jìn)入到一個(gè)系統(tǒng)當(dāng)中，都會(huì)去使用某一類篩選條件，那有什么辦法嗎？這時(shí)候就會(huì)去考慮「篩選組」

它其實(shí)就是將自己常用的多個(gè)篩選條件，通過(guò)保存的方式在系統(tǒng)當(dāng)中記錄下來(lái)，這樣就能實(shí)現(xiàn)日常高配篩選的快速訪問(wèn)。

比如在飛書(shū)招聘當(dāng)中，由于候選人的數(shù)據(jù)字段很多，每一個(gè) HR 的使用習(xí)慣并不相同，因此在篩選中你會(huì)發(fā)現(xiàn)可以添加篩選值以及保存當(dāng)前篩選數(shù)據(jù)放置在左側(cè)，能夠快速呼出自己想創(chuàng)建的數(shù)據(jù)。

除了飛書(shū)，在紛享銷客也有類似情況，我們可以添加篩選，保存對(duì)應(yīng)的篩選條件，不過(guò)在紛享銷客上它們做的更極致，能夠去配置表格的 排序方式、表格中每一個(gè)字段的順序，這樣會(huì)使整個(gè)功能更強(qiáng)大。

當(dāng)然在 ONES 當(dāng)中也會(huì)存在類似情況，不過(guò)他們的解法不一樣，會(huì)將保存的篩選組放在頂部，進(jìn)行 tab 展示，這也會(huì)是一種不錯(cuò)的解決方案。

7. AI 篩選

隨著 AI 能力的不斷擴(kuò)充，你會(huì)發(fā)現(xiàn) AI 與 篩選 之間，存在著一種不可描述的魔力。

因?yàn)樵跇I(yè)務(wù)當(dāng)中，想要去做數(shù)據(jù)的篩選分析本身就比較復(fù)雜，因此可以通過(guò) AI 的加持，使整個(gè)篩選的難度降低，為產(chǎn)品創(chuàng)造出新的機(jī)會(huì)點(diǎn)。

比如 JIRA 當(dāng)中，我們可以通過(guò) AI 篩選的方式，將復(fù)雜的程序篩選邏輯變?yōu)楦?jiǎn)單的直接篩選方式，明顯的效率更高。

在有贊當(dāng)中，也會(huì)有類似的 AI 功能提供給用戶進(jìn)行對(duì)話操作，進(jìn)而執(zhí)行篩選。

8. 特殊篩選形式

其實(shí)對(duì)于常規(guī)的字段篩選以外，我們?cè)谌粘９ぷ髦羞€會(huì)有圖片類的篩選情況。

比如我們?cè)诒O(jiān)控系統(tǒng)當(dāng)中，我們就可以使用對(duì)應(yīng)的圖片篩選去精準(zhǔn)數(shù)據(jù)結(jié)果，這類型在日常工作中比較少見(jiàn)，因此提供給到大家作為一個(gè)參考。

五、如何去做好篩選？

其實(shí)對(duì)于篩選來(lái)說(shuō)，如何才能做好它？

1. 明確它的使用位置

這句話聽(tīng)上去有些奇怪，但做過(guò)篩選的同學(xué)就知道，因?yàn)槲覀兂嗽诒砀裰袝?huì)使用篩選之外，還會(huì)將它與其他很多地方進(jìn)行關(guān)聯(lián)。

比如在數(shù)據(jù)分析頁(yè)面當(dāng)中，我們就需要通過(guò)篩選的方式，結(jié)合圖表得到我們想要的數(shù)據(jù)內(nèi)容。

再到規(guī)則的配置頁(yè)面中，我們很多數(shù)據(jù)條件配置選項(xiàng)，也可以使用復(fù)雜的篩選得到解決。

落地到實(shí)際的業(yè)務(wù)，比如我需要去做相應(yīng)的廣告投放，也會(huì)通過(guò)篩選來(lái)配置相應(yīng)的投放規(guī)則。

因此你會(huì)發(fā)現(xiàn)，雖然我們剛開(kāi)始只會(huì)去講它與表格之間的關(guān)系，但真正落地時(shí)，它的使用場(chǎng)景會(huì)非常的多。這也就導(dǎo)致了我們?cè)谧鲈O(shè)計(jì)的時(shí)候，不能僅僅局限于一個(gè)維度。

你需要考慮不同場(chǎng)景當(dāng)中可能會(huì)存在的解決方案，不過(guò)在前期時(shí)可以理解為篩選維度單一，因此將方案收斂一下，做得更為簡(jiǎn)單。

2. 確定交互變種

因?yàn)楹Y選本身，它能以非常多不同的方式呈現(xiàn)。只要是選擇類的組件，我們都可以使用篩選的方式來(lái)進(jìn)行設(shè)計(jì)。但由于思維的慣性，導(dǎo)致我們從一開(kāi)始只會(huì)去考慮下拉選擇。而一些常見(jiàn)的交互變種，能夠給我們帶來(lái)意想不到的收獲。

比如滑塊，它就能在一些特定的篩選場(chǎng)景中進(jìn)行使用。因此，需要大家有較為敏銳的嗅覺(jué)，同時(shí)要在工作中收集足夠多的篩選內(nèi)容和案例，為后面的設(shè)計(jì)方案做足準(zhǔn)備。

3. 循序漸進(jìn)

在設(shè)計(jì)篩選功能時(shí)，我們不能期待一勞永逸的解決方案。每個(gè)產(chǎn)品都有其獨(dú)特的特性和需求，這意味著沒(méi)有一種萬(wàn)能的策略能夠適用于所有場(chǎng)景。

因此，我們必須根據(jù)每個(gè)產(chǎn)品的具體情況，有針對(duì)性地規(guī)劃和構(gòu)建篩選功能的框架。

設(shè)計(jì)篩選功能應(yīng)該是一個(gè)逐步推進(jìn)的過(guò)程，既要有短期內(nèi)可實(shí)現(xiàn)的計(jì)劃，也要有長(zhǎng)遠(yuǎn)的視角。這要求我們具備前瞻性，能夠預(yù)測(cè)業(yè)務(wù)發(fā)展中可能遇到的問(wèn)題，并據(jù)此靈活調(diào)整設(shè)計(jì)策略。只有這樣，我們才能確保篩選功能不僅能夠滿足當(dāng)前的需求，還能適應(yīng)未來(lái)的發(fā)展，保持其擴(kuò)展性和靈活性。

在產(chǎn)品開(kāi)發(fā)的早期階段，如果產(chǎn)品的功能和字段較少，我們應(yīng)該避免將篩選功能設(shè)計(jì)得過(guò)于復(fù)雜。簡(jiǎn)化設(shè)計(jì)不僅可以提升用戶的使用效率，還能有效降低開(kāi)發(fā)成本。

隨著產(chǎn)品的不斷迭代和業(yè)務(wù)需求的增長(zhǎng)，我們可以逐步引入更高級(jí)的篩選條件，以此來(lái)不斷優(yōu)化用戶體驗(yàn)并提升產(chǎn)品的整體性能。這種逐步演進(jìn)的策略，才是最為合理和有效的。

最后

關(guān)于篩選，我認(rèn)為更多是需要設(shè)計(jì)師在組件層面上做更多的了解，然后再進(jìn)行拓展。

在產(chǎn)品初期，我們需要使用表單篩選來(lái)盡可能滿足產(chǎn)品的通用性，讓整個(gè)項(xiàng)目能夠快速上線。

在產(chǎn)品成長(zhǎng)期，我們就可以對(duì)表單進(jìn)行更多特殊樣式的定制，比如外露指標(biāo)，以優(yōu)化表單篩選所帶來(lái)的不足。

在產(chǎn)品成熟期，就可以使用更多更為復(fù)雜的篩選來(lái)滿足產(chǎn)品的上限，以獲得更多的可能性。

當(dāng)然，不同產(chǎn)品的情況可能還是會(huì)有所不同，因此這里只能提供一個(gè)建議，大家還是需要根據(jù)自己的情況來(lái)做出相應(yīng)的調(diào)整。

因?yàn)樾枨笤谧儯M件在變，不變的是你的思考～

作者： CE青年Youthce