B端產品設計細節分析:數據篩選

7 評論 34003 瀏覽 285 收藏 18 分鐘

編輯導語:在B端產品設計中,數據的篩選是其中必不可少的一個步驟。數據的篩選并不僅僅是一個簡單的步驟,它包含了很多設計的細節,我們一起來看看吧。

一、什么是篩選

篩選(Filter)也叫做過濾器,是搜索框架中的一部分,用于數據抓取。

可以通過添加不同的屬性來創建篩選組件,用戶選擇其中某個屬性并定義其值。一個屬性可以有一組可供選擇的值,例如設備平臺可以分為PC、IOS、Android等。

用戶可以根據需要,對數據進行有規律的抓取,快速查找出特定內容,準確縮小數據的展示范圍。并且可以定義并保存篩選以備后用。執行篩選后,用戶也可以查看結果并進一步縮小結果的范圍。

大多數B端產品數據復雜,數據內容通常都是由用戶添加生成的,經常會有項目標題過長、自定義字段無規律、數值復雜的情況,篩選就顯得尤為重要了。

1. 使用場景

只要用戶有需要找到屏幕中任何相同元素的需求,都可以用到篩選,常見的使用情況有:

  • 數據列表、卡片列表等任何列表類型的頁面,用于篩選可見項目的數量。
  • 分析類型的屏幕和儀表板,用于篩選圖表中包含數據的范圍或類型(時間范圍、受眾類型、顯示的指標、價值范圍等)。

不管使用場景如何,其目的都是讓用戶對數據進行區分,找到想要的內容。流暢的篩選功能交互,可以減少用戶的負擔,使其將更多精力放到處理篩選后的數據中。同時,篩選屬性還可以用于向用戶介紹整個系統可以提供的內容。

二、篩選項的類型

在構建篩選時,需要非常了解產品的數據結構。哪些字段與時間或日期有關?哪些是定量值、哪些是定性值?不同類型的數據需要不同類型的選擇輸入,所有數據點都可以反映在篩選器中。

1. 日期

日期是B端產品中常見的篩選類型,一個場景事件的觸發離不開時間選擇。

日期選擇器是讓用戶在程序中選擇日期或時間段的一類控件,其作用是查詢過往時間發生的事情。通常根據用戶習慣設置一個默認時間。

一個好的日期選擇器,需要注意:

  • 確保開始日期和結束日期按順序排列。
  • 所選內容必須可見,對于已選的時間段需要有明顯的樣式區分。
  • 通常根據用戶習慣設置一個默認時間,如今天。
  • 添加快捷選項和自定義選擇。選擇時間范圍時,快捷選項是非常有用的。根據場景特征,增加昨天、最近7天、最近30天等快捷項。但是,如果用戶尋找的內容快捷選項未涵蓋,則允許他們設置自定義選擇。

2. 狀態

B端業務復雜,操作人員角色分工各不盡相同,根據實際的業務流程,同一條數據可能會產生多個狀態節點。操作關聯到系統的數據時,會觸發狀態的變更。狀態字段常用于列表中,可以讓用戶追蹤定責到具體環節,方便任務的交接。

3. 字典

用戶通過選擇的方式錄入系統預先配置篩選項信息時,可以使用字典格式。例如,標簽類字段:性別男、女,架構類字段:省、市、區等。

字典類字段的值較固定,涵蓋范圍廣,用戶可以通過確定性內容選擇范圍,提高篩選效率。

4. 多條件

列表中最常見的兩種字段內容是文本類和數值類字段,若想要精確的篩選這一類字段內容,需要提供含有運算符的篩選操作,常見的篩選操作有:等于、不等于、大于、小于、區間、有值、沒值等。

5. 聯動

聯動主要是指界面上的控件之間發生互相關聯的變化,比如選擇了某個值后,其他篩選項隨之發生變化。

6. 高級篩選

高級篩選是把篩選變成附加公式,而不是簡單地一個值。

在這種情況下,不僅可以讓用戶控制相對關系,還可以允許他們通過添加或排除條件來創建復雜的公式。通常有并級“且”、交級“或”兩種關系。

7. 篩選項優先級排序

通常在用戶眼中,不是所有字段都具有相同的可用性價值,不同的字段在不同使用場景中的重要程度也不一樣。我們需要為高使用頻率屬性值在篩選組件中更快被訪問。

所以在得到可能成為篩選的屬性后,需要根據業務需求的重要程度,對所有可成為篩選項的屬性做優先級排序。評估出需要實現哪些篩選項,排除哪些篩選項,哪些優先實現,哪些靠后實現等。

除此以外,還可以根據業務需求,對篩選進行分類。

三、篩選的設計

1. 位置

篩選器組件的位置有三種常見的類型。一是左側的垂直側邊欄形式,二是水平的篩選欄,三是嵌入到某個數據卡片或表頭的并列形式。選擇哪種類型取決于篩選對上下文的影響和產品的擴展性要求。

(1)側邊欄

  • 全局影響:整個頁面
  • 可擴展性:高

左側邊欄位置較固定,不會因為篩選項過多而影響頁面中主要內容的位置,可擴展性強,可在收起部分嵌套更多的值。

但是這種類型篩選器可以影響整個頁面。我們需要確保頁面上的每個元素都有效地受到篩選的影響,避免造成混亂。

(2)水平欄

  • 全局影響:可能影響整個頁面,也可能影響頁面中的某一部分
  • 可擴展性:一般

篩選欄可以放置在頁面的特定部分的上方,明確表示只有那些項目才會受控。對于那些由不同數據結構組成的頁面,是一個很好的選擇。

水平欄選項的可擴展性稍差,因為它局限于頁面寬度。篩選內容較多時,最好有收起功能,提升屏效。

(3)并列

  • 全局影響:只影響某個部分
  • 可擴展性:低

并列形式常見于列表中,是一種列表內置篩選形式,類似Excel表格的操作。點擊表頭篩選按鈕進行篩選,可以將篩選字段直接帶入表頭標題中。

如果產品數據結構不一致(如各種圖表、圖形組成的儀表板),需要謹慎使用全局篩選,這個并列的形式可能更合適??梢栽陧撁婕墑e保留一些全局篩選,但也需要提供較小規模的篩選機制。

這種類型為用戶提供了快速進入篩選的通道,但是篩選的圖標各平臺不一,會影響用戶對表頭的識別。

2. 初始狀態

(1)展開/折疊

篩選較多的頁面,考慮到屏效性,可以使用折疊/展開的形式,避免頁面滾動影響用戶操作效率。

如果界面篩選中沒有默認的值,用戶必須通過設置一個篩選以獲取表的第一個結果集,則默認展開篩選欄。

如果界面在加載時執行的默認值,圖表內容已預先填充內容,并且用戶很少更改篩選欄,則界面可以默認折疊篩選欄。而如果篩選功能的使用頻次不高,可將他它隱藏在下一個層級中,為關鍵信息預留更多位置。

(2)平鋪/彈出

平鋪篩選在B端產品中較為少見,它將篩選項全部羅列在當前頁面內,用戶可以直觀對比各個選項,操作便捷,但是也有一定限制。這種類型展現條目本身必須可以標簽化,條目的字節數受限,不可過長。如果篩選條目數量太多,甚至多到一屏放不下,需要考慮彈出式篩選。

彈出式的典型樣式是下拉列表,當篩選條目數量較多時,給出一個額外的空間更有利于操作。對于多層級的信息(如省、市、區)彈出式也更為友好。

3. 執行時間

過濾器欄有兩種不同的模式:實時更新模式和手動更新模式。

(1)實時更新

在實時更新模式下,篩選欄會立即對每個輸入更改做出反應。一旦用戶做出選擇,數據就會刷新并顯示篩選結果,因此不需要查詢按鈕。界面將與所有設置的篩選相匹配并對結果進行實時更新。

這種模式的優點是在執行篩選時為用戶提供了一種方便簡單的體驗,可以在每次點擊后立即看到結果。適用于較低風險的交互,一旦處理多選過濾器或更復雜的輸入時可能會造成混亂。當然還需要考慮處理數據的多少,如果應用中數據量巨大,每次更新時間較長,反而會降低用戶的使用效率。

(2)手動更新

在手動更新模式下,過濾結果只有在用戶點擊查詢時才會更新。如果用戶想在每次更改后查看結果,必須單擊查詢按鈕。

這種模式最適用于非常繁重的數據集或低性能的應用程序。

(3)使用哪種模式

實時更新模式對用戶更方便,但是,如果用戶必須配置多個篩選器才能獲得有用的結果集、或者預期產生的數據量過大,請考慮改用手動更新模式。

選擇哪種模式需要考慮:數據量、系統性能以及用戶期望。

4. 顯示結果

(1)篩選進度

篩選操作需要一些時間才能顯示結果。在此等待狀態期間,需要給出進度的反饋。加載圖標是常見加載方法。如果加載結果時出現問題,應以適當的形式將結果傳達給用戶。

(2)突出篩選結果

應用篩選后,選項可能會隱藏在其下拉菜單或可擴展部分中。這時候需要突出執行過哪些篩選值。否則,用戶很容易忘記操作內容。

需要注意:

  • 保持篩選條件在其內容上下文中可見。
  • 對于篩選結果應給出明確的指示(數字標記、粗體文本、背景顏色等)
  • 在專門的篩選條件概述/摘要部分集中顯示它們。

如果多選并且沒有足夠的空間將它們全部列出時,需要給出明確數字提示用戶選擇的個數。標簽內容可給出最大字符限制,超過部分用 … 代替。如果用戶需要再次查看他們的選擇,可以指明讓用戶再次打開下拉菜單查看。

(3)結果計數

傳達反饋的另一個關鍵要素是顯示結果的數量。常見的結果計數通常與翻頁功能配合使用。

(4)空結果

如果搜索結果不包含任何數據,需要給出空結果消息提示。最好能給用戶一些建議以響應空結果。

(5)在結果中過濾和搜索

篩選結果通常包含大量用戶信息,最好提供一些用戶可以應用于結果的邏輯篩選器。這可用于進一步限制結果的數量。

排序功能可幫助用戶按所需順序對結果進行排序。

此外,還可以讓用戶更改視圖以在最佳布局中查看結果。

(6)結果清除/結果重置

無論用哪種模式,都不要忘記添加一個易于訪問的“全部清除”按鈕。這為用戶提供了退出篩選、返回初始結果的通道。如果初始篩選欄中有系統默認值,可以添加“重置”按鈕。

四、小結

篩選的定義:根據用戶需要,對數據進行有規律的抓取,快速查找出特定內容,準確縮小數據的展示范圍。

篩選項的類型:日期、狀態、字典、多條件、聯動、高級篩選。

篩選的設計:位置(側邊欄、水平欄、并列)、初始狀態(展開/折疊、平鋪/彈出)、執行時間(實時更新、手動更新)、顯示結果(篩選進度、突出篩選結果、結果計數、空結果、在結果中過濾和搜索、結果清除/結果重置)。

參考:

  • https://pencilandpaper.io/articles/user-experience/ux-pattern-analysis-enterprise-filtering/
  • https://experience.sap.com/fiori-design-web/filter-bar/
  • http://www.aharts.cn/pd/4609527.html
  • http://www.aharts.cn/pd/3622313.html
  • http://www.aharts.cn/pd/1947124.html

 

本文由 @LIZ醬 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 高級篩選,多條件交集為“且”,多條件并集為“或”,應該是這樣吧

    來自廣東 回復
  2. 請問,有要保存篩選條件以便于以后快速切換的需求怎么做

    來自浙江 回復
    1. 保存篩選條件,與原有篩選功能不沖突就行,可切換使用

      來自廣東 回復
    2. 增加可保存的自定義篩選器

      來自北京 回復
  3. 內容滿滿!

    來自浙江 回復
  4. 數據量大的性能問題怎么考慮呢

    來自廣東 回復
    1. 這個看是具體情況吧。從設計的角度,可以使用手動更新,在處理結果時考慮進度條樣式使用戶對篩選進度有感知。對技術不是很了解,一般可以使用懶加載或者數據緩存,也可以根據需要優化表結構、減少數據冗余。

      來自江蘇 回復