做To B的同行都知道，降本增效一直是企业中后台绕不开的热点话题

做To B的同行都知道，降本增效一直是企业中后台绕不开的热点话题，现任公司业务涵盖仓（WMS）、运（TMS）、配、人（HRM），所做项目虽功能各异，但是有一个共同点——大量使用表格。

本文受有赞设计师美芳的启发，将我日常工作通过优化表格来提效的思路整理成文章，一方面是对企业后台的数据表格作一个简单的阶段性总结，另一方面给部门做一个年终分享。

一、什么是表格？

表格是展现数据最为清晰、高效的形式之一，它也是B端产品和设计师每天接触最多的组件，常和排序、搜索、筛选、分页等其他界面元素一起协同。在B端中后台中，常应用于：

• 一次性浏览大量信息-很多图表类型无法展示数据特点，而表格是组织大量信息通用性最高的一种表达方式，既可陈列信息，又可以表达信息之间的关系；
• 信息之间需对比-表格的归纳与分类，便于用户快速查询其中的差异与变化和关联；
• 快速确定并执行多种复杂操作-如对信息进行搜索、筛选、增删改等。

1. 表格的结构

通常表格的组成元素以及相关元素会有多个部分，根据不同粒度的用户目标将其解构三部分：

• 数据查看：表格的核心-显，用户用来阅览、对比和分析数据。
• 数据过滤：辅助作用，承载表格的查功能，将数据过滤，方便用户快速查询定位数据，一般位于表格上方。
• 数据操作：辅助作用，承载表格的增删改的功能，比如常见的“新增”、“删除”、“编辑”按钮。

2. 设计原则与目标

首先，我们要明确，什么是一个好的表格？我认为好的数据表格应便于用户对信息进行快速的扫描、查询、过滤、分析等操作，以获取深刻认知并快速准确完成目标任务。

表格是为可读性而生的，一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度；因此，拆分到表格的构成就是，设计目标就是：数据查看区-易读、易浏览、易对比；数据检索区-易查找；数据操作区-易操作。

二、数据检索——查

数据检索区可以看作表格的导航，按预定目标过滤出某种具有特定性质的数据，将操作者所关注的数据展示到前面，便于快速查看查看、对比、分析信息的操作过程；从用户角度出发，按不同粒度的数据过滤方式分为3种方式，分别对应不同程度的用户。

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

1. 搜索

搜索可以帮助用户在巨大的信息池中缩小目标范围，快速而准确的定位到目标数据，并速获取需要的信息。

由于考虑到用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项；通常上端搜索栏不被限定搜索范围，可以全部搜索。

a. 模糊搜索

• 优点：减少精准搜索带来的记忆负担；
• 缺点：容易把不相关的。

b. 带标签的搜索

• 优点：搜索匹配精准度高；
• 缺点：不方便，每次只能对单一条件进行搜索。

2. 筛选

筛选可以帮助用户缩小数据范围，逐步找到想要的内容；或者当用户的目标就是查看某一范围的数据时，筛选将是一种十分快捷的方式；在企业级中后台产品中，筛选的使用场景通常是后一种。

a.下拉筛选

• 优点：空间利用率高，起到了很好的收纳作用；
• 缺点：无法直观看到所有筛选项。

b. 平铺筛选

• 优点：操作效率高，筛选项一目了然，支持输入更多筛选条件；
• 缺点：空间利用率低，不适合选项太多的情况。

c. 表头筛选

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

3. 标签

使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容；主要样式有基础、卡片、胶囊等。

优点：根据标签，可以很清楚知道划分，切换tab就可以筛选内容。

缺点：分类必须覆盖所有情况，并且保证每一项没有交集，分类不能过多，9个已经是最大。

注：提升用户体验的一个小细节-我在其他B端表格的使用中发现，一部分表格在使用标签时，默认的是全部。个人认为比较好的一种方法是默认用户最关注的选项，而非全部，这样可以缩短查询路径；并给出条目，易于阅读。

4. 组合检索

在企业级中后台中，用户查看的数据往往属性比较多且不唯一，通过简单的检索方式很难精确定位到目标数据，所以，在实际使用时，常会将大量非交叉关系的属性进行罗列，搜索、筛选、标签切换组合出现，形成多属性组合检索。这种检索更适合于专家用户，他们对于目标数据有明确的定位，知道可以通过哪些属性精确定位到自己想要的数据

a. 展示方式

平铺显示：

选用高识别度、高使用频率的、对用户决策有意义的属性作为直接展示的组合检索条件，不建议过于广泛，数量最好不超过5个（7±2法则）。

• 优点：大而全能最大限度避免检索条件疏漏的可用性问题；
• 缺点：易用性不高。大而全可能为用户带来繁杂的第一印象，都是重点等于没有重点，增加用户的决策时间。

折叠展示：

如果多属性组合检索中的一部分检索条件不是高频率使用的，但又是必须存在的；则可通过折叠的方式将这部分检索条件隐藏起来，将高频率使用的、数据覆盖面广的1-3个属性直接展示出来。

b. 总结思考

在设置组合检索项时，应考虑每一项检索甚至是多属性组合检索是否有必要。需从实际场景出发，根据用户对各个检索项的使用频率及组合检索项的数量，来决定组合检索项是直接展示还是折叠展示；以及哪些属性直接展示，哪些属性折叠展示，为各检索项安排合理的展示方式。

5. 案例-检索区优化

产品现状：前言中提过，我司业务涵盖WMS、TMS、HRM，业务极其复杂，数据种类字段众多，使用的检索方式为组合筛选平铺展示，一半以上的页面筛选项超过了9个（不符合7±2原则），大而全的检索方式一方面占据首屏大部分空间，导致首屏屏效低；另一方面用户在寻找具体筛选条件时，仿佛大海捞针，增加了用户决策时间。因后台数据涉密，将下图-招聘中可公开的页面作为案例来可大家分享。

，现任公司业务涵盖仓（WMS）、运（TMS）、配、人（HRM），所做项目虽功能各异，但是有一个共同点——大量使用表格。

本文受有赞设计师美芳的启发，将我日常工作通过优化表格来提效的思路整理成文章，一方面是对企业后台的数据表格作一个简单的阶段性总结，另一方面给部门做一个年终分享。

一、什么是表格？

表格是展现数据最为清晰、高效的形式之一，它也是B端产品和设计师每天接触最多的组件，常和排序、搜索、筛选、分页等其他界面元素一起协同。在B端中后台中，常应用于：

• 一次性浏览大量信息-很多图表类型无法展示数据特点，而表格是组织大量信息通用性最高的一种表达方式，既可陈列信息，又可以表达信息之间的关系；
• 信息之间需对比-表格的归纳与分类，便于用户快速查询其中的差异与变化和关联；
• 快速确定并执行多种复杂操作-如对信息进行搜索、筛选、增删改等。

1. 表格的结构

通常表格的组成元素以及相关元素会有多个部分，根据不同粒度的用户目标将其解构三部分：

• 数据查看：表格的核心-显，用户用来阅览、对比和分析数据。
• 数据过滤：辅助作用，承载表格的查功能，将数据过滤，方便用户快速查询定位数据，一般位于表格上方。
• 数据操作：辅助作用，承载表格的增删改的功能，比如常见的“新增”、“删除”、“编辑”按钮。

2. 设计原则与目标

首先，我们要明确，什么是一个好的表格？我认为好的数据表格应便于用户对信息进行快速的扫描、查询、过滤、分析等操作，以获取深刻认知并快速准确完成目标任务。

表格是为可读性而生的，一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度；因此，拆分到表格的构成就是，设计目标就是：数据查看区-易读、易浏览、易对比；数据检索区-易查找；数据操作区-易操作。

二、数据检索——查

数据检索区可以看作表格的导航，按预定目标过滤出某种具有特定性质的数据，将操作者所关注的数据展示到前面，便于快速查看查看、对比、分析信息的操作过程；从用户角度出发，按不同粒度的数据过滤方式分为3种方式，分别对应不同程度的用户。

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

1. 搜索

搜索可以帮助用户在巨大的信息池中缩小目标范围，快速而准确的定位到目标数据，并速获取需要的信息。

由于考虑到用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项；通常上端搜索栏不被限定搜索范围，可以全部搜索。

a. 模糊搜索

• 优点：减少精准搜索带来的记忆负担；
• 缺点：容易把不相关的。

b. 带标签的搜索

• 优点：搜索匹配精准度高；
• 缺点：不方便，每次只能对单一条件进行搜索。

2. 筛选

筛选可以帮助用户缩小数据范围，逐步找到想要的内容；或者当用户的目标就是查看某一范围的数据时，筛选将是一种十分快捷的方式；在企业级中后台产品中，筛选的使用场景通常是后一种。

a.下拉筛选

• 优点：空间利用率高，起到了很好的收纳作用；
• 缺点：无法直观看到所有筛选项。

b. 平铺筛选

• 优点：操作效率高，筛选项一目了然，支持输入更多筛选条件；
• 缺点：空间利用率低，不适合选项太多的情况。

c. 表头筛选

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

3. 标签

使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容；主要样式有基础、卡片、胶囊等。

优点：根据标签，可以很清楚知道划分，切换tab就可以筛选内容。

缺点：分类必须覆盖所有情况，并且保证每一项没有交集，分类不能过多，9个已经是最大。

注：提升用户体验的一个小细节-我在其他B端表格的使用中发现，一部分表格在使用标签时，默认的是全部。个人认为比较好的一种方法是默认用户最关注的选项，而非全部，这样可以缩短查询路径；并给出条目，易于阅读。

4. 组合检索

在企业级中后台中，用户查看的数据往往属性比较多且不唯一，通过简单的检索方式很难精确定位到目标数据，所以，在实际使用时，常会将大量非交叉关系的属性进行罗列，搜索、筛选、标签切换组合出现，形成多属性组合检索。这种检索更适合于专家用户，他们对于目标数据有明确的定位，知道可以通过哪些属性精确定位到自己想要的数据

a. 展示方式

平铺显示：

选用高识别度、高使用频率的、对用户决策有意义的属性作为直接展示的组合检索条件，不建议过于广泛，数量最好不超过5个（7±2法则）。

• 优点：大而全能最大限度避免检索条件疏漏的可用性问题；
• 缺点：易用性不高。大而全可能为用户带来繁杂的第一印象，都是重点等于没有重点，增加用户的决策时间。

折叠展示：

如果多属性组合检索中的一部分检索条件不是高频率使用的，但又是必须存在的；则可通过折叠的方式将这部分检索条件隐藏起来，将高频率使用的、数据覆盖面广的1-3个属性直接展示出来。

b. 总结思考

在设置组合检索项时，应考虑每一项检索甚至是多属性组合检索是否有必要。需从实际场景出发，根据用户对各个检索项的使用频率及组合检索项的数量，来决定组合检索项是直接展示还是折叠展示；以及哪些属性直接展示，哪些属性折叠展示，为各检索项安排合理的展示方式。

5. 案例-检索区优化

产品现状：前言中提过，我司业务涵盖WMS、TMS、HRM，业务极其复杂，数据种类字段众多，使用的检索方式为组合筛选平铺展示，一半以上的页面筛选项超过了9个（不符合7±2原则），大而全的检索方式一方面占据首屏大部分空间，导致首屏屏效低；另一方面用户在寻找具体筛选条件时，仿佛大海捞针，增加了用户决策时间。因后台数据涉密，将下图-招聘中可公开的页面作为案例来可大家分享。