產品經理交互設計之這4種篩選控件你一定要掌握

1、編輯導語：如今隨著互聯(lián)網的不斷發(fā)展，線上購物等平臺變得越來越方便，我們可以用篩選功能準確地在平臺上找到需要的商品，比如可以選擇發(fā)貨地、品牌、價格區(qū)間等等；本文作者分享了關于交互設計中的四種篩選控件，我們一起來了解一下。本文分享一些交互設計中用得到的篩選控件類型，幫助設計師們更快找到合適的交互組件。篩選控件在移動端用得非常高頻，平時在交互設計中也經常用到，所以我整理了目前移動端APP 常用的篩選控件。為了方便記憶和理解，我根據(jù)自己的理解對其進行了分類，應該可以涵蓋絕大多數(shù)篩選控件。為什么要使用篩選控件？顯而易見，當 APP 數(shù)據(jù)太多，不對數(shù)據(jù)進行組織和分類的話，用戶就很難快速找到自己想要的東西。

2、篩選控件可以幫助重組信息：舉個例子，如果電商APP 中的用戶無法快速找到自己想要的商品，那么結果就是損失這個用戶的購買行為；內容型APP 中用戶無法快速找到自己想看的內容，那么結果就是損失這個用戶的內容消費行為，造成用戶流失。所以歸根結底產品的篩選功能是服務用戶，最終目的是服務產品。彈窗篩選下面會介紹三種：單維度篩選、多維度篩選、多級篩選。單維度：一般無需確定按鈕，點擊條件后自動篩選。多維度：一般有重置和確定按鈕，點擊重置后清空篩選條件，點擊確定后進行篩選動作。多級篩選：分單選和多選，移動端一個頁面一般最多承載 3 個層級，再多就會造成信息放不下而影響用戶操作了。多級篩選中的單選：單維度的彈窗

3、篩選控件使用得相當廣泛，單維度的彈窗篩選幾乎都是單選，用戶點擊條件后觸發(fā)篩選并收起下拉框同時展示篩選結果。我羅列了幾種常見的展現(xiàn)方式，主要有：按鈕、日歷、圖標【彈窗篩選/單維度】控件一般適合：篩選條件文字不多（一般不超過5 個）：文字過多的話可能展示不全而且用戶識別起來也不容易，篩選圖的就是個快么。篩選條件簡單，一個篩選維度就可以滿足：比如高中學科的分類有語文、數(shù)學、英語等，只需要簡單篩選即可滿足需求，當然如果業(yè)務需要再進行細分到一年級、二年級等那就另說了。篩選權重為“中” （按照高中低劃分）：設計界有句話叫“所見即所得，少即是多” ，把低頻或者權重不高的操作隱藏起來會讓界面更加清爽也讓用戶操

4、作起來更加舒服；尤其是篩選控件，除非是非常重要的篩選會直接展示，否則幾乎都是折疊隱藏起來，用戶需要的時候進行選擇即可。初期產品：對于一些初期產品，更重要的精力一般都放在驗證業(yè)務上，處理上向短平快靠攏，即快速驗證，快速迭代；這時候對于體驗層和功能完整度難免會不那么周到一些，能基本滿足功能就可以了。彈窗多維度篩選又有兩種展現(xiàn)形式：下拉框和側邊框。多維度彈窗篩選控件一般以按鈕和按鈕+輸入框為主，篩選條件有可能是單選也可能是多選。含輸入框的又以價格區(qū)間篩選為多，一般是和金錢有關的篩選比如金融和電商類產品。1）彈窗篩選/ 多維度/下拉框2）彈窗篩選/ 多維度/側邊框【彈窗篩選/多維度】控件一般適合：篩選

5、條件文字不多（一般不超過5 個）：理由同單維度，不做贅述。單維度無法滿足用戶篩選需求：比如上圖的 “找兼職 ”篩選，用戶關心的兼職屬性有多個，此時如果僅做單維篩選，會導致用戶多次進行篩選操作并且無法將多個維度合并篩選，想想你用一個產品時想找東西卻總是如大海撈針的時候的那種抓狂和挫敗感。至于用戶關心的到底是哪些篩選條件，這就需要我們進一步對用戶進行調查了。篩選條件不能太多：還是拿找兼職案例來說，如果 “工作區(qū)域 ”有幾十個的話，豈不是會占據(jù)整個屏幕而無法看到其他的篩選條件？所以一級篩選和二級篩選都不能太多，一般一級不超過10 個，二級不超過20 個。條件太多怎么辦？后文有解決方案。如下圖所示，多

6、級篩選可切換維度后選擇篩選條件，下圖左邊為單選，選擇條件后觸發(fā)篩選，右圖為多選，選擇多個條件后點擊【確定】按鈕后觸發(fā)篩選。還有一點需提及，其實多級篩選跟1.2 中的多維度篩選本質是一樣的，都是在二級類目下進行選擇，不同的是1.2 的多維度篩選采用了平鋪全部展示的方式展示條件，多級篩選將一級條件也作為需要操作的條件，或tab 切換或折疊隱藏，目的是更快速地進行篩選和展示更多的二級類目。如果有更細的分類，也可以參考下圖中的課程分類，在二級分類中再加上平鋪分類也是不錯的解決方案?！緩棿昂Y選/多級篩選】控件一般適合：篩選條件多（ 20100個均可）：條件過多的時候使用多級篩選控件可以幫助組織信息也能讓

7、用戶便捷操作；比如上圖多級篩選中的課程類別篩選和醫(yī)生科室篩選，一級分類就超過十個，二級多的甚至超過二十個，使用側邊tab 切換一來檢索快，二來展示信息比橫向滑動展示信息多。教育、醫(yī)療、電商類的使用較多：上述行業(yè)分類多，可以考慮使用多級篩選，但采用下拉彈窗方式的多級篩選目前市面上的 APP 產品應用的不是特別廣泛，可能與實現(xiàn)成本有關。一般會使用側邊欄分類代替，后文會講到。橫向 tab 篩選控件可能是APP 產品中使用得最多的篩選控件了，幾乎每個APP 都會使用這個控件。橫向tab篩選一般篩選條件為25個，橫向tab篩選又分為同頁面和分頁面 兩種。分頁面和同頁面的區(qū)別在于它們獲取數(shù)據(jù)的觸發(fā)方式不同

8、。分頁面是已經將數(shù)據(jù)篩選好了，用戶進來之后進行選擇即可。同頁面以及上述的彈窗篩選數(shù)據(jù)篩選是用戶點擊條件后才觸發(fā)篩選。舉個形象的例子：小紅去超市和路邊攤買東西，去超市買東西時，商品已經分類好了，他進去根據(jù)分類找到商品就可以了；去路邊攤買東西時，他跟攤主說，我要買蘋果，不要進口的，要本土的，不要紅的，要青蘋果，然后攤主才給小紅挑選出他想要的水果。分頁面就相當于小紅去超市買東西，同頁面就相當于去路邊攤買東西。分頁面篩選其實嚴格來說算是 “分類 ” ，這里我也算進了篩選，也算給大家設計時多一個方案，分頁面如下圖，分類數(shù)據(jù)使用不同頁面進行展示。每個分類下單獨做一個頁面，點擊或左右滑動切換頁面：當分類過多

9、時一般采用左右滑動或者結合下拉操作來展示。同頁面的tab 篩選一般有單維篩選和多維篩選，在移動端這種平鋪類的多維篩選影視類用得比較多。同頁面的 “單維篩選”為了節(jié)省空間一般會把多余的條件進行折疊，應用得最多的地方應該是用戶評價頁面。同頁面的單維篩選還有一種是單選，如下圖中的圖 1，這種篩選應用得不算廣泛，分類太多的時候會壓縮列表數(shù)據(jù)，即使有 “收起 ”的操作，也不利于用戶頻繁切換條件的同時查看數(shù)據(jù)。同時選擇多個條件進行篩選，點擊一次則觸發(fā)一次篩選：【橫向 tab 篩選】控件一般適合篩選權重較高：對于篩選權重較高或者操作頻繁的篩選時使用橫向 tab 不失為一個好主意，一來方便切換，二來也不用每次都點擊下拉框進行條件選擇?；蛘呓行马撁婧Y選，點擊篩選后進入新頁面進行篩選。對篩選要求高，篩選顆粒度細的場景可以考慮使用高級篩選，比如上圖中的汽車篩選，用戶對汽車的考量維度多，且還圖文并茂，新