中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：如今隨著互聯(lián)網(wǎng)的不斷發(fā)展，線上購(gòu)物等平臺(tái)變得越來(lái)越方便，我們可以用篩選功能準(zhǔn)確地在平臺(tái)上找到需要的商品，比如可以選擇發(fā)貨地、品牌、價(jià)格區(qū)間等等；本文作者分享了關(guān)于交互設(shè)計(jì)中的四種篩選控件，我們一起來(lái)了解一下。

本文分享一些交互設(shè)計(jì)中用得到的篩選控件類型，幫助設(shè)計(jì)師們更快找到合適的交互組件。

篩選控件在移動(dòng)端用得非常高頻，平時(shí)在交互設(shè)計(jì)中也經(jīng)常用到，所以我整理了目前移動(dòng)端APP常用的篩選控件。

為了方便記憶和理解，我根據(jù)自己的理解對(duì)其進(jìn)行了分類，應(yīng)該可以涵蓋絕大多數(shù)篩選控件。

為什么要使用篩選控件？

顯而易見(jiàn)，當(dāng)APP數(shù)據(jù)太多，不對(duì)數(shù)據(jù)進(jìn)行組織和分類的話，用戶就很難快速找到自己想要的東西。

篩選控件可以幫助重組信息：

舉個(gè)例子，如果電商APP中的用戶無(wú)法快速找到自己想要的商品，那么結(jié)果就是損失這個(gè)用戶的購(gòu)買行為；內(nèi)容型APP中用戶無(wú)法快速找到自己想看的內(nèi)容，那么結(jié)果就是損失這個(gè)用戶的內(nèi)容消費(fèi)行為，造成用戶流失。

所以歸根結(jié)底產(chǎn)品的篩選功能是服務(wù)用戶，最終目的是服務(wù)產(chǎn)品。

一、彈窗篩選

彈窗篩選下面會(huì)介紹三種：?jiǎn)尉S度篩選、多維度篩選、多級(jí)篩選。

單維度：一般無(wú)需確定按鈕，點(diǎn)擊條件后自動(dòng)篩選。

多維度：一般有重置和確定按鈕，點(diǎn)擊重置后清空篩選條件，點(diǎn)擊確定后進(jìn)行篩選動(dòng)作。

多級(jí)篩選：分單選和多選，移動(dòng)端一個(gè)頁(yè)面一般最多承載3個(gè)層級(jí)，再多就會(huì)造成信息放不下而影響用戶操作了。

多級(jí)篩選中的單選：

1. 彈窗篩選 / 單維度

單維度的彈窗篩選控件使用得相當(dāng)廣泛，單維度的彈窗篩選幾乎都是單選，用戶點(diǎn)擊條件后觸發(fā)篩選并收起下拉框同時(shí)展示篩選結(jié)果。

我羅列了幾種常見(jiàn)的展現(xiàn)方式，主要有：按鈕、日歷、圖標(biāo)

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

篩選條件文字不多（一般不超過(guò)5個(gè)）：文字過(guò)多的話可能展示不全而且用戶識(shí)別起來(lái)也不容易，篩選圖的就是個(gè)快么。

篩選條件簡(jiǎn)單，一個(gè)篩選維度就可以滿足：比如高中學(xué)科的分類有語(yǔ)文、數(shù)學(xué)、英語(yǔ)等，只需要簡(jiǎn)單篩選即可滿足需求，當(dāng)然如果業(yè)務(wù)需要再進(jìn)行細(xì)分到一年級(jí)、二年級(jí)等那就另說(shuō)了。

篩選權(quán)重為“中”（按照高中低劃分）：設(shè)計(jì)界有句話叫“所見(jiàn)即所得，少即是多”，把低頻或者權(quán)重不高的操作隱藏起來(lái)會(huì)讓界面更加清爽也讓用戶操作起來(lái)更加舒服；尤其是篩選控件，除非是非常重要的篩選會(huì)直接展示，否則幾乎都是折疊隱藏起來(lái)，用戶需要的時(shí)候進(jìn)行選擇即可。

初期產(chǎn)品：對(duì)于一些初期產(chǎn)品，更重要的精力一般都放在驗(yàn)證業(yè)務(wù)上，處理上向短平快靠攏，即快速驗(yàn)證，快速迭代；這時(shí)候?qū)τ隗w驗(yàn)層和功能完整度難免會(huì)不那么周到一些，能基本滿足功能就可以了。

2. 彈窗篩選 / 多維度

彈窗多維度篩選又有兩種展現(xiàn)形式：下拉框和側(cè)邊框。

多維度彈窗篩選控件一般以按鈕和按鈕+輸入框?yàn)橹?，篩選條件有可能是單選也可能是多選。

含輸入框的又以價(jià)格區(qū)間篩選為多，一般是和金錢有關(guān)的篩選比如金融和電商類產(chǎn)品。

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

2）彈窗篩選 / 多維度 / 側(cè)邊框

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

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

單維度無(wú)法滿足用戶篩選需求：比如上圖的“找兼職”篩選，用戶關(guān)心的兼職屬性有多個(gè)，此時(shí)如果僅做單維篩選，會(huì)導(dǎo)致用戶多次進(jìn)行篩選操作并且無(wú)法將多個(gè)維度合并篩選，想想你用一個(gè)產(chǎn)品時(shí)想找東西卻總是如大海撈針的時(shí)候的那種抓狂和挫敗感。

至于用戶關(guān)心的到底是哪些篩選條件，這就需要我們進(jìn)一步對(duì)用戶進(jìn)行調(diào)查了。

篩選條件不能太多：還是拿找兼職案例來(lái)說(shuō)，如果“工作區(qū)域”有幾十個(gè)的話，豈不是會(huì)占據(jù)整個(gè)屏幕而無(wú)法看到其他的篩選條件？所以一級(jí)篩選和二級(jí)篩選都不能太多，一般一級(jí)不超過(guò)10個(gè)，二級(jí)不超過(guò)20個(gè)。

條件太多怎么辦？后文有解決方案。

3. 彈窗篩選 / 多級(jí)篩選

如下圖所示，多級(jí)篩選可切換維度后選擇篩選條件，下圖左邊為單選，選擇條件后觸發(fā)篩選，右圖為多選，選擇多個(gè)條件后點(diǎn)擊【確定】按鈕后觸發(fā)篩選。

還有一點(diǎn)需提及，其實(shí)多級(jí)篩選跟1.2中的多維度篩選本質(zhì)是一樣的，都是在二級(jí)類目下進(jìn)行選擇，不同的是1.2的多維度篩選采用了平鋪全部展示的方式展示條件，多級(jí)篩選將一級(jí)條件也作為需要操作的條件，或tab切換或折疊隱藏，目的是更快速地進(jìn)行篩選和展示更多的二級(jí)類目。

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

【彈窗篩選/多級(jí)篩選】控件一般適合：

篩選條件多（20~100個(gè)均可）：條件過(guò)多的時(shí)候使用多級(jí)篩選控件可以幫助組織信息也能讓用戶便捷操作；比如上圖多級(jí)篩選中的課程類別篩選和醫(yī)生科室篩選，一級(jí)分類就超過(guò)十個(gè)，二級(jí)多的甚至超過(guò)二十個(gè)，使用側(cè)邊tab切換一來(lái)檢索快，二來(lái)展示信息比橫向滑動(dòng)展示信息多。

教育、醫(yī)療、電商類的使用較多：上述行業(yè)分類多，可以考慮使用多級(jí)篩選，但采用下拉彈窗方式的多級(jí)篩選目前市面上的APP產(chǎn)品應(yīng)用的不是特別廣泛，可能與實(shí)現(xiàn)成本有關(guān)。一般會(huì)使用側(cè)邊欄分類代替，后文會(huì)講到。

二、橫向tab篩選

橫向tab篩選控件可能是APP產(chǎn)品中使用得最多的篩選控件了，幾乎每個(gè)APP都會(huì)使用這個(gè)控件。

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

分頁(yè)面和同頁(yè)面的區(qū)別在于它們獲取數(shù)據(jù)的觸發(fā)方式不同。

分頁(yè)面是已經(jīng)將數(shù)據(jù)篩選好了，用戶進(jìn)來(lái)之后進(jìn)行選擇即可。

同頁(yè)面以及上述的彈窗篩選數(shù)據(jù)篩選是用戶點(diǎn)擊條件后才觸發(fā)篩選。

舉個(gè)形象的例子：

小紅去超市和路邊攤買東西，去超市買東西時(shí)，商品已經(jīng)分類好了，他進(jìn)去根據(jù)分類找到商品就可以了；

去路邊攤買東西時(shí)，他跟攤主說(shuō)，我要買蘋果，不要進(jìn)口的，要本土的，不要紅的，要青蘋果，然后攤主才給小紅挑選出他想要的水果。

分頁(yè)面就相當(dāng)于小紅去超市買東西，同頁(yè)面就相當(dāng)于去路邊攤買東西。

1. 篩選結(jié)果分頁(yè)面

分頁(yè)面篩選其實(shí)嚴(yán)格來(lái)說(shuō)算是“分類”，這里我也算進(jìn)了篩選，也算給大家設(shè)計(jì)時(shí)多一個(gè)方案，分頁(yè)面如下圖，分類數(shù)據(jù)使用不同頁(yè)面進(jìn)行展示。

每個(gè)分類下單獨(dú)做一個(gè)頁(yè)面，點(diǎn)擊或左右滑動(dòng)切換頁(yè)面：

當(dāng)分類過(guò)多時(shí)一般采用左右滑動(dòng)或者結(jié)合下拉操作來(lái)展示 。

2. 篩選結(jié)果同頁(yè)面

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

同頁(yè)面的“單維篩選”為了節(jié)省空間一般會(huì)把多余的條件進(jìn)行折疊，應(yīng)用得最多的地方應(yīng)該是用戶評(píng)價(jià)頁(yè)面。

同頁(yè)面的單維篩選還有一種是單選，如下圖中的圖1，這種篩選應(yīng)用得不算廣泛，分類太多的時(shí)候會(huì)壓縮列表數(shù)據(jù)，即使有“收起”的操作，也不利于用戶頻繁切換條件的同時(shí)查看數(shù)據(jù)。

同時(shí)選擇多個(gè)條件進(jìn)行篩選，點(diǎn)擊一次則觸發(fā)一次篩選：

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

篩選權(quán)重較高：對(duì)于篩選權(quán)重較高或者操作頻繁的篩選時(shí)使用橫向tab不失為一個(gè)好主意，一來(lái)方便切換，二來(lái)也不用每次都點(diǎn)擊下拉框進(jìn)行條件選擇。

三、高級(jí)篩選

或者叫新頁(yè)面篩選，點(diǎn)擊篩選后進(jìn)入新頁(yè)面進(jìn)行篩選。

對(duì)篩選要求高，篩選顆粒度細(xì)的場(chǎng)景可以考慮使用高級(jí)篩選，比如上圖中的汽車篩選，用戶對(duì)汽車的考量維度多，且還圖文并茂，新頁(yè)面可以展示更多的內(nèi)容。

四、組合篩選

內(nèi)容越來(lái)越豐富的APP來(lái)說(shuō)，組合篩選顯得太必要了，移動(dòng)端屏幕有限，而APP內(nèi)容又愈加豐富，使用組合篩選的方式可以將內(nèi)容最大化地展現(xiàn)給用戶。

可以看到下圖中的盒馬APP分類體驗(yàn)就非常好，同時(shí)可以切換多個(gè)層級(jí)，不用來(lái)回跳轉(zhuǎn)，目前這種組合在OTO類的產(chǎn)品使用得較多。

橫向tab+側(cè)邊tab組合篩選：

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

本文由 @餿面包 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議