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

一、篩選場景介紹

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

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

二、篩選場景類型

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

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

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

1. 篩選的組成

圖（1）

舉例：騰訊云

圖（2）騰訊云負載均衡實例

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

2. 高級篩選

圖（3）

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

3. 組合篩選

（1）平鋪型

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

舉例：在線購物類平臺

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

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

圖（6）騰訊云告警策略

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

通常為避免篩選項太多，會提供展開、收起操作，對應(yīng)每個篩選條件進行收折

（2）收折型

舉例：阿里云、騰訊云

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

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

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

4. 表頭篩選型

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

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

圖（9）阿里云云盤

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

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

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

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

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

圖（12）模塊原頁面

第一步拆解：

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

第二步分析：

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

第三步歸納：

表頭篩選

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

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

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

列表上方篩選

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

搜索

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

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

日期時間

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

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

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

按鈕

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

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

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

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

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

五、小結(jié)

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

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

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

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