深度拆解9类B端筛选组件，扒出设计的四大问题（上）

筛选，我相信各位同学一定不会陌生，它有着不同的展示形式，不同的使用方法，很多时候遇到你只能躺平，选择基础筛选进行呈现。

甚至我们会说：“一个 B 端表格页面设计得是否优秀，核心在于是否具备高效、清晰的筛选功能。

今天我们将从 筛选与搜索的差异 入手，逐步拆解筛选逻辑、分类梳理筛选类型，最终帮大家掌握筛选设计的落地 SOP，包括如何匹配业务场景选择筛选类型、如何规避设计误区。

更多我的文章：

那好话不多说，我们正式开始～

在开始之前先来说说 什么是 B 端产品，我们通常也叫做管理后台。

这里会有两个问题：“它管理什么？到底如何管理？”给大家三秒钟可以思考一下。

首先它管理的是数据，无论是 ERP 系统的订单数据、CRM 的客户数据、OA 的流程数据，你都会发现管理后台就是在不停的对数据进行补充、整合。

那到底应该如何管理？简单来说就是 数据的“增删改查”，筛选其实就是查询的一种重要方式。

比如一个客户关系管理系统（CRM），销售人员去拜访客户就会提前查询客户信息，来了解客户关注内容进而去组织销售话术。

那这里的筛选应该如何设计？怎样设计既能高效便利，同时也具备扩展性？那今天我们系统盘点筛选组件究竟应该如何设计？

一、筛选与搜索的差别

这里我们先来讲讲筛选的邻居“搜索”，因为很多同学其实对于这两者之间的差别不太了解，只知道它们都是在工具栏当中，都是在做查询数据的工作。但在功能上是有明显的区分：

搜索是对系统的关键词进行精准匹配，比如用户 ID、手机号、昵称、地址等信息内容

筛选则是给出产品的固定条件选项，比如归属人、状态、类型 等，你可以按需勾选条件，就能得出对应数据

这里稍微多说一句，因为所有的 B 端系统都是由字段组成，而在大的分类上，字段主要包含有输入、选择、上传三大类型。

搜索服务于输入类字段，比如刚才讲到了 用户 ID、手机号、昵称、地址等 都是得让用户自行输入才会得到，因此在表单里输入，在表格当中也是输入搜索，所以系统是关联的。

筛选则是选择类字段，也就是归属人、状态、类型 等，在 B 端系统当中，选择字段尤为重要，所以在表单处选择同样在筛选处也是相同逻辑。

理解筛选与搜索的差异后，我们再来说说筛选～

二、筛选的逻辑

在筛选的过程当中，有着非常多重要的逻辑需要提前掌握，我们通过简单的快问快答，帮助大家快速拆解。

第一题：什么是 且、或、非

这是筛选当中必须要了解的基础运算条件。

且就是筛选的条件必须同时满足才能出结果，比如一个电商数据分析师，需要筛选潜在高意向客户，在筛选条件为「时间在近 30 天有支付订单、近 30 天累计消费金额≥800 元、近 30 天订单次数≥2 次」，必须同时满足才会满足用户需求。

或就是这些条件满足任意一个就能出结果，比如还是电商数据，需要寻找对产品有兴趣的潜在客户，就需要筛选「近 90 天内有过人工咨询记录、近 30 天内访问产品详情页≥6 次、近 180 天内提交过试用申请」，三个条件满足任意一个，这样就能涵盖更为全面。

非就是这些条件必须排除掉才能出结果，比如电商数据，因为涉及到刷单、退款的情况，需要将其进行清洗，因此在筛选条件上就需要满足「订单状态≠测试订单、支付状态≠已退款、客户类型≠内部员工」，需要同时排除这些数据。

所以对应的筛选运算规则，其实背后都是用户在使用时需要深度分析使用的最为重要的工具～

第二题：在B端系统当中多个筛选条件默认的运算规则是什么？

A：且 B：或 C：非

在 B 端系统当中，最常用的运算规则就是且，也就是取多个筛选当中的交集。

比如下面这三个筛选项，所计算的呈现规则就是 「销售负责人是李强」且「销售时间是 近一个月」且「价值为高价值」的客户，这样就是一个典型的且的关系。

因为这种思维方式是最符合用户的思考逻辑，这也是众多 B 端系统当中的常见逻辑。

 

第三题：且、或、非可以同时存在于一个筛选组合当中吗？

A.可以

B.不可以

它们可以出现在同一个筛选组合当中，因为实际的业务往往是“多条件、多逻辑” 的复合场景。

比如在教育管理系统当中，班主任要筛选 初三年级且数学月考不及格 或 非 住校生 的学生，来针对这两类人群进行重点管理与监控。

但在筛选的设计当中，为了让用户理解逻辑，我们需要通过 条件组（如括号、层级缩进、虚线框）让用户直观感知分组关系，避免依赖抽象的优先级规则。

第四题：如果你是一个设计师，应该如何降低成本表达这个关系？

因为逻辑较为复杂，所以在筛选时有些基础办法可以降低门槛。

① 可视化展示筛选运算，如果用户对于且、或逻辑不太了解，可以使用图标快速表示

② 实时校验逻辑规则，不要出现相互矛盾的筛选逻辑

这个功能其实不太好做，但 ONES 做了一个最简单的逻辑判断。在且条件当中，同一筛选条件不得选择两次，这样用于避免在且条件当中经常出现的相互矛盾的筛选逻辑。

三、筛选的类型

好的，准备工作已经完成，我们就可以顺利了解筛选的类型。

由于筛选的类型众多，我们会按照 业务复杂度、容器差异 两个维度，来对筛选进行归类。
通过业务复杂度，将其分为：基础筛选、高级筛选、自定义筛选

按照容器差异，将其分为：标签筛选、折叠筛选、浮窗筛选、抽屉筛选、表头筛选、AI 筛选

1. 基础筛选

基础筛选是将 高频使用（使用频率≥80%）的筛选条件进行固定，一直保持在页面中的核心位置，不折叠、不隐藏，让用户能够直接看到的筛选类型。

这是一个最为基础的筛选方式，在常见的 Ant Design、Arco Design 的页面模板当中都会有基础筛选的身影。

使用基础筛选最为重要的便是 快速触达，用户打开页面就会查看筛选条件，不需要点击“更多”“展开” 等入口，这能满足 B 端用户 高效完成日常操作 的核心需求。

在使用基础筛选时，我们需要注意以下问题：

① 基础筛选条件的数量不宜过多，一般 3-4 个最为合适

因为筛选条件过多，就失去了常驻的意义。但在实际业务当中，我们也需要考虑 5 个、7 个这类极端场景，毕竟常驻是最为基础的方案，难免会遇到特殊情况。（需要在筛选的规则当中进行梳理，将交互逻辑呈现清楚）

② 基础筛选当中，排序规则会非常重要

一般按照 高频-低频 的方式，从左到右依次排列，对于高频低频的获取方式，我们可以数据埋点、卡片分类、问卷调研等多种方式进行搜集。

③ 筛选基础，样式就不基础

基础筛选有着较多的筛选样式，大家可以结合自身业务进行选择，这里推荐样式一与二，因为展示效率更高～

这里列举一些常见的基础筛选产品，大家可以一并查看：

2. 高级筛选

高级筛选是较为复杂的筛选形式，它为了满足更多 低频、复杂、个性 的业务需求，通常会提供相对独立筛选面板，展示更多的筛选条件。

独立面板也就是我们后续会提到的 浮窗筛选、抽屉筛选、表头筛选...，所以它们的关系也会相对复杂。

高级筛选与基础筛选最大的区别在于：

基础筛选只能覆盖 3 个左右的高频筛选，而高级筛选可支持 10 + 维度的灵活组合；常驻只能使用且的逻辑相对简单，而高级可以有条件组嵌套支持复杂业务逻辑；常驻位置较为固定，而高级则有面板加持，可以更为灵活。

其实选择高级筛选或者基础筛选，最大的话语权还是场景。

如果你的筛选是简单筛选几个条件，那基础筛选就已经足够，反之对筛选条件、筛选效率有着更高要求，我们则会考虑更为复杂的筛选方式。

在使用高级筛选时，这些问题尤为重要：

① 因为高级筛选需要访问独立面板，因此在入口的设计就会尤为重要。一般会用文字链接或者图标来提示用户，便于寻找。

② 基础筛选与高级筛选可以并存，因为角色不同、使用场景不同，常驻可以作为高频使用的固定模块，高级则作为特定角色需要更多筛选的补充，这部分放在下面 筛选的原则-筛选角色化 给大家详细说明。

这里列举一些常见的高级筛选产品，大家可以一并查看：

3. 自定义筛选

自定义筛选则是在高级筛选的基础上，进一步业务化。

它是为了满足 字段不固定、需求差异化 的业务场景，用户能够自定义选择 筛选字段，配置字段的筛选规则。

使用自定义字段最重要的核心要素就是 突破固定字段限制，因为高级筛选是针对产品预设好的固定字段进行筛选，自定义则是用户可以自行选择字段，用于适配更为灵活、多变的业务场景，如 CRM 的客户自定义字段、OA 的流程表单（因为不同的公司对于 流程、客户信息的管理不太相同，因此需要提供自定义字段进行支持）

在设计自定义筛选时，我们的方案选择主要受到“筛选频率、条件复杂度、界面空间”的影响。

① 小入口+大弹窗，以筛选图标作为入口，点击过后弹窗展示所有筛选条件。这种方式适合 中低频（每天 1-3 次）使用筛选，界面空间紧张用大弹窗容纳复杂配置

② 展开收起式，当用户点击筛选后，将表格与工具栏之间的部分展开，用于呈现筛选条件。它能够避免弹窗的跳转感，筛选时用户的视线可以无需离开表格区域，适用于 筛选条件数量多、高频使用的场景

③ 固定常驻式，在顶部区域固定，默认展开，这样就无需点击入口，这样更适合“筛选是核心工作流” 的场景

自定义筛选是最难设计的，在使用过程中会有 四大基本元素。

筛选入口：需要让用户快速找到入口，同时不干扰主界面。

逻辑运算区：主要就是 且、或 逻辑的展示，只是在运算区域里面，需要考虑切换时究竟应该如何做？

神策数据是通过文字方式，快速展示 且、或 逻辑，并且支持手动直接切换，这个方案目前看来是用户最容易理解的。

字段选择区：选择你所需要筛选的字段，点击 添加、选择，整体逻辑较为简单。

条件组管理区：筛选条件全部展示过的后续动作，比如保存，批量录入 等相关动作都可以放在条件组管理当中，进行呈现。

4. 标签筛选（外露筛选）

接下来的 标签筛选、折叠筛选、浮窗筛选、抽屉筛选，都是对容器进行分类。因此我们需要进行展开讲解，穷举一下不同容器的形式和变化。

先来说说标签筛选（外露筛选）

标签筛选是将重要的筛选选项设计成“可点击的标签按钮”，将筛选过程当中的选项直接来进行展示，目的是为了能够让筛选条件，直接暴露出来给到用户进行使用。

它最重要的是提升效率，针对高频使用的筛选维度将其外露展示，将多步操作压缩为 一步点击，同时能够凸显当前的筛选状态，避免用户忘记自己选了什么。

在使用标签筛选时，需要注意这些内容：

1. 在标签的设计上，因为存在的样式相对较多，所以我们可以根据自身产品的视觉层级，进行逐一选择。
2. 涉及到多角色使用标签筛选时，需要重点考虑角色化的差异，因为其常驻，如果内容都不是用户关注的点，标签常驻的意义也不会很大。
3. 当标签选项超过 7 个时，则需要考虑对此筛选内容是否需要进行单独处理，因为选项过多，用户使用标签筛选也不会特别清晰。

比如我想外露的内容是各种状态，我就可以将其放在顶部，进行指标图+筛选功能的杂糅，像在小红书千帆系统当中，对于订单的多种状态，就会使用这一技巧，进行呈现。

5. 折叠筛选

折叠筛选则是用隐藏的方式，按照使用频率将筛选条件分层。高频条件平铺展示、低频条件收折在面板当中，点击展开的筛选类型。

它最重要的价值是要平衡“空间与效率”的问题，当筛选条件 4-8 个时，如果全部平铺页面就会过于冗余，如果全部隐藏又会增加操作步骤，折叠筛选通过 “高频展示 + 低频折叠”，让用户既能快速操作高频条件，又能按需调用低频条件，兼顾 “便捷性” 与 “功能完整性”。

正因为这样的特性，所以很多基础固定的筛选一旦变多后，通常就会使用折叠的方式进行呈现。

6. 浮窗筛选

浮窗其实是将筛选包起来，用浮窗进行承载，临时唤起，用完即走。

在设计时首先会有一个统一的筛选入口，浮窗弹出后设置对应条件，然后点击确认、取消，浮窗自动收起，不占用页面只提示有筛选条件。

对于系统而言，它为什么需要浮窗筛选？本质上会有三个原因：

1. 节约空间，因为在列表当中，如果把筛选条件进行常驻会挤压核心内容，列表当中的屏效相对较低，这时候筛选则会呈现为隐藏-唤起的模式，我们列表所展示的信息数量就会变多。
2. 降低页面复杂度，当筛选条件是常驻时，条件多了过后就会导致使用起来异常困难，特别是针对那些使用频率本身偏低的用户来说，更是无效信息，因此收纳起来就能降低复杂度，使用户的专注度能够更加聚焦于核心任务当中。
3. 更强的适配性，假如在需要设计移动端的筛选，也可以复用统一的交互，并且用户点击筛选图标已形成记忆。

我们之前就有相同的业务，需要将桌面端的部分移植到 Pad 端与移动端，使用浮窗性价比就会更高。

7. 抽屉筛选

抽屉筛选就是浮窗筛选的另一种表达，它主要是平衡 筛选条件与界面空间 的另一种选择。
但确实会发现现在的抽屉筛选已经没有当年的雄风，感觉大家就避之不谈，基本不会使用它。其实也会有几个原因：

1. 抽屉需要来回滑动，操作上不如弹窗直接高效，视觉上也缺乏弹窗的简洁与高级感；
2. 展开时内容常偏向主屏幕一侧，容易造成明显的视觉偏移，影响整体体验

很多之前沿用抽屉筛选的产品，现在都在调整自己的交互方案。

并且因为抽屉的不稳定性，我们其实不太建议同学们使用抽屉进行选择自己的选项条件。

8. 表头筛选

表头筛选是一种相对特殊的筛选形式，它是将筛选入口放置在头部，提供给到用户进行快捷的筛选操作。

本质上是在满足长时间使用 Excel 用户的使用习惯，因为在 Excel 当中表格众多，对于筛选只能使用一种影响较小，最为通用的做法，随着 B 端产品的发展，也会发现很多设计方式都被得到了延续。

在理解表头筛选时，会有两种使用场景：

① 空间较少，使用表头筛选可以进行轻量的筛选动作。

这样点击筛选过后便可直接选择筛选选项，执行筛选操作。你可以看到飞书文档，在主页列表中就会这样设计便可以轻量满足筛选需求。

② 字段太多，需要表头筛选带入更多筛选值，进行筛选安排。

这种方案本质上是针对高级筛选的体验补充，记住！是需要高级筛选 or 自定义筛选时才会用到筛选策略。

因为在这两种筛选当中，需要选择筛选字段，有大量的选项，这对用户来说会十分影响其正常使用，通过表头处的点击，就能够将字段默认带入，缩短筛选路径，提高筛选效率。

这种方案的表头筛选也会有相应弊端，首先是表头空间问题，因为表头本身需要展示的信息就相对较多，比如冻结、排序、等等，过多的操作会导致表头过于复杂，如果还加上筛选，表头空间就会更大，更不适合进行使用。

其次用户理解成本也会相对过高，因为很多行业属性相对较为简单的 B 端产品并不会使用这类筛选，对于用户初次使用也会有不小的负担。但表头筛选目前的普及率仍然比较低，使用比较频繁的便是纷享销客。

9. AI 筛选

来到重点，AI 筛选。它不仅仅是未来筛选设计的大趋势，更是能够在产品层面解决 筛选复杂化的问题。

比如刚才的高级筛选、自定义筛选，无疑都是在增加用户的操作层面，他们需要不断的选择，才会得到自己想要的结果。而 AI 筛选的价值在于它解决了 用户自然语言与程序逻辑执行 之间的壁垒，让筛选能够响应用户的自然语言诉求。

比如我想筛选最近一个月的高价值客户，就只需要在 AI 输入框中说出自己想法，然后就能得到筛选结果。

程序逻辑执行，程序就可以根据自身知识库，对高价值客户进行拆解，逻辑变为 客户时间为：最近创建一个月客户、类型为高价值。

这样一来，其得到的结果就会更为简单合理，但是在设计 AI 筛选时，它的难度还是会相对较大。

因为 AI 的结果可能会出现差错，那对应的修改策略就会极为重要。

所以我们可以看到，像 Jira 对于 AI 筛选就会有更多的修改入口让用户对于筛选结果进行快速修正，同时在入口上也需要做更多的设计进行提示。

对于 AI，其实目前行业当中的解决办法已经非常丰富，筛选只是其中的一个类别，大家感兴趣后续我们可以专门出一期来盘点一下拥有 AI 模块的 B 端产品～想看就点赞！！