从事B端设计的同学一定知道，B端产品使用频率最高的就是表单和表格，那么就关于数据表格的设计，我总结了一点经验分享出来，大家一起探讨优化。
首先，数据表格结构
熟知的数据表格，主要有以下两大类：简单表格（二维表格）、复杂表格（交叉表格）
表格结构如下图所示：
简单二维数据表格结构
复杂交叉表格结构
从表格的结构来看，它主要有以下特点：
- 结构化
结构化，主要通过数据表格的“列”体现。把对象的属性维度，通过“列”进行全量管理，拿到数据表格，即便没有内容数据，只有表头就可以掌握数据的结构组成； - 可扩展
数据表格的可扩展性主要表现为以下方面：
表现1：数据表格的属性通过“列”管理，数据对象通过“行”管理，数据表格的天然属性，就是他的“列”、“行”可以无限扩展，实现数据表格纵向容量的扩展；
表现2：“行”兼容分组性能，可以扩展体现层级关系，实现表内数据关系的管理扩展；
表现3：表格的“列”可以充当“外键”属性，与其他数据表进行关联，实现数据表格的横向扩展；
表现4：数据表格的操作，可以基于表格的业务特征，无限扩展配置业务数据操作； - 容量大
从表格的3个方面的可扩展性，不难发现，数据表格的数据容量无穷大、数据属性关系无限延伸扩展。 - 便于数据的纵横向对比、便于数据统计
数据表格的内容数据，可以基于数据间的业务关系、相关关系进行纵横向对比，主要体现为“行与行”数据对比、“列与列”数据对比；
同理，数据表格也可以实现行小计、行统计；列小计、列统计； - 操作管理
数据表格的操作管理基于作用对象数量分为：对象操作、批量操作；
基于操作的通用性分为：通用操作（增/删/改/查）、业务操作（基于业务特征配置扩展）；
其次，数据表格应用场景
基于数据表格的分类及其结构，我们不难归纳出其应用场景如下所示：
- 场景一：数据本身具备结构化特征；
- 场景二：数据体量比较大；
- 场景三：数据的属性维度还不确定或者数据分组还不确定，通过数据表格方式管理，方便后期扩展；
- 场景四：数据结构统一，但体量比较大，且数据之间有一定的相关关系进行比对和统计；
最后，数据表格设计技巧
设计从以下两方面阐述：操作交互层面、视觉呈现层面
视觉层面表现如下：
对齐
- 表头+对应列内容对齐方式统一
- 文本列，左对齐，符合人眼从左到右的阅读模式；
- 数字列，右对齐，小数点对齐，对于数据的大小通过位数一目了然，提升识别度；
- 其它类型列，居中对齐；
表格对齐效果如下图所示：
数据表格对齐示例
大小
- 行高
行高与内容一定要保证一定的留白，以此来保证页面的呼吸感，提升辨识度和阅读的舒适度；
对于行无分组且列较多的数据表格，可以设计成“斑马”样式，以此形成视线导引，避免错行情况；
反之，既无行分组，列也较少的情况下，尽量去掉一切装饰性元素，通过大的行间距留白来区分；
对于有行分组的数据表格，可以通过增加分组分割线或者分组背景填充色区分，突出组的概念；
设计示例如下图所示：
简易表格，保证呼吸感、聚焦内容
拥挤且行线条繁琐
内容量大，斑马行引导视线，行高保证呼吸感
凸显“分组”概念
- 列宽
基于内容分配列宽，但也不能无限制宽，可以给定一个最大宽度限制；这样保证数据节奏感的同时，提升阅读舒适度；
对于交叉数据表格，保证列分组之间的间距＞分组内列间距，以此突出分组的概念；
数据内容过多的情况，列宽不足可以通过以下设计方式呈现（内容不是特别多，鼠标悬浮，通过浮层展示全量内容；内容较多，通过展开行呈现内容；内容特别多，通过“行详情”，增加层级的方式呈现内容）；
行展开，不同列宽示例效果如下图所示：
列宽相同，没有层次感
列宽基于内容适配，保证节奏感
列宽相等，信息层级弱
列宽组间&组内不同，层级明显
信息层级
对于强调列，居中对齐，且尽量靠左，符合用户“F”型阅读习惯，从左到右，被注意到的概率逐渐降低；譬如，“状态”列，也可以适当通过不同颜色区分，但状态数量尽量保持≤5，遵循“7±2”原则；
保证7列，通过固定重要列，表格左右滑动查看
统计
对于数据表格，数据本身容量一般都是比较大，为了减轻用户处理信息的负担，尽量能够呈现直接的统计结果；
常规统计有以下几种：行小计、行统计；列小计、列统计；
结合图表，通过与表格联动的方式呈现数据趋势/相关等统计结果；
表格统计示例：
表格统计示例
表格&图表联动查看示例：
合同金额&回款金额柱状图与全部销售额/回款明细表联动
图表联动展示数据
