如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

篩選是資源聚合類APP中不可缺少的功能，可幫用戶快速、精準(zhǔn)地找到需要內(nèi)容信息，根據(jù)資源分類形式的不同有多種篩選類型，并且不同的篩選類型還可以進行自由組合，讓復(fù)雜的內(nèi)容信息更容易被篩選出來。

目錄

1. 橫向tab式篩選

2. 標(biāo)簽篩選

3. 下拉篩選

4. 底部篩選

5. 抽屜式篩選

1. 橫向tab式篩選

這是最常見的篩選樣式，屬于一級篩選。通常出現(xiàn)在導(dǎo)航欄或者是導(dǎo)航欄目的下方，根據(jù)分類層級的多少有4種展現(xiàn)形式。

一個層級

• 分類2~5個：所有類目都可以直接在tab欄目上展示出來，用戶可快速地在各個分類之間進行切換；

• 分類大于5個：所有類目以相同的間距進行橫向排布，引入橫滑操作，方便用戶瀏覽被隱藏的分類信息；有些產(chǎn)品也會在欄目右側(cè)增加下拉操作，點擊后下拉展示所有的分類，用戶可對所有分類進行直觀的瀏覽；

• 
  

兩個層級分類

• Tab 欄目上只展示推薦分類或者用戶自己選擇的分類

當(dāng)內(nèi)容分類有兩個層級且分類比較多的時候，產(chǎn)品會根據(jù)用戶的喜好推薦幾種分類在tab上進行展示；右側(cè)有篩選操作，點擊后在一個頁面里展示所有的分類。用戶可以在這個頁面自主選擇增減展示在tab上的分類，并且可以調(diào)整展示的順序。

交互細節(jié)

• 用戶在不同的類目間進行切換的時候，篩選內(nèi)容在當(dāng)前頁面刷新展示；

• 不同的tab分類可以通過橫滑進行切換；

• 位于內(nèi)容信息的上方，對下方的列表內(nèi)容進行控制；

• 當(dāng)觸發(fā)篩選條件時，篩選欄目直接定位到導(dǎo)航欄下方。

2. 標(biāo)簽篩選

是一種輔助篩選樣式，通常位于某一分類標(biāo)題下方，或者跟tab篩選和下拉篩選搭配使用，有4種表現(xiàn)形式

① 內(nèi)容分類標(biāo)簽，充當(dāng)內(nèi)容入口。產(chǎn)品設(shè)定的內(nèi)容分類，分類層級較高，且內(nèi)容之間無交集，當(dāng)觸發(fā)操作的時候，會跳轉(zhuǎn)頁面進行內(nèi)容展示。

② 大分類下的子篩選條件，分類層級比較低，當(dāng)用戶觸發(fā)操作時，內(nèi)容在當(dāng)前頁面進行展示。

③ 篩選頁面，多維度的篩選條件以列表的形式進行排布，標(biāo)簽是單一維度下的多種分類，可橫滑操作，這種方式可以幫助用戶快速進行多維度的內(nèi)容篩選。篩選的結(jié)果直接展示在篩選條件下方，最常出現(xiàn)在視頻類APP內(nèi)做電影、電視篩選；馬蜂窩游記中也使用了這種分類形式。

3.下拉篩選

通常是在一個大的分類下做具體選擇的時候使用，這種篩選樣式可以承載1~3級分類層級。

單一層級

分類以列表的形式展示在頁面中，當(dāng)分類字段少且分類較多的時候也可以排2~3列進行展示。

 

兩個層級

有三種排布方式

• ①直接以欄目標(biāo)題加列表內(nèi)容的形式排列。適用于兩個層級分類都較少，或需要用戶進行操作（比較輸入框、滑塊）的場景使用。

• ②左側(cè)為一級分類信息展示區(qū)，右側(cè)為二級分類信息展示區(qū)，可以通過左側(cè)的一級分類控制右側(cè)的二級分類。適用于兩個層級分類都比較多的情況使用。

• ③上面為tab式的一級分類，下面是二級分類內(nèi)容的展示。適用于一級分類較少，二級分類較多的場景使用。

• 
  

三個層級

一級分類為tab形式展示在最上面，二三級為左右排布形式。

交互細節(jié)

• 放在內(nèi)容信息的上面，對下方內(nèi)容進行控制；

• 當(dāng)觸發(fā)篩選條件時，篩選欄目直接定位在導(dǎo)航欄下方；

• 有2~3種信息層級的篩選，結(jié)果通常取得是不同信息之間的交集，所以需要在篩選中向用戶展示篩選結(jié)果數(shù)量，幫助用戶判斷是否調(diào)整篩選條件 ；如圖左

• 我們也可以選擇在篩選結(jié)果頁展示篩選標(biāo)簽，用戶可以在當(dāng)前頁面刪除部分標(biāo)簽，以查看更多的內(nèi)容信息；如下圖

備注：下拉篩選通常是多維度組合在一個欄目上展示，通常應(yīng)用在電商、外賣等內(nèi)容分類層級比較多，且層級內(nèi)的分類也比較多的場景里

4. 底部篩選

某一具體內(nèi)容需要通過多個篩選維度輔助篩選時使用，比如XX-XX的火車票展示列表、馬蜂窩的地圖酒店篩選。這種篩選通常能承載1~2級的篩選層級，每種層級下的分類目都不能過多，是一種比較簡單輕便的篩選過程

單一篩選層級

① 與下拉篩選篩選一樣都是以列表的形式展示在篩選內(nèi)容

 

兩個篩選層級

① 直接以欄目標(biāo)題加列表內(nèi)容的形式排列。

② 左側(cè)為一級分類信息展示區(qū)，右側(cè)為二級分類信息展示區(qū)

交互細節(jié)

處于頁面的底部導(dǎo)航欄的位置

當(dāng)用戶出發(fā)操作的時候，內(nèi)容從下往上彈出展示。

5. 抽屜式篩選

電商平臺應(yīng)用較多的分類形式，通常是有兩個分類層級，一、二級的分類類目都比較多，默認情況下，如果分類特別多時可以只展示第一層級信息，用展開收起輔助用戶瀏覽二級類目信息。

交互細節(jié)

• 因為篩選的分類比較多，且通過展開收起會將已選擇的內(nèi)容遮擋上，所以我們需要以一種方式將已篩選的條件展示出來，方便用戶及時調(diào)整。eg.馬蜂窩將所有用戶選擇的內(nèi)容都放置在最前面，而京東選擇在欄目上方展示出來。

• 顯示有多少個符合篩選條件的內(nèi)容，幫助用戶決策篩選條件是否合理。

總結(jié)

本文主要講述了5種內(nèi)容篩選種類：tab篩選、標(biāo)簽篩選、下拉篩選、底部篩選和抽屜式篩選，選擇何種篩選類型跟內(nèi)容分類層級和分類數(shù)量相關(guān)，所以設(shè)計之前要先了解產(chǎn)品的分類及數(shù)量，有助于選擇更適合用戶使用的篩選樣式。

藍藍設(shè)計( m.wtxcl.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè)、平面設(shè)計服務(wù)。