设计更好的数据表格设计

哦!糟糕的表格!你到底错在哪里了?

在互联网诞生的早期,表格是它的生存必需品。而如今,设计师已经把它们忘诸脑后了,取而代之的是全新的、更 fashion 的格式布局。尽管在web上出现的频率越来越少,表格工具依然能承载我们日常接触到的绝大多数信息,清晰的结构也是无以匹敌。

比方说, 我给你们列举一个我认为的数据表“之母”:美国的“协调关税表”,这张表足足有3550页,罗列着美国进口的每一件商品明细,包括“男士或儿童的大衣、机 车服、斗篷和夹克(包括滑雪夹克)”这些令人振奋的服装品类,还有风衣和类似的诸多商品(也有垫子和无袖夹克)。

可是啥是carcoat嘞?

数据表也会让人抓狂,当然这取决于设计得粗制滥造的时候它呈现出来的恐怖程度。数据表格设计非常关键:如果设计得当,那么再复杂的数据都易于阅读、做对比;可是一旦设计不当,信息将会变得非常不可思议。

所以,让我们一起把表格设计得尽可能得当一点吧,对吧?

了解数字

不是所有的数字生来都是平等。我说的可不是π和∞(尽管我在会议上经常这么做);我说的它们有的是表格数字 ,有的是旧体数字,有的是等高数字,有的是比例数字。

下面这个例子就是「旧体数字」与「等宽数字」差别。

图:旧体数字(old-style figures) vs.  等高数字(lining figures)

由于比较符合其他字母的大小和间距,旧体数字在句子中看起来会很美观;等高数字的统一性比较强,在表格中加强栅格化结构的效果。

比例数字和表格数字的区别并不是很大:

图:比例数字(Proportional) vs. 表格数字(tabular figures)

比例数字是为符合字形的色彩而设计——即通用尺寸和空间大小。表格数字,从另一方面说,个头都是差不多的,因此数列看起来显得整齐划一。尽管一两行字看不出两者有什么特殊区别,但表格数字在大型数据表更容易阅读,同时也减少错误。

使用等高表格数字

处理数据表时,宁可多做一些工作,确保正确使用数字字体(等高表格数字不是默认的数字字体)。Adobe的产品都有一个“opentype” 字体面板,可以用来设置恰当的字体。CSS为此则提供slightly-cryptic syntax语法开启此功能。除此之外,用 google 搜索也能下载到准确的字体。

不幸的是,很多漂亮的字体都要花些钱购买才可以。当然免费字体也有不错,比如:Work Sans 这个带等高g彩笔数字的字体是可以免费使用的。

如果你实在找不到合格的等高表格数字字体,那就用等宽字体(monospace fonts)的吧——它们看起来像“编辑代码”一样,就很适合展示表格数字。另外,苹果系统默认的字体「San Francisco」就包含优秀的等高表格数字,设置为小号时看起来也不错。

对齐

请谨遵3½规则:

1. 数字右对齐

2.文本左对齐

3. 标题与数据对齐

3½. 千万不用居中对齐!

图:美国历史人口数据表—Wikipedia

我们通常是从右往左读取数值数据的,这意味着我们第一眼看到的是个位数,然后是十、百、千、万……我们学算术时的顺序也是如此:从右开始数,一直数到左边。因此数值数据在表格中应该保持右对齐。

文本则是从左往右读取的。对文本的排序方法也是按照左到右顺序:如果两个单词左边首字母相同,那么按左起第二个字母,以此类推。没有按照这种顺序排列的会让读者抓狂,千万不要犯错哦。

表头通常与正文对齐。这使表格在垂直方向上很干净,而且也使全文连贯、一致。

居中对齐是最不该使用的对齐方式,因为它会让整张表格变得破乱不堪,会更难浏览,常常需要分隔线或图形元素。

数位一致 = 更好的对齐

想让表格看起来布局合理,有一个简单的方法,那就是保持数位一致——通常小数点后面的小数位数在每一列要保持统一。此外我向来坚持一个原则:数位用得越少越好。

适当使用标签

给你的数据做一个标签也挺重要。这些标签会让你的表格更容易让人接受。

图:密西西比河洪水预报——来自NOAA

表格标题

这听来很保守,为表格起个清晰明了的标题和其它的设计思路一样重要。有了一个好标题,表格就能独立使用:它可以使用到许多不同的场合中,甚至是外部的资源。

单位

数据是有单位的,每一个数据的单位都应要保持一致。但不必每条都加上,在每列的第一条数据加上单位就可以了。

表头

表头越短越好;让阅读者注意力集中在数据本身,如果表头文字过长,会占据大部分视觉空间。

惜墨如金

当你需要使用图形元素的时候,我的建议是尽可能减少使用,避免结构失衡。方法之一就是“惜墨如金”。意思就是,只要有可能,不要去使用什么元素,越简洁约好。

图:2016年美国棒球联盟击球统计—BaseballReference

分隔线(表格边框)

当你把数据排列整齐得当之后,分隔线就是多余的了。分隔线的首要作用是帮助我们减少不同元素间的间距,同时能有效地设置间距将元素区分开。若要使用,分隔线要浅色,不要妨碍快速浏览。

水平分隔线最好用,在长页面表格中它能协助我们有效减少垂直方向的拖沓感,尽管有大量的数据读起来也不费劲,同时能够看到数据相应的趋势。

关于分隔线,我总结了一个未经证实的观点:分隔条纹(斑马条纹)最不好用。真的,确实不好用。信不信由你。

背景

区分不同领域数据的方法之一是设置背景色:单个数据、总和或平均数,不同领域不同颜色,易于辨别。

如果要在表格中添加需要特别强调的观点,额外增加的信息,或者与前一时期相比有变化的数据,可以不用背景色,用一些元素开头,像✻, †或者▵,读者自然会明白。

此外,表格最好设置为单色。一张表格出现太多的颜色会产生误导,也会增加不必要的错误,如果是色盲的话问题就更严重了,这个你懂的。

小结

表格或许很枯燥,可是它非常强大,它拥有种类丰富的众多元素,能将我们提供的数据准确排版并清晰表达出来。通过设计更有效率、更清晰、更易使用的表格,我们可以大大减少以往令人痛苦的数据分析经历,提高理解的能力。

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部