B端筛选-聊聊平铺型筛选设计

在B端产品中，筛选功能是用户日常使用最频繁的功能之一。通常来讲，如果用户想找的内容清晰具体，可以通过关键词输入的方式搜索，而当用户游离在模糊区间时，才会使用筛选功能来查找。相比于c端产品，B端产品一般业务复杂度更高，用户角色多样，会涉及大量的信息和数据，因此筛选功能也更加复杂，需要根据用户角色进行配置，不同行业和职务的用户，需要的信息维度也不一样。良好的筛选功能可以帮助用户快速定位信息数据，缩短查找时间，平铺型筛选作为最常见的一种表单筛选模式，在产品中经常被使用。

一、什么是平铺型筛选？

所有筛选条件平铺展示，常位于整个表单的最顶部，多用于信息量大的产品。一般会有多个筛选分类，每个分类下列出若干具体的筛选条件项。方便用户对数据进行选择比较，获得精准的搜索结果。

二、平铺型筛选的结构

平铺型的结构一般分为两个部分：筛选条件展示区、选择结果展示区

筛选条件展示区一般左右布局，左边展示分类标题，右边为对应分类下的具体筛选项。每个分类默认显示一行，假如筛选项特别多，可以采用下拉展开所有选项。

选择结果展示区只有在用户进行选择后才显示，是对所选内容的一个整合，方便用户快速浏览，把控选择结果。倘若筛选分类比较少，用户能一目了然的看到自己选择的每项内容，也可以不集中展示。 

三、平铺型筛选的几种类型

1. 每个筛选分类仅支持单选

每个筛选分类下只可选择一个条件，切换选项时，之前选择的条件会自动取消选中状态。每个分类默认展示一行，如果选项过多，可以折叠收起，通过触发右侧展开按钮显示。 

2.筛选分类默认支持单选，可通过点击多选操作按钮实现多选

每个筛选分类默认只可选择一个条件，部分分类支持多选，在其右侧会增加多选按钮，点击后会展开带复选框的条件项，供用户进行选择确认。通常的操作是，如果用户对某条分类进行了筛选，选项会显示在结果展示区域，同时这整个筛选分类都将消失。

优点：隐藏已选的筛选分类，对于数据庞大的列表，可以有更多的空间展示相关筛选内容。

缺点：如果用户要更改某个多选分类下的已选条件，只能将此分类下的已选结果全部删除后再重新选择，会增加用户操作成本和时间。

因此，这种类型比较适合单选操作偏多，多选操作频率不高的场景。 

3.筛选分类同时支持单选和多选，可直接选择

这种类型的筛选需明确区分单选和多选分类，一般会在多选条件前增加复选框，帮助用户理解和选择。

优点：单选和多选区分明确，多选条件切换便利，方便用户进行对比。

缺点：筛选控件面积占比高，所以建议默认展示3-5个筛选分类，剩余收起，通过触发后展开。

此类型适合多选操作偏多，用户需经常切换对比的场景。 

三、平铺型筛选的应用

在日常使用过程中，针对不同的业务需求和用户使用场景，平铺型筛选还可结合其他控件模式进行组合使用，帮助用户更高效地进行筛选。下面让我们通过几个案例来看看具体怎么实现的吧！ 

1. 结合下拉选择控件展示更多筛选分类

默认展示使用频率较高的几个筛选分类，更多分类选项可以收折，采用下拉选择控件来展示。这样设计的好处一行能并列放置多个筛选分类，大大节省空间高度，为搜索结果预留出更多展示区域。 

2. 支持用户自定义设置筛选分类

在B端产品中，可以通过扩展自定义配置筛选，来满足用户多样化的筛选场景，适用不同企业、部门、业务的需要。支持不同用户在一定范围内选择自己需要的信息、筛选配置，筛选项顺序等，提高用户搜索的准确性和效率。

3. 支持用户保存已经设置的筛选方案

B端用户经常会进行重复筛选行为，保存用户已经设置的筛选方案，可以降低用户的记忆负担，帮助用户快速找到目标数据。 

4. 联动排序和快捷选项获得精准结果

采用排序和快捷选项进行联动筛选，可以缩小用户选择的范围，帮助用户获得更精准的搜索结果。 

小结

筛选最重要的目的是满足实际业务需求和用户需求，B端产品业务的复杂性、用户角色的多样化，决定了筛选设计在满足基本易用、美观的基础上，还必须具备可扩展性，设计的时候需要结合用户使用场景进行深入思考。

以上是自己在设计中的一点小总结，如有不正确的地方，欢迎大家指正，一起交流探讨。