數據篩選在B端產品的出現頻次相當高,也是很重要的一個模塊。作為設計師來說我們一定要好好進行數據過濾的功能設計,滿足用戶目標來提升用戶體驗。下面這篇文章作者為我們細化了數據過濾的種類以及優缺點,一起來看看吧。
一、為什么需要數據過濾
數據過濾意思就是在一堆大量的數據中選擇出一些符合我們特定條件的數據,得到特定的數據就是數據過濾。
B端產品往往業務復雜,同時伴隨著數據量大的特點。所以數據篩選在B端產品的出現頻次相當高,也是很重要的一個模塊。作為設計師來說我們一定要好好進行數據過濾的功能設計,滿足用戶目標來提升用戶體驗。
二、數據過濾的類型
數據過濾通常可以使用兩種方式來實現,分別是:
在B端系統界面設計中,搜索是通過指定任意條件,系統對此條件進行的檢索后,展示相對應內容,功能偏主動性;篩選是系統提供指定各種條件縮小范圍,可以選擇查找不同條件的內容,功能偏被動性。
1. 搜索
搜索功能一般來說是用戶在自己有明確目標的情況下,知道想要查詢的目標(準確或者模糊的目標),通過輸入文本關鍵詞實現查詢功能。搜索框的樣式基本一致,在交互上會略有不同,使用的場景有兩類,全局搜索和特定搜索。
全局搜索
全局搜索一般表示一種允許用戶在某個平臺或者數據庫中使用不受相對搜索限制的搜索方式。說人話就是搜索的范圍是針對整個產品或系統,并且搜索沒有任何限制。例如在桌面下拉的輸入框內輸入信息,就是觸發全局搜索,去查找輸入的關鍵詞內容,并且范圍也是針對全局,可匹配文件名稱、app名稱、相冊內容等。
對于系統中模塊分類較多,所涉及到的內容比較全面的,B端系統也會選擇全局搜索,只需要在全局搜索框中輸入自己模糊的目標信息,系統會根據輸入的關鍵信息搜索出各個模塊所對應的目標字段,如果分類較多,界面還會設計分類tab進行結果的展示。
特定搜索
特定的頁面指的是在一個模塊或頁面中加入搜索的功能,例如在數據表格頁面加入搜索的功能,搜索的目標只在該表格模塊內容中進行搜索,搜索的信息具有局限性,當然也是更加準確的搜索用戶想要的目標信息。
使用場景
搜索是用戶指定任意關鍵詞,平臺對此條件進行檢索后,展示對應內容。搜索通常針對整個系統和功能全局,在信息過濾性方便比較模糊。搜索可以作為一個入口承載更多運營和導流w7系統怎么搜索關鍵字,例如推薦搜索、熱門搜索等。
對于B端產品而言,如果頁面中數據量大并且需要精確展示符合條件的信息則使用篩選;只需要定位到關鍵詞的內容,則使用搜索。
設計原則
關于搜索,你可能在移動端或web端都用過,那么我們如何做好搜索的設計呢?設計師在設計搜索的時候應該遵循什么原則呢?主要是以下4點:
(1)漸進呈現
在我們設計展現搜索結果時,可以考慮漸進呈現的方式。這是指搜索結果不要一次性全部都呈現給用戶,而是使用逐步擴大范圍的展示方式,讓用戶慢慢瀏覽結果。但需要注意,漸進展示的層級不要太深,內容要做到符合用戶目標。
(2)可操作
對于搜索的結果,我們可以給予操作選擇,例如查看詳情、收藏、保存搜索結果等,這將會大大提升用戶與搜索結果之間的后續聯系。
(3)結構化
結構化是指搜索結果呈現的形式要有經過歸納和整理,呈現的結果要符合一定的規律邏輯,并且注意內容層級不能太深,不能反饋給用戶的是沒有層次的內容。簡單來說,分類就是結構化呈現的體現,內容結構化后用戶查找和定位才會更有效率。
(4)可保存
無論搜索任何內容,用戶都有權保存自己常用的搜索結果,保證用戶后續無需重復搜索即常見的歷史搜索。這點上已經有很多C端產品做的很好了,我們在B端產品上也可以考慮起來。
2. 篩選
另一種數據過濾方式是篩選,篩選的百度百科定義是利用篩子使物料中小于篩孔的細粒物料透過篩面,而大于篩孔的粗粒物料滯留在篩面上,從而完成粗、細料分離的過程。該分離過程可看作是物料分層和細粒透篩兩個階段組成的。物料分層是完成分離的條件,細粒適篩是分離的目的。
篩選是系統提供指定或用戶自定義各種條件縮小范圍,找到符合這批條件的所有數據。我們最常見的篩選是給出特定的條件,用戶直接選擇對應的條件即可實現篩選,也就是常用的普通篩選,但是隨著B端業務差異和功能性各不相同,復雜業務場景下簡單的篩選已經無法滿足現有業務需求了,后面開始引進高級篩選的功能,在不同的需求情況下會選擇采用不同的篩選模式,以便于滿足用戶的不同需求。
篩選總共分為3種類型,分別是:
下拉篩選
下拉篩選是在系統中頁面中的篩選區設置下拉篩選條件,用戶通過下拉選擇篩選條件中的值對數據進行篩選操作。當然篩選區中可能除了下拉選擇之后還有輸入篩選,下拉篩選和數據篩選共同組成篩選區。
表頭篩選
通過點擊表格列表頭自帶的篩選項進行數據列的篩選。
Tab標簽頁篩選
Tab標簽頁也是一種篩選的方式,Tab標簽頁默認選中一個,點擊切換選中顯示另一個標簽頁下的內容。標簽頁從位置來看分為垂直和水平方向Tab,從樣式上分為卡片式Tab和頁簽式Tab。
使用場景
篩選分為下拉、表頭、tab標簽頁。根據頁面和業務需要選擇。篩選結果要求精確、業務數據較多的推薦使用下拉篩選,篩選要求不高業務數據較少則使用表頭和tab,但需要注意在tab篩選之間需要有業務關聯性,表頭篩選需要謹慎使用。
二、常見設計方法1. 篩選區布局
從出現的位置來說,組合篩選一般有如下幾種常見類型:上下布局水平篩選區、左右布局的垂直側邊篩選區、 內嵌的表頭篩選區。
上下布局水平篩選區
在B端設計的頁面中最常用的篩選布局方式上下布局,篩選區放置在內容區頁面的上方,先篩選后查看結果,提高了用戶篩選的效率。
當篩選項目少于三個的情況時,會一行展示,也會占用一整行空間;而當篩選項目多的時候,會占據大量頁面縱向空間。內容較多時,推薦增加收起展開功能,這樣保證篩選整體面積不會很大,提升屏效比。
左右布局垂直側邊篩選區
左右布局的篩選區一般是以選項的形式進行篩選,篩選區的位置較固定,主要是占用頁面的橫向空間。當左側篩選區超出長度時,以滾動的形式進行篩選區內部滾動,通常都搭配實時觸發篩選。左右布局垂直側邊篩選區在國外的網站和產品中比較常見,在國內產品中并不常見。
左右布局的好處就是不影響頁面的垂直高度空間,使用抽屜的形式展開收起,可以適應很多場景,但是這種類型篩選器會影響頁面的橫向空間,使得頁面的內容區空間寬度被壓縮,并且抽屜展開會擠壓到內容區寬度,對內容區內容自適應有很高的要求。
內嵌的表頭篩選區
表頭篩選是一種復雜的篩選形式,常見于表格區域表頭中,是一種表格內置篩選形式,適合表格列比較單一內容的篩選,其最開始是源于Excel的篩選形式。
具有表頭篩選功能的表格列表頭名稱右側會有一個篩選icon,點擊篩選icon呼出氣泡卡片,點擊復選框內容可單選或多選需要展示的內容,點擊通常實時生效。生效后表頭篩選icon為選中色,表示有篩選項生效。再次點擊呼出氣泡卡片可點擊清空結果。
2. 高級篩選
高級篩選針對的場景是篩選條件較多的情況下,超過8個篩選條件即屬于篩選條件過多。在這種情況下,將所有的篩選條件都展示出來會使得篩選區域過高,影響使用。這時候可以采用高級篩選的方式。
篩選方式做法是在篩選區展示高級篩選的按鈕,點擊高級篩選會彈出對話框或者抽屜,對話框會承載所有的篩選條件,用戶可在此點擊想要的篩選條件和對應的內容進行篩選,點擊確定后生效結果,展示應用高級篩選后的數據內容。對話框內會設置清空按鈕,點擊清空恢復篩選前的內容狀態。
3. 自定義篩選
自定義篩選的使用場景也是由于篩選條件太多,這時候也可以使用自定義篩選的方式。簡單來說自定義篩選的做法是將篩選條件隱藏,用戶可以自己配置將自己認為重要的經常使用的篩選條件展示出來,形成一種篩選條件配置方案保存,用戶可根據自身使用場景配制出多種篩選條件配置方案,這樣就形成了多種篩選條件方案。
自定義篩選通常將選項放置在對話框中,點擊自定義篩選彈出對話框,勾選需要顯示出來的條件,還可以根據條件重要性進行順序設置。
4. 基礎篩選+自定義篩選
基礎篩選+自定義篩選就是在自定義篩選的基礎上,增加了幾個固定的基礎篩選條件,這幾個基礎篩選條件會被固定在篩選區w7系統怎么搜索關鍵字,用戶可以在這幾個固定條件的基礎上自定義添加其他的篩選條件。
點擊固定條件旁邊的加號添加自定義篩選條件,選擇好條件的同時選擇或輸入需要篩選的關鍵內容,通常基礎篩選+自定義篩選都是即時觸發的形式。