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

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

筛选控件在移动端用得非常高频，平时在交互设计中也经常用到，所以我整理了目前移动端APP常用的筛选控件。

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

为什么要使用筛选控件？

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

筛选控件可以帮助重组信息：

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

所以归根结底产品的筛选功能是服务用户，最终目的是服务产品。

一、弹窗筛选

弹窗筛选下面会介绍三种：单维度筛选、多维度筛选、多级筛选。

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

多维度：一般有重置和确定按钮，点击重置后清空筛选条件，点击确定后进行筛选动作。

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

多级筛选中的单选

1. 弹窗筛选 / 单维度

单维度的弹窗筛选控件使用得相当广泛，单维度的弹窗筛选几乎都是单选，用户点击条件后触发筛选并收起下拉框同时展示筛选结果。

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

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

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

筛选条件简单，一个筛选维度就可以满足：比如高中学科的分类有语文、数学、英语等，只需要简单筛选即可满足需求，当然如果业务需要再进行细分到一年级、二年级等那就另说了。

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

初期产品：对于一些初期产品，更重要的精力一般都放在验证业务上，处理上向短平快靠拢，即快速验证，快速迭代；这时候对于体验层和功能完整度难免会不那么周到一些，能基本满足功能就可以了。

2. 弹窗筛选 / 多维度

弹窗多维度筛选又有两种展现形式：下拉框和侧边框。

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

含输入框的又以价格区间筛选为多，一般是和金钱有关的筛选比如金融和电商类产品。

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