本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！

什么是信息图？

由图表、图标、插图、文字等共同组成的布局固定的可视化形式。与数据视频相比，信息图通常会在同一时间渲染所有内容，对信息图的解读顺序完全取决于观众。

信息图通常是一张静态图片，近年来，动画也越来越多的应用于信息图。

本文梳理几篇的和信息图有关的论文，以论文为依托，把信息图概念、设计空间、动画、智能生成，串起一个完整的链条，希望对相关同学有所启发。

信息图中的可视化

论文：Text-to-Viz: Automatic Generation of Infographics from Proportion-Related Natural Language Statements

通过本篇论文，我们一般化信息图承载的内容。

设计类型

通过关键字在谷歌图片在搜索信息图，并总结设计类型，确定“比例”为本文的研究重点。

种类	含义	示例	频率
比例（Proportion）	传达关于部分占据整体多少的统计信息，例如“超过1/3的美国成年人肥胖”。这类信息图在实践中最为常见，具有较为突出的视觉和文本特征。		45.7%
数量（Quantity）	与数量相关。这些信息图强调某种单位的数量值，如收入、人口或速度。由于这些值不能表示为分数，因此不适用于圆环图和饼图。流行的图表包括象形图、垂直柱状图和水平条形图。		28.3%
变化（Change）	描述变化。虽然这类信息中的值通常也以比例或数量表示，但与前两类不同的是，它强调变化的概念，如“增加”、“减少”或“下降”。		8.5%
排名（Rank）	显示数据项在一组中的相对位置，通常基于序数数字或特定符号（如“#”、“No.”或“Top n”）来识别。然而，单个排名或多个排名的信息可视化是不同的。		5.8%
其他（Other）			6.2%
时间线基础型（Timeline-based）	这类信息图旨在展示随时间发生的信息和事件，帮助观众快速理解时间顺序关系。常见的视觉表示包括时间线、表格等。		1.5%
进度基础型（Process-based）	这类信息图旨在指导读者采取逐步行动以实现特定目标。它们通常用于杂志中的烹饪食谱说明，或澄清工作场所或工厂的操作流程。		1.1%
位置基础型（Location-based）	这类信息图通常包含地图和其他注释，如图标、图表、箭头和表格，用于导航。它们通常为旅游景点、购物中心、工厂等地方设计。		0.7%
其他（Other）			2.2%

设计空间

文本空间：手动收集与比例相关的自然语言描述

可视化空间，分为布局、描述、图形、颜色四个部分。

布局

描述

图形

颜色

信息图布局

论文：Exploring Visual Information Flows in Infographics

通过本篇论文，总结信息图常用的布局方式。论文基于已有数据集，通深度神经网络的方法进行总结归纳。

数据集构建

数据来源： 和

收集方式：关键字"信息图"，仅包含数字、文本和可视化图表

数据集：10K

数据元素提取

通过深度神经网络YOLO 提取数据集中的文本、图标、索引、箭头等元素。

VIF识别

VIF概念: "Visual Information Flow"，即“视觉信息流”。视觉信息流是链接图形数据元素的潜在语义结构，它用来向用户传达信息和故事。这个概念用于理解信息图表（infographics）的视觉组织方式。

下面简述布局模型识别的基本原理。

原理

基于格式塔原理的 接近原则（Proximity）、相似性原则（Similarity）和规律性原则（Regularity），对图形进行分类。

算法

算法伪代码如下：

下面对该伪代码的核心流程做简单解释：

• 选择种子（Select seeds） :

1. 从数据元素集合中选择具有高潜力形成信息流的种子元素。这些种子元素通常具有索引优先级，例如数字和字母，因为它们暗示了一个顺序。

• 追踪流主干（ Trace flow backbone） :

1. 根据相似性原则，找到后续种子，形成主干

• 组合视觉组（Compose visual groups） :

1. 根据相近原则，找到每个种子附近的元素

• 修正信息流（Amend information flow） :

1. 如果在视觉组中检测到元素缺失，算法会根据其他组的相似性来推断和补全这些缺失的元素。

• 评分流（Score the flows） :

1. 对于每个构建的流，算法会根据其规律性给予评分。最终选择评分最高的流作为最终的视觉信息流。

VIF模式

1. 从13,000多个信息图表中提取的VIF，最终得到十二种模式：

信息图风格

论文： Supporting Expressive and Faithful Pictorial Visualization Design with Visual Style Transfer

在明确的信息图的内容以及布局方式之后，我们再来看信息图的风格，在研发中，通常通过主题定制的方式来展现不同的风格。所以明确对风格产生影响的因素至关重要。

影响风格的因素

1. 视觉元素

所有参与者一致认为颜色是最重要的视觉风格元素，其次是字体和图标。布局的重要性相对较低，因为它取决于所使用的可视化类型。

2. 可视化类型总

块状图表（block charts）是最常见的可视化类型，其次是条形图（bar charts）、数字图（number charts）、圆形图（circle charts）、区域图（area charts）和线图（line charts）

3. 数据绑定类型总结

• 语义与颜色结合的类别 Semantics (combined with color) to category
• 区域与数量的关联 Area to quantity
• 高度与数量的关联 Height to quantity
• 高度填充颜色与比例的关联 Height filled with color to proportion
• 单元与数量的关联 Unit to quantity
• 单元与比例的关联 Unit to proportion
• 单元填充颜色与比例的关联 Unit filled with color to proportion

风格生成流程

暂时无法在飞书文档外展示此内容

风格生成分为这样5个关键步骤：

1. 关键元素提取：标注信息图中的文字、背景和数据图元作为训练集，用图像识别模型yolo进行训练。用户可以上传目标风格的信息图，该模型便可以自动提取出关键元素。

2. 风格提取：从上一步骤得到的关键元素中提取出颜色、字体等风格，并转换为结构化配置。

3. 应用风格：用户制作图表后，将风格配置应用到新图表上，至此完成信息图风格迁移。

4. 图表推荐：匹配相同字段映射的图表，并推荐给用户。

5. 语义推荐：提取数据字段信息，通过word2vec寻找图标库中最接近的语义图标推荐给用户。

信息图动画

论文：Animated Presentation of Static Infographics with InfoMotion

信息图动画打破了以往信息图都是静态图片的固有印象，通过动画可以使得信息图更加生动、明确的展现数据意图。该论文同样对信息图结构和布局方式进行了 “面向动画” 的总结。

调研和总结

4. 数据集收集

从, “animation”, “tutorial”, “presentation”, “infographic PowerPoint template”, “infographic After Effects tem- plate”等搜集到203个信息图动画案例。

5. 信息图结构

信息图结构主要有以下几种：

• 重复单元 (Repeating Units) ：信息图表由多个视觉元素组成，这些元素通常以相似的设计重复出现，以展示信息的并行或序列结构。这些重复的视觉元素组合在一起形成了信息图表中的重复单元。例如，一个图表中可能有多个扇形，每个扇形代表不同的数据，但它们在设计上是相似的。（d）

• 元素组 (Element Groups) ：在一个信息图表设计中，可能包含多个语义上相似的元素，这些元素属于不同的重复单元，并为每个重复单元的设计做出贡献。例如，所有的单元标题可能组成一个元素组，它们具有相同的字体样式。（g）

• 单元布局 (Unit Layout) ：信息图表中视觉元素的空间排列通常是精心选择的。重复单元在信息图表中的位置决定了信息图表的单元布局。单元布局通常决定了元素的展示顺序。

• 连接符 (Connectors) ：一些信息图表设计可能包含特定的连接符，如线条或箭头，用来连接视觉元素并表达它们之间的关系。这些连接符可以帮助清晰地传达信息图表的逻辑连接和阅读顺序。（e）

• 语义标签 (Semantic Tags) ：信息图表设计中视觉元素的角色。例如，文本框可能用作信息图表的标题、脚注等。（a、c）

6. 布局类型

• 线性布局 (Linear Layouts) ：这是最常见的布局方式，所有的信息图表单元都按照水平、垂直或对角线排列成一条线。线性布局要求每个单元内部的布局是一致的。

• 径向布局 (Radial Layouts) ：这种布局方式中，视觉单元被放置在一起，形成一个弧形或圆形。这种设计在信息图表中也很常见。

• 分段布局 (Segmented Layouts) ：这种布局方式中，单元以锯齿形排列，通常是单元的方向交替变化。例如，它们可能沿着中心线两侧排列，也可以是水平、垂直或对角线的排列方式。

• 自由布局 (Freeform Layouts) ：在这种布局方式中，单元没有放在规则的模式中。例如，文本描述可能沿着弯曲的箭头排列。其他具有清晰结构的信息图表也可能有随机的单元布局，例如在地图上放置的单元可能不形成清晰的布局。设计师可能会使用箭头或其他视觉元素来指示元素的内部逻辑结构。

7. 动画类型

从叙事的角度对动画类型进行总结：

(a) 同时呈现 (Concurrently)：整个信息图表的结构都应用动画，并同时显示。

(b) 按重复单元呈现 (By repeating units)：信息图表被分成相似或重复的单元来构成信息图表结构。这种方法优先考虑元素的单元关系，单元逐一显示，单元内的元素倾向于一起出现。

(c) 按元素组呈现 (By element groups)：这种方法优先考虑跨单元的元素关系。相似的元素一起显示，例如，所有标题先出现，然后是描述, 然后是图标主体。

系统实现及设计

若要实现自动动画生成，就要对元素、布局和结构都能做到自动识别，并在此基础上进行动画编排。

结构推断

1. 识别相似元素 -> 元素组

提取属性：路径、宽度、高度 -> 聚类 + 推断重复单元数

2. 识别重复单元

识别重复单元方案如下：

（1）初始化：空列表units来存储最终识别出的重复单元，unitCands列表来存储可能构成单元的候选簇。

（2）筛选：从所有簇中筛选出大小不小于N（即假设的重复单元数量）的簇，将它们添加到unitCands中。同时，将大小小于N的簇添加到others列表中。

（3）循环合并：从unitCands中取出一个簇u，尝试将其合并到units中。这个过程是一个循环，直到unitCands为空。

• 检测布局：对于当前的簇u，检测其布局类型（例如，线性、径向等）。
• 合并条件：如果簇u的布局与已识别的单元布局相同，并且簇的大小等于N，那么尝试按照布局将u合并到units中。如果合并成功，将合并结果中选定的元素添加到units列表中。
• 按接近度合并：如果簇u的布局与单元布局不同，或者簇的大小大于N，那么尝试按照元素之间的接近度将u合并到units中。这个过程涉及到计算元素与现有单元之间的距离，并将元素分配到最合适的单元中。
• 标准偏差检查：在合并过程中，使用标准偏差来确保元素的分布规律性。如果新添加的元素与当前单元的标准偏差小于某个阈值p，则认为合并是合理的。

（4）剩余元素处理：如果unitCands中的簇在尝试合并后仍有剩余元素，且剩余元素的数量仍然不小于N，那么将这些剩余元素放回到unitCands的末尾。如果剩余元素的数量小于N，则将它们添加到others列表中。

（5）返回结果：算法最终返回三个值：最频繁的布局类型unitLayout、识别出的重复单元列表units，以及未能成功合并的元素列表others。

动画效果编排

1. 编排

编排方式有如下三种：

（1）基于序列：按照数据序列依次出现重复单元

（2）基于阅读序：按照从左到右、从上到下、顺时针 依次出现重复单元

（3）基于语义标签：先出现标题、再出现副标题、再出现图形、再出现描述

2. 节奏

节奏控制有如下三个方案：

（1）逐一展示 (one-by-one)

（2）同时展示 (all-at-once)

（3）错开展示 (staggering)

3. 效果

前文数据集中提取出六种常见的动画风格，包括淡入 (fading)、浮动 (floating)、缩放 (zooming)、擦拭 (wiping)、飞行 (flying) 和分裂 (splitting) ，并提供了这些效果的一般选择，覆盖了数据集中95.5%的效果。

启发

其实主流信息图或者数据海报并不涉及动画设计，但近几年动态海报作为一种设计风格开始流行，如果要借助短视频平台进行宣传，动态海报逐渐开始替代主流静态海报，所以信息图在设计时也考虑对应的动画。

智能生成信息图: AIGC + Design Space + Pipeline

1. 流程：原始数据 -> 数据事实 -> 单个图表 -> 多图表布局 -> 风格化 -> 动画编排

2. 设计空间：上述每个流程都有对应的设计空间，且该设计空间直接或间间包含了设计模版

3. AIGC 负责：从原始数据 中提取 数据事实 + 从设计空间中选择设计模版

4. 各个流程的产物组装得到最终结果

欢迎关注

论文阅读计划会持续进行，欢迎关注。同时我们也会将学习研究成果应用到可视化研发和产品中，我们的信息图组件库也很快会和大家见面。

VIsActor 官网：

微信公众号（通过公众号菜单可以加入微信群和飞书群）：

今夜无月，期待你点亮星空，感谢Star：

github：

更多参考：

参考资料

[1] Cui W, Zhang X, Wang Y, et al. Text-to-viz: Automatic generation of infographics from proportion-related natural language statements[J]. IEEE transactions on visualization and computer graphics, 2019, 26(1): 906-916.

[2] Lu M, Wang C, Lanir J, et al. Exploring visual information flows in infographics[C]//Proceedings of the 2020 CHI conference on human factors in computing systems. 2020: 1-12.

[3] Shi Y, Liu P, Chen S, et al. Supporting expressive and faithful pictorial visualization design with visual style transfer[J]. IEEE Transactions on Visualization and Computer Graphics, 2022, 29(1): 236-246.

[4] Wang Y, Gao Y, Huang R, et al. Animated presentation of static infographics with infomotion[C]//Computer Graphics Forum. 2021, 40(3): 507-518.

[5]

[6]

[7]

[8]

[9]

[10]

[11]