笔者通过调研B端后台系统的筛选场景应用，总结出几种基本筛选、高级筛选和组合筛选场景，并在此基础上分析自身产品的筛选场景应用，总结出最终的产出优化设计方案，希望对大家有所启发。

1. 筛查场景介绍

在B端后台系统设计中，列表过滤是最常见的场景应用。过滤的作用一方面是帮助用户从海量信息中快速提取、定位信息，以提高效率；另一方面是将列表的功能科学地概括出来，为用户提供具有相同特征的分类信息。

最近我们正在研究B端产品领域的后台系统列表筛选场景设计，因此我们希望通过本次的设计分析，从产品可操作性的角度进行设计优化实践，从而达到提升用户对产品的满意度的目的。

2. 过滤场景类型

过滤就是显示一种类型的数据，隐藏另一种类型的数据。

常见的筛选形式有：类目筛选、关键词筛选（搜索）、条件筛选、组合筛选等，大致可以分为基本筛选和高级筛选，通常是多个筛选条件的多维度组合，其实和单一的搜索和导航是有区别的。

三、竞品分析与研究1、筛选元器件

图（1）

例如：腾讯云

图（2）腾讯云负载均衡实例

2. 高级过滤器

图（3）

3. 联合筛查

（1）平铺式

扁平化即把所有筛选条件全部罗列出来，在B端产品场景中用得比较少，在C端产品中比较常见，方便用户直接获取选项内容，减少操作步骤。

例如：网上购物平台

图（4）京东网上购物商城

图（5）当当网上商城

图（6）腾讯云报警策略

通常为了避免过滤项过多，会提供展开和折叠操作来折叠每个过滤条件。

（2）折叠式

例如：阿里云、腾讯云

图（7）阿里云服务实例

图（8）腾讯云数据迁移

4. 标头筛选类型

是列表内置的过滤表单，类似表格的操作，点击表单中的过滤按钮，可直接调出过滤字段。

例如：阿里云、华为云、腾讯云等。

图（9）阿里云盘

图（10）来源：华为云监控

图（11）腾讯云数据库实例

4. 产品筛选场景设计优化实践

我们基于现有的平台页面，整理出涉及筛查场景的页面，这里选取一个典型场景进行分析优化。（实际页面属于机密，因此隐藏）

图（12）模块原始页面

第一步，拆卸：

页面上的“隐藏”过滤表单需要点击“过滤”按钮展开，可以发现显示的信息选中的选项都是默认的，这种场景下默认所有数据量较大，而过滤的作用就是对数据进行过滤，通过事先定义好的过滤值进行操作。

第二步分析：

根据上述过滤项与过滤值的对应关系，列表的常见过滤方式可以概括为列表上方过滤和列表头过滤。

第三步，总结：

标头过滤器

放置在列表头上的过滤器，受列表头信息的限制，过滤器的内容仅限于特定的、单列的过滤。

拆开“故障报警”过滤项时发现，有几项可以对应表头信息，可以将它们放在列表表头标签上进行单项下拉过滤，这里的场景是下拉多选，如图（13）所示

图（13）标头筛选优化

列表上方的筛选

过滤功能位于列表上方，与表头过滤不同，它可以一次性进行多列的交叉过滤，并且过滤值不局限于列表列的内容。

搜索

搜索栏可以灵活方便地进行数据查询，当数据量较大时，可以使用搜索功能来提高用户查看数据的效率。拆开原页面的筛选项，发现其中两项涉及输入搜索，对用户的内存占用较少。模糊搜索可以提高查找数据的效率。在使用这两次搜索时，发现通过模糊搜索筛选得到第一版数据，基于此版数据查看列表中的另一条信息，进行下一步的精准搜索，最终得到用户想要的数据。或者同时输入两项（中间用某种分隔符隔开）进行精准查询，可以事半功倍地提高用户效率。如图（14）所示

图（14）搜索优化

日期和时间

因为时间过滤一般都是针对某个时间段的查询，需要有开始时间和结束时间下拉优化平台，所以这里将日期过滤条件单独处理展示。操作后发现，“所有时间”是默认的开始时间-最晚时间百度搜索下拉框如何刷★64xl.com下拉神器，抖音搜索关键词推广，其他选项都是设置快捷时间段，这些时间段都是平台用户最常用的时间段。

由于日期选择的条件超过5个，且自定义时间长度不固定下拉优化平台，因此设计采用整体下拉框选择的形式，时间选项放在里面，选择结果反馈在下拉框中。如图（15）所示

图（15）日期选择器优化

按钮

原按钮过长，将样式改为纯文本或者图标加提示，并区分主次按钮的样式。见图（16）

图（16）按钮优化

最终的优化方案如图（17）、图（18）所示。

图（17）优化方案（一）表头筛选+扁平化布局

图（18）优化方案（二）表头筛选+折叠

五、总结

通过调研筛查场景在产品平台上的应用，我们总结出了基础筛查、高级筛查、组合筛查的几种应用场景，并在此基础上对自身运维平台的筛查场景进行了分析总结，最终输出了优化的设计方案。

其实在设计优化的过程中，产品的操作便捷性、信息层次、扩展性等都会促使设计师结合场景去思考问题。筛查功能当然要符合实际的场景需求，需要考虑如何设计才能符合用户的实际操作路径，是否符合用户的认知，能否引导用户使用筛查功能。设计之路漫漫，艰辛难熬，如有不足，欢迎大家批评指正~