篩選可以說(shuō)是我們?nèi)粘Ｉ钪惺褂米疃嗟慕换ブ涣?，看電影的時(shí)選擇喜歡的類(lèi)型，外出吃飯時(shí)選擇附近的商圈，網(wǎng)購(gòu)時(shí)選擇合適的價(jià)格區(qū)間等等。這些篩選無(wú)不幫助我們提高了使用的效率。
與to c產(chǎn)品不同，后臺(tái)系統(tǒng)中，篩選條件往往更多，并伴隨著復(fù)雜的邏輯關(guān)系。更重要的是，to c產(chǎn)品中的篩選往往是對(duì)搜索結(jié)果的進(jìn)一步優(yōu)化，而后臺(tái)系統(tǒng)的篩選是工作流程中必不可少的一環(huán)，發(fā)揮著非常重要的作用。

篩選的作用

我用幾個(gè)比較典型的場(chǎng)景來(lái)描述后臺(tái)系統(tǒng)中“篩選”發(fā)揮的作用吧。
有經(jīng)驗(yàn)的電銷(xiāo)同學(xué)在電話(huà)聯(lián)系客戶(hù)時(shí)，通常都有自己的小策略，比如先聯(lián)系近期注冊(cè)的客戶(hù)，或者先打等級(jí)高的客戶(hù)等?！昂Y選”可以幫助電銷(xiāo)同學(xué)按自己的優(yōu)先級(jí)來(lái)工作，提高轉(zhuǎn)化率。
客服同學(xué)需要找到在操作中遇到困難的客戶(hù)給予幫助，可通過(guò)篩選出近三天內(nèi)有注冊(cè)行為，但無(wú)后續(xù)操作的客戶(hù)，電話(huà)聯(lián)系提供幫助。

另外，如果系統(tǒng)內(nèi)沒(méi)有任務(wù)模塊的話(huà)，“篩選”可以臨時(shí)頂替一下。例如，組長(zhǎng)下達(dá)指令“撥打1個(gè)月內(nèi)注冊(cè)，但無(wú)投資行為的客戶(hù)”，電銷(xiāo)同學(xué)便可篩選出對(duì)應(yīng)的客戶(hù)來(lái)?yè)艽螂娫?huà)。

復(fù)雜多變的篩選條件，為使用系統(tǒng)的用戶(hù)提供了更加方便靈活的工作方法。

篩選——頁(yè)面布局

篩選的頁(yè)面布局可簡(jiǎn)單地分為左右布局和上下布局，如圖：

我們?cè)诳紤]篩選頁(yè)面的布局時(shí)，通常與整個(gè)網(wǎng)站的布局保持統(tǒng)一即可。但是兩種布局仍有一些微妙的差距：
1.左右布局能在同一頁(yè)面即時(shí)看到篩選后的結(jié)果，而上下布局在篩選條件過(guò)多的時(shí)候，通常需要滾屏才能看到篩選結(jié)果。
2.左右布局的橫向空間比較緊湊，在篩選條件過(guò)多的時(shí)候，表格本身需要左右滾動(dòng)，在查閱信息的時(shí)候非常不友好。且左右布局下的表格通常長(zhǎng)度也在一頁(yè)的范圍內(nèi)，所以單頁(yè)的信息密度低，需要頻繁翻頁(yè)。

一個(gè)小tip：如果表格字段過(guò)多，橫向空間比較緊湊，需要左右滾屏的話(huà)，我們通常會(huì)鎖定表頭前幾列的關(guān)鍵信息（例如客戶(hù)姓名，客戶(hù)ID），方便閱讀。同理，如果表格過(guò)長(zhǎng)，單頁(yè)需展示的條數(shù)很多時(shí)，我們也可以鎖定表頭優(yōu)化體驗(yàn)?？傊?，若想優(yōu)化表單體驗(yàn)，可以多多參考Excel～～

除了上述的兩種基本布局外，我們通常會(huì)使用tab來(lái)進(jìn)行輔助。
例如某些高頻使用的篩選條件（可以理解為分類(lèi)），我們可以單獨(dú)提出來(lái)，作為tab設(shè)計(jì)在表格上方。如圖：

tab設(shè)計(jì)可以根據(jù)實(shí)際情況，放置在不同的位置。

幾種常見(jiàn)的篩選設(shè)計(jì)

1. 所有篩選條件平鋪展示。
最簡(jiǎn)單粗暴的做法，問(wèn)題也很明顯，看起來(lái)非常冗余，不利于快速定位目標(biāo)。這種設(shè)計(jì)通常只適合應(yīng)用于后臺(tái)權(quán)限系統(tǒng)做的比較精細(xì)，每個(gè)角色可見(jiàn)的篩選條件比較少的情況下。
優(yōu)點(diǎn)是選擇任何篩選條件時(shí)都只有一級(jí)，不需要跨層級(jí)操作。
如果選擇了平鋪展示的話(huà)，可以將篩選條件按邏輯或使用頻率分類(lèi)，讓用戶(hù)對(duì)各個(gè)篩選條件的位置有預(yù)期。

2. 保留高頻的篩選條件，將復(fù)雜的篩選項(xiàng)隱藏在“高級(jí)篩選”中。
這是一種比較通用的辦法。
關(guān)于這個(gè)我有一個(gè)腦洞。我曾經(jīng)設(shè)想，針對(duì)“賬號(hào)ID”“手機(jī)號(hào)”“身份證號(hào)碼”這類(lèi)的精準(zhǔn)篩選的條件，統(tǒng)一做成一個(gè)搜索。根據(jù)輸入的格式去匹配字段，再在字段內(nèi)進(jìn)行篩選。這樣可以將幾個(gè)篩選條件整合為一個(gè)，節(jié)約了空間，（某種程度上來(lái)說(shuō)）提升了體驗(yàn)。
但是在咨詢(xún)了小伙伴之后，發(fā)現(xiàn)有以下幾個(gè)問(wèn)題：通用性可能差一點(diǎn)，不同table的條件不一樣，就要寫(xiě)不同的判斷格式的方法（我們?cè)诮缑嫔峡雌饋?lái)是一張表，但在數(shù)據(jù)庫(kù)中是由很多張互相關(guān)聯(lián)的表組成的）；不同字段的格式可能是相同的，比如客戶(hù)ID和訂單ID；最后，一般系統(tǒng)已有了全局搜索，這種替代篩選的精準(zhǔn)搜索似乎是重復(fù)勞動(dòng)。

3. 默認(rèn)只展示篩選條件，不展示內(nèi)容，check后顯示內(nèi)容。如圖：

這種設(shè)計(jì)最大的優(yōu)點(diǎn)就是省空間。尤其是一些Saas化的后臺(tái)系統(tǒng)（簡(jiǎn)單來(lái)說(shuō)就是對(duì)外出售服務(wù)的，不是公司內(nèi)部使用的后臺(tái)系統(tǒng)）,無(wú)法針對(duì)某類(lèi)客戶(hù)做設(shè)計(jì)，所以篩選項(xiàng)大而全，使用這種設(shè)計(jì)可以使頁(yè)面干凈高效。
另外，可以記錄登錄用戶(hù)的使用習(xí)慣，將高頻篩選條件顯示在頂部?；蛑С质謩?dòng)調(diào)整順序。當(dāng)然，為每個(gè)用戶(hù)記錄不同的篩選也是成本很高的做法了，需要結(jié)合具體情況和開(kāi)發(fā)同學(xué)溝通清楚再做定奪。

4. 以上三種設(shè)計(jì)，都可以再附加一個(gè)功能——快捷篩選。如我們之前所說(shuō)，一個(gè)用戶(hù)在使用篩選的時(shí)候，通常是有固定流程的。如果把這些操作綁定，儲(chǔ)存為快捷篩選，可以節(jié)約用戶(hù)很多時(shí)間。舉個(gè)例子，交互如圖：

篩選的邏輯關(guān)系

當(dāng)篩選的可能性較復(fù)雜的時(shí)候，我們就需要考慮篩選條件的多種邏輯關(guān)系。比如我們?cè)诤Y選“金額”字段的時(shí)候，有多種可能性“大于”“小于”“介于某個(gè)區(qū)間”等等；在篩選“所屬銷(xiāo)售”字段的時(shí)候，可能“是某人”，“除某人以外”，以及并列選幾個(gè)人名的情況。

這種情況尤其會(huì)出現(xiàn)于需要自定義字段的系統(tǒng)中，在用戶(hù)自定義字段的時(shí)候，就需要為不同的字段類(lèi)型配置全面的篩選邏輯。例如，對(duì)于“數(shù)值字段”，對(duì)應(yīng)的邏輯關(guān)系可能是“大于”“小于”“介于某個(gè)區(qū)間”；對(duì)于“純文本字段”，對(duì)應(yīng)的可能是“是”“否”“包含”“不包含”“為空”“不為空”等。

寫(xiě)在最后

雖然這篇文章寫(xiě)的是后臺(tái)系統(tǒng)的篩選設(shè)計(jì)，但是to c，甚至說(shuō)移動(dòng)端的篩選設(shè)計(jì)，有很多都是可以借鑒過(guò)來(lái)的，尤其是在優(yōu)化體驗(yàn)的時(shí)候，想一想我們平時(shí)經(jīng)常用的篩選控件，會(huì)有很多新的靈感！

另外，篩選作為表單的一部分，在Excel中已經(jīng)有各種各樣的用法了。如果覺(jué)得自己一頭霧水，可以想一下我們?cè)贓xcel中通常會(huì)怎么做，也許就豁然開(kāi)朗啦。

以上是對(duì)自己在后臺(tái)系統(tǒng)設(shè)計(jì)中的一點(diǎn)點(diǎn)總結(jié)，歡迎大家一起交流討論～