作为我们收集数据和我们用来分析的工具的方式,我们的世界变得令人难以置信的数据丰富。在越来越定量的世界中,设计师面临最令人兴奋的挑战之一是如何将数据转化为广泛的受众容易理解的媒体。信息图形(更好地称为infographics) are a powerful storytelling tool that allows users to comprehend, analyze, and explore data. The hope of social-media sharing has made infographics popular on websites that emphasize content marketing.

数据可视化和之间的区别formation graphics is subtle, but important. Infographics often contain data visualizations, but a data visualization on its own is not an infographic.

Definition: A数据可视化是一组数据的图形表示。图表,图形和地图是最常用的数据可视化类型。

In human–computer interaction, the field ofinformation visualizationstudies interactive data representation. Unlike data visualization, which is generally static, an information visualization allows users to manipulate the visualization in order to get to different aspects of the data.

信息和数据可视化可以揭示可能难以单独辨别数字的模式。但是,对于某些类型的观众或在某些情况下,可视化可能不足以传达您的消息。在这种情况下,信息图形可以更清楚地实现您的观点。

Definition: Aninfographicis a multimedia graphic aiming to present complex information and data in a way that is easy to understand. Infographics often include data or (more rarely) information visualizations, but must also provide context in the form of illustrations, facts, quotes, and captions. Thus, an infographic can stand on its own as a separate piece of content (though it can also be shown in the context of an article with additional text).

An illustration of the difference between infographics and data visualizations
BBC.com: This illustrationthe likelihood of automation for different professions is an infographic according to our definition. The chart in the lower left, on the other hand, is a data visualization and could have been used as such if it had been shown by itself, without the explanatory context provided by the rest of the screenshot.

Design Guidelines for Information Graphics

Every item on an infographic — from charts to the imagery that illustrates them — should convey meaningful information. Edward Tufte created the concept of thedata–ink ratio在1983年的书中定量信息的视觉显示to sum up the data density in a visualization. The ratio compares the valuable information (the data) to the full graphic (the total “ink”). Ideally, data visualizations have a high data–ink ratio: all or most of the visual elements in the graphic convey meaningful information about the dataset.

Tufte advocates for a minimalistic presentation of charts that directs viewers to the information presented rather than to the designer’s artistic additions. His approach removes all decoration — a chart with a perfect data–ink ratio not only omits illustrations but also removes items such as background images, decorations of chart items, and even gridlines.

然而,信息图表是混合媒介,这里有创意许可的空间。视觉兴趣的元素如插图,照片和图标是可接受的,甚至在媒介中的预期。使用视觉主题可以将您的作品置于一个使抽象概念易于理解的隐喻。不会分散图表并向数字添加意义的元素可以有用的添加。它们还可以增加信息图的可满性和帮助3rd-party users to understand the message when they encounter a reposted visual on, say, Twitter or Instagram without the additional context provided by the original site.

Informational Honesty

最重要的是要记得designing an information graphic is to清楚,真实地提出数据。Scale your charts in a way that shows the differences in the data and communicates the range of values accurately. If you include summary statistics in your graphic, clearly indicate the information source you used to calculate those figures.

Statisticians and information designers have debated the details of scaling in charts for decades. One topic of particular contention is the starting point of the y-axis. Darrell Huff cautioned readers to beware of any chart that does not begin the y-axis with 0 in his 1954 book如何与统计数据撒谎。Some experts disagree; Edward Tufte argues that this rule is not necessary as long as the chart clearly shows that the scale has been truncated. Choose a scale for your charts that strikes a balance between demonstrating trends clearly and conveying the scale of the original dataset. The y-axis of a data visualization should show abaseline state of the data set。In many cases, 0 is a natural starting point, but it is not necessary to force a visualization to begin at 0 when another logical starting point exists.

For example, it is a commonly accepted practice in the financial industry to truncate the y-axis of a stock chart. Users generally care about details of the stock’s price and how it has changed over time. The chart does not need to begin at 0 in order to establish a meaningful baseline.

Google's stock chart for AAPL
Google.com“股票”图表以信息最诚实的方式截断Y轴。Y轴以所选时间间隔中的第一个价格点开始,这是图表的逻辑起点。

但是,如果主要用户任务要比较图表上的不同值,则截断Y轴不会接受。在上面的股票图表中,如果用户对2017年10月的股票的相对价值与2018年6月,他们可能会错误地推断股票价格加倍,基于图表上的数据点的位置。

Similarly, the chart below lends itself to misinterpretation because of how the y-axis is truncated. The chart was published to show how Americans felt about a controversial court decision. It visually implies that there is a stark difference of opinion between Democrats and Republicans. In fact, the absolute numbers show that 62% of Democrats and 54% of Republicans agreed with the court’s decision.

今天来自美国的图形,显示了错误截断的y轴
USAToday.com: The truncated y-axis in this chart makes the difference of opinion among different party members appear more dramatic than the actual results of the poll suggest.

Minimalism and Infographic Design

Although the rules of design are fairly relaxed in the world of infographics, a minimalistic approach is helpful.Minimalism is a design philosophythat reduces the complexity of the presentation of content.

Choose fonts that are readable rather than decorative。Selecting a font that scales well is key. The medium demands many different text sizes: titles, headings, quotes, statistics, and captions should be sized differently to establish a clear hierarchy within the graphic. Script fonts and overly complex serif fonts should be avoided as they often distract from the many points of visual information that the eye takes in when viewing an infographic.

Choose a limited color palette。A few distinct colors are more visually inviting and focus attention better than many colors. Color can be an excellent way to quickly communicate differences on a chart or to highlight various sections of an infographic, but too many colors are overwhelming.

请记住,虽然颜色是一个强大的通信工具,但它永远不应该用作唯一的视觉区别。COLDBLIND和视力受损的用户将难以理解使用单独使用颜色传达重要点的信息图表。最小的调色板需要设计人员意识到它们如何使用颜色以及他们可以用于表达信息的其他视觉工具。

An infographic by Upwork on attracting remote talent
Upwork.com:This infographic on attracting remote talent设计有许多原则的最低态度。它使用少量不同的颜色,保持插图简单,并使用高度可读的字体。(但是,笔记本电脑旁边的灯的插图为整体信息图表增加了很小的价值。)

Present simple illustrations。选择简单和干净的插图允许信息图表的焦点保持在相关数据上。这些插图应该支持这件作品的整体信息,但不一定需要直接解释数据。上面的信息图表讨论了公司如何招募远程开发人员。

The graphical elements in this infographic are modern and minimalistic. The lines are clean and the graphics do not contain any complex textures. All follow the same aesthetic conventions. Maintaining a simple but consistent style for all graphical elements makes an infographic feel like a unified and visually pleasing whole.

互动

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

彭博亿万富翁指数是一个交互式信息图
Bloomberg.com:The Bloomberg Billionaires Indexis a multipage infographic that compares and profiles the world’s wealthiest people. Elements of a traditional infographic such as illustrations and explanatory text are present, but users also have the option to interact with the data, filter some charts by time interval, and change the comparison variables on other visualizations.

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

分享和社交媒体

Infographics are often shared on social media platforms such as Twitter, Facebook, and LinkedIn. These channels can be helpful in driving traffic to your content. However, graphics shared on social media are often reposted without a link to the original source. Consider adding a watermark or logo to any infographics that you create. This addition will help users who come across an unattributed version of your graphic to find the original piece.

Common Mistakes

  • Distracting visual elements。The graphical elements of an infographic should add interest and enhance the infographic’s main point. Relying too heavily on a theme or a visual pun takes viewers’ attention away from the message you are trying to send.
关于热曝光的信息图表强调了图表费用的插图
USAToday.com: This infographic on the dangers of heat exposure emphasizes the illustration at the expense of the chart. The sun illustration is so large, colorful and detailed that it takes attention away from the other items in the graphic. Edward Tufte would have a field day deriding the minimal data–inkratio here.
  • 扭曲的比例。This common mistake undermines a visualization’s informational honesty, as we discussed previously. When the scale of a chart does not accurately represent differences between data points then it gives an incorrect impression of the original data. Charts within an infographic that have been cropped, stretched or otherwise distorted give a false impression of the available data.
  • Copy as an afterthought。Infographics are a primarily visual medium, but what viewers read is still important. Many infographics designers add text in at the very end of the design process and use unclear copy that detracts from the overall graphic. Moreover, some infographics neglect to optimize text for the format. Long, unstructured paragraphs create an overload of information.Concise writing更难,但有更多的影响。
A section of an infographic about infographics that displays text in narrow columns
InfographicLabs.com: This infographic discusses the design of infographics. Information on the medium’s popularity is organized into four paragraphs displayed in narrow columns. It is difficult to read and even more difficult to scan. This is text with pictures, not an integrated visual.
  • 不清楚的层次结构。视觉层次指导你的观众通过the variety of information presented in an infographic. When items are sized arbitrarily and sequenced without apparent reason, the message of the infographic becomes difficult to discern.
An infographic on millennials and finance by Viacom's Scratch agency
Viacom.com: An unclear hierarchy makes this visually striking infographic by维亚康姆的划痕机构difficult to follow. The illustrations are large and draw attention away from the graphic’s charts, statistics, and text content. This is pictures with text, but also not an integrated visual.

关于常见错误的说明

Designing data visualizations and infographics is not an exact science. The common mistakes discussed here are so ubiquitous in part because the discipline is evolving so rapidly. Data visualizations have been printed for centuries, but the recent evolution of the internet has enabled vast changes in the way we consume the material. Interactive infographics were slow and difficult to use when they were rendered in Flash ten years ago but highly responsive graphics are possible in modern browsers. Best practices will change with technological improvements and visual trends will shift, but the basic principles of accessible information design will remain the same.

当您创建信息图表时,争取清晰度和可访问性,而不是绝对完美。迭代您生成的图形以发现如何更好地呈现您的预期受众容易理解的方式。

结论

Infographics are an excellent way to communicate complex concepts in an accessible and even entertaining manner. This hybrid medium combines data visualizations with graphics and text to make the information easy to understand. Many established heuristics of user-interface design can be applied to data visualizations and infographics in order to create educational and beautiful expressions of data.

参考

Huff, D. (1954).如何与统计数据撒谎。New York, NY: W. W. Norton & Company.

Shneiderman, B. (1996). The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations,诉讼程序1996年视觉语言的IEEE研讨会

Tufte, E. (1983).定量信息的视觉显示。Chesire, CT: Graphics Press.