B端领域中简单粗暴的产品设计时代已经过去，产品如何提高体验、效率摆在了所有设计者的台面。那么，一个优秀的表格具备什么特征呢？本文作者对此进行了分析，一起来看一下吧。

【资料图】

存量竞争的时代里，我们应该思考如何让客户/用户“既吃得饱，又吃得好”。因此，作者想通过本文，详细跟大家分享表格在B端系统中的设计实例与思考。

一、认识表格

表格，一种常见的信息组织整理手段。常用于信息展示、归纳、分析等活动。

1. 表格的组成

表格是被公认的展示结构化数据，最清晰、最高效的形式。

表格页由按钮、搜索、筛选、视图、单元格、分页等元素构成。

2. 表格的样式

如何有效地传达信息内容，是表格设计的核心。

需要明确的是，表格本身应该是隐性的，如何让用户注意力集中在核心内容上才是表格设计的重点。

常见3种表格样式：

1）网格型

特征：表格有均匀而明显的分割线，边框单元格比较明显，类似于Excel。

优点：

适合展示大量的数据，能够清晰地呈现数据的结构和关系。 可以展示复杂的数据关系，如多层次的数据结构。 可以清晰地表达时间的先后顺序，适合展示具有时间序列的数据。

缺点：

网格线会增加表格的复杂度，使得表格显得更加拥挤，不易于阅读和理解。 如果数据量较少，使用网格型的表格会显得过于复杂，不必要地增加了阅读的难度。 如果表格中存在大量的空白单元格，使用网格型的表格会显得浪费空间。

2）水平线型

特征：仅对行进行分割，通过空白间距与对齐的方式对列进行分割。

优点：

适合展示相对较少的数据，易于阅读和理解。 易于比较同一行内的数据，方便找出数据的规律和趋势。

缺点：

不适用于展示复杂的数据关系，如多层次的数据结构列与列之间的逻辑与对比）。 不适用于展示具有时间序列的数据，因为这种表格无法清晰地表达时间的先后顺序。

3）斑马条纹型

特征：使用不同低饱和度颜色并隔行交替来区分数据。

优点：

能够使表格的数据更加清晰明了，易于阅读和理解。 能够减少阅读时的视觉疲劳，提高阅读效率。 能够突出表格的结构和层次，使得数据的关系更加明显。

缺点：

不适合展示大量的数据，其背景色或者文本颜色的变化会增加表格的复杂度。 不适合展示复杂的数据关系，如多层次的数据结构。 不适合展示具有时间序列的数据，因为这种表格形式无法清晰地表达时间的先后顺序。

二、优秀表格具备的特征

1. 设计目标

2. 设计案例

1）自定义筛选与列信息

数据表格，本身信息繁多，且需要满足不同行业不同角色的需求。

结合上述场景与席克定律，米勒法则，可提供通用字段指标的同时，为用户提供自定义字段指标的功能；

让表格与筛选具备弹性化的特征，以此满足个性化诉求，满足不同角色不同维度的筛选、统计、核对需求。

交互小知识：

2）固定表头

当阅读丰富且繁多的表格时，由于屏幕有限，用户不得不拖动横向或纵向滚动条来阅读信息。

结合场景与菲茨定律，将表头固定，能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思。

交互小知识：

3）精炼表头与聚合同类项

① 精炼表头

表头标题在能够概括的情况下，尽量简练、准确。

可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用。

② 聚合同类项

可根据表格内容的关系和业务含义，将表格内容进行归纳、分组，并将分组好的信息进行合并排列展示。

聚合同类项的目的是为了提高用户对表格内容的阅读效率。

信息较多且信息间存在逻辑关联时，可考虑使用此方式展示信息。

当然合并同类项会使行高变高，使得一屏展示的行信息变少，需根据场景慎重使用。

4）行与列的平衡与克制

根据目的及信息主体的不同，通过行与列的显隐变化，来更好地传达信息。定向地降低视觉噪音，提高信息的可读性。

通过隐藏表格中纵向的线，强调“行”的特性，使横向信息更加连续通畅，便于横向阅读、对比。

展示纵向的线，增加了“上下行”之间的信息的对比性。

5）排序

让无序信息内容进行有序排列，排序分为升序和降序，一般用在数据、时间、数量上。

表头排序在多个情况下，排序之间均为互斥，只执行一个命令。

6）内联操作

允许用户在表格中直接修改数据，而无需到单独的编辑页面。

7）水平滚动，固定关键数据列

表格呈现大量信息时，水平滚动是不可避免的。