筆者通過調(diào)研B端后臺(tái)系統(tǒng)的篩選場景應(yīng)用，總結(jié)歸納了幾種基礎(chǔ)篩選、高級(jí)篩選及組合篩選的場景，基于此對(duì)自身產(chǎn)品的篩選場景應(yīng)用進(jìn)行分析、歸納最終輸出優(yōu)化設(shè)計(jì)方案，希望對(duì)你有所啟發(fā)。

一、篩選場景介紹

在B端后臺(tái)系統(tǒng)設(shè)計(jì)中，列表篩選的場景應(yīng)用最為常見，篩選的作用一方面是為了幫助用戶從眾多信息中快速提取、定位，以提高效率為基準(zhǔn)；另一方面是為了科學(xué)的概括列表所具備的功能，提供用戶以相同特征的分類信息。

近期在研究B端產(chǎn)品領(lǐng)域后臺(tái)系統(tǒng)的列表篩選場景設(shè)計(jì)，故希望通過此次設(shè)計(jì)分析，從產(chǎn)品易操作性角度展開設(shè)計(jì)優(yōu)化實(shí)踐，從而達(dá)到提升用產(chǎn)品滿意度的目的。

二、篩選場景類型

篩選是將一類數(shù)據(jù)展示，同時(shí)一類數(shù)據(jù)隱藏。

常見的篩選形式有：分類篩選、關(guān)鍵字篩選（搜索）、條件篩選、組合篩選等。大體可分為基礎(chǔ)篩選、高級(jí)篩選通常是多個(gè)篩選條件的多維度組合，其實(shí)有別于單一的搜索和導(dǎo)航。

三、競品分析調(diào)研

1. 篩選的組成

圖（1）

舉例：騰訊云

圖（2）騰訊云負(fù)載均衡實(shí)例

• 場景：適用于簡單的查詢搜索場景，用戶快捷篩選，蘊(yùn)含的邏輯是“且”
• 優(yōu)點(diǎn)：搜索操作自如
• 缺點(diǎn)：不太適合復(fù)雜篩選場景

2. 高級(jí)篩選

圖（3）

• 篩選關(guān)系：有并級(jí)“且”、交級(jí)“或”的關(guān)聯(lián)關(guān)系
• 場景：滿足更多用戶場景，為用戶提供多字段、多層篩選關(guān)系、多個(gè)操作

3. 組合篩選

（1）平鋪型

平鋪就是將所有篩選條件全部列出，B端產(chǎn)品場景應(yīng)用較少，在C端產(chǎn)品中較為常見，便于用戶直接獲取選項(xiàng)內(nèi)容，減少操作步驟等。

舉例：在線購物類平臺(tái)

圖（4）京東在線購物商城

圖（5）當(dāng)當(dāng)在線購物商城

圖（6）騰訊云告警策略

• 應(yīng)用場景：用戶搜索結(jié)果數(shù)據(jù)量大，搜索結(jié)果不能滿足用戶預(yù)期，需要通過篩選對(duì)數(shù)據(jù)進(jìn)行再次過濾，達(dá)到滿足精準(zhǔn)結(jié)果的目的
• 優(yōu)點(diǎn)：引導(dǎo)用戶快速理解篩選項(xiàng)目，幫助用戶快速定位結(jié)果
• 缺點(diǎn)：控件占據(jù)頁面空間較大，需要占據(jù)大面積展示平鋪效果

通常為避免篩選項(xiàng)太多，會(huì)提供展開、收起操作，對(duì)應(yīng)每個(gè)篩選條件進(jìn)行收折

（2）收折型

舉例：阿里云、騰訊云

圖（7）阿里云云服務(wù)實(shí)例

圖（8）騰訊云數(shù)據(jù)遷移

• 場景：在B端產(chǎn)品中，下拉框展開（高級(jí)篩選）對(duì)于用戶而言認(rèn)知成本較低，操作性強(qiáng)，較為簡單
• 優(yōu)點(diǎn)：常用使用頻率較高的選項(xiàng)可優(yōu)先快速篩選、減少頁面占用空間
• 缺點(diǎn)：信息量大時(shí)，頁面顯示冗雜且占頁面比例較大，平臺(tái)通用性較差

4. 表頭篩選型

是一種列表內(nèi)置篩選形式，類似Excel表格的操作。點(diǎn)擊表單進(jìn)行篩選按鈕，可以將篩選字段直接帶入。

舉例：阿里云、華為云、騰訊云等

圖（9）阿里云云盤

圖（10）來源華為云云監(jiān)控

圖（11）騰訊云數(shù)據(jù)庫實(shí)例

• 優(yōu)點(diǎn)：通過表頭，用戶更快捷進(jìn)入篩選，一般情況下表單左側(cè)數(shù)據(jù)篩選頻次越高
• 缺點(diǎn)：篩選的圖標(biāo)各平臺(tái)不一，對(duì)于首次使用者來說陌生，影響用戶對(duì)表頭的識(shí)別，交互形式需要學(xué)習(xí)成本

四、產(chǎn)品篩選場景設(shè)計(jì)優(yōu)化實(shí)踐

根據(jù)現(xiàn)有平臺(tái)頁面梳理，梳理出涉及篩選場景的頁面，這里通過舉一個(gè)典型場景分析和優(yōu)化。（由于實(shí)際頁面涉密，所以打馬了）

圖（12）模塊原頁面

第一步拆解：

頁面“隱藏“式篩選形式需要經(jīng)過“篩選”按鈕點(diǎn)擊展開，可以發(fā)現(xiàn)默認(rèn)展開時(shí)陳列信息的已選項(xiàng)均為全部。該場景中默認(rèn)全部的數(shù)據(jù)量較大，篩選的作用是用于數(shù)據(jù)過濾，事先通過定義好的過濾值進(jìn)行操作。

第二步分析：

根據(jù)以上過濾項(xiàng)目及過濾值的對(duì)應(yīng)關(guān)系，可根據(jù)列表常見的篩選方式，歸納為列表上方篩選及表頭篩選。

第三步歸納：

表頭篩選

放置于列表表頭上的篩選，受到列表表頭信息的限制，篩選的內(nèi)容僅限于特定、單次列的篩選。

對(duì)「故障告警」過濾項(xiàng)拆解時(shí)發(fā)現(xiàn)，有幾項(xiàng)分別能對(duì)應(yīng)表頭信息，可通過放置在列表表頭標(biāo)簽上進(jìn)行單次下拉篩選，這里的場景是下拉多選，如圖（13）

圖（13）表頭篩選優(yōu)化

列表上方篩選

篩選功能位于列表上方，與表頭篩選不同的是，可單次進(jìn)行多列交叉篩選，過濾值不限于列表列的內(nèi)容

搜索

搜索字段可靈活方便進(jìn)行數(shù)據(jù)查詢。當(dāng)數(shù)據(jù)量大時(shí)，通過搜索功能提升用戶查看數(shù)據(jù)的效率。對(duì)原頁面過濾項(xiàng)拆解時(shí)發(fā)現(xiàn)，其中兩項(xiàng)涉及輸入搜索，對(duì)于用戶記憶要求較低，通過模糊搜索來提升查找數(shù)據(jù)的效率。在使用這兩項(xiàng)搜索時(shí)發(fā)現(xiàn)，先通過某一項(xiàng)模糊搜索過濾得到第一版數(shù)據(jù)，基于該版數(shù)據(jù)，查看列表中的另一項(xiàng)信息，進(jìn)行下一步精確搜索，最終得到用戶想要的數(shù)據(jù)?；蛲瑫r(shí)輸入兩項(xiàng)（以某種分隔符號(hào)分割）進(jìn)行精確查詢，事半功倍提升用戶效率。如圖（14）

圖（14）搜索優(yōu)化

日期時(shí)間

因?yàn)闀r(shí)間篩選一般是對(duì)某個(gè)時(shí)間段的查詢，需要開始時(shí)間和結(jié)束時(shí)間，所以這里對(duì)日期的篩選條件單獨(dú)做處理展示。經(jīng)操作發(fā)現(xiàn)「全部時(shí)間」就是默認(rèn)最開始時(shí)間-最新時(shí)間，其他幾個(gè)選項(xiàng)是設(shè)置的快速時(shí)間段，是平臺(tái)上對(duì)用戶最常用的時(shí)間段進(jìn)行抽離作為選項(xiàng)。

由于日期選擇的條件多于5個(gè)，且自定義時(shí)間長度不固定，所以設(shè)計(jì)采用整體下拉框選擇的形式，時(shí)間選項(xiàng)都置于內(nèi)側(cè)，選擇結(jié)果反饋與下拉框中。如圖（15）

圖（15）日期選擇器優(yōu)化

按鈕

原按鈕形式過長，變換樣式成純文字或圖標(biāo)加提示的形式，同時(shí)對(duì)主、次按鈕進(jìn)行樣式區(qū)分。如圖（16）

圖（16）按鈕優(yōu)化

最終優(yōu)化方案見圖（17）、圖（18）

圖（17）優(yōu)化方案（一）表頭篩選+平鋪式

圖（18）優(yōu)化方案（二）表頭篩選+收折式

五、小結(jié)

通過調(diào)研產(chǎn)品平臺(tái)的篩選場景應(yīng)用，總結(jié)歸納了幾種基礎(chǔ)篩選、高級(jí)篩選及組合篩選的應(yīng)用場景，基于此對(duì)自身運(yùn)維平臺(tái)的篩選場景進(jìn)行分析、歸納最終輸出優(yōu)化設(shè)計(jì)方案。

其實(shí)在設(shè)計(jì)優(yōu)化過程中，產(chǎn)品的易操作性、信息層級(jí)、可拓展性都會(huì)促使設(shè)計(jì)需要結(jié)合場景思考問題。篩選功能當(dāng)然也要滿足實(shí)際場景需求，需考慮如何設(shè)計(jì)才能是否滿足用戶的實(shí)際操作路徑，是否符合用戶認(rèn)知，能否引導(dǎo)用戶使用該篩選功能等。設(shè)計(jì)之路道阻且長，如有不足之處，歡迎拍磚～

本文由@一時(shí)無兩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash， 基于CC0協(xié)議