设计更好的数据表格设计 (Data Table)

Sponsor

哦！糟糕的表格！你到底错在哪里了？

在互联网诞生的早期，表格是它的生存必需品。而如今，设计师已经把它们忘诸脑后了，取而代之的是全新的、更 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

分隔线（表格边框）

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

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

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

背景

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

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

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

小结

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

延伸阅读与参考网站

Five Thirty Eight 一直是优秀的参考网站，它所有的数据都用Decima Mono字体。这是专门设计的，使大量的数据浓缩在一个较小的空间里。

Butterick’s Practical Typography 是我经常浏览的网站，如果哪天我对字体排版有疑问，直接到这个网站，一切就都解决了——很实用，记得马一下！

最后再讲一个，如果你在写数据文章，不去参照Edward Tufte就亏了。因为它的敏感度在写作设计上的运用简直是锦上添花！

翻译：设计达网 QSF
英文原文：https://medium.com/mission-log/design-better-data-tables-430a30a00d8c?ref=webdesignernews.com#.2q2n7fuhy

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。