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