新人來收！后臺(tái)系統(tǒng)的「篩選設(shè)計(jì)」基礎(chǔ)知識(shí)科普

編者注：由于我們的疏忽，未經(jīng)@智銘桑 授權(quán)就用了他的插畫（https://dribbble.com/shots/4946856-Designer-s-Rhapsody）作為Banner 圖，經(jīng)溝通已取得作者諒解。再次向作者表達(dá)歉意：對(duì)不起。

篩選可以說是我們?nèi)粘Ｉ钪惺褂米疃嗟慕换ブ涣耍措娪皶r(shí)選擇喜歡的類型，外出吃飯時(shí)選擇附近的商圈，網(wǎng)購(gòu)時(shí)選擇合適的價(jià)格區(qū)間等等。這些篩選無不幫助我們提高了使用的效率。

與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)景來描述后臺(tái)系統(tǒng)中「篩選」發(fā)揮的作用吧。

有經(jīng)驗(yàn)的電銷同學(xué)在電話聯(lián)系客戶時(shí)，通常都有自己的小策略，比如先聯(lián)系近期注冊(cè)的客戶，或者先給等級(jí)高的客戶打電話等。「篩選」可以幫助電銷同學(xué)按自己的優(yōu)先級(jí)來工作，提高轉(zhuǎn)化率。

客服同學(xué)需要找到在操作中遇到困難的客戶并給予幫助，可通過篩選出近三天內(nèi)有注冊(cè)行為，但無后續(xù)操作的客戶，電話聯(lián)系提供幫助。

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

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

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

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

△ 左右布局

△ 上下布局

我們?cè)诳紤]篩選頁(yè)面的布局時(shí)，通常與整個(gè)網(wǎng)站的布局保持統(tǒng)一即可。但是兩種布局仍有一些微妙的差距：

• 左右布局能在同一頁(yè)面即時(shí)看到篩選后的結(jié)果，而上下布局在篩選條件過多的時(shí)候，通常需要滾屏才能看到篩選結(jié)果。
• 左右布局的橫向空間比較緊湊，在篩選條件過多的時(shí)候，表格本身需要左右滾動(dòng)，在查閱信息的時(shí)候非常不友好。且左右布局下的表格通常長(zhǎng)度也在一頁(yè)的范圍內(nèi)，所以單頁(yè)的信息密度低，需要頻繁翻頁(yè)。

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

除了上述的兩種基本布局外，我們通常會(huì)使用 tab 來進(jìn)行輔助。

例如某些高頻使用的篩選條件（可以理解為分類），我們可以單獨(dú)提出來，作為 tab 設(shè)計(jì)在表格上方。如圖：

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

三、幾種常見的篩選設(shè)計(jì)

1. 所有篩選條件平鋪展示

所有篩選條件平鋪展示，最簡(jiǎn)單粗暴的做法，問題也很明顯，看起來非常冗余，不利于快速定位目標(biāo)。這種設(shè)計(jì)通常只適合應(yīng)用于后臺(tái)權(quán)限系統(tǒng)做的比較精細(xì)，每個(gè)角色可見的篩選條件比較少的情況下。

優(yōu)點(diǎn)是選擇任何篩選條件時(shí)都只有一級(jí)，不需要跨層級(jí)操作。

如果選擇了平鋪展示的話，可以將篩選條件按邏輯或使用頻率分類，讓用戶對(duì)各個(gè)篩選條件的位置有預(yù)期。

2. 保留高頻的篩選條件，將復(fù)雜的篩選項(xiàng)隱藏在「高級(jí)篩選」中

保留高頻的篩選條件，將復(fù)雜的篩選項(xiàng)隱藏在「高級(jí)篩選」中。這是一種比較通用的辦法。

關(guān)于這個(gè)我有一個(gè)腦洞。我曾經(jīng)設(shè)想，針對(duì)「賬號(hào)ID」「手機(jī)號(hào)」「身份證號(hào)碼」這類的精準(zhǔn)篩選的條件，統(tǒng)一做成一個(gè)搜索。根據(jù)輸入的格式去匹配字段，再在字段內(nèi)進(jìn)行篩選。這樣可以將幾個(gè)篩選條件整合為一個(gè)，節(jié)約了空間，（某種程度上來說）提升了體驗(yàn)。

但是在咨詢了小伙伴之后，發(fā)現(xiàn)有以下幾個(gè)問題：通用性可能差一點(diǎn)，不同 table 的條件不一樣，就要寫不同的判斷格式的方法（我們?cè)诮缑嫔峡雌饋硎且粡埍恚跀?shù)據(jù)庫(kù)中是由很多張互相關(guān)聯(lián)的表組成的）；不同字段的格式可能是相同的，比如客戶ID和訂單ID；最后，一般系統(tǒng)已有了全局搜索，這種替代篩選的精準(zhǔn)搜索似乎是重復(fù)勞動(dòng)。

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

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

△ 截圖來自zoho crm

△ 截圖來自網(wǎng)易七魚

這種設(shè)計(jì)最大的優(yōu)點(diǎn)就是省空間。尤其是一些 Saas化的后臺(tái)系統(tǒng)（簡(jiǎn)單來說就是對(duì)外出售服務(wù)的，不是公司內(nèi)部使用的后臺(tái)系統(tǒng)），無法針對(duì)某類客戶做設(shè)計(jì)，所以篩選項(xiàng)大而全，使用這種設(shè)計(jì)可以使頁(yè)面干凈高效。

另外，可以記錄登錄用戶的使用習(xí)慣，將高頻篩選條件顯示在頂部。或支持手動(dòng)調(diào)整順序。當(dāng)然，為每個(gè)用戶記錄不同的篩選也是成本很高的做法了，需要結(jié)合具體情況和開發(fā)同學(xué)溝通清楚再做定奪。

以上三種設(shè)計(jì)，都可以再附加一個(gè)功能——快捷篩選。

4. 快捷篩選

如我們之前所說，一個(gè)用戶在使用篩選的時(shí)候，通常是有固定流程的。如果把這些操作綁定，儲(chǔ)存為快捷篩選，可以節(jié)約用戶很多時(shí)間。舉個(gè)例子，交互如圖：

高清大圖戳 →?https://share.weiyun.com/55UaCt7

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

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

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

寫在最后

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

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

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

圖片素材作者：Ramy Wafaa

「篩選功能細(xì)節(jié)設(shè)計(jì)」

• 《交互基礎(chǔ)小課堂！全面的篩選功能設(shè)計(jì)總結(jié)》
• 《如何設(shè)計(jì)更高效的篩選器？來看網(wǎng)易設(shè)計(jì)師的總結(jié)！》
• 《搜索和篩選有什么區(qū)別？來看順豐UED 的總結(jié)！》