信息图

当我向同事们抱怨幻灯片的弊端时，我确实听到了有用的反驳。现在许多人喜欢通过并非用于演示，而是用于阅读的幻灯片来进行交流。像我这样的人可能会嘲笑现在的经理们无法阅读任何看起来不像项目符号的东西，但这些信息图确实有优势。

• 您可以使用空间布局来帮助解释
• 它们阻止人们不读的长篇散文
• 很容易将图表作为交流中的主要元素

所有这些都可以导致一个比传统的散文文本更容易理解和更容易传达信息的文档。

有关martinfowler.com上的信息图列表，请参阅信息图标签。

如果一个幻灯片集旨在用于阅读而不是投影，那么我不将其视为幻灯片。幻灯片很糟糕，因为它们试图做两件不同的事情，但信息图只用于阅读，因此可以做得很好。当然，它们通常做得不好，但这在执行上而不是基本概念上存在问题。

信息图对我来说是一种有趣的形式，仅仅是因为似乎没有人认真对待它们。大多数用户将它们视为用 PowerPoint 随意制作的东西，而那些自命不凡的严肃作家（比如我）认为信息图不值得我们关注。我开始认为我们应该更认真地对待它们。我们应该更多地思考和讨论如何使它们成为有效的沟通工具。[1]

这些信息图可能会越来越流行的一个原因是，我们越来越多地使用计算机设备而不是纸张进行交流。现代计算机拥有明亮的多色屏幕，并且不担心节省纸张。因此，使用大量虚拟页面，采用色彩丰富、图表密集的方法是一种有效的文档形式——尤其是随着平板电脑的普及。

因此，在过去的一年左右的时间里，我开始探索将信息图作为第一类沟通形式。您可以看到我迄今为止制作的几个例子

• NoSQL 简介，这是一个 PDF 文件
• 为多个移动设备开发软件，这是一个 HTML 文件

仅仅使用几个例子不足以得出确定的结论，但足以让我想要继续探索这种媒介。这两个信息图都是相对高级的非技术性文章，事实上，我将我们的一位高级销售经理设想为我的目标受众的一部分。信息图似乎自然适合这种受众，但我希望将来也尝试将它们用于更技术性的内容。

我认为 PDF 对大多数人来说最有效，因为它们通常会通过电子邮件发送。我使用 Apple 的 Pages 应用程序制作了 NoSQL 信息图，我认为页面布局程序比 PowerPoint 或 Keynote 等演示程序更适合这种形式。

然而，就我而言，HTML 更适合。我主要为这个网站写作，而 HTML 是网络的语言。此外，使用 HTML，我可以选择使用动态元素，例如动画，而 PDF 无法做到这一点。缺点是缺乏工具。有一些工具可以制作 HTML 幻灯片，但它们大多针对使用子弹满天飞的尸体反模式的实时演示工具。信息图与实时演示有不同的需求，即使对于信息图来说，项目符号句子不再是问题，但我希望使用许多其他技术。

然而，使用现有的基于 HTML 的工具作为基础是有意义的。对于多移动设备幻灯片，我最初使用的是deck.js，它将一组良好的基本幻灯片功能与一个易于扩展的架构相结合。对于后面的幻灯片，我探索了使用 Rémi Emonet 完成的动画deck.js 扩展。Rémi 在解决我这种相当奇怪的用法所特有的各种小问题方面非常有帮助。然而，我遇到了一个无法逾越的障碍——deck.js 与大多数基于 HTML 的演示工具一样，将整个幻灯片集加载到内存中。虽然这对实时演示来说是有意义的，但遗憾的是，它会导致我正在使用的幻灯片在 iPad 1 等设备上崩溃。

因此，我不得不编写自己的 javascript 平台来托管这些幻灯片。它一次只加载几张幻灯片，因此用更少的内存使用量换取了响应速度。

我从不喜欢直接编写 HTML，因此我使用我通常的方法来编写幻灯片——一个自定义的 XML 词汇表，我使用我通常的转换工具链的扩展将其转换为 HTML。

除了开发工具链之外，我还致力于开发用于信息图的组合风格。到目前为止，一个核心元素是采用导语和细节的方式来处理文本。大多数幻灯片都有一个导语，一个用大字体写成的单句，概括了叙述。更多细节出现在文本块中。这样做的目的是让读者只需浏览幻灯片并阅读导语，就能对幻灯片的内容有一个大致的了解。当他们想要了解更多细节时，他们可以阅读更详细的文本。到目前为止，我收集到的有限反馈似乎表明，这正按我的预期工作。

详细段落是链接项目符号，但可以比人们在实时幻灯片中使用的项目符号更长。我认为它们是短段落而不是项目符号句子。

图表是使信息图风格发挥作用的关键。对于 HTML 工具链，我一直专注于使用 SVG。我这样做部分是因为这样一来所有内容都可以很好地缩放，而且因为我可以利用 SVG 对象是 DOM 对象这一事实，我可以通过 css 和 javascript 对它们进行操作。

（我最初于 2011 年 12 月 19 日发布了本文的第一版。我用我对构建信息图的最新想法更新了它。）