这篇解决什么问题
场景：你想在一张图里讲清楚一整套方法，结果图上是六个色块、五种字号、四个箭头，读者看了三秒什么也没记住。信息密集图的问题从来不是“装不下”，是“层级没压住”。
交付物：一张九行症状对照表，一组可抄的三级字号与分组留白参数，一张按内容类型套层级的对照表，以及一套包含三秒测试的自检清单。
这篇不解决什么：不讲数据怎么分析和结论怎么提炼，不讲图表类型选型，也不解决长文排版（那是文章不是图）。
症状对照表
下表左列是你在成品上看到的症状，中列是根因，右列是改法。绝大多数“看起来乱”的图，根因都在第二到第四行：层级手段用得太多，等于没有层级。层级是稀缺资源，把它用在一个地方，就意味着别的地方没有了。
| 症状 | 为什么会这样 | 怎么改 |
|---|---|---|
| 一眼看过去不知道先看哪个 | 所有元素视觉权重接近，没有最高级 | 建立三级字号，相邻档位至少差 1.5 倍 |
| 字号有五六种 | 每次觉得某句重要就随手加大一点 | 全图只允许三档字号，多出来的全部并档 |
| 颜色五颜六色，重点反而不突出 | 强调色用得太多，等于没有强调 | 全图只留一种强调色，且只给需要第一眼看到的内容 |
| 对齐混乱，文字块边缘参差 | 混用了居中对齐和左对齐，或元素随手摆放 | 定一条左基准线，所有文字块贴同一条线 |
| 内容分了几块但看不出分组 | 组间距和行距一样大 | 组间距设为行距的 1.5–2 倍，让分组靠留白而非分隔线 |
| 注释和正文分不开 | 三级字号和二级太接近，只靠颜色区分 | 用字重和位置区分，不靠颜色；注释统一放在组内底部 |
| 小字在手机上糊成一团 | 三级字号低于实际展示尺寸的可读下限，且被平台压缩 | 三级字号按最终展示尺寸定，先缩到真实大小再看 |
| 图标和箭头加得越多越乱 | 把装饰当成了层级手段 | 装饰只保留一种，且颜色不与强调色抢 |
| 图例找不到或看不懂 | 图例离数据太远 | 优先直接标在数据旁，能直接标就不要图例 |
把上面九行收敛成三条：字号只留三级，强调色只留一种，分组靠留白。参数可以直接抄下面这组——需要说明的是，这组数值是本人按“相邻档位至少差 1.5 倍”这条经验规则推算的，不是任何标准或平台规定，请按你的实际展示尺寸回调。
画布基准：1080 px 宽
一级（主标题/结论）：72–96 px，字重最重
二级（分组小标题）：40–48 px
三级（正文与注释）：28–32 px，不更低
行距：字号的 1.2–1.4 倍
组间距：行距的 1.5–2 倍
强调色：全图 1 种，只用于数字与结论
中性色：正文用深灰，注释用中灰，其余全部去色
对齐：一条左基准线 + 至多两条纵向参考线验收：把图缩到手机屏幕宽度看，三级字号仍然读得清；用取色工具查正文与背景的对比度，正文级不低于 4.5:1（WCAG 2.1 AA 的下限）。
执行顺序也有讲究：先压字号，再定强调色，最后调留白。反过来做会反复返工——留白是跟着分组走的，而分组要等字号定下来才看得出来。
三类典型情况怎么套
信息图按内容形态分三类，层级压法不一样。判断依据是“读者看完应该记住什么”：记住步骤就是流程型，记住数字就是数据型，记住条目就是清单型。先判断类型，再套对应的做法。
| 类型 | 典型内容 | 层级怎么压 | 三秒验收 |
|---|---|---|---|
| 流程步骤型 | N 步教程、操作指引 | 一级给结论或结果，二级给步骤序号加一句短句，三级放补充说明；序号本身就是最强的层级工具，不要再用颜色加码 | 看完能说出“一共几步、第一步干什么” |
| 数据对比型 | 测评、参数对比、变化曲线 | 一级给结论数字，二级给对比项名称，三级给统计口径注释；强调色只给结论数字，其余全部中性 | 看完能说出一个数字和它代表什么 |
| 清单要点型 | 避坑清单、检查项、要点汇总 | 一级给清单主题，二级给每条要点的首句，三级放细节；每组之间用留白分组，不用分隔线 | 看完能说出“一共几条、哪条最关键” |
如果一张图同时属于两类（既有步骤又有数据），只选一类做主层级，另一类全部降级处理。混用两套层级是信息图最彻底的死法——读者既不知道先看数字，也不知道先看步骤。
自检清单
最后一项是三秒测试，它是整张图唯一的主观验收。做法是：把图按真实展示尺寸放到手机上，给一个没参与制作的人看三秒，然后问他记住了什么。他说出来的那个东西，就是你这张图实际的一级信息——如果它不是你想让他记的，说明层级错了，回去改一级，不要去改颜色。
□ 全图字号只有三档，相邻档位差 ≥1.5 倍
□ 强调色只有 1 种，且只出现在数字与结论上
□ 所有文字块贴同一条左基准线，无居中混排
□ 组间距 ≥ 行距的 1.5 倍，分组靠留白不靠分隔线
□ 三级字号 ≥28px（1080 宽基准），且缩到展示尺寸后仍可读
□ 正文与背景对比度 ≥4.5:1（WCAG 2.1 AA）
□ 装饰元素只有 1 种，未与强调色抢视线
□ 数据优先直接标注，图例仅在无法直标时使用
□ 已做三秒测试：对方记住的正是你设计的一级信息翻车与补救
最常见的翻车是“并档时舍不得”。你给每一句都找了重要的理由，于是三档变五档。补救办法是硬性并档：把全图文字按重要性排序，第 4 名之后全部降到三级，不允许存在第 3.5 档。
第二种是“靠颜色弥补层级”。层级没压住的时候，第一反应往往是加颜色，结果是颜色也乱了。补救办法是反过来做：先把全图去掉颜色只剩灰度，如果灰度下层级已经清楚，再上单色强调；如果灰度下就不清楚，加多少颜色都没用。
第三种是“只看大图不看缩略图”。信息图大多在手机上被看到，而你在电脑上做的所有判断都会偏乐观。补救办法是把“缩到真实展示尺寸再看一遍”写成流程里不可跳过的最后一步。
下一步
把三级字号、行距、组间距和强调色存成一个模板，之后所有信息图套同一套。跑十张之后你会发现，真正花时间的不是排版，而是决定“这张图的一级信息到底是什么”——那个决定越早做出，后面越省事。
还有一件小事但管用：图做完别急着发，隔半天再看一遍。刚做完时你对内容太熟，会自己脑补层级，隔一段时间再看，读者视角才回来。
资料来源与整理日期（2026-10-04）：对比度数值引自 WCAG 2.1 成功准则 1.4.3 的 AA 级要求，为公开标准；三级字号、行距、组间距等数值为本人按“相邻档位至少差 1.5 倍”这一经验规则推算的建议值，非标准、非平台规定，也非本人实测；三秒测试为通用的可用性自查做法，本文给出的是可操作步骤，不引用任何实验数据。