element-ui的表格增加行_专题设计篇1—数据表格设计（上）

从事B端设计的同学一定知道，B端产品使用频率最高的就是表单和表格，那么就关于数据表格的设计，我总结了一点经验分享出来，大家一起探讨优化。

首先，数据表格结构

熟知的数据表格，主要有以下两大类：简单表格（二维表格）、复杂表格（交叉表格）

表格结构如下图所示：

简单二维数据表格结构

复杂交叉表格结构

从表格的结构来看，它主要有以下特点：

1. 结构化
   结构化，主要通过数据表格的“列”体现。把对象的属性维度，通过“列”进行全量管理，拿到数据表格，即便没有内容数据，只有表头就可以掌握数据的结构组成；
2. 可扩展
   数据表格的可扩展性主要表现为以下方面：
   表现1：数据表格的属性通过“列”管理，数据对象通过“行”管理，数据表格的天然属性，就是他的“列”、“行”可以无限扩展，实现数据表格纵向容量的扩展；
   表现2：“行”兼容分组性能，可以扩展体现层级关系，实现表内数据关系的管理扩展；
   表现3：表格的“列”可以充当“外键”属性，与其他数据表进行关联，实现数据表格的横向扩展；
   表现4：数据表格的操作，可以基于表格的业务特征，无限扩展配置业务数据操作；
3. 容量大
   从表格的3个方面的可扩展性，不难发现，数据表格的数据容量无穷大、数据属性关系无限延伸扩展。
4. 便于数据的纵横向对比、便于数据统计
   数据表格的内容数据，可以基于数据间的业务关系、相关关系进行纵横向对比，主要体现为“行与行”数据对比、“列与列”数据对比；
   同理，数据表格也可以实现行小计、行统计；列小计、列统计；
5. 操作管理
   数据表格的操作管理基于作用对象数量分为：对象操作、批量操作；
   基于操作的通用性分为：通用操作（增/删/改/查）、业务操作（基于业务特征配置扩展）；

其次，数据表格应用场景

基于数据表格的分类及其结构，我们不难归纳出其应用场景如下所示：

1. 场景一：数据本身具备结构化特征；
2. 场景二：数据体量比较大；
3. 场景三：数据的属性维度还不确定或者数据分组还不确定，通过数据表格方式管理，方便后期扩展；
4. 场景四：数据结构统一，但体量比较大，且数据之间有一定的相关关系进行比对和统计；

最后，数据表格设计技巧

设计从以下两方面阐述：操作交互层面、视觉呈现层面

视觉层面表现如下：

对齐

- 表头+对应列内容对齐方式统一

- 文本列，左对齐，符合人眼从左到右的阅读模式；

- 数字列，右对齐，小数点对齐，对于数据的大小通过位数一目了然，提升识别度；

- 其它类型列，居中对齐；

表格对齐效果如下图所示：

数据表格对齐示例

大小

- 行高

行高与内容一定要保证一定的留白，以此来保证页面的呼吸感，提升辨识度和阅读的舒适度；

对于行无分组且列较多的数据表格，可以设计成“斑马”样式，以此形成视线导引，避免错行情况；

反之，既无行分组，列也较少的情况下，尽量去掉一切装饰性元素，通过大的行间距留白来区分；

对于有行分组的数据表格，可以通过增加分组分割线或者分组背景填充色区分，突出组的概念；

设计示例如下图所示：

简易表格，保证呼吸感、聚焦内容

拥挤且行线条繁琐

内容量大，斑马行引导视线，行高保证呼吸感

凸显“分组”概念

- 列宽

基于内容分配列宽，但也不能无限制宽，可以给定一个最大宽度限制；这样保证数据节奏感的同时，提升阅读舒适度；

对于交叉数据表格，保证列分组之间的间距＞分组内列间距，以此突出分组的概念；

数据内容过多的情况，列宽不足可以通过以下设计方式呈现（内容不是特别多，鼠标悬浮，通过浮层展示全量内容；内容较多，通过展开行呈现内容；内容特别多，通过“行详情”，增加层级的方式呈现内容）；

行展开，不同列宽示例效果如下图所示：

列宽相同，没有层次感

列宽基于内容适配，保证节奏感

列宽相等，信息层级弱

列宽组间&组内不同，层级明显

信息层级

对于强调列，居中对齐，且尽量靠左，符合用户“F”型阅读习惯，从左到右，被注意到的概率逐渐降低；譬如，“状态”列，也可以适当通过不同颜色区分，但状态数量尽量保持≤5，遵循“7±2”原则；

保证7列，通过固定重要列，表格左右滑动查看

统计

对于数据表格，数据本身容量一般都是比较大，为了减轻用户处理信息的负担，尽量能够呈现直接的统计结果；

常规统计有以下几种：行小计、行统计；列小计、列统计；

结合图表，通过与表格联动的方式呈现数据趋势/相关等统计结果；

表格统计示例：

表格统计示例

表格&图表联动查看示例：

合同金额&回款金额柱状图与全部销售额/回款明细表联动

图表联动展示数据