最近在設(shè)計(jì)篩選相關(guān)頁(yè)面的時(shí)候发框，找來(lái)了一些參考。發(fā)現(xiàn)這種竟然有這么多不同種類(lèi)的篩選設(shè)計(jì)類(lèi)型咕痛，雖然以前在使用APP的時(shí)候也注意到過(guò)，但是用用就忘記了喇嘱。正好找機(jī)會(huì)進(jìn)行了下總結(jié)歸類(lèi)茉贡，以后在碰到類(lèi)似設(shè)計(jì)的時(shí)候能夠快速思考對(duì)應(yīng)哪種類(lèi)型的設(shè)計(jì)比較合適。
大致我進(jìn)行了如下分類(lèi)：
一者铜、標(biāo)簽式篩選
標(biāo)簽式篩選我們是最為常見(jiàn)的腔丧，比較典型的是在搜索頁(yè)面篩選中被廣泛使用。怎么運(yùn)用這里就不多說(shuō)了作烟，大家都非常熟悉愉粤。如下圖：
二、左側(cè)導(dǎo)航式篩選
我們?cè)谌粘Ｉ铑?lèi)購(gòu)物的時(shí)候拿撩，例如購(gòu)買(mǎi)日用品衣厘、食物、便利商品的時(shí)候經(jīng)常會(huì)看到這種左側(cè)導(dǎo)航式篩選压恒、這種導(dǎo)航式篩選比較適合品種類(lèi)目特別多影暴，層級(jí)分類(lèi)較深的時(shí)候。
單一層級(jí)如上圖兩鮮的APP探赫，類(lèi)似這種生活便利型的的APP最為常見(jiàn)型宙。多層級(jí)的我們可以看下右上圖的設(shè)計(jì)。
這種設(shè)計(jì)的好處是對(duì)于相對(duì)復(fù)雜的層級(jí)分類(lèi)伦吠，能夠清晰有條理的收納妆兑』昀梗可以盡可能多的展示更多入口，尤其是對(duì)于購(gòu)物類(lèi)的APP能夠增加多頻道的流量箭跳，當(dāng)然流量也可以轉(zhuǎn)換更多的交易量晨另。
三、下拉式篩選
下拉式篩選分為：下拉彈窗谱姓、下拉卡片式篩選借尿、下拉菜單加左側(cè)列表層疊式。
下拉彈窗
我們可以看到上圖左一嗶哩嗶哩采用的下拉彈窗屉来，這種樣式是篩選中比較常見(jiàn)的路翻，最為普通的是單一層下拉彈窗，但這里嗶哩嗶哩運(yùn)用了層疊式的篩選形式茄靠，在設(shè)計(jì)上上面一排跟下面一排除了文字大小并沒(méi)有太大的區(qū)分茂契，體驗(yàn)很差，再加上下拉彈窗一大堆的文字分類(lèi)慨绳，密集恐懼癥有沒(méi)有掉冶。
下拉卡片式篩選
那么我們?cè)賮?lái)看看京東同樣運(yùn)用了層疊式的下拉彈窗設(shè)計(jì)，第一排跟第二排設(shè)計(jì)上有了明顯的區(qū)分脐雪，第二排采用了底板標(biāo)簽式樣厌小，很好的區(qū)分了上下的層次感，另外一點(diǎn)為了進(jìn)一步加深區(qū)分战秋，利用矩形標(biāo)簽的形狀璧亚，采用了卡片式的選項(xiàng)卡分類(lèi)設(shè)計(jì)。信息雖多但每一個(gè)細(xì)節(jié)的層次感區(qū)分明顯脂信，不失為好的設(shè)計(jì)癣蟋。
下拉菜單加左側(cè)列表層疊式
這種篩選形式首先采用了之前說(shuō)的列表層疊式樣式，同時(shí)它又是下拉菜單的形式狰闪。我們?cè)俅胃鷨袅▎袅ǖ脑O(shè)計(jì)進(jìn)行對(duì)比疯搅，如果像嗶哩嗶哩這種信息模塊特別多的情況其實(shí)可以對(duì)三級(jí)菜單進(jìn)行再次歸類(lèi)，結(jié)合左側(cè)列表層疊的樣式進(jìn)行設(shè)計(jì)埋泵♂Ｅ罚或是借鑒下京東的層次區(qū)分的設(shè)計(jì)，展示效果會(huì)大大提升秋泄。
四琐馆、折疊式篩選
折疊式篩選在網(wǎng)頁(yè)端運(yùn)用的相對(duì)較多规阀，其實(shí)在A(yíng)PP端用也非常好恒序，因?yàn)檫@種形式如果第二層級(jí)分類(lèi)不多，或者是第二層級(jí)信息量較少的情況下我們采用信息折疊的形式是比較好的谁撼∑缧玻可以減少頁(yè)面的跳轉(zhuǎn)滋饲，用戶(hù)只需要在當(dāng)前頁(yè)面獲取信息或者是在當(dāng)前頁(yè)面進(jìn)行篩選。
五喊巍、浮層引導(dǎo)式篩選
浮層引導(dǎo)式篩選常常用于首次進(jìn)入APP的時(shí)候屠缭，幫助用戶(hù)篩選出自己感興趣的內(nèi)容，之后方便后臺(tái)進(jìn)行數(shù)據(jù)統(tǒng)計(jì)崭参，然后根據(jù)不同用戶(hù)的喜好推送不同的內(nèi)容呵曹。這樣一勞永逸的篩選形式，避免了后期不必要的麻煩何暮。而且全屏展示能夠提供更大的展示空間奄喂。
六、橫條式篩選
橫條式篩選包括：橫條標(biāo)尺型篩選海洼、橫條進(jìn)度條型篩選
橫條標(biāo)尺型篩選
上圖左一是京東金融的小白理財(cái)頁(yè)面跨新，采用了比較新穎的標(biāo)尺進(jìn)行投資額的設(shè)定，用戶(hù)只需要左右滑動(dòng)即可坏逢，可操作性很強(qiáng)域帐，避免了用戶(hù)填寫(xiě)數(shù)值的反感情緒。
橫條進(jìn)度條型篩選
右上圖采用了進(jìn)度條的設(shè)計(jì)是整，用戶(hù)拖動(dòng)滑塊即可確定數(shù)值肖揣，操作上沒(méi)有標(biāo)尺型那樣靈活，但適合用于彈窗或者是小的模塊上贰盗。
七许饿、彈窗式篩選
彈窗式篩選主要分為：彈窗型篩選和底部彈窗型篩選
彈窗型篩選
彈窗型的篩選一般來(lái)說(shuō)還是比較少見(jiàn)的，通常情況下還是慎用舵盈，因?yàn)閺棿皶?huì)打斷用戶(hù)瀏覽當(dāng)前頁(yè)面陋率，影響操作的連貫性。類(lèi)似于這種情況呢秽晚，我就建議使用下拉彈窗式篩選或者右側(cè)抽屜式篩選效果會(huì)更好瓦糟，也不會(huì)打斷用戶(hù)對(duì)整個(gè)頁(yè)面的預(yù)覽。
底部彈窗型篩選
上右圖的底部彈窗式篩選這種方式通常用于底部菜單欄的操作二級(jí)篩選展示赴蝇，這種就比用彈窗型篩選好很多菩浙，把對(duì)整個(gè)頁(yè)面的干擾降到最低。
八句伶、填鴨式篩選
填鴨式篩選通常用于多選情況比較多劲蜻，當(dāng)然也有單選的時(shí)候。還有填寫(xiě)調(diào)查問(wèn)卷或者測(cè)試題的時(shí)候考余。
我們可以看到上圖左的底部彈窗填鴨式篩選先嬉，右側(cè)對(duì)篩選項(xiàng)目進(jìn)行了選中的高亮型設(shè)計(jì)，層次感非常好楚堤。這種模擬填鴨的形式模擬了真實(shí)的習(xí)題選擇疫蔓，可視化較強(qiáng)含懊，是一種不錯(cuò)的設(shè)計(jì)形式。
我們?cè)賮?lái)看看右圖的字母選項(xiàng)卡填鴨式設(shè)計(jì)衅胀，這個(gè)藥品的分類(lèi)就很好岔乔，同樣類(lèi)似于上面嗶哩嗶哩面臨入口模塊繁雜的情況。一般這種精細(xì)化的選擇的目標(biāo)用戶(hù)是深度用戶(hù)滚躯，有明確目的性的雏门。漫無(wú)目的的用戶(hù)不會(huì)去篩選這么復(fù)雜的操作。所以這里巧妙的結(jié)合運(yùn)用了字母選項(xiàng)卡的設(shè)計(jì)掸掏，然后對(duì)信息入口進(jìn)行了歸類(lèi)整合分隔展示剿配，整個(gè)頁(yè)面看起來(lái)更有邏輯調(diào)理。
日期篩選
日期篩選分為滾動(dòng)式和日歷式
滾動(dòng)式篩選
日期滾動(dòng)式篩選是iOS里的日期篩選特性阅束，也是極為常見(jiàn)的設(shè)計(jì)形式呼胚。這種篩選形式有點(diǎn)像密碼鎖，操作趣味性強(qiáng)息裸，降低用戶(hù)填寫(xiě)數(shù)字的負(fù)面情緒蝇更。但是記得在我之前工作的時(shí)候?qū)蛹?jí)采用了日期滾動(dòng)式設(shè)計(jì)，在進(jìn)行安卓后期的調(diào)整的時(shí)候發(fā)現(xiàn)開(kāi)發(fā)告知我安卓沒(méi)辦法做出具有景深的滾動(dòng)效果呼盆。那么視覺(jué)效果就大打折扣了年扩。
實(shí)際上安卓的設(shè)計(jì)規(guī)范Material Design采用的是菜單原地展開(kāi)，蓋住當(dāng)前選項(xiàng)访圃，當(dāng)前選項(xiàng)成為菜單的第一項(xiàng)的設(shè)計(jì)形式厨幻。并非iOS的滾動(dòng)式篩選，如下圖所示腿时。
所以我們運(yùn)用滾動(dòng)式設(shè)計(jì)形式的時(shí)候記得要考慮iOS跟安卓的平臺(tái)差異性况脆。
日歷篩選
日歷篩選是另一種日期篩選形式，這種形式適合運(yùn)用在購(gòu)買(mǎi)機(jī)票火車(chē)票批糟，或者是期刊專(zhuān)題類(lèi)設(shè)計(jì)的頁(yè)面上格了。因?yàn)橛袝r(shí)候可能我們并不是很明確要選擇哪個(gè)日期，尤其是買(mǎi)飛機(jī)票我們要看不同日期的不同票價(jià)進(jìn)行比對(duì)徽鼎。還有期刊專(zhuān)題我們回顧往期期刊的時(shí)候盛末，并不會(huì)明確的記得哪個(gè)日期沒(méi)有看。這時(shí)候就需要可視化更強(qiáng)的設(shè)計(jì)否淤，日歷篩選悄但。
九、右側(cè)抽屜式篩選
右側(cè)抽屜式設(shè)計(jì)其實(shí)是比較綜合類(lèi)的篩選設(shè)計(jì)石抡，通常情況下跟下拉式彈窗設(shè)計(jì)結(jié)合使用檐嚣。通常展示了不同的篩選形式，例如標(biāo)簽式篩選汁雷、折疊式篩選净嘀、填鴨式篩選等等∠姥叮總之當(dāng)我們需要展示不同篩選形式的時(shí)候推薦使用右側(cè)抽屜式篩選設(shè)計(jì)挖藏。
