时间:2014-01-28所属栏目: 交互设计 来源: 热度:

由于工作原因,经常接触到表格。我们发现,表格不但广泛的运用在各类数据收集和分析,同时通过表格这样一种二维矩阵来整理和陈列信息时(即便最后的展示方式并非一个典型的表格样式),能够很好的表达信息之间的逻辑关系,易于帮助理解横纵信息之间的关系。
在实际的网页设计应用中,表格横纵相互独立又相互关联的模式尤其适用于:
1.组织和展示大量的信息
表格简单的结构不但能包含大量的信息,且同时保证信息的可读性,便于读者快速扫描信息、从大量的条目中找到所需的信息。
2.展示对比性信息
通过合理的布局,表格能清晰的展示出同类对比信息,便于读者分辨不同条目信息之间的关联和区别,从而关注到关键、问题条目。
总的来说,一个构造清晰的表格布局,将大大提升读者对信息的接收速度和理解程度
例如下图中苹果官网对不同型号mac book的信息陈列方式,就采用了表格的结构,清晰的展示了4款不同的macbook,及各自的性能、售价等属性,同时读者第一眼就可以扫描到并理解表格结构,横向是4款macbook的排列,纵向分别列出了各自的属性,然后进一步就可以根据自己的兴趣点就4款macbook的不同属性进行对比,信息完整且便于扫描。

如上所述,表格常用来展示大量的、对比性的信息,因此提高表格的可读性、便于用户快速扫描,是表格设计的关键。本文仅就笔者阅读过的几篇关于表格设计的文章结合工作中的一些拙见,整理成文,分享如下。
研究如何提高表格可读性之前,我们先简要阐述下表格的组成要素,这里我们暂且这么总结:表格 = 标题 + 表头 + 行标签 + 单元格数据(信息),如下图

表格标题是对表格整体的描述,应包含表格数据的来源及属性,使读者对表格内容有所认识,例如数据收集的日期、地区及其表格数据的其他属性。
行标签和列标签(表头) 是对本行/本列数据的描述,可以理解为是表格的骨架,是用户快速扫描并接收表格布局的关键要素。
单元格数据(单元格信息)这里就不在多说,是表格的主体内容。
1. 根据表格的用途,设计表格的布局
如下图,两张表格中所包含的数据完全相同,是关于10座山峰的高度和人类登顶年份数据。不同的是他们的成列方式:表1a根据山峰的高度排序陈列,而表1b则根据人类登顶山峰的年份排序陈列,一眼之下,这两张表无设计优劣高下之分,决定使用两站表中的哪一张的根据是这组数据的用途,如果这张表是用于向读者展示世界上的TOP 10山峰,则山峰的高度则是重点信息,a表的展示方式会更加合适;反之,如果这张表意在展示10大高峰中,哪座山峰是人类最先登顶的,人类先后登顶的时间顺序是读者的主要兴趣点,则表b就更加适用。

2. 减少读者计算
其实类似上一点,表格的指标也不是永远固定的,而是从读者阅读表格的目的出发,调整所需展示的指标。在原始数据的基础上给出差值、总计等分析性的数据,可以直达用户阅读的目标,而尽量减少用户心算或者线下处理的过程。例如下图展示了2010年与2009年两年的公司财政报表,查看两年的具体数据当然必要,但深入分析,读者之所以要并列查看两年的数据,目的在于对比两年的数据变化,因此将指标变化情况列出能帮助用户更快的达成目标。

3.精简指标,创造信息层级