微盟设计 | 如何设计B端表格数据过滤功能

检索方式

1. 如果这家店东西没那么多，直接的方式是从将整个店的东西从头到尾看一遍，直到看见你需要的，这是最本能寻找信息的方式：直接查找。
2. 如果你逛的是一家大型超市，直接查找显然不切实际，但可以根据那件商品大致判断出是属于哪一类，先找到分类，然后定位分类下的这个商品。这是第二种寻找信息的方式：按分类查找。
3. 如果你买的商品有一些特殊标记（如颜色是红色），就可以直接去找对应颜色，这种寻找信息的方式就是：按标记查找。

搜索

导航

优点：划分清晰，切换便捷

筛选

优点：节省页面横向空间，尤其在使用表格展示数据时能最大化利用横向空间来展示表格字段，便于阅读和操作。

• 当筛选项或常用筛选项较少时使用
• 使用时，可以收起不常用的，保证筛选区不会占用太多纵向空间，同时将常用筛选项露出，以此来满足用户的业务需求和使用场景。

优点：能将所有筛选字段都直接展示出来。节省页面纵向空间，可对筛选条件和结果列表同时查看。当筛选条件较多时可纵向滚动，有较强的的扩展性。

• 常用筛选条件较多，且需要直观展示出来的场景下使用。
• 需要频繁切换筛选项，并需要对照查看筛选结果时使用。

优点：节省空间，可以兼容任何形组件及各种组件组合。

• 页面空间有限，且筛选功能不是很高频使用；
• 筛选内容较多，且形式较为复杂时使用；

平铺式将筛选条件对应的选项全部或者部分平铺展示出来。

• 筛选条件较少（2行以内），且需要直观展示的筛选项的场景下可以使用；
• 用于信息密集型产品，需要在筛选项中频繁切换以定位目标信息。如：电商、视频网站；

优点：非常节省空间，并且对多种数据格式兼容。例如：日期、地址、时间等。缺点：无法直观看到筛选项。已选项与对应筛选条件也无法很好对应起来。使用时需要点击后才能选择选项，不够快捷。

• 有大量筛选条件要展示，且需页面空间有限的场景下使用；
• 使用该方式，由于已选项的可见性不太好，因此，需要通过其他方式弥补已选项可见性；

优点：筛选当前列，比较直观；

• 用于页面有表格时，但受到表头信息的限制，筛选条件仅限于特定、单次列的内容。
• 筛选前和筛选后，需要在表头上样式上给用户明确区分。

如何设计

• 筛选入口与承载的筛选控件在空间关系上关联较弱，导致用户的操作路径被延长和信息隔离的问题；
• 当筛选功能被收起在一个小入口时，它的可见性也会随之降低的问题。

针对筛选模式的可见性，可以分三个点去考虑：筛选条件本身的可见性、筛选项的可见性和选中项的可见性；

• 筛选条件的可见性通常是由使用频率来决定的。但有时候，不同用户对信息的需求会不一致，这时就很难判断哪个频率更高。面对这种情况，只能将所有的筛选条件展示出来供用户选择。
• 筛选项的可见性影响模式的选择。平铺式筛选的可见性比下拉式更高。但有些业务场景并不需要让用户看见筛选项。当然，我们还需要结合具体业务场景考虑，如：用户是否熟悉备选项？是否期望强化备选项？
• 选中项的可见性即当选中选项后再次查看选中项的难易程度。可以从两点去考虑：用户进入该页面，系统是否已经默认有选中某些选项，那么这种状态需要让用户感知。以及用户对自己选择的选项，是否需要回看。

• 需要设置条件后点击“确认/查询”按钮，才能触发结果。适用于用户一次性添加多个条件，一并进行查询，对应的结果肯定是用户需要的结果。
• 查询一个条件后实时出结果。适用于用户需要基于结果判断是否需要添加查询条件。基于查询条件一点一点收窄结果，直到找出目标。

设计案例

从上图可以看出，主要问题如下：

• 筛选模式难理解：使用开关控制筛选条件的显示/隐藏；

• 功能分区不明确：筛选和操作混排在一起；

• 空间利用率太低：筛选项全部平铺，影响结果数据的查看；

• 体验路径不连贯：弹窗筛选无法明显感知内容变化，切换条件时成本过高；

• 体验缺乏一致性：更多筛选条件有的用弹窗承载，有的在当前页平铺；

总结起来，以上的问题主要影响了信息获取效率、提高了数据过滤的操作成本、影响了筛选体验一致性。因此，接下来的优化方向如下：

• 优化信息结构

• 优化操作路径

• 考虑方案扩展性

接下来通过以下几个维度进行分析：筛选布局、筛选模式、筛选结果触发方式、多个筛选条件的处理方式，与其他元素的关系。

分析总结：

• 从页面横向空间考虑，左侧已被导航占据了较宽的空间，右侧又多为复杂表格（如商品、订单列表），上下布局是最好的选择；
• 从筛选条件的使用频率来看，最主要的几个业务场景（商品、订单）。存在一部分条件常用，一部分不常用。有频率的差异性，因此，可根据需要进行显示/隐藏；
• 从用户对备选项的预判来看，基于主要业务场景（商品、订单），用户不存在认知问题，再结合空间利用率综合考虑，下拉框模式是个很好的选择；
• 从已选项来看，基于主要业务场景（商品、订单），用户每次进来目标基本上是比较明确的，如：我就是要找这一类商品或这一类订单。假如筛选结果为空，我就会认为没有这一类数据。尽管没有找到目标，但我的任务也已经结束，所以回看选中项的可能性也不大。
• 从性能考虑，商品和订单数据都较大较复杂。加上查询商品和订单更多场景是一次性添加多个条件，一并进行查询。因此使用点击按钮后查询更合适；
• 对于更多筛选条件的展开方式，从已有业务场景来看，筛选条件的数据格式都较为简单（输入、选择、日期），这种情况下，折叠展开方式就能较好的承载，并且要比弹窗/抽屉展开更流畅。考虑到筛选条件过多，展开后会影响列表数据的展示，因此需要处理好纵向空间和扩展问题；
• 商家后台业务中存在需要基于状态查看的订单/商品，由于操作较为高频，下拉框筛选样式虽然更能平衡效率与空间问题，但效率较低，因此特殊场景下需要配合标签切换的方式。

旧版：搜索、筛选和更多筛选条件排列无序，不符合阅读习惯
新版：筛选区信息组合方式基于用户行为路径：搜索 > 筛选 >更多筛选

旧版：筛选、全局操作、批量操作混合在一起，难以识别，操作效率低
新版：清晰区分筛选和批量操作，保持操作与操作对象（表格数据）的亲密性

旧版：使用弹窗承载筛选条件，有打断感，且搜索和其他条件组合筛选场景下要在不同地方选择，成本较高。
新版：在当前位置直接展开，筛选后实时感知结果数据变化。设置最大高度，确保表格信息能正常浏览。

旧版：常用的状态过滤（如订单状态、商品审核状态）收在了高级筛选中，加长了用户的操作路径。
新版：在原来基础上筛选上结合了标签切换模式。更加高效便捷。

总结

http://www.woshipm.com/pd/4151270.html http://www.woshipm.com/pd/4310935.html