AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise

目录

  • Overview
  • 业界分类方式概览
  • 现有分类体系的问题
  • AntV 信息图分类
  • 分类体系
  • 如何判断信息图的分类
  • 判断流程
  • 常见混淆点辨析
  • 特殊情况处理
  • 分类的实际应用
  • 设计指导
  • 模板推荐
  • 数据映射
  • 智能优化
  • 小结
  • 快速开始
    • 入门指南
    • 信息图语法
  • 核心概念
    • 设计
    • 模版
    • 数据
    • 主题
    • 资源
  • 自定义设计
    • 自定义结构
    • 自定义数据项
    • 自定义模版
    • 自定义主题
    • 自定义色板
    • 自定义字体
    • 自定义资源加载器
    • 自定义图案
  • 信息图理论
    • 信息图分类
    • 核心理论
    • 信息图构成要素
    • 信息图设计
  • 参与贡献
文档
信息图理论

信息图分类

合理的分类体系能指导设计与推荐,带来以下收益:

  • 指导设计创作:帮助设计师根据内容特点选择合适的结构形式
  • 优化推荐算法:为用户推荐最匹配其内容需求的模板
  • 提升数据抽取效率:不同结构类型对应不同的数据组织方式
  • 建立知识体系:形成系统化的信息图理论框架

业界分类方式概览

主流平台(Piktochart、Venngage、Visme 等)与研究中常见的分类类型包括:

分类类型出现频率说明
时间线(Timeline)⭐⭐⭐⭐⭐展示时间顺序或历史进程
列表型(List)⭐⭐⭐⭐⭐并列展示多个信息项
对比型(Comparison)⭐⭐⭐⭐⭐对比两个或多个对象
流程型(Process)⭐⭐⭐⭐展示步骤或流程
统计型(Statistical)⭐⭐⭐⭐以图表形式展示数据
地理型(Geographic/Map)⭐⭐⭐⭐基于地理位置展示信息
层级型(Hierarchical)⭐⭐⭐展示层级或树状结构
交互式(Interactive)⭐⭐支持用户交互操作

现有分类体系的问题

现有分类体系的常见问题:

  1. 分类维度混乱:有的按结构形式(时间线、地图),有的按内容用途(简历、How-to),有的按技术属性(交互式、动画型),缺乏统一标准
  2. 类别重叠与歧义:如”流程型”、“流程图”、“步骤型”概念相近;“地图”、“地理型”、“位置型”边界不清
  3. 粒度不一致:“信息型”过于宽泛,几乎囊括所有图;“解剖型”又过于狭窄
  4. 混淆展示与内容:将展示技术(交互、动画)与内容结构混为一谈

AntV 信息图分类

基于上述问题,AntV 采用了按结构形式分类的方式,这种分类方法更适合视觉设计、信息图推荐、数据抽取等实际应用场景。

分类体系

类型示意核心特征典型视觉元素适用场景
列表结构
List
List信息项并列排布,无明显方向性或层级关系• 数字标号(1、2、3…)
• 圆点符号
• 方块图标
• 卡片式布局
• 要点型(关键要点总结)
• 清单型(待办事项、检查清单)
• 汇总型(信息汇总、知识整理)
• 展示型(产品特性、服务介绍)
• 排名型(榜单、排行)
对比结构
Comparison
Comparison明确的二元或多元对比布局• 左右分栏布局
• VS 标识
• 对照表格
• 镜像对称布局
• 二元对比(优缺点、新旧版本、AB 方案)
• 多元对比(多个产品/服务/方案的横向比较)
• 矩阵对比(四象限图、九宫格分析)
顺序结构
Sequential
Sequential具有明确方向性和顺序性的信息流,顺序不可随意调换• 箭头连接
• 流程连接线
• 时间轴
• 路径引导
• 直线型(操作步骤、制作流程)
• 循环型(生命周期、闭环流程)
• 时间型(历史事件、项目里程碑)
• 因果型(原因-过程-结果)
层级结构
Hierarchical
Hierarchical树状、嵌套或明显的主次关系布局• 分支连线
• 大小层级
• 嵌套框架
• 缩进布局
• 组织型(公司架构、管理层级)
• 分类型(知识体系、目录结构、分类树)
• 树状(决策树、思维导图)
• 从属型(总分关系、包含关系)
关系结构
Relational
Relational展示元素间的连接、依赖或相互作用关系• 双向箭头
• 网状连线
• 节点圆圈
• 关系连接器
• 流程型(工作流、数据流、信息流)
• 网络型(人际关系、社交网络)
• 概念型(思维导图、知识图谱)
• 交互型(系统架构、组件依赖)
地理结构
Geographical
Geographical基于地理空间或物理位置的信息组织• 地图轮廓
• 位置标记(图钉)
• 区域分块
• 坐标系统
• 地图型(世界地图、国家地图、城市地图)
• 路线型(旅行路线、运输路径)
• 区域型(行政区域、销售区域)
• 定位型(设施分布、门店位置、建筑平面图)
统计图
Statistical
Statistical以标准图表形式展示定量数据关系• 坐标轴
• 数据条
• 百分比环
• 统计符号
• 柱状图
• 折线图
• 饼图
• 散点图
• 雷达图

如何判断信息图的分类

在实际应用中,同一个视觉框架的模板,填入不同内容后可能属于不同结构类型。掌握正确的判断方法,可以帮助你准确识别和选择信息图类型。

判断流程

第一步:识别核心视觉特征

按以下优先级顺序依次判断,一旦匹配即可确定分类:

Code
1. 有地图/空间元素? → 地理结构 ↓ 2. 有标准图表(坐标轴、数据条等)? → 统计图 ↓ 3. 有明确对比布局(左右分栏、VS等)? → 对比结构 ↓ 4. 有明显层级/树状结构? → 层级结构 ↓ 5. 有网络/循环连接? → 关系结构 ↓ 6. 有方向性流程(箭头、连接线)? → 顺序结构 ↓ 7. 其他情况 → 列表结构(默认类别)

第二步:应用核心原则

结构为主,语义为辅

  • 优先看模板的结构意图:视觉元素如何引导用户组织信息
  • 再结合设计者的预期用途:模板的典型应用场景

💡 示例:一个有编号的卡片布局,如果没有箭头或连接线,应归为”列表结构”而非”顺序结构”,因为其结构意图是并列展示,而非强调顺序关系。

常见混淆点辨析

1. 列表结构 vs 顺序结构

这是最容易混淆的两种类型,关键判断标准:

对比维度列表结构顺序结构
编号可以有编号(1、2、3…)通常有编号或步骤标识
连接元素❌ 没有箭头或连接线✅ 有箭头、连接线、时间轴
顺序性可随意调整顺序顺序不可随意调换
语义关系信息项地位平等信息项有先后逻辑关系

判断口诀:有编号 ≠ 顺序结构,关键看连接!

实例对比:

  • ✅ 列表结构:「产品的 5 大特性」(有编号,无连接线,可任意调整顺序)
  • ✅ 顺序结构:「用户注册的 5 个步骤」(有编号,有箭头连接,必须按顺序执行)

2. 顺序结构 vs 关系结构

对比维度顺序结构关系结构
流向单向线性流动可双向或多向连接
起点终点有明确的起点和终点可以有多个起点和终点
强调重点强调前后推进关系强调关系网络
典型场景流程、时间线、步骤工作流、系统架构、知识图谱

实例对比:

  • ✅ 顺序结构:「产品开发流程」(需求 → 设计 → 开发 → 测试 → 上线)
  • ✅ 关系结构:「产品团队协作图」(各角色之间有复杂的相互依赖和沟通关系)

3. 层级结构 vs 关系结构

对比维度层级结构关系结构
组织形式树状、自上而下网状、多向连接
关系类型主从关系、包含关系平等关系、相互作用
视觉呈现明显的层级大小差异节点大小相对平等

特殊情况处理

多特征共存

当一个信息图同时具备多种结构特征时:

  1. 按优先级选择主分类:参考判断流程中的优先级顺序
  2. 添加次要分类:基于设计的语义倾向补充分类
  3. 使用标签系统:标识该模板可适配的多种结构类型

示例:一个四象限图可能既有「对比结构」特征(四个象限对比),又有「关系结构」特征(象限间的关系)。此时应以最明显的「对比结构」为主分类,「关系结构」为次要分类。

特征不明显

当视觉特征不够明显、难以判断时:

  • 默认归类:归入”列表结构”作为默认类别
  • 询问设计意图:咨询设计者的预期用途
  • 观察使用场景:看实际使用时最常填入什么类型的内容

一致性原则

  • 相似模板归类一致:视觉结构相似的模板必须归入同一类别
  • 系列模板保持统一:同一系列的不同变体应保持主分类一致
  • 避免主观随意:基于客观的视觉特征判断,而非个人偏好

分类的实际应用

设计指导

根据内容类型快速定位合适的结构形式,提高设计效率。

模板推荐

基于用户的内容需求,推荐最匹配的信息图模板。

数据映射

不同结构类型对应不同的数据组织方式,便于自动化数据填充和生成。

智能优化

通过用户使用数据和反馈,持续优化分类体系和推荐算法。

小结

AntV 的信息图分类体系以结构形式为核心维度,建立了清晰、实用的分类标准。这套体系:

  • ✅ 维度统一:专注于结构形式这一单一维度
  • ✅ 边界清晰:通过优先级判断减少分类歧义
  • ✅ 实用性强:直接服务于设计、推荐、数据抽取等应用场景
  • ✅ 可扩展:支持多重分类和标签体系,适应复杂场景

通过理解这套分类体系,你可以更准确地选择和使用信息图模板,创作出结构清晰、表达准确的信息图作品。

Previous信息图理论
Next核心理论

AntV Infographic
Copyright © Ant Group Co.
Docs
Quick Start
Core Concepts
Custom Design
Infographic Theory
API Reference
JSX
API
Design Assets
More
More Examples
AI Generated Infographics
GitHub
Contribute
Friendly Links
AntV
G2
G6
L7
JS
1. 有地图/空间元素? → 地理结构
↓
2. 有标准图表(坐标轴、数据条等)? → 统计图
↓
3. 有明确对比布局(左右分栏、VS等)? → 对比结构
↓
4. 有明显层级/树状结构? → 层级结构
↓
5. 有网络/循环连接? → 关系结构
↓
6. 有方向性流程(箭头、连接线)? → 顺序结构
↓
7. 其他情况 → 列表结构(默认类别)