青绿交互讲义

# 青绿交互讲义 · DESIGN.md

> 来源：PPT Router 的「Reveal.js Skill」实作展示。以下为当前三页作品的设计整理，不是该技能的所有风格，也不是官方模板。配色以原稿参数为主；建议字号与新稿页面模式为适配建议。

## 01 先确定表达目标

适合：技术演讲、课程教学、浏览器演示。
风格目标：清亮浅底、青绿图表与珊瑚色重点，适合现场讲解。
制作前确定三件事：给谁看、看完记住什么、希望采取什么行动。把实际内容归纳成一句核心观点，每页围绕一个结论组织证据。

## 02 配色与字体

| 角色 | 颜色 |
| --- | --- |
| 背景 | `#F5F9F8` |
| 主要文字 | `#173B3B` |
| 主要强调 | `#177F7A` |
| 辅助色 | `#EF695B` |

中文无衬线，代码等宽；投影标题建议30–36pt、正文18–22pt，代码保持可读行长。
字号以最终交付画布为准，CSS px 与 PowerPoint pt 不能直接照抄；保留中文字体回退并检查换行。

## 03 布局规则

图表左大右解释；深青代码区置于底部；流程节点和阶段编号按讲解顺序递进。
默认16:9，安全区内保留全部文字与标签；标题、正文、注释形成明确层级。典型演讲内容页正文建议不超过80个中文字，研究数据表可适当增加，但不能缩小字号塞满。

## 04 图像与视觉语言

青绿主数据，珊瑚色突出变化；背景保持干净。渐进动画属于HTML，截图PPTX不能保留交互。
图片不拉伸，图像要服务观点；图表必须有单位、标签与数据来源。图库里的样图是风格参照，不是客户案例，不复制其品牌、数据或文字作为新稿事实。

## 05 新稿的页面模式

- 封面：核心观点＋一个主要视觉，先验证字体、色彩与整套气质。
- 典型内容：使用上述布局规则表达一个结论及支撑材料，验证图文比例和信息层级。
- 机制或数据：用和内容对应的流程、对照或图表，保留标签及必要注释。
- 结尾：重述核心观点，给出明确行动；减少装饰元素。

以上是从样式推导的新稿结构。页面预览仍为既有三页技能介绍，不冒称已经为用户生成封面与正文。

## 06 两页样稿 → 整稿

先按本设计文档制作一页封面和一页典型内容，实际渲染检查气质、字号、对齐、裁切和编辑方式。使用具体反馈，例如“结论放在图表上方”“减少正文”“保留主数据，降低次要线条对比”。
用户要求先看样稿时先交这两页；普通整稿任务可由代理自检后继续。样稿通过后保持同一字体、配色和图像处理，按每页内容变化构图，最后逐页复核。

## 07 输出与编辑边界

当前展示制作路线：网页演示。
- PowerPoint原生文字：不支持（本次PowerPoint原生文字）；HTML源稿可改
- PowerPoint原生形状：不支持（本次PowerPoint原生形状）
- PowerPoint数据图表：不支持（PowerPoint原生数据图表）
- 修改方法：HTML/CSS编辑；附带edit-html.js供浏览器改字

设计规范可以迁移，但不自动改变所选引擎的编辑能力。需要可编辑正文或图表数据时，先选符合要求的原生路线；不能把整页图片称为原生文字。

## 08 来源

- 对应作品与设计入口：https://ppt-router.haihome.top/styles/revealjs-skill/
- 原项目：https://github.com/ryanbbrown/revealjs-skill
- 本次预览记录：2026-09-14；本设计整理：2026-09-19。
- 方法参考：https://mp.weixin.qq.com/s/lqiYIFVlsQvJP3qksM13aQ