前言

在设计过程中，设计师们都会想尽一切办法去简化交互流程、组件元素及各种设计属性，让用户使用起来更简单。当产品简化到一定程度，就必须要面对其不可简化的复杂性。筛选控件就是用户自行处理复杂信息的方式之一，使用频率非常高，本文根据对各类筛选控件的拆解及自身项目经验进行总结，整理了在移动端中常用筛选控件的类型、布局以及如何选择更合适的筛选，帮助大家在设计中更好的选择适合自己产品的筛选控件。

联系生活来说：

在日常生活中我们也离不开筛选，筛选是大家使用比较频繁的一种交互形式，比如点外卖，会选择满减优惠力度大，同时也可以选择在哪一个价格区间内的产品，这就会用到筛选。再比如，当你走进地铁站、机场、商场……一些公共场所，在没有任何分类指示的情况下，是否会不知所措，答案是肯定的，果我们能通过标识牌、平面图指引，就容易很多，这些指引路径就完全充当了筛选功能，至于通过什么方式，只能根据人们自身或现场条件自行选择，能满足自己的需求即可。在功能繁多、交互流程复杂的互联网产品中也是如此。

而到了B端产品中，筛选的逻辑也会比移动端的复杂，伴随着：且关系、或关系、大于、小于等等这样复杂的逻辑，也为设计本身增加了很多难度。因此，今天我们就来讨论讨论筛选控件🤔

筛选对于整个表单来说非常重要，可以帮助用户在复杂的表单数据当中进行快速定位；同时可以对数据进行快速划分，缩短用户的查找时间。

就拿云产品的使用场景来说：

对于实际B端场景来说，筛选是日常数据分类的一个重要途径，我们先来看看实际场景到底有哪些？

比如用户要配置一个新的集群，对版本以及地域的筛选，通过各项的筛选，满足用户对产品的需求。（如下图）

筛选分为基础筛选和高级筛选两种类型，根据业务场景不同，在页面中权衡使用。

2.1. 基础筛选

基础筛选通常有多个筛选条件组合而成，一般为系统预设好的筛选字段，用户无法修改。

基础筛选一般分为四个部分：

筛选条件：是指用户可以筛选的范围

筛选项：是指用户可以选择的筛选项目

已选项：是指用户已经选中的筛选项

备选项：是指用户还没有选择的筛选选项

适用场景：

基础筛选更多作为用户快捷筛选的一种方式，既支持模糊搜索也满足精准定位。因为一般使用场景当中用户几个筛选逻辑为“且” 同时筛选的逻辑比较简单，所以在使用场景上只适合在对筛选要求不高的场景下使用。

2.2. 高级筛选

高级筛选一般为筛选中含有运算符，同时筛选当中包含条件关系，比如“且”、“或”、“否”关系。一般高级筛选包含以下几类关键词。

筛选关系：是指几个筛选条件之间的关系，一般为 且、或关系，即 且 关系为几个条件之间的交集；或 关系为几个条件之间的联集（并集）。

筛选条件：是指用户可以筛选的范围。

字段关系：是指筛选字段和筛选值之间的关系，常见的筛选操作有：大于、小于、是、否、包含、不包含、为空、不为空等等。

筛选值：你所需要筛选的数值。

适用场景：

产品需要使用于不同行业，业务场景不唯一，包容性极强（也通常用于满足专家级用户的特殊需求），高级筛选一般满足更多的用户场景，为用户多条件多字段、多个筛选关系、多个筛选操作 提供有利保障。

筛选器的布局根据页面信息承载量确定布局形式，尽量和整个系统布局保持和谐。

3.1. 上下布局

当在筛选器条件少于5个的情况下，最常使用的就是上下布局，这样筛选能与网站保持统一的情况下，上下布局也更方便用户进行阅读。

当筛选器过多的情况下（一般在5-15个之间），筛选器过多，需要滚屏才能看到筛选结果，用户使用起来会很别扭。所以在5-15个的情况下，一般会将筛选项进行收折，这样保证筛选整体面积不会太大，同时将用户常用的筛选放在前面，可以满足用户基本的业务需求和使用场景。

上下布局是比较常用的布局方式，根据筛选条件的数量、使用频率考虑是否需要对部分筛选条件收起，节约纵向空间。

3.2. 左右布局

左右布局的好处是能够将筛选的所有条件都直接的展示出来，然后勾选出你需要筛选的数据，可以适应很多场景，在筛选器用15个以上时。通过左右布局的方式，能够让筛选条件进行滚动，在最大限度保持用户使用体验。

左右布局符合用户的阅读习惯，也和网站的布局保持统一，对于横向空间比较紧凑的页面，尤其是表格字段特别多需要左右滚动，上下布局可以节省横向空间。

在日常的B端产品中，筛选的形式有哪些？筛选到底应该怎么设计？接下来为大家总结梳理一些在 B端产品中的筛选玩法，希望为你开启新大陆。

4.1. 平铺型

平铺型一般为筛选项特别多、细分种类非常多的情况，搜索出来的结果与其预期差距大，通过筛选对数据的再次分类，使用户精准找到想要的结果。

多用于信息量大的产品的网页，或者客户端应用的比较多，像电商网站、视频网站（常见的淘宝、京东、腾讯视频PC端）都采取用这样的方式，将所有的筛选条件列出来。

优点

平铺的好处是通过对筛选条件进行合理的分类，把相应条件下的筛选项全部显示出来，让所有筛选项一目了然，能快速获取不同筛选条件的结果，比下拉选择的方式操作更快捷。

缺点

缺点也是很明显的，平铺型的页面空间占比大，需要占据大量面积展示平铺出的筛选结果。（比如淘宝PC端，搜索一个产品后花去40%的面积去展示所有的筛选条件，其实就是想引导用户，想通过进一步的筛选，让用户明确自己对想要东西。同时因为面积占比大，通常平铺型都是以收折的状态，只有在搜索触发后才会完全展开。）

4.2. 折叠式筛选

折叠式筛选是一种简单直接的筛选形式，介于Tab式与弹窗式之间，筛选条件初始为隐藏状态并提供一个入口，将用户常用的筛选形式通过下拉框的形式进行筛选。点击后展开，期间不影响当前页面的任何其他操作且一直处于展示状态，需经过再次点击才会将筛选条件隐藏。每一个筛选条件就是一个下拉框，这种形式看上去很简单，但是在B端场景中，下拉框对于用户来说认知成本低，操作性也较强。

通常是将2~3个高频使用的筛选条件直接展示出来，低频使用的筛选条件折叠起来，和查询、重置、展开、收起按钮搭配使用，选择完筛选字段后点击“查询”，页面刷新后得到筛选结果，折叠式是比较基础的筛选形式。

优点

所有的筛选条件都展示出来了，筛选条件只有简单的“且”逻辑关系没有复杂关系，认知成本和操作成本低，筛选条件数量多的时候折叠起来节约空间。

缺点

点击时将所有信息全部平铺展开，信息量过于冗杂繁多，同时预设的筛选条件具有较强的业务局限性，在做通用性产品时，这种方式很难做到通用性 。

Tips

处在折叠区域的筛选条件选择字段后，收起筛选区域时要显示出所选的字段，让用户知道选择了什么字段，同时可快捷删除选项。（上方案例有显示）

4.3. 单侧筛选

单侧筛选和弹框式的筛选条件布局类似，区别在于单侧式是采用左右布局的方式（放置在内容区的左侧或者右侧），可实时获得筛选结果，弹框式通过查询按钮触发以弹框形式悬浮在页面上，需点击查询按钮进行筛选。

优点

节省空间、通用性强。因为在很多Saas系统、Paas系统当中，无法针对每一个客户进行设计，就要考虑到系统通用型高，做一些大而全的功能。在每个表单也所需要定制化修改的地方很少，同时能容纳的信息量可以很大。

能承载非常多的信息，通过滚动或者展开收起的形式查看更多的筛选条件，节省空间。

缺点

就是在后台系统当中只有这一种筛选形式会面临在我常用的几种筛选的字段中，要通过不断寻找，来满足我的筛选需求，操作麻烦。 信息量大的话，信息没做好分类会增加操作难度，信息量小的时候我觉得大可不必，浪费横向空间。

Tips

左侧模式非常适用于管理日程、考勤、支持用户配置页面功能的产品。SaaS产品中像saleforce系统的通用性非常强，用户可自定义页面功能，配置页面就是采用单侧式自行功能选择，配置更适合自己使用的页面。worktile的日历页面采用的也是单侧式，操作非常便捷。

4.4. Tab筛选

Tab式筛选条件大部分在操作前、操作中、操作后基本都会一直显示，有横向Tab和纵向Tab两种。C端产品中如新闻、视频、网购类型的应用大多使用横向Tab，通过将不同的内容以大的方向、区块进行分类，便于用户随时切换、筛选出不同的内容。当然横向的B端办公产品居多，云产品中比较常见纵向导航筛选。

优点

实时筛选，每个tab可承载非常丰富的内容。

缺点

tab切换式相当于对内容分了大类，想要获得更细颗粒度的内容时，还需要和其他形式的筛选条件搭配使用。

Tips

建议搭配一个搜索框，快速筛选目标内容，搜索输入框尽量采用模糊搜索，不要让用户去精准记忆要输入的内容，用户只记得个大概的时候也能搜到。 Tab类型主要以大的维度进行筛选，所筛选出的结果可能模糊且信息量极大，如果想要结果更加精准，则需配备其他类型的控件进行二次筛选。

4.5. 表头筛选

表头筛选是一种复杂筛选的形式，其最开始是来源于Excel的筛选形式。点击表单的筛选按钮，可以将表头的筛选字段直接带入，方便用户操作。鼠标悬浮至表头标题，就会出现筛选按钮，采用下拉框形式展示筛选字段。

优点

可以通过表头的点击，使用户更快捷进入到自己的筛选条件，在通常情况下，在表单越左的数据显然是越重要的，也是使用筛选去筛频率最高的，因此高频的筛选场景基本还是得到满足。

缺点

在每个表头都会有一个icon，影响用户对于表头的识别。

Tips

重要字段往表格前面放（重要的数据优先展示），次要的数据往后放。这样表格字段数量多的时候方便快捷筛选，减少横向滚动表格查找数据。（如上图）

4.6. 弹窗式筛选

单侧筛选和弹框式的筛选条件布局类似，区别在于单侧式是采用左右布局的方式（放置在内容区的左侧或者右侧），可实时获得筛选结果。弹窗操作中以蒙层的方式弹出，其他时候均为隐藏状态。弹窗类型的筛选最大的优点是占用空间小，仅需一个入口，能在有限的弹出空间中从多个维度展示筛选条件，用户选中或自定义对应的筛选项，即可快速筛选出自己想要的信息。

优点

是能够在节省面积的情况下，可以进行很复杂的筛选，同时可以支持复杂情况下的筛选。适用于筛选操作是低频功能的场景，不占用页面空间。

缺点

弹窗会遮挡一部分表单数据，会影响筛选人的判断，其次筛选条件的添加也相对更加繁琐。筛选入口不容易被发现，也增加了点击操作次数。

4.7. 综合式

单一的筛选形式不能完全满足筛选需求时，往往会采用多种筛选器组合搭配使用。如基础筛选+高级筛选，tab切换式+弹窗式等等，或者直接由用户自行增减筛选条件。

经过一系列筛选调整，从产品角度出发尽量满足以下条件和形式。

不同的用户有不同的筛选偏好，作为B端产品设计师，应该体验过因为不同决策者的个人偏好导致功能多次修改的情况，面对这种情况更要做到设计有据可依。 本文参考了各优秀系统的筛选器设计形式，并结合自己的项目经验总结了此文，希望对大家有所启发，能够根据实际的业务场景设计符合产品的筛选器。