网页设计 » 用户体验 » 设计更好的数据表格设计 (Data Table)

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

发表于: 用户体验, 视觉设计. 评论 (4)
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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论4 Responses to “设计更好的数据表格设计 (Data Table)”

  1. 智慧果知识产权 - 回复

    佩服,学习了

  2. 工控资料窝 - 回复

    受教了,赞一个

  3. 阿歪 - 回复

    为什么说“关于分隔线,我总结了一个未经证实的观点:分隔条纹(斑马条纹)最不好用。真的,确实不好用。信不信由你。” 作者也不说一下理由

    • 一字 -

      斑马线多了反倒没有什么用,而且表格色差越多,越容易让人忽略重点,并且容易出错。与其频繁使用斑马线,不如使用彩虹线条,同样是用颜色来区分行,每隔一条和每隔七条,显然七条更不容易出错。


{ 发表评论 }