最近在設計篩選相關頁面的時候，找來了一些參考。發現這種竟然有這麼多不同種類的篩選設計類型，雖然以前在使用APP的時候也注意到過，但是用用就忘記了。正好找機會進行了下總結歸類，以後在碰到類似設計的時候能夠快速思考對應哪種類型的設計比較合适。

大緻我進行了如下分類：

一、标簽式篩選

标簽式篩選我們是最為常見的，比較典型的是在搜索頁面篩選中被廣泛使用。怎麼運用這裡就不多說了，大家都非常熟悉。

如下圖：

二、左側導航式篩選

我們在日常生活類購物的時候，例如購買日用品、食物、便利商品的時候經常會看到這種左側導航式篩選、這種導航式篩選比較适合品種類目特别多，層級分類較深的時候。

單一層級如上圖兩鮮的APP，類似這種生活便利型的的APP最為常見，多層級的我們可以看下右上圖的設計。

這種設計的好處是對于相對複雜的層級分類，能夠清晰有條理的收納。可以盡可能多的展示更多入口，尤其是對于購物類的APP能夠增加多頻道的流量，當然流量也可以轉換更多的交易量。

三、下拉式篩選

下拉式篩選分為：下拉彈窗、下拉卡片式篩選、下拉菜單加左側列表層疊式。

（1）下拉彈窗

我們可以看到上圖左一哔哩哔哩采用的下拉彈窗，這種樣式是篩選中比較常見的，最為普通的是單一層下拉彈窗，但這裡哔哩哔哩運用了層疊式的篩選形式，在設計上上面一排跟下面一排除了文字大小并沒有太大的區分，體驗很差，再加上下拉彈窗一大堆的文字分類，密集恐懼症有沒有。

（2）下拉卡片式篩選

那麼我們再來看看京東同樣運用了層疊式的下拉彈窗設計，第一排跟第二排設計上有了明顯的區分，第二排采用了底闆标簽式樣，很好的區分了上下的層次感，另外一點為了進一步加深區分，利用矩形标簽的形狀，采用了卡片式的選項卡分類設計。信息雖多但每一個細節的層次感區分明顯，不失為好的設計。

（3）下拉菜單加左側列表層疊式

這種篩選形式首先采用了之前說的列表層疊式樣式，同時它又是下拉菜單的形式。我們再次跟哔哩哔哩的設計進行對比，如果像哔哩哔哩這種信息模塊特别多的情況，其實可以對三級菜單進行再次歸類，結合左側列表層疊的樣式進行設計。或是借鑒下京東的層次區分的設計，展示效果會大大提升。

四、折疊式篩選

折疊式篩選在網頁端運用的相對較多，其實在APP端用也非常好，因為這種形式如果第二層級分類不多，或者是第二層級信息量較少的情況下我們采用信息折疊的形式是比較好的。可以減少頁面的跳轉，用戶隻需要在當前頁面獲取信息或者是在當前頁面進行篩選。

五、浮層引導式篩選

浮層引導式篩選常常用于首次進入APP的時候，幫助用戶篩選出自己感興趣的内容，之後方便後台進行數據統計，然後根據不同用戶的喜好推送不同的内容。這樣一勞永逸的篩選形式，避免了後期不必要的麻煩。而且全屏展示能夠提供更大的展示空間。

六、橫條式篩選

橫條式篩選包括：橫條标尺型篩選、橫條進度條型篩選

（1）橫條标尺型篩選

上圖左一是京東金融的小白理财頁面，采用了比較新穎的标尺進行投資額的設定，用戶隻需要左右滑動即可，可操作性很強，避免了用戶填寫數值的反感情緒。

（2）橫條進度條型篩選

右上圖采用了進度條的設計，用戶拖動滑塊即可确定數值，操作上沒有标尺型那樣靈活，但适合用于彈窗或者是小的模塊上。

七、彈窗式篩選

彈窗式篩選主要分為：彈窗型篩選和底部彈窗型篩選

（1）彈窗型篩選

彈窗型的篩選一般來說還是比較少見的，通常情況下還是慎用，因為彈窗會打斷用戶浏覽當前頁面，影響操作的連貫性。類似于這種情況呢，我就建議使用下拉彈窗式篩選或者右側抽屜式篩選效果會更好，也不會打斷用戶對整個頁面的預覽。

（2）底部彈窗型篩選

上右圖的底部彈窗式篩選這種方式通常用于底部菜單欄的操作二級篩選展示，這種就比用彈窗型篩選好很多，把對整個頁面的幹擾降到最低。

八、填鴨式篩選

填鴨式篩選通常用于多選情況比較多，當然也有單選的時候，還有填寫調查問卷或者測試題的時候。

我們可以看到上圖左的底部彈窗填鴨式篩選，右側對篩選項目進行了選中的高亮型設計，層次感非常好。這種模拟填鴨的形式模拟了真實的習題選擇，可視化較強，是一種不錯的設計形式。

我們再來看看右圖的字母選項卡填鴨式設計，這個藥品的分類就很好，同樣類似于上面哔哩哔哩面臨入口模塊繁雜的情況。

一般這種精細化的選擇的目标用戶是深度用戶，有明确目的性的。漫無目的的用戶不會去篩選這麼複雜的操作。所以這裡巧妙的結合運用了字母選項卡的設計，然後對信息入口進行了歸類整合分隔展示，整個頁面看起來更有邏輯調理。

九、日期篩選

日期篩選分為：滾動式和日曆式。

（1）滾動式篩選

日期滾動式篩選是iOS裡的日期篩選特性，也是極為常見的設計形式。這種篩選形式有點像密碼鎖，操作趣味性強，降低用戶填寫數字的負面情緒。但是記得在我之前工作的時候層級采用了日期滾動式設計，在進行安卓後期的調整的時候發現開發告知我安卓沒辦法做出具有景深的滾動效果。那麼視覺效果就大打折扣了。

實際上安卓的設計規範Material Design采用的是菜單原地展開，蓋住當前選項，當前選項成為菜單的第一項的設計形式。并非iOS的滾動式篩選，如下圖所示。

所以我們運用滾動式設計形式的時候，記得要考慮iOS跟安卓的平台差異性。

（2）日曆篩選

日曆篩選是另一種日期篩選形式，這種形式适合運用在購買機票火車票，或者是期刊專題類設計的頁面上。因為有時候可能我們并不是很明确要選擇哪個日期，尤其是買飛機票我們要看不同日期的不同票價進行比對。還有期刊專題我們回顧往期期刊的時候，并不會明确的記得哪個日期沒有看。這時候就需要可視化更強的設計，日曆篩選。

十、右側抽屜式篩選

右側抽屜式設計其實是比較綜合類的篩選設計，通常情況下跟下拉式彈窗設計結合使用。通常展示了不同的篩選形式，例如标簽式篩選、折疊式篩選、填鴨式篩選等等。總之當我們需要展示不同篩選形式的時候推薦使用右側抽屜式篩選設計。

總結

這裡我們針對不同的使用場景總結出了十大篩選類型，分别為：标簽式篩選、左側導航式篩選、下拉式篩選、折疊式篩選、浮層引導式篩選、橫條式篩選、彈窗式篩選、填鴨式篩選、日期篩選、右側抽屜式篩選。

相信我們在以後設計篩選模塊的時候不至于束手無策了，希望本篇對您有幫助！

作者：角馬X ，口袋理财UED設計經理 公衆号：海鹽社

本文由 @角馬X 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部