表格被公认为是展现结构化数据最为清晰、高效的形式，除了表格本身的结构，我们需要提供贴合场景的数据过滤方式，辅助用户快速查询定位数据。如何设计一个好的表格数据过滤体验，本文将从数据过滤的基础方式、布局、触发时机等多个维度，结合项目案例解析相关设计。
全文2811字 阅读约12分钟
数据过滤的方式
当用户目标相对明确时，可借助搜索快速帮助定位到目标信息。
a.输入搜索
适用场景：高频且对用户有决策意义的场景，由于需要手动输入难以保证精准性，原则上搜索建议使用模糊匹配，可通过空格等形式支持多内容字段搜索，部分唯一性场景可要求精准搜索。
适用场景：数据量大但用户有明确目标时，通过输入即时匹配选中过滤条件，一般可支持多条件的匹配搜索。
当用户目标相对模糊，或希望查看某一范围的数据，筛选可帮助用户圈定数据。
适用场景：最常用的筛选交互，可兼容多种数据类型、结构，整体过滤条件较多时，需要节约页面空间，给出一个额外的空间便于扩展操作。
优点：操作较灵活，节约空间，给出一个额外的空间便于扩展操作。
适用场景：需要明确展示筛选项内容，频繁切换以定位目标信息时适用。
优点：筛选内容直观，一定程度上降低用户理解成本与操作成本，灵活度高。
缺点：筛选项多时占用空间，且将失去直观与便捷的优势。
适用场景：对于权重高的筛选条件，可以清晰的展示当前的数据拆分维度，一般用于状态、节点数据的拆分，原则上没有交集的数据内容区隔。
缺点：对于拆分选项数量有要求，个数过多或单个字长过长均影响阅读和操作。
触发数据过滤
手动触发
输入或选择完成后，需要通过按钮点击或回车等方式触发。建议在过滤条件交叉影响时采用此种方式，同时需考虑搜索信息量、复杂度，如需复杂运算或大量数据过滤也建议使用手动触发。
输入或选择后实时匹配数据，适用于过滤条件不交叉，数据运算不复杂的情况适用，否则频繁加载等待则体验不佳
过滤区展示
适用场景：上下结构是比较常见的方式，过滤条件一般建议不超出两行（平铺除外），过滤条件过多时建议进行收折，将常用的筛选项前置，满足高频筛选场景。
优点：符合用户常规的阅读习惯，同时最大化利用横向空间。
缺点：当过滤条件过多时会占用纵向高度，可以考虑收折相对低频的过滤条件。
适用场景：当过滤条件较多，且需要频繁切换筛选时可以考虑采用左右结构。
优点：通过滚动的方式可以保证便捷的滚动查看过滤选项，同时节省了纵向空间。
缺点：过滤条件较少时不适用，如表格本身列数较多，占用横向空间将影响表格本身的查阅。
适用场景：当部分筛选项必要但不重要/使用频次较低时，可采用弹出/浮层，通过页面中的入口可方便调起。
优点：不占用页面空间但可以满足过滤需要，也便于复杂过滤的扩展。
缺点：会对表格本身产生遮挡，过滤操作与过滤结果之间有明显的空间区隔，割裂感较强。
适用场景：表格结构相对简单，过滤条件不存在关联时可以使用，一定程度上节约空间，对于复杂业务产品不建议使用。
多过滤条件组合优化
在笔者近期的项目中，针对部分列表页面进行了优化，其中就包括过滤筛选区域的重组。
背景：在我司质量管理平台中，部分用户作为提交质量反馈的角色，有独立的页面查看自己提交的反馈。页面为上下结构的经典表格模式，页面头部包括11项过滤条件，与业务相关的字段都包含在内，但实际用户访谈的过程中我们发现，很多用户都无法通过现有的功能找到目标数据，即使相关的过滤条件赫然在列，用户依然选择忽视。
原始方案：
设计目标显然是提升用户过滤数据的效率，大而全的组合筛选平铺展示，能覆盖业务场景，但用户在寻找具体滤条件时犹如大海捞针。另一方面，占据屏幕大量的空间，虽然PC端的可视面积相比移动端富足，但依然需要考虑屏效。
1. 从用户场景出发
B端产品都具有较复杂的业务逻辑，但最终还是需要依赖用户使用去推进业务，因此设计始终遵循一个原则：用户目标高于业务逻辑。
通过用户调研访谈数据，我们发现，提交人角色的用户在提交行为上频次不同，相应的个人历史数据量存在较大的差异。显然只有中高频用户需要使用过滤，进一步分析他们在后续跟进所提交的反馈时，用户查看反馈的行为分为两种：a.时刻关注，b.间歇关注。
对于时刻关注型的用户，通常通过反馈状态可以识别反馈。对于间歇关注的用户通常会代入提交时间，与其他条件进行组合过滤。同时反馈ID在系统内具有唯一性，也是常用的搜索过滤方式。
2. 数据验证
为了进一步验证场景分析的准确性，我们监测了平台用户行为数据，获取各过滤条件的实际使用次数，并拆分为高中低频进行对比。
数据分析发现，‘反馈ID’、‘提交时间’、‘反馈分类’、‘关键词’、‘状态’属于使用中高频，与场景分析得出的结论一致。‘相关订单号’、‘主要处理人’虽低频但有存在的必要，‘问题定性’、‘产研任务’符合业务逻辑，但实际并不符合用户查找数据逻辑，因此在后期的优化方案中做了弱化处理。
过多的过滤条件增加了用户决策的成本，因此很多用户会直接选择放弃。数据参照在设计过程中是最有力的依据，但通过埋点得到数据需要时间，也可以采用用户访谈或问卷的形式收集数据。
在原有的方案中，页面标签被拆分为‘我创建的’、‘我关注的’、‘我处理过的’、‘我的产研中’，实际是四个不同业务场景的数据，数据存在耦合，明显违背了标签用于区隔没有交集的数据内容原则。
‘状态’属于用户关注度极高（权重高）的过滤字段，且属于当前用户使用的中高频过滤条件，因此更适合作为标签分页（Tab）的形式方便用户切换查看。
当存在多条件过滤组合的情况下，理想状态过滤条件应是交叉关系，目的是通过交叉条件缩小数据范围，精确过滤数据。
而现有方案将需要过滤的字段直接罗列，导致在实际使用时是非交叉过滤。‘反馈ID’、‘关键词’、‘相关订单号’为并行的关系，但现有的过滤组合中他们各占一席，实际过滤时并不产生交集，因此后续方案中将合并为多字段的模糊搜索。
‘反馈分类’与‘所属BU’存在包含联动关系，同属于非交叉过滤，且‘所属BU’操作相对低频，因此后期将与‘反馈分类’合并为多层级的收折录入。
最终我们提取高频、符合用户使用行为的过滤项，部分必要但低频的过滤项折叠隐藏，部分拆分至表格内部即时过滤生效，以反馈‘状态’作为标签切分反馈数据。
优化后更符合提交角色用户查看动线，贴合过滤操作路径，同时节约屏内空间，提升整体过滤、阅读效率。
在实际的项目中，我们需要更多根据产品特性和用户场景去分析和思考，匹配数据过滤形式、将他们灵活的组合，找到最合适的方案，希望阅读本文可以带来一些启发。
本篇文章来源于微信公众号: TripDesign
