Infographic

---
name: infographic
description: 信息图——长文或数据做成一张能看懂的竖版长图，HTML 排版后截成图片
---

# 信息图

## 适用场景
"这篇报告做成一张图"、"数据做成信息图发朋友圈"、"一图看懂 XX"。

## 先想清楚：这张图只能说一件事

信息图失败的唯一原因是什么都想塞。动手前先写下来：
**这张图要让人记住的那一句话是什么？** 写不出来就别做图，做出来也没人看。

其余内容按"支撑这句话"来筛，撑不住的全删。

## 怎么做

用 `write_file` 写一个 HTML，再用 `html_to_image` 截成图。
不要用 `generate_image` 画信息图——生图模型写不对字，数字和中文一定会糊。

### 尺寸
- 竖版长图（微信/朋友圈）：宽 750，高度随内容，一般 2000-4000
- 小红书：1242 × 1660（3:4）
- PPT 里用：1600 × 900

### 版面顺序
```
标题区      主标题 + 一句话副标题
核心数字    1-3 个大数字，字号是正文的 4 倍以上
分区 1..N   每区一个小标题 + 一张图/一组数
结尾        结论一句话 + 出处 + 你的署名/二维码位
```

### 视觉规矩
- **一个主色 + 一个强调色 + 中性灰**，就这三个。第四个颜色一出现画面就脏
- 字号只用三档：大标题 / 小标题 / 正文。不要每块都换字号
- 留白比你以为的要多——上下分区之间至少 60px
- 数字用等宽或数字字体，中文正文用系统无衬线
- 不要用阴影和渐变堆装饰；分区靠空白和细分割线区分

配色和字体体系直接用 `web-styles` 技能里的规范，别自己现编。

### 图表
区块里的图表用 `gen_diagram`（`kind:"echarts"`）单独生成 PNG，再在 HTML 里 `<img>` 引入。
柱状/折线/占比三种够用了，别上雷达图和词云。

## 检查（截图前必做一遍）
- 缩到手机宽度看，最小的字还认得出来吗
- 每个数字都有单位和时间口径吗
- 有出处吗
- 遮住标题，还能看懂这张图在说什么吗

## 交付
`信息图.png` + 生成它的 `信息图.html`（留着，改一版不用重做）。
一张图超过 4000px 高就拆成两张，太长没人滑到底。

## 红线
- 数字必须和原始资料一致，**不许为了版面好看凑整**
- 坐标轴不许从非零开始放大差距
- 引用的数据一定要标出处和时间
- 别用别人的 logo 和有版权的图

## 质量标准
- 一句话主旨清楚
- 三色以内、三档字号以内
- 手机上看得清