随着我们收集数据的方式和分析工具的发展,我们的世界正变得异常丰富。在这个日益量化的世界中,设计师面临的最令人兴奋的挑战之一是如何将数据转换成一种容易被广泛受众理解的媒介。信息图形(更广为人知的是信息图)是一个强大的讲故事工具,允许用户理解,分析和探索数据。社交媒体共享的希望使Infographics在强调内容营销的网站上流行。

数据可视化和信息图形之间的区别很微妙,但很重要。信息图通常包含数据可视化,但数据可视化本身并不是信息图。

定义:数据可视化是一组数据的图形表示。图表、图形和地图是最常用的数据可视化类型。

在人机互动中,领域信息可视化研究交互式数据表示。数据可视化通常是静态的,与之不同的是,信息可视化允许用户操作可视化以获得数据的不同方面。

信息和数据可视化可以揭示仅从数字难以识别的模式。然而,对于某些类型的受众或在某些上下文中,可视化可能不足以传达您的信息。在这种情况下,信息图表可以更清楚地表达你的观点。

定义:ANInfographic.是一种多媒体图形,旨在以易于理解的方式呈现复杂的信息和数据。信息图通常包括数据或(更少见的)信息可视化,但也必须以插图、事实、引用和标题的形式提供上下文。因此,信息图可以作为单独的内容(尽管它也可以在带有附加文本的文章上下文中显示)。

说明信息图和数据可视化之间的区别
BBC.com:这幅图根据我们的定义,不同职业自动化的可能性是一个信息图表。另一方面,左下角的图表是一个数据可视化,如果它本身就显示出来,而没有截图提供的解释性上下文,那么它也可以这样使用。

信息图形设计指南

信息图表上的每个项目 - 从图表到示意图,表示它们 - 应该传达有意义的信息。Edward Tufte创建了概念数据墨水比在他1983年的书中定量信息的可视化显示在可视化中总结数据密度。比率比较有价值的信息(数据)和完整的图形(总“墨水”)。理想情况下,数据可视化具有较高的数据-墨水比:图形中的所有或大部分视觉元素都传达了有关数据集的有意义的信息。

TUFTE倡导者倡导图表的简约介绍,将观众指向所呈现的信息而不是设计师的艺术添加。他的方法去除所有装饰 - 一个完美的数据墨水比的图表不仅省略了插图,而且还删除了背景图像,图表项目的装饰品等项目,甚至是网格线。

然而,信息图是一种混合媒介,在这里有创造性许可的空间。视觉感兴趣的元素,如插图、照片和图标在媒体中是可以接受的,甚至是预期的。使用视觉主题可以使你的作品在隐喻中扎根,使抽象概念更容易理解。不分散图表的元素和增加数字的意义可以是有用的补充。他们还可以增加信息图和帮助的可分享性理查德·道金斯- 在没有原始站点提供的其他上下文的情况下,在遇到重新发布的视觉上时,可以了解邮件时,可以了解消息。

信息的诚实

在设计信息图形时,最重要的是要记住清晰、真实地提交资料.用一种能显示数据差异和准确传达数值范围的方式缩放图表。如果您在图表中包含汇总统计数据,请明确指出您用于计算这些数据的信息源。

数十年来,统计学家和信息设计师一直在讨论图表缩放的细节。一个特别争论的话题是y轴的起点。达雷尔•赫夫(Darrell Huff)在他1954年出版的书中告诫读者,要小心任何y轴不是以0开头的图表如何对统计数据撒谎.一些专家不同意;爱德华•塔夫特(Edward Tufte)认为,只要图表清楚地显示比例已被截断,这个规则就没有必要。为图表选择一个比例,在清晰地展示趋势和传达原始数据集的比例之间取得平衡。数据可视化的y轴应该显示数据集的基线状态.在许多情况下,0是一个自然的起点,但是当存在另一个逻辑起点时,没有必要强制可视化从0开始。

例如,截断股票图表的y轴在金融业是一种普遍接受的做法。用户通常关心股票价格的细节以及它是如何随时间变化的。图表不需要为了建立一个有意义的基线而从0开始。

谷歌的股票图表
Google.com的股票图表以一种信息真实的方式截断了y轴。y轴从所选时间区间的第一个价格点开始,这是图表的逻辑起点。

但是,如果主要的用户任务是比较图形上的不同值,那么截断y轴是不可接受的。在上面的股票图表中,如果用户对2017年10月和2018年6月的股票相对价值感兴趣,他们可能会错误地根据图表上数据点的位置推断股票价格翻了一倍。

类似地,下面的图表由于Y轴如何被截断而误解误解。该图表已发布,以展示美国人对争议法院的决定感到疑惑。目测意味着民主党与共和党人之间存在明显的意见差异。事实上,绝对数字表明,62%的民主党和54%的共和党人同意法院的决定。

来自《今日美国》的一个图表显示了一个错误的截断y轴
USATODAY.COM:此图表中截断的Y轴使不同党员之间的意见差异看起来比民意调查的实际结果更具戏剧性。

极简主义和信息图表设计

尽管在信息图的世界中,设计规则是相当宽松的,但极简主义的方法是有帮助的。极简主义是一种设计哲学这降低了内容表示的复杂性。

选择可读而不是装饰的字体.选择合适的字体是关键。媒体需要许多不同的文本大小:标题、标题、引用、统计数据和标题的大小应该不同,以便在图像中建立清晰的层次结构。应该避免使用脚本字体和过于复杂的衬线字体,因为它们通常会分散人眼在观看信息图表时所接收到的许多视觉信息。

选择有限的色板.少数明显的颜色在视觉上更吸引人,比许多颜色更能集中注意力。颜色是快速沟通图表差异或突出信息图表不同部分的一种很好的方式,但太多的颜色会让人不知所措。

记住,虽然颜色是一个强大的沟通工具,但它不应该被用作唯一的视觉区分。色盲和视障用户很难理解仅使用颜色就能传达重要信息的信息图。最小的调色板要求设计师意识到他们如何使用颜色,以及他们可以使用什么其他视觉工具来表达信息。

Upwork关于吸引远程人才的信息图表
Upwork.com:这个信息图表吸引了远程人才在设计时考虑了许多极简主义的原则。它使用少量独特的颜色,保持插图简单,并使用高可读性的字体。(然而,一盏灯旁边的笔记本电脑的插图并没有给整个信息图增加多少价值。)

一般现在时的插图.选择简单和干净的插图可以让信息图的焦点保持在相关数据上。这些插图应该支持作品的整体信息,但不一定需要直接解释数据。上面的信息图讨论了公司如何招聘远程开发人员。

该信息图中的图形元素是现代而简约的。线条清洁,图形不包含任何复杂的纹理。一切都遵循相同的审美惯例。保持所有图形元素的简单但一致的风格使信息图表感觉像统一和视觉上的整体。

交互性

交互式信息图包括用户可以直接操作的数据或信息可视化。这种类型的信息图表提供了上下文和叙述,同时允许用户控制他们看到的数据的哪个方面。近年来,交互式信息图已经变得很流行。主要新闻机构经常采用交互式信息图,让读者可以探索他们发布的故事背后的数字。

彭博亿万富翁指数是一个交互式的信息图表
Bloomberg.com:彭博亿万富翁指数是一个多端的信息图表,比较和描绘世界富裕的人。存在传统信息图的元素,如插图和解释文本,但用户还可以选择与数据交互,按时间间隔过滤一些图表,并更改其他可视化上的比较变量。

在添加交互元素之前,考虑您正在创建的组件的需求。用户会对哪些方面的数据感兴趣?如果您只是想表明一个观点,那么支持它的静态可视化可能就足够了。如果您希望用户操作并深入了解数据集的不同方面,交互式信息图可能是合适的。

分享和社交媒体

信息图经常在Twitter、Facebook和LinkedIn等社交媒体平台上分享。这些渠道有助于为你的内容带来流量。然而,在社交媒体上分享的图片经常被转发,而没有链接到原始来源。考虑在您创建的任何信息图中添加水印或徽标。这一添加将帮助用户谁遇到一个未归属版本的图形找到原始的一块。

常见的错误

  • 分散视觉元素的注意力.图的图形元素应增加兴趣并增强信息图表的主要观点。依赖于主题或Visual双关语,从您想要发送的信息中取得观众的注意。
这张关于热暴露的信息图强调了说明,而忽略了图表
USATODAY.COM:这种关于热曝光危险的信息图表强调了图表费用的插图。太阳插图非常大,丰富多彩,详细说明它从图形中的其他物品中引起注意。Edward Tufte将有一个嘲笑最小的场日 数据墨水比在这里。
  • 扭曲的规模.正如我们前面讨论过的,这个常见的错误破坏了可视化信息的真实性。当图表的比例不能准确地表示数据点之间的差异时,它就会给原始数据一个错误的印象。信息图中的图表如果被裁剪、拉伸或以其他方式扭曲,就会对可用数据产生错误的印象。
  • 复制作为事后的想法.信息图主要是一种视觉媒体,但观众阅读的内容仍然很重要。许多信息图形设计师会在设计过程的最后添加文本,并使用不清晰的副本,从而影响整体图形效果。此外,一些信息图忽略了优化文本格式。长而无结构的段落会造成信息过载。简明写作难度更大,但影响更大。
关于Infographic的信息图表的一部分,在窄列中显示文本
本信息图讨论了信息图的设计。关于媒体受欢迎程度的信息被组织成四个段落,以窄栏显示。它很难阅读,更难以浏览。这是带有图片的文本,而不是集成的视觉效果。
  • 不清楚层次结构.视觉层次结构通过信息图中呈现的各种信息指导您的观众。当项目大小任意并在没有明显的原因进行测序时,信息图表的消息变得难以辨别。
维亚康姆的Scratch公司提供的关于千禧一代和金融的信息图表
ViaCom.com:一个不清楚的层次结构使这是令人醒目的信息图表维亚康姆抓机构很难效仿。插图很大,把人们的注意力从图表、统计数据和文本内容上转移开。这是带有文字的图片,但也不是一个完整的视觉。

关于常见错误的说明

设计数据可视化和信息图并不是一门精确的科学。这里讨论的常见错误之所以如此普遍,部分原因是该学科发展得如此迅速。数据可视化已经打印了几个世纪,但最近互联网的发展使我们消费材料的方式发生了巨大变化。十年前,交互信息图在Flash中呈现时,速度很慢,使用起来也很困难,但在现代浏览器中,高响应性的图像是可能的。最佳实践将随着技术进步而改变,视觉趋势也将改变,但无障碍信息设计的基本原则将保持不变。

当你创建一个信息图表时,要力求清晰和易于理解,而不是绝对的完美。迭代你生成的图像,以便发现如何更好地以一种容易被目标受众理解的方式呈现你的内容。

结论

信息图是一种很好的方式,以一种易于理解甚至有趣的方式来传达复杂的概念。这种混合介质将数据可视化与图形和文本相结合,使信息易于理解。许多已建立的用户界面设计启发式可以应用于数据可视化和信息图,以创建具有教育意义的和美丽的数据表达。

参考文献

Huff,D.(1954)。如何对统计数据撒谎.纽约:W. W. Norton & Company。

Shneiderman, b(1996)。眼睛有它:数据类型分类的信息可视化任务,1996年IEEE视觉语言研讨会论文集

塔夫特,大肠(1983)。定量信息的可视化显示.Chesire, CT:图形出版社。