AntV
AntV Infographic
文档
参考
示例
AI
企业版

目录

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

信息图分类

对信息图进行分类是信息图设计和应用的重要基础。合理的分类体系可以:

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

业界分类方式概览

在信息图领域,国内外研究者和平台对信息图有着不同的分类方式。通过对主流信息图平台(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以标准图表形式展示定量数据关系• 坐标轴
• 数据条
• 百分比环
• 统计符号
• 柱状图
• 折线图
• 饼图
• 散点图
• 雷达图

如何判断信息图的分类

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

判断流程

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

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

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

第二步:应用核心原则

结构为主,语义为辅

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

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

常见混淆点辨析

1. 列表结构 vs 顺序结构

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

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

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

实例对比:

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

2. 顺序结构 vs 关系结构

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

实例对比:

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

3. 层级结构 vs 关系结构

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

特殊情况处理

多特征共存

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

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

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

特征不明显

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

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

一致性原则

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

分类的实际应用

设计指导

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

模板推荐

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

数据映射

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

智能优化

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

小结

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

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

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

上一章信息图理论
下一章核心理论

AntV Infographic
Copyright © Ant Group Co.
文档
快速开始
核心概念
自定义设计
信息图理论
API 参考
JSX
API
设计资产
更多
更多示例
AI 在线体验
GitHub
参与贡献
友情链接
AntV
G2
G6
L7
1. 有地图/空间元素? → 地理结构
↓
2. 有标准图表(坐标轴、数据条等)? → 统计图
↓
3. 有明确对比布局(左右分栏、VS等)? → 对比结构
↓
4. 有明显层级/树状结构? → 层级结构
↓
5. 有网络/循环连接? → 关系结构
↓
6. 有方向性流程(箭头、连接线)? → 顺序结构
↓
7. 其他情况 → 列表结构(默认类别)