# 课件语义配图手册

## 1. 视觉语言

这套方法来自企业流程与 AI 落地课程的实际课件。辨识度来自清楚、克制、可核对，而不是插画数量。

### 颜色角色

| 角色 | 默认色 | 用途 |
|---|---|---|
| 结构深蓝 | `#15366D` | 外框、主节点、标题条、泳道边界 |
| 推进亮蓝 | `#1F5BE0` | 箭头、路径、顺序、选中态 |
| 重点浅蓝 | `#EAF1FF` | 目标结果、推荐项、关键节点 |
| 内容白 | `#FFFFFF` | 普通节点和阅读面 |
| 次要灰 | `#98A2B3` / `#40516B` | 注释、反馈线、非重点信息 |
| 风险红 | `#D92D20` | 只用于异常、阻断和风险，不作装饰 |

同一颜色在整套课件中保持相同语义。不要让“蓝色有时表示输入、有时表示风险”。

### 形态角色

- 3 px 左右深蓝轮廓表示业务边界。
- 5–7 px 亮蓝线表示主要推进方向。
- 灰色虚线表示反馈、参考或非主路径。
- 6–10 px 圆角保持企业蓝图感；避免胶囊化所有元素。
- 主图使用白底，不用渐变、3D 和厚重阴影。
- 图注使用结论句，颜色低于标题但高于普通脚注。

## 2. 图形原型选择矩阵

| 页面关系 | 首选原型 | 适合内容 | 常见误用 |
|---|---|---|---|
| 3–6 个连续步骤 | 阶段流 `stage-flow` | 方法、课程路径、交付流程 | 步骤没有先后却硬加箭头 |
| 输入经过核心处理得到输出 | 输入输出 `input-output` | Skill、流程节点、数据处理 | 把互不相关的要点塞成输入 |
| 两种方式差异 | 对比 `comparison` | 现状/未来、传统/AI | 只有清单，没有比较维度 |
| 多层能力构成 | 分层架构 `layered-architecture` | 平台、治理、组织、能力 | 层级之间没有依赖关系 |
| 多项材料组成成果 | 交付物组合 `deliverable-stack` | 材料包、成果包、Skill 包 | 输出只是输入的同义词 |
| 四项条件共同判断 | 决策矩阵 `decision-matrix` | 优先级、Go/No-Go | 需要坐标轴却只画四个框 |
| 从全景逐步收敛 | 选择漏斗 `selection-funnel` | L1–L3、筛选、聚焦 | 普通流程误画成漏斗 |
| 条件通过才继续 | 治理闸门 `governance-gate` | 权限、审核、风险停止 | 没有阻断条件却画锁 |
| 结果反馈到下一轮 | 生命周期 `lifecycle` | 测试、迭代、运营 | 线性流程误画成闭环 |
| 检查是否具备条件 | 评分卡 `scorecard` | 离场清单、验收、路演 | 只有名词，没有判断标准 |
| 跨角色与时间流转 | 泳道图 | 人、Agent、系统协同 | 角色不在左、活动没有方向 |
| 真实系统操作 | 产品截图 | 平台、按钮、配置、结果证据 | 截整屏却不突出相关区域 |

## 3. 页面分级

### Hero 主图页

- 适合课程方法、关键流程、架构、复杂协同和结论页。
- 图形通常占正文区域约 25%–45%。
- 主体宽度尽量占图框 65%–90%，避免独占大框却只有一个小图标。
- 正文上半部已经很密时，先压缩重复表达，再给图留出完整空间。

### Support 辅图页

- 适合三四个关系、轻量步骤、局部输入输出或对比提示。
- 图形不应与正文争夺第一视觉焦点。
- 使用小型结构图，不用无关图标拼贴。

### Keep 克制页

- 封面、章节页、测验页、数据密集页和已有完整图形页通常不需要补图。
- 留白是节奏，不等于必须填满。

### Evidence 证据页

- 使用真实照片、界面截图、数据图或产物样例。
- 图片焦点必须与页标题的论点一致；必要时裁切和标注。

## 4. 文本与标签

- 节点标签优先使用 2–8 个汉字；必要时分两行。
- 图中不要放完整段落。长解释放正文或图注。
- 箭头旁只写动作或条件，不写泛泛的“下一步”。
- 图注回答“所以呢”，例如“材料按价值流归位，形成可核对的流程证据”。
- SVG 使用真实 `<text>`，保留可访问的 `aria-label`。

## 5. 课程级节奏

- 连续三页避免同一原型、同一布局和同一视觉密度。
- 章节开头用大结构，章节中部用方法细节，章节结尾用清单或闭环收束。
- 截图页与抽象图页交替，避免整套课件只有框和箭头。
- 一章中深色大面积页面保持少量，作为强调而不是默认背景。

## 6. 典型失败

1. **先找图再解释**：图片与论点只共享关键词，没有关系。
2. **装饰性隐喻**：桥、河流、人物、齿轮看似生动，却不能核对业务信息。
3. **框大图小**：外框占半页，主体只占中心一小块。
4. **图文互相复读**：标题、正文、图和图注说同一句话。
5. **所有内容都画成流程**：并列、层级、筛选和循环被错误表达。
6. **低分辨率栅格图**：桌面看起来尚可，投屏和打印模糊。
7. **连续模板复制**：每页都是四个框加箭头，课程节奏扁平。
8. **生成式图片承载中文逻辑**：文字错误、关系不可编辑、无法自动检查。

## 7. 实现建议

HTML 课件把每张图包在统一容器中：

```html
<div class="semantic-visual business-visual"
     data-visual-type="input-output"
     data-business-question="输入经过什么处理形成什么输出">
  <svg viewBox="0 0 900 190" role="img" aria-label="材料经过流程梳理形成可核对成果">…</svg>
  <div class="semantic-caption">材料按价值流归位，形成可核对的流程证据</div>
</div>
```

把视觉增强放进独立脚本或组件层。这样可以逐页回退、测试类型数量、检查业务问题，并避免直接重写大型单文件课件。

