操作项|B端表格设计指南

编辑导读：表格是展现数据最为清晰、高效的形式之一，它也是B端产品和设计师每天接触最多的组件，常和排序、搜索、筛选、分页等其他界面元素一起协同。本文作者总结了一套B端表格设计指南，一起来看看吧。

文章插图
大家好，我是小鹿，今天为大家分享的是「表格设计指南下篇」
在之前的文章中小编已经分享过上篇，里面介绍了表格的概念和数据查看的知识点，没有看过的小伙伴可以快速回看????《B端表格设计指南（上篇）》
本篇文章就来聊聊数据筛选和数据操作。
一、数据筛选-查数据筛选区可以看作表格的导航，按预定目标过滤出某种具有特定性质的数据，将操作者所关注的数据展示到前面，便于快速查看、对比、分析信息的操作过程。
从用户角度出发，按不同粒度的数据检索方式分为3种方式，分别对应不同程度的用户。

搜索：当用户有相对明确的选择目标时，需定点查看，数据多且杂乱无规律；
筛选：用户目标相对比较模糊，游离于一个大概的范围时，通常用于一些有清晰分类的数据；
标签：查看无交集的数据内容，通常伴随时间、状态的流转。

文章插图
1. 搜索搜索可以帮助用户在巨大的信息池中缩小目标范围，快速而准确的定位到目标数据，并速获取需要的信息。由于考虑到用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项。通常上端搜索栏不被限定搜索范围，可以全部搜索。
1.1 模糊搜索
优点：减少精准搜索带来的记忆负担
缺点：容易把不相关的信息带出来，如搜索手机号131，把ID含131数字的信息也带出来了
1.2 带标签的搜索
优点：搜索匹配精准度高
缺点：不方便，每次只能对单一条件进行搜索

文章插图
2. 筛选筛选可以帮助用户缩小数据范围，逐步找到想要的内容。或者当用户的目标就是查看某一范围的数据时，筛选将是一种十分快捷的方式。
2.1 下拉筛选
优点：空间利用率高，起到了很好的收纳作用
缺点：无法直观看到所有筛选项

文章插图
2.2 平铺筛选
优点：操作效率高，筛选项一目了然，支持输入更多筛选条件
缺点：空间利用率低，不适合选项太多的情况

文章插图
2.3 表头筛选
优点：筛选当前列，更直观，一般情况下表单左侧数据筛选频次越高
缺点：筛选的内容仅限于特定、单次列的筛选，对于首次使用者来说陌生，交互形式需要学习

文章插图
2.4 tab标签
使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容（可以是同性质，也可以是不同性质）。主要样式有基础、卡片、胶囊等。
优点：根据标签，可以很清楚知道划分，切换tab就可以筛选内容。
缺点：分类需覆盖选项，并且保证每一项没有交集，分类不能过多，超过7±2个选项可选择下拉筛选。

文章插图
提升用户体验的一个小细节：默认用户最关注的选项，而非全部，这样可以缩短查询路径，同时给出条目，让用户清晰明了每个选项的数量，便于操作。