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

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

大致我進行了如下分類：

一、標簽式篩選

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

如下圖：

二、左側導航式篩選

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

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

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

三、下拉式篩選

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

（1）下拉彈窗

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

（2）下拉卡片式篩選

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

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

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

四、折疊式篩選

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

五、浮層引導式篩選

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

六、橫條式篩選

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

（1）橫條標尺型篩選

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

（2）橫條進度條型篩選

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

七、彈窗式篩選

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

（1）彈窗型篩選

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

（2）底部彈窗型篩選

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

八、填鴨式篩選

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

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

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

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

九、日期篩選

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

（1）滾動式篩選

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

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

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

（2）日歷篩選

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

十、右側抽屜式篩選

右側抽屜式設計其實是比較綜合類的篩選設計，通常情況下跟下拉式彈窗設計結合使用。通常展示了不同的篩選形式，例如標簽式篩選、折疊式篩選、填鴨式篩選等等?？傊斘覀冃枰故静煌Y選形式的時候推薦使用右側抽屜式篩選設計。

總結

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

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

作者：角馬X ，口袋理財UED設計經理? 公眾號：海鹽社

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

題圖來自Unsplash，基于CC0協議