編輯導語：如今隨著網際網路的不斷髮展，線上購物等平臺變得越來越方便，我們可以用篩選功能準確地在平臺上找到需要的商品，比如可以選擇發貨地、品牌、價格區間等等；本文作者分享了關於互動設計中的四種篩選控制元件，我們一起來了解一下。

本文分享一些互動設計中用得到的篩選控制元件型別，幫助設計師們更快找到合適的互動元件。

篩選控制元件在移動端用得非常高頻，平時在互動設計中也經常用到，所以我整理了目前移動端APP常用的篩選控制元件。

為了方便記憶和理解，我根據自己的理解對其進行了分類，應該可以涵蓋絕大多數篩選控制元件。

為什麼要使用篩選控制元件？

顯而易見，當APP資料太多，不對資料進行組織和分類的話，使用者就很難快速找到自己想要的東西。

篩選控制元件可以幫助重組資訊：

舉個例子，如果電商APP中的使用者無法快速找到自己想要的商品，那麼結果就是損失這個使用者的購買行為；內容型APP中使用者無法快速找到自己想看的內容，那麼結果就是損失這個使用者的內容消費行為，造成使用者流失。

所以歸根結底產品的篩選功能是服務使用者，最終目的是服務產品。

一、彈窗篩選

彈窗篩選下面會介紹三種：單維度篩選、多維度篩選、多級篩選。

單維度：一般無需確定按鈕，點選條件後自動篩選。

多維度：一般有重置和確定按鈕，點選重置後清空篩選條件，點選確定後進行篩選動作。

多級篩選：分單選和多選，移動端一個頁面一般最多承載3個層級，再多就會造成資訊放不下而影響使用者操作了。

多級篩選中的單選：

1. 彈窗篩選 / 單維度

單維度的彈窗篩選控制元件使用得相當廣泛，單維度的彈窗篩選幾乎都是單選，使用者點選條件後觸發篩選並收起下拉框同時展示篩選結果。

我羅列了幾種常見的展現方式，主要有：按鈕、日曆、圖示

【彈窗篩選/單維度】控制元件一般適合：

篩選條件文字不多（一般不超過5個）：文字過多的話可能展示不全而且使用者識別起來也不容易，篩選圖的就是個快麼。

篩選條件簡單，一個篩選維度就可以滿足：比如高中學科的分類有語文、數學、英語等，只需要簡單篩選即可滿足需求，當然如果業務需要再進行細分到一年級、二年級等那就另說了。

篩選權重為“中”（按照高中低劃分）：設計界有句話叫“所見即所得，少即是多”，把低頻或者權重不高的操作隱藏起來會讓介面更加清爽也讓使用者操作起來更加舒服；尤其是篩選控制元件，除非是非常重要的篩選會直接展示，否則幾乎都是摺疊隱藏起來，使用者需要的時候進行選擇即可。

初期產品：對於一些初期產品，更重要的精力一般都放在驗證業務上，處理上向短平快靠攏，即快速驗證，快速迭代；這時候對於體驗層和功能完整度難免會不那麼周到一些，能基本滿足功能就可以了。

2. 彈窗篩選 / 多維度

彈窗多維度篩選又有兩種展現形式：下拉框和側邊框。

多維度彈窗篩選控制元件一般以按鈕和按鈕+輸入框為主，篩選條件有可能是單選也可能是多選。

含輸入框的又以價格區間篩選為多，一般是和金錢有關的篩選比如金融和電商類產品。

1）彈窗篩選 / 多維度 / 下拉框

2）彈窗篩選 / 多維度 / 側邊框

【彈窗篩選/多維度】控制元件一般適合：

篩選條件文字不多（一般不超過5個）：理由同單維度，不做贅述。

單維度無法滿足使用者篩選需求：比如上圖的“找兼職”篩選，使用者關心的兼職屬性有多個，此時如果僅做單維篩選，會導致使用者多次進行篩選操作並且無法將多個維度合併篩選，想想你用一個產品時想找東西卻總是如大海撈針的時候的那種抓狂和挫敗感。

至於使用者關心的到底是哪些篩選條件，這就需要我們進一步對使用者進行調查了。

篩選條件不能太多：還是拿找兼職案例來說，如果“工作區域”有幾十個的話，豈不是會佔據整個螢幕而無法看到其他的篩選條件？所以一級篩選和二級篩選都不能太多，一般一級不超過10個，二級不超過20個。

條件太多怎麼辦？後文有解決方案。

3. 彈窗篩選 / 多級篩選

如下圖所示，多級篩選可切換維度後選擇篩選條件，下圖左邊為單選，選擇條件後觸發篩選，右圖為多選，選擇多個條件後點擊【確定】按鈕後觸發篩選。

還有一點需提及，其實多級篩選跟1。2中的多維度篩選本質是一樣的，都是在二級類目下進行選擇，不同的是1。2的多維度篩選採用了平鋪全部展示的方式展示條件，多級篩選將一級條件也作為需要操作的條件，或tab切換或摺疊隱藏，目的是更快速地進行篩選和展示更多的二級類目。

如果有更細的分類，也可以參考下圖中的課程分類，在二級分類中再加上平鋪分類也是不錯的解決方案。

【彈窗篩選/多級篩選】控制元件一般適合：

篩選條件多（20~100個均可）：條件過多的時候使用多級篩選控制元件可以幫助組織資訊也能讓使用者便捷操作；比如上圖多級篩選中的課程類別篩選和醫生科室篩選，一級分類就超過十個，二級多的甚至超過二十個，使用側邊tab切換一來檢索快，二來展示資訊比橫向滑動展示資訊多。

教育、醫療、電商類的使用較多：上述行業分類多，可以考慮使用多級篩選，但採用下拉彈窗方式的多級篩選目前市面上的APP產品應用的不是特別廣泛，可能與實現成本有關。一般會使用側邊欄分類代替，後文會講到。

二、橫向tab篩選

橫向tab篩選控制元件可能是APP產品中使用得最多的篩選控制元件了，幾乎每個APP都會使用這個控制元件。

橫向tab篩選一般篩選條件為2~5個，橫向tab篩選又分為同頁面和分頁面兩種。

分頁面和同頁面的區別在於它們獲取資料的觸發方式不同。

分頁面是已經將資料篩選好了，使用者進來之後進行選擇即可。

同頁面以及上述的彈窗篩選資料篩選是使用者點選條件後才觸發篩選。

舉個形象的例子：

小紅去超市和路邊攤買東西，去超市買東西時，商品已經分類好了，他進去根據分類找到商品就可以了；

去路邊攤買東西時，他跟攤主說，我要買蘋果，不要進口的，要本土的，不要紅的，要青蘋果，然後攤主才給小紅挑選出他想要的水果。

分頁面就相當於小紅去超市買東西，同頁面就相當於去路邊攤買東西。

1. 篩選結果分頁面

分頁面篩選其實嚴格來說算是“分類”，這裡我也算進了篩選，也算給大家設計時多一個方案，分頁面如下圖，分類資料使用不同頁面進行展示。

每個分類下單獨做一個頁面，點選或左右滑動切換頁面：

當分類過多時一般採用左右滑動或者結合下拉操作來展示 。

2. 篩選結果同頁面

同頁面的tab篩選一般有單維篩選和多維篩選，在移動端這種平鋪類的多維篩選影視類用得比較多。

同頁面的“單維篩選”為了節省空間一般會把多餘的條件進行摺疊，應用得最多的地方應該是使用者評價頁面。

同頁面的單維篩選還有一種是單選，如下圖中的圖1，這種篩選應用得不算廣泛，分類太多的時候會壓縮列表資料，即使有“收起”的操作，也不利於使用者頻繁切換條件的同時檢視資料。

同時選擇多個條件進行篩選，點選一次則觸發一次篩選：

【橫向tab篩選】控制元件一般適合

篩選權重較高：對於篩選權重較高或者操作頻繁的篩選時使用橫向tab不失為一個好主意，一來方便切換，二來也不用每次都點選下拉框進行條件選擇。

三、高階篩選

或者叫新頁面篩選，點選篩選後進入新頁面進行篩選。

對篩選要求高，篩選顆粒度細的場景可以考慮使用高階篩選，比如上圖中的汽車篩選，使用者對汽車的考量維度多，且還圖文並茂，新頁面可以展示更多的內容。

四、組合篩選

內容越來越豐富的APP來說，組合篩選顯得太必要了，移動端螢幕有限，而APP內容又愈加豐富，使用組合篩選的方式可以將內容最大化地展現給使用者。

可以看到下圖中的盒馬APP分類體驗就非常好，同時可以切換多個層級，不用來回跳轉，目前這種組合在OTO類的產品使用得較多。

橫向tab+側邊tab組合篩選：

橫向tab和彈窗篩選在電商產品中使用得較多：

本文由 @餿麵包 原創釋出於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議