5000字干货！B端「筛选」组件最新设计方法

一、前言

筛选虽然是一个较小的设计模块，但对于整个 B 端系统来说非常重要。

因为筛选的设计形式看上去单一，但其实内在的变化还是非常之多，导致很多时候我们在做设计的时候，就会非常迷茫。

其实早在 2019 年的时候，筛选就是我写过的第一篇文章，不知道还有没有从那篇文章就关注的读者，应该都是老粉了，可以评论区里留一下言让我看看。那个时候 B 端的整体要求比较简单，也就导致对于筛选的内容剖析并不深入，随着这些年的行业发展，你会发现筛选的变化非常之大。

既然我是从筛选开始讲起的，那我们就尝试重新将整个筛选进行相应的梳理，带领大家重新认识整个 B 端组件。

二、筛选的定义

对于筛选而言，其实就是数据检索的一种方式。

它主要用于系统中数据量较大的情况，会根据数据的条件、属性进行细致的分类，以便于缩小数据的结果范围。在去使用时，会存在有几个重要知识点：

1. 数据量大

在使用筛选时，一定是系统当中表格会存在大量数据。但由于在一个系统当中，我们很难做到对用户的真实数据进行预判，因此在设计表格页面时就需要搭配设计筛选，它几乎是一个必要条件。

2. 筛选运算关系

在用户使用多个筛选条件时，系统会默认使用 "AND"的条件关系。

除了 AND 之外，还会存在 "OR"以及"NOT"条件关系（也就是：且、或、非），如果要同时使用 且、或、非 的关系，则需要使用复杂筛选组件才能满足（在文章后半段会讲）

3. 筛选与表单关联

筛选当中的数据，其实会与其表单数据互通。

比如用户填写表单用了 商品类型、商品分类、商品类目 等选择类组件时，在表格当中就会使用筛选进行检索；用户填写表单用了 商品名称、商品条码 等输入类组件，在表格当中就会使用搜索框进行检索。

4. 筛选的意义

其实我们了解筛选的定义，并不能设计一个好的筛选。

在去做筛选需求，我认为最重要是理解用户使用表格的目的与习惯。

比如，我们现在你是一名 HR，在表格处会有 800 份简历，你的任务是找到 10 份合适的简历。

由于数据太多，你不能一个个去查看，因此就需要通过筛选来去做快速的寻找，会有那些筛选条件呢？

所以你会发现想要做好筛选，就必须得去明确表格的真实场景。因为每一个人的工作习惯不同，对于系统理解不同，因此需要去寻找到一个最折中的解决方案。

而在设计时，我们会更关注用户的使用习惯，也就是通过数据埋点、现场观察的方式，通过定性、定量的方式去做系统的分析。

三、筛选的布局

筛选的布局，也就是筛选会与表格如何进行搭配呈现。我们先来了解一下不同的布局形式：

1.上下布局

上下布局是最常使用的一种布局方式，将筛选放在表格内容上方，用户可以操作筛选条件并阅读数据。

上下布局本身没有字段的限制，如果字段较少，就能占据在表格上方，能够让用户快速操作；如果字段较多，就会让用户使用 收折、自定义 等方式进行优化，尽可能减少页面占比。

通常建议筛选高度不宜过高，如果超过三行（100px 左右）就要通过设计进行处理。

2. 左右布局

左右布局是系统当中较为特殊的方式，因为会将其放置在页面的左右两侧，让用户优先进行筛选操作，再阅读数据。

但由于左右布局通常都是纵向排列，在筛选项的呈现上会更为容易，因此会更适配筛选条件较多的情况。

3. 容器布局

通过 弹窗、抽屉、气泡卡片 等方式，将筛选条件进行呈现。在页面当中由于是非常驻的情况，因此只能适配非高频使用的场景。

4. 布局背后的逻辑

在这里大家一定要先明白一个概念，页面当中的布局，其实会与整个用户的屏幕尺寸（表格可使用尺寸）密切相关。

如果要明确筛选在哪个位置？我们必须优先了解两种数据：

1. 用户常用表格尺寸
2. 系统当中的类型

① 首先表格尺寸会决定我们整体的布局方式

这里要解决大家一个误区，在筛选当中我们更关注的是表格内容所能呈现的具体尺寸，而非屏幕尺寸。
（如果对屏幕尺寸不太了解，之前写过一篇详细的文章，感兴趣大家可以跳转查看。）

如果表格尺寸以宽屏为主，那我们就可以考虑使用左右布局方式排列；

如果表格尺寸以方屏为主，那我们就可以将布局进行上下排列；

如果表格尺寸本身太小，屏效很低，那我们就可以进行收折排列。

关于屏效，其实就是表格所占用整体面积的大小比例，计算公式为：页面面积 / 表格面积 = 屏效比

② 在系统当中的类型也很重要

在之前的文章中写到过，系统一共会分为四类，不同的类型对应的用户群体并不相同。

如果是 运营管理型、行业属性型 的产品，比如 ：有赞、小鹅通、美团商家后台、小红书千帆... 由于用户水平各异，导致我们再去设计的时候，需要去考虑将交互的难度降低，因此在设计的筛选的时候会更为简单。

如果是一些复杂系统，则会采取更难、占比更低的呈现形式，比如 容器布局，将筛选信息收折，因为一方面时复杂系统信息不可控，因此 使用容器会更容易解决筛选当中的多字段的情况；另一方面是复杂系统的信息密度很高，很难腾出大量空间去呈现筛选。

四、筛选的类型

随着时间的推移，你会发现筛选的类型非常多不同的形式。很多设计师都会根据自己的业务情况，开始自定义不同的类型形式。

因此我们就尝试将其进行总结～ 希望能够有一个更为完整的类型表帮助大家进行理解。

1. 表单筛选

表单筛选就是将筛选模块通过表单的形式进行呈现，通常位于页面顶部，能够使用户快速点击。它的门槛很低，几乎所有的产品都可以使用表单筛选。

当然，在顶部空间有限的情况下，我们也可以使用左右两侧的方式，去呈现表单内容。

如果表单过长，我们就会去考虑通过收折的方式进行排布，这几乎是每一个表单筛选的必备选项。

如果筛选字段本身不多，又想让筛选的样式变得很好，也可以考虑将整个筛选作为一个标签，放置在输入框内，这会和表单输入框形成区分，能够让用户快速知道这是筛选的内容。

2. 外露筛选

外露筛选严格来说是表单筛选当中的一个分支，其更加强调在筛选中的选项内容直接外露展示，能够更快更高效地进行数据选择。

比如在京东网页端搜索完一件商品后，就会提供较多的外漏选项来帮助我们提前进行数据的聚焦。

这里我们可以思考一下，京东为什么会将选项外露？

在这里其实就是由于搜索出来的结果过于宽泛，并且很难针对用户提供个性化的推送，因此可以将外露的筛选放置出来，尽可能的精准搜索的结果。

当然在目前的 B 端产品当中，由于外露的方式所占的空间过大，因此目前在行业中存在两种解法：

① 像有赞一样，基于传统的表单筛选。但会提供部分高频使用的筛选项进行外露，进而可以提高效率。

比如在 淘宝、京东的网页端，它们在商品价格处提供了金额的快捷选择，外露的方式会比用户单独进行金额的输入效率要高。

② 像纷享销客一样，由于本身的筛选逻辑异常复杂，会将选项外露的权限给到用户，让其进行自定义，从而解决用户高频使用的情况。

3. 指标筛选

严格意义上来说，指标算不上一种筛选类型，只是想把它拎出来，给到同学们进行学习。

在使用时，就是当用户想要确切了解不同类型中的具体数值时，可以使用指标图+筛选融合的方式，实现高效地操作。

比如在一个 HRM 系统当中，候选人表格里 HR 最关注的便是 候选人当前的进度状态。这时候我们就可以将指标图放置在表格顶部，帮助用户进行点击，从而快速实现筛选操作，同时也会有数据下钻的感觉，比起让用户重新进行下拉选择，易用性会更强。

4. 复杂筛选

复杂筛选其实是业务当中字段不可控的无奈之举。

如果你要去使用复杂筛选，也就意味着你的系统当中会存在有非常多的自定义字段，用户在筛选时会使用 且、或、非 等筛选条件，这时候你的筛选就没办法只能这么复杂。

比如 纷享销客、Coding、ONES、明道云、简道云... 它们其实都是在系统当中，提供大量的自定义字段需要用户进行配置，因此只能使用复杂筛选进行呈现。
为了让大家理解这个无奈，我举一个例子：

比如在 ONES 当中，由于自己是一个研发管理产品，每一个企业的研发流程与字段属性配置并不相同，因此会使用自定义字段让用户自行配置自己的业务。

那自定义字段里面如何进行筛选操作就会非常头疼，大多数情况下就只能使用复杂筛选来解决问题，因此就会出现下面的这种情况。

这里需要解释一下复杂筛选的基本结构，第一个选择器为 筛选字段的选择、第二个为 筛选对应的运算符、第三个为 所筛选对应的值。

对于复杂筛选来说，我们也会去考虑在设计上对其进行优化。

5. 表头筛选

表头筛选其实也是我们的老朋友，早在 19 年的时候我们就曾聊到过。

它就是在表格的表头处提供筛选的入口，当用户点击过后去执行筛选的操作。不过在表头筛选当中，会存在部分特殊情况。

① 为复杂筛选进行优化，因为复杂筛选需要进行复杂的筛选项选择，而用户所关注的数据通常也是表格当中的前半段数据，因此便可以实现点击表头，添加筛选项的操作。

② 在表头直接筛选，点击筛选图标后，直接展示下拉选项。这就和 Excel 的表格筛选如出一辙，使用门槛也会相对较低。

表头筛选其实也是筛选过程当中的一种补充，算是筛选不好用时我们可以考虑的一个范畴，比如在复杂筛选时，就可以与表头筛选进行结合。

6. 筛选组

既然筛选很麻烦，那如果我每天进入到一个系统当中，都会去使用某一类筛选条件，那有什么办法吗？这时候就会去考虑「筛选组」

它其实就是将自己常用的多个筛选条件，通过保存的方式在系统当中记录下来，这样就能实现日常高配筛选的快速访问。

比如在飞书招聘当中，由于候选人的数据字段很多，每一个 HR 的使用习惯并不相同，因此在筛选中你会发现可以添加筛选值以及保存当前筛选数据放置在左侧，能够快速呼出自己想创建的数据。

除了飞书，在纷享销客也有类似情况，我们可以添加筛选，保存对应的筛选条件，不过在纷享销客上它们做的更极致，能够去配置表格的 排序方式、表格中每一个字段的顺序，这样会使整个功能更强大。

当然在 ONES 当中也会存在类似情况，不过他们的解法不一样，会将保存的筛选组放在顶部，进行 tab 展示，这也会是一种不错的解决方案。

7. AI 筛选

随着 AI 能力的不断扩充，你会发现 AI 与 筛选 之间，存在着一种不可描述的魔力。

因为在业务当中，想要去做数据的筛选分析本身就比较复杂，因此可以通过 AI 的加持，使整个筛选的难度降低，为产品创造出新的机会点。

比如 JIRA 当中，我们可以通过 AI 筛选的方式，将复杂的程序筛选逻辑变为更简单的直接筛选方式，明显的效率更高。

在有赞当中，也会有类似的 AI 功能提供给用户进行对话操作，进而执行筛选。

8. 特殊筛选形式

其实对于常规的字段筛选以外，我们在日常工作中还会有图片类的筛选情况。

比如我们在监控系统当中，我们就可以使用对应的图片筛选去精准数据结果，这类型在日常工作中比较少见，因此提供给到大家作为一个参考。

五、如何去做好筛选？

其实对于筛选来说，如何才能做好它？

1. 明确它的使用位置

这句话听上去有些奇怪，但做过筛选的同学就知道，因为我们除了在表格中会使用筛选之外，还会将它与其他很多地方进行关联。

比如在数据分析页面当中，我们就需要通过筛选的方式，结合图表得到我们想要的数据内容。

再到规则的配置页面中，我们很多数据条件配置选项，也可以使用复杂的筛选得到解决。

落地到实际的业务，比如我需要去做相应的广告投放，也会通过筛选来配置相应的投放规则。

因此你会发现，虽然我们刚开始只会去讲它与表格之间的关系，但真正落地时，它的使用场景会非常的多。这也就导致了我们在做设计的时候，不能仅仅局限于一个维度。

你需要考虑不同场景当中可能会存在的解决方案，不过在前期时可以理解为筛选维度单一，因此将方案收敛一下，做得更为简单。

2. 确定交互变种

因为筛选本身，它能以非常多不同的方式呈现。只要是选择类的组件，我们都可以使用筛选的方式来进行设计。但由于思维的惯性，导致我们从一开始只会去考虑下拉选择。而一些常见的交互变种，能够给我们带来意想不到的收获。

比如滑块，它就能在一些特定的筛选场景中进行使用。因此，需要大家有较为敏锐的嗅觉，同时要在工作中收集足够多的筛选内容和案例，为后面的设计方案做足准备。

3. 循序渐进

在设计筛选功能时，我们不能期待一劳永逸的解决方案。每个产品都有其独特的特性和需求，这意味着没有一种万能的策略能够适用于所有场景。

因此，我们必须根据每个产品的具体情况，有针对性地规划和构建筛选功能的框架。

设计筛选功能应该是一个逐步推进的过程，既要有短期内可实现的计划，也要有长远的视角。这要求我们具备前瞻性，能够预测业务发展中可能遇到的问题，并据此灵活调整设计策略。只有这样，我们才能确保筛选功能不仅能够满足当前的需求，还能适应未来的发展，保持其扩展性和灵活性。

在产品开发的早期阶段，如果产品的功能和字段较少，我们应该避免将筛选功能设计得过于复杂。简化设计不仅可以提升用户的使用效率，还能有效降低开发成本。

随着产品的不断迭代和业务需求的增长，我们可以逐步引入更高级的筛选条件，以此来不断优化用户体验并提升产品的整体性能。这种逐步演进的策略，才是最为合理和有效的。

最后

关于筛选，我认为更多是需要设计师在组件层面上做更多的了解，然后再进行拓展。

在产品初期，我们需要使用表单筛选来尽可能满足产品的通用性，让整个项目能够快速上线。

在产品成长期，我们就可以对表单进行更多特殊样式的定制，比如外露指标，以优化表单筛选所带来的不足。

在产品成熟期，就可以使用更多更为复杂的筛选来满足产品的上限，以获得更多的可能性。

当然，不同产品的情况可能还是会有所不同，因此这里只能提供一个建议，大家还是需要根据自己的情况来做出相应的调整。

因为需求在变，组件在变，不变的是你的思考～

欢迎关注作者的微信公众号： CE青年Youthce