这篇文章演示 PPT 案例解析专用的 7 个内容组件。

1. 图片对比：修改前 / 修改后

拖动金色滑块查看差异：

修改前修改后

⇄

2. 单图展示：一页 PPT

● ● ●P.03

🔍 放大查看

✕

目录页：章节导航也是信息设计

滚轮缩放 · 拖动平移 · 双击复位 · Esc 关闭

3. 图集：一组页面

点击任意一张可放大浏览：

✕

4. 设计流程时间轴

1. 01

   需求拆解Day 1

   和客户对齐：这场演讲要让人记住哪三件事？

2. 02

   结构大纲Day 2

   先写故事线，再动手做页面——顺序不能反。

3. 03

   版式设计Day 3-5

   12 列网格 + 字号三级阶梯，视觉统一。

4. 04

   细节打磨Day 6

   对齐、间距、标点，每一个像素都值得较真。

5. 信息卡：强调关键信息

6. 指标卡：案例数据

7. 标注框：设计细节说明

1920 × 1080

8. 设计系统展示区

项目档案下方会自动渲染色卡 + 字体样张 + 网格说明（本篇 frontmatter 已配置 design_system）——向客户证明设计是系统化的，而非灵感驱动的。

9. 客户反馈与项目复盘

“

这是我们合作过最省心的设计团队——18 稿迭代没有一次延期，发布会当天大屏效果比彩排还稳。

“

数据页终于能让人看懂了。董事会上没人再问“这页在讲什么”。

REVIEW项目复盘：18 稿教会我的事

回头看，18 稿迭代里有 12 稿集中在数据页版式——不是因为设计不好看，而是因为信息的优先级没有和客户的讲述顺序对齐。

后来我改了流程：初稿前先做一页“叙事地图”，和客户逐页确认每页“只讲一件事”。之后的 6 稿全部是细节打磨，再没有推翻过整页结构。

TAKEAWAY网格不是限制，是让客户的信任有处安放。

---

以上组件都在 src/components/mdx/，在任意 .mdx 文章里 import 即用。