深蓝架构图解

# 深蓝架构图解 · DESIGN.md

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

## 01 先确定表达目标

适合：系统架构、技术复盘、数据解释。
风格目标：结构关系和数据流向优先的技术表达。
制作前确定三件事：给谁看、看完记住什么、希望采取什么行动。把实际内容归纳成一句核心观点，每页围绕一个结论组织证据。

## 02 配色与字体

| 角色 | 颜色 |
| --- | --- |
| 背景 | `#102238` |
| 主要文字 | `#F1F5F9` |
| 主要强调 | `#38BDF8` |

无衬线主体，表格可用IBM Plex Sans；1920×1080参考稿标题57–60px，正文27px。
字号以最终交付画布为准，CSS px 与 PowerPoint pt 不能直接照抄；保留中文字体回退并检查换行。

## 03 布局规则

深色全幅；1.3:1双栏解释，上方结论、下方完整流程；关键链路位于浅一档的蓝色区域。
默认16:9，安全区内保留全部文字与标签；标题、正文、注释形成明确层级。典型演讲内容页正文建议不超过80个中文字，研究数据表可适当增加，但不能缩小字号塞满。

## 04 图像与视觉语言

青色节点与边线，40px间距的极淡网格仅作空间参照；网格不影响文字，箭头不用装饰性乱连。
图片不拉伸，图像要服务观点；图表必须有单位、标签与数据来源。图库里的样图是风格参照，不是客户案例，不复制其品牌、数据或文字作为新稿事实。

## 05 新稿的页面模式

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

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

## 06 两页样稿 → 整稿

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

## 07 输出与编辑边界

当前展示制作路线：网页演示。
- PowerPoint原生文字：不支持
- PowerPoint原生形状：不支持
- PowerPoint数据图表：未验证
- 修改方法：修改HTML/CSS后重新截图；PPT中只能替换整页图片

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

## 08 来源

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