格子越深，表示该主题在这项指标上越高。
清晰86
说服74
密度55
制作成本32
作业适配78
工作适配92
低高
简短问答
什么时候选幻灯片和文档网格？
故事符合「PowerPoint 或 Google 幻灯片、单页纸、课堂海报」时选用。
什么时候避开？
遇到「堆叠没有共享边缘的自由浮动盒子」就换形式。
谁发明或推广了它？
瑞士电网系统；后来的演示模板和 CSS 网格
它编码什么？
柱子、排水沟和边距作为一个共享的空间系统
广告能用吗？
在微信、抖音与展示广告里主张能一眼看见就可以；否则把图放在落地页。
老师会收吗？
实验报告与展板里有轴、单位、来源一行就可以。
幻灯片和文档网格把值编码为柱子、排水沟和边距作为一个共享的空间系统。瑞士电网系统；后来的演示模板和 CSS 网格。
工作报告、广告与作业中适合「PowerPoint 或 Google 幻灯片、单页纸、课堂海报」。若「堆叠没有共享边缘的自由浮动盒子」，换一种形式。
软件
- Open Props — 设计标记，包括空间和尺寸比例，以实现一致的布局。 · MIT · github.com/open-props/open-props
- normalize.css — 交付 HTML 讲义时的基线渲染一致性。 · MIT · github.com/necolas/normalize.css
- Primer CSS — 打开 GitHub 设计系统间距模式，您可以研究。 · MIT · github.com/primer/css
- Tailwind CSS — 实用间距尺度 - 抢走节奏，不一定是堆叠。 · MIT · github.com/tailwindlabs/tailwindcss
- Geometry demos — 服务器绘制的形状骨架，用于教授对齐。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
导出
- 导出 1 — SVG
- 导出 2 — PDF
- 导出 3 — 把 EMF/SVG 放进幻灯（不要截图）
- 导出 4 — 网页用 SVG，印刷用 PDF
无障碍
- 无障碍 1 — 不要只靠色相。叠上纹理、标签和位置。
- 无障碍 2 — 正文对比 4.5:1，大标记 3:1。
- 无障碍 3 — 图上写短替代文本。数字也做成 HTML 表。
- 无障碍 4 — 动效只用于强调。尊重 prefers-reduced-motion。
幻灯片和文档网格：守住柱子、排水沟和边距作为一个共享的空间系统，「堆叠没有共享边缘的自由浮动盒子」时换图。