怎样优化数据表格计划

金融产物中的表格真不少，来看看计划时必要留意的细节吧！

令人不爽的表格。他的题目毕竟出自那边？

在互联网早期期间，表格是根基组成元素之一，其后被计划师用更新更切合潮水的机关代替。固然此刻表格在收集上很少呈现，但它仍在我们的一般基本交换中网络组织了大部门信息。

譬喻，我以为有一份表格可以算是表格的鼻祖：美国的“和谐关税表”，它足足有3440页，并列出了每种可入口到美国的商品，包罗浩荡的条目记载如“汉子或男孩的大衣、短大衣、披肩、斗篷、带风帽的夹克（包罗滑雪夹克）、风衣、和相同商品（包罗带衬里的、无袖的夹克）”。

短大衣毕竟是什么？

假如嗣魅这样的数据表格让人恼火，那毫无疑问是由于这些表格太烂了，完全没有被当真计划过。计划是表格的要害：假如计划适合，赏识较量伟大的数据会很轻易，假如计划欠妥，信息就完全无法领略。

以是我们虽然要正确计划，对吗？

固然都是数字，但它们长得都不太一样。我不是在说数字各不相称，就像π不便是∞那样（固然我在集会上常常行使）；我是指他们有的是表列数字、有的是旧式数字，有的是等高数字，有的是成比例数字。

下图简捷快速地域分了旧式数字和等高数字的区别：

旧式数字vs等高数字

旧式数字在句子中看起来很赞，在句子中他们更匹配小写字母的尺寸和间距。等高字体更同一，而且强化了网格状的表格布局。

成比例数字和表列数字的区别并不明明：

成比例数字vs表列数字

计划成比例数字的目标用于保持颜色和谐——即字体的巨细和间距要同等。另一方面，表列数字的尺寸相对独立，以是他们可以纵向对齐。固然在只有一到两行的环境下，这种区别并不明明，但在对付大型表格来说，行使表列数字会赏识起来更利便且不易堕落。

在计划时，你必要做一点事变来确保行使的数字是正确的（等高表列数字凡是不是默认的）。Adobe产物有一个“opentype”面板用于正确配置数字，CSS也提供了一种”slightly－cryptics“语法来确保其可用。除了这些，一些根基搜刮也可以引导你找到正确的偏向。

可是坏动静是：并不是全部的字体包括的等高表列数字都可用。有一些可用的每每很贵。但有少数破例：优越的“Work Sans”字体是一款带有等高表列数字的免费字体。

假如你无法找到吻合的带有等高表列数字的字体，可以行使等宽字体取代——它们看起来更像“源代码”，老是很得当在表格中展示数字。其它，新的苹果体系的默认字体“San Francisco”也包括优越的等高表列数字，而且在小尺寸的时辰看起来很棒。

有3个半原则要遵循：

1. 数字要右对齐

2. 笔墨要左对齐

3. 表头与数据对齐

3.5 不要行使居中对齐

美国各州生齿统计－维基百科

数字从右向左读；这就是说，我们较量数字时，起首看个位，然后是十位、百位。大大都人们也是这样进修算术的——从右边开始，向左移动，动态地转达数据。以是，表格中的数字应该保持右对齐。

文本信息（英文）从左向右读。凡是是按字母次序排序的要领较量文本信息：假如两个条目以沟通的字母开头，就较量第二个字母，以此类推。假如没有左对齐，试图快速赏识这样的文本会使人急躁。

表头凡是该当遵循表格中数据的对齐方法。这是的表格垂直偏向看起来更整洁，并提供了同等性和上下文情形。

居中对齐会使表格的行看起来“东倒西歪”，赏识条目会更坚苦，经常要行使特另外脱离线和图形元素。

有一种简朴的要领能让你的表格看起来更整齐，就是保持同等的有用数字(一样平常环境下指小数点后的位数)，这样每一列数据中的小数点后位数都是一样的。有用数字细究起来就没玩没了了，这里就不外多详述，我的简朴提议就是：表格数字不是越准确越好，必要几多有用数字就表现几多，不必太多。

行使标签帮助数据很重要。这些帮助的内容使数据表格能得到更多读者，合用于更普及的环境。

密西西比河大水预告－NOAA

听起来有点老生常谈，但给数据表格一个清楚简捷的问题与其余计划决定同样重要。一个好的问题可以让表格“适配”更多情形，好比用在一些差异的信息配景下，外部资源也可以直接引用问题作为表格链接

表格中最常见的标签是数据的怀抱单元；一样平常来说，每一行/列数据都行使统一单元，因此，与其在每一个格数据后头都写单元，不如在每一列的问题上标出单元。

表头越短越好；数据表格的计划应该致力于数据自己，而且长表头变迁会占用许多视觉空间。

当抉择表格的图形元素的计划气魄威风凛凛时，方针应该始终是镌汰表格的陈迹，并停止遗失掉表格准确的布局。到达这个方针的要领之一是尽也许镌汰表格的装饰——也就是说无论何时不要给表格的元素增进装饰。

2016年美国棒球同盟数据统计——BaseballReference

假如对表格中的数据行使了吻合的对齐方法，脱离线就会许多余。行使脱离线的主要甜头是可以缩小元素间的空间，但仍可以区分各元素。即便要行使脱离线，也应该把颜色只管减淡，不能故障快速赏识。

程度脱离线的用处是最大的，由于它可明显减轻长表格占用的垂直偏向的视觉重心，加速大量数据的比拟事变，以及跟着时刻看清趋势。

我有一个未经证实的关于支解线的见识，即斑马条纹的结果然的很糟糕，信不信由你。

当指示差异规模的数据时，配景是最有效的：譬喻在单个数据与总和或均匀数之间转换。当我们要突出表现数据，给数据提供特另外信息内容，或指示与前一段时刻有变革的数据，也可以不消配景，行使图形元素譬喻 , (我最爱的之一）, 或来取代。

其它，表格应该是单色的。行使颜色来得到有组织性的内容或增进寄义，增进了曲解和失足误的也许性。而且带来了那些具有视觉损伤的人的可用性题目。

表格大概很令人憎恶，但它们是富含数据的文件中至关重要的组成元素，而且值得我们举办过细的计划思索。通过计划更高效、清楚、易于行使的表格，你能极大进步说明领略大量数据时的糟糕体验。

FiveThirtyEight 是一个很不错的灵感来历——它们行使一种名为Decima Mono的字体表现数据，出格得当在较小的空间里展示大量的数据。

Butterick的适用字体是我常来的处所，可以办理全部关于字体的题目。有的种类的参考资料我都生涯了一份——真的太适用了！

最后，假如没有Edward Tufte的势力巨子意见，全部的文章和数据计划城市是不完备的。它关于计划的深刻看法不行或缺。

[1]相识风趣的算术要领，请查察日本儿童行使的算盘或格子乘法。

英文原文：Matthew Strm,Design Better DataTables.

原文地点：https://medium.com/mission-log/design-better-data-tables-430a30a00d8c#.3vyq6wxpo

译者：候萌

文章作者系@点融计划中心（微信公家号：DR_DDC） 翻译宣布于大家都是产物司理。未经容许，榨取转载。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!