交互

后臺UX設(shè)計中的「篩選設(shè)計」梳理

4990

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

與to c產(chǎn)品不同，后臺系統(tǒng)中，篩選條件往往更多，并伴隨著復雜的邏輯關(guān)系。更重要的是，to c產(chǎn)品中的篩選往往是對搜索結(jié)果的進一步優(yōu)化，而后臺系統(tǒng)的篩選是工作流程中必不可少的一環(huán)，發(fā)揮著非常重要的作用。

一、篩選的作用

我用幾個比較典型的場景來描述后臺系統(tǒng)中「篩選」發(fā)揮的作用吧。

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

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

另外，如果系統(tǒng)內(nèi)沒有任務(wù)模塊的話，「篩選」可以臨時頂替一下。例如，組長下達指令「撥打1個月內(nèi)注冊，但無投資行為的客戶」，電銷同學便可篩選出對應(yīng)的客戶來撥打電話。

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

二、篩選——頁面布局

篩選的頁面布局可簡單地分為左右布局和上下布局，如圖：

△ 左右布局

△ 上下布局

我們在考慮篩選頁面的布局時，通常與整個網(wǎng)站的布局保持統(tǒng)一即可。但是兩種布局仍有一些微妙的差距：

左右布局能在同一頁面即時看到篩選后的結(jié)果，而上下布局在篩選條件過多的時候，通常需要滾屏才能看到篩選結(jié)果。

左右布局的橫向空間比較緊湊，在篩選條件過多的時候，表格本身需要左右滾動，在查閱信息的時候非常不友好。且左右布局下的表格通常長度也在一頁的范圍內(nèi)，所以單頁的信息密度低，需要頻繁翻頁。

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

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

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

如圖：

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

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

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

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

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

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

2. 保留高頻的篩選條件，將復雜的篩選項隱藏在「高級篩選」中

保留高頻的篩選條件，將復雜的篩選項隱藏在「高級篩選」中。這是一種比較通用的辦法。

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

但是在咨詢了小伙伴之后，發(fā)現(xiàn)有以下幾個問題：通用性可能差一點，不同 table 的條件不一樣，就要寫不同的判斷格式的方法（我們在界面上看起來是一張表，但在數(shù)據(jù)庫中是由很多張互相關(guān)聯(lián)的表組成的）；不同字段的格式可能是相同的，比如客戶ID和訂單ID；最后，一般系統(tǒng)已有了全局搜索，這種替代篩選的精準搜索似乎是重復勞動。

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

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

△ 截圖來自zoho crm

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

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

另外，可以記錄登錄用戶的使用習慣，將高頻篩選條件顯示在頂部?；蛑С质謩诱{(diào)整順序。當然，為每個用戶記錄不同的篩選也是成本很高的做法了，需要結(jié)合具體情況和開發(fā)同學溝通清楚再做定奪。

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

4. 快捷篩選

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

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

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

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

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