本文分享一些交互设计中用得到的筛选控件类型，帮助设计师们更快找到合适的交互组件。

为了方便记忆和理解，我根据自己的理解对其进行了分类，应该可以涵盖绝大多数筛选控件。

显而易见，当APP数据太多，不对数据进行组织和分类的话，用户就很难快速找到自己想要的东西。

举个例子，如果电商APP中的用户无法快速找到自己想要的商品，那么结果就是损失这个用户的购买行为；内容型APP中用户无法快速找到自己想看的内容，那么结果就是损失这个用户的内容消费行为，造成用户流失。

一、弹窗筛选

单维度：一般无需确定按钮，点击条件后自动筛选。

多级筛选：分单选和多选，移动端一个页面一般最多承载3个层级，再多就会造成信息放不下而影响用户操作了。

1. 弹窗筛选 / 单维度

我罗列了几种常见的展现方式，主要有：按钮、日历、图标

筛选条件文字不多（一般不超过5个）：文字过多的话可能展示不全而且用户识别起来也不容易，筛选图的就是个快么。

筛选权重为“中”（按照高中低划分）：设计界有句话叫“所见即所得，少即是多”，把低频或者权重不高的操作隐藏起来会让界面更加清爽也让用户操作起来更加舒服；尤其是筛选控件，除非是非常重要的筛选会直接展示，否则几乎都是折叠隐藏起来，用户需要的时候进行选择即可。

2. 弹窗筛选 / 多维度

多维度弹窗筛选控件一般以按钮和按钮+输入框为主，筛选条件有可能是单选也可能是多选。

1）弹窗筛选 / 多维度 / 下拉框

【弹窗筛选/多维度】控件一般适合：

单维度无法满足用户筛选需求：比如上图的“找兼职”筛选，用户关心的兼职属性有多个，此时如果仅做单维筛选，会导致用户多次进行筛选操作并且无法将多个维度合并筛选，想想你用一个产品时想找东西却总是如大海捞针的时候的那种抓狂和挫败感。

筛选条件不能太多：还是拿找兼职案例来说，如果“工作区域”有几十个的话，岂不是会占据整个屏幕而无法看到其他的筛选条件？所以一级筛选和二级筛选都不能太多，一般一级不超过10个，二级不超过20个。

3. 弹窗筛选 / 多级筛选

还有一点需提及，其实多级筛选跟1.2中的多维度筛选本质是一样的，都是在二级类目下进行选择，不同的是1.2的多维度筛选采用了平铺全部展示的方式展示条件，多级筛选将一级条件也作为需要操作的条件，或tab切换或折叠隐藏，目的是更快速地进行筛选和展示更多的二级类目。

【弹窗筛选/多级筛选】控件一般适合：

教育、医疗、电商类的使用较多：上述行业分类多，可以考虑使用多级筛选，但采用下拉弹窗方式的多级筛选目前市面上的APP产品应用的不是特别广泛，可能与实现成本有关。一般会使用侧边栏分类代替，后文会讲到。

横向tab筛选控件可能是APP产品中使用得最多的筛选控件了，几乎每个APP都会使用这个控件。

分页面和同页面的区别在于它们获取数据的触发方式不同。

同页面以及上述的弹窗筛选数据筛选是用户点击条件后才触发筛选。

小红去超市和路边摊买东西，去超市买东西时，商品已经分类好了，他进去根据分类找到商品就可以了；

分页面就相当于小红去超市买东西，同页面就相当于去路边摊买东西。

分页面筛选其实严格来说算是“分类”，这里我也算进了筛选，也算给大家设计时多一个方案，分页面如下图，分类数据使用不同页面进行展示。

当分类过多时一般采用左右滑动或者结合下拉操作来展示 。

同页面的tab筛选一般有单维筛选和多维筛选，在移动端这种平铺类的多维筛选影视类用得比较多。

同页面的单维筛选还有一种是单选，如下图中的图1，这种筛选应用得不算广泛，分类太多的时候会压缩列表数据，即使有“收起”的操作，也不利于用户频繁切换条件的同时查看数据。

【横向tab筛选】控件一般适合

三、高级筛选

对筛选要求高，筛选颗粒度细的场景可以考虑使用高级筛选，比如上图中的汽车筛选，用户对汽车的考量维度多，且还图文并茂，新页面可以展示更多的内容。

内容越来越丰富的APP来说，组合筛选显得太必要了，移动端屏幕有限，而APP内容又愈加丰富，使用组合筛选的方式可以将内容最大化地展现给用户。

横向tab+侧边tab组合筛选：

本文由 @馊面包 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

顶一下()     踩一下()