最近的工作一直在和绕筛选打交道，为公司B端系统做了一次设计调整，去解决目前系统中筛选功能交互繁琐的问题

写在前面

首先我们先从筛选本身讲起吧～

筛选可以说是我使用比较频繁的一种交互形式，比如我点外卖，会选择满减优惠力度大，同时我也可以选择在哪一个价格区间内的产品，这就会用到筛选，而到了B端产品上来，一个CRM系统当中，筛选的逻辑也会比移动端的复杂，伴随着：且关系、或关系、大于、小于等等这样复杂的筛选形式，也为设计本身增加了很多难度。因此，今天我们就来讨论讨论筛选控件

1、筛选存在的意义

筛选存在的对于整个表单来说是非常重要的，它可以帮助用户在表单茫茫多的数据当中进行快速的数据定位；可以对表单进行快速数据按照自己想要的方式进行划分，缩短用户对于数据的寻找时间；能够满足用户在工作中，实际业务场景的筛选

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

用几个我们CRM用户日常使用的场景来说：

比如今天作为一个电话销售人员，想要联系最近注册的用户时，通常会通过筛选来选出最近几天注册过，同时又没有销售更近的客户，进行一个优先级的排布；

再比如说，在销售周报当中，销售主管可以通过筛选得到每个人这周完成的状态，也可以通过筛选得出每个人对于线索的更进情况和对客户的流失状态等等，这些都可以通过各种各样的筛选形式来满足用户对于特定情况下的使用

筛选和搜索、导航的区别？

筛选可以通过多个筛选条件进行多维度的寻找，而导航、搜索只能通过单一条件进行指定筛选。
虽然在现在很多搜索引擎都可以支持多维度用空格去进行多字段的关键词搜索，但本质上区别不大
所以在B端项目当中，如果你有表单，那你就需要筛选

2、筛选的类型

我们将筛选分为基础筛选和高级筛选两种，两种筛选会根据业务场景不同，在不同的页面去使用

基础筛选：

基础筛选一般为系统预设好的筛选字段，具有很强的业务和场景的需求。基础筛选一般分为四个部分：筛选条件、筛选项、已选项、备选项

筛选条件：是指用户可以筛选的范围，
筛选项：是指用户可以选择的筛选项目
已选项：是指用户已经选中的筛选项
备选项：是指用户还没有选择的筛选选项

基础筛选更多作为用户快捷筛选的一种方式，因为一般使用场景当中用户几个筛选逻辑为“且”
同时筛选的逻辑也为简单筛选，所以在使用场景上只适合在对筛选要求不高的场景下使用。

高级筛选：

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

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

筛选字段：是指在筛选当中，所要的筛选项，一般为表单当中的所有可筛选的字段

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

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

高级筛选一般满足更多的用户场景，为用户多条件多字段筛选提供有利保障。

3、筛选的布局

上下布局

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

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