presentation-design
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePresentation Design
演示文稿设计
Visual design guidance for bold, minimal presentations optimized for live presenting.
为适配现场展示的大胆、极简风格演示文稿提供视觉设计指导。
Core Style
核心风格
Theme: Dark-first, high contrast, minimal (light mode supported)
Feel: Modern, confident, tech-forward
| Element | Specification |
|---|---|
| Background | Black (#000000) or near-black; light mode: #fafafa |
| Primary text | White (#FFFFFF); light mode: #09090b |
| Secondary text | Gray (#9CA3AF) |
| Accents | Section-specific colors (see below) |
| Typography | Sans-serif (e.g. Geist Sans), light weights at large sizes |
| Letter spacing | Tight (-0.035em to -0.015em) |
主题： 优先深色模式，高对比度，极简风格（支持浅色模式）
风格感受： 现代、自信、科技感
| 元素 | 规范 |
|---|---|
| 背景 | 黑色（#000000）或近黑色；浅色模式：#fafafa |
| 主文本 | 白色（#FFFFFF）；浅色模式：#09090b |
| 次要文本 | 灰色（#9CA3AF） |
| 强调色 | 各章节专属色彩（见下文） |
| 字体 | 无衬线字体（如 Geist Sans），大字号搭配轻量字重 |
| 字间距 | 紧凑（-0.035em 至 -0.015em） |
Typography Hierarchy
字体层级
Impact comes from scale, not weight. Use light/regular weights (400-600) at massive sizes.
SECTION LABEL Small caps, section color, tracked wide
Example: "THE PROBLEM" | "WHAT WORKS"
Headline Massive, primary color, light weight (400-500)
Fluid sizing via container queries
1-5 words per line typical
Subtitle Smaller, secondary/muted color, regular weight
1-2 lines maximum
Body/Bullets Medium size, primary or secondary color
Bold lead-ins (600 weight) when used视觉冲击力来自字号大小，而非字重。使用轻量/常规字重（400-600）搭配超大字号。
章节标签 小型大写字母，章节色彩，加宽字间距
示例："THE PROBLEM" | "WHAT WORKS"
标题 超大字号，主色调，轻量字重（400-500）
通过容器查询实现动态字号
每行通常1-5个单词
副标题 较小字号，次要/低饱和度色彩，常规字重
最多1-2行
正文/项目符号 中等字号，主色调或次要色调
使用时可搭配加粗开头（600字重）Text Contrast Hierarchy
文本对比度层级
Use 4 levels of contrast to create depth:
| Level | Purpose | Example |
|---|---|---|
| Primary | Headlines, key content | White / #FFFFFF |
| Secondary | Subtitles, supporting text | Light gray |
| Muted | Labels, metadata | Medium gray |
| Faint | Background elements | Dark gray |
使用4级对比度营造层次感：
| 层级 | 用途 | 示例 |
|---|---|---|
| 主级 | 标题、核心内容 | 白色 / #FFFFFF |
| 次级 | 副标题、辅助文本 | 浅灰色 |
| 低饱和 | 标签、元数据 | 中灰色 |
| 淡色 | 背景元素 | 深灰色 |
Section Colors
章节色彩
Each major section of a presentation gets its own accent color. This reinforces structure and helps the audience track where they are.
| Color | Hex (dark) | Typical use |
|---|---|---|
| Teal | #14b8a6 | Opening, framing, recap |
| Red | #f87171 | Problems, challenges, tension |
| Purple | #a78bfa | Solutions, features, tools |
| Amber | #fbbf24 | Data, reality checks, caveats |
| Green | #34d399 | Best practices, what works |
| Blue | #60a5fa | Technical, implementation |
| Pink | #f472b6 | Highlights, special callouts |
Section colors appear in: section labels, gradient backgrounds, progress bars, and accent elements.
演示文稿的每个主要章节都有专属强调色。这能强化结构，帮助观众清晰定位当前内容。
| 颜色 | 深色模式十六进制值 | 典型用途 |
|---|---|---|
| 蓝绿色 | #14b8a6 | 开场、框架介绍、回顾 |
| 红色 | #f87171 | 问题、挑战、矛盾点 |
| 紫色 | #a78bfa | 解决方案、功能、工具 |
| 琥珀色 | #fbbf24 | 数据、现实校验、注意事项 |
| 绿色 | #34d399 | 最佳实践、有效方案 |
| 蓝色 | #60a5fa | 技术细节、实施说明 |
| 粉色 | #f472b6 | 重点高亮、特殊提示 |
章节色彩应用于：章节标签、渐变背景、进度条和强调元素。
Layout Patterns
布局模式
Full Statement (most common)
完整陈述式（最常用）
┌─────────────────────────────────────────┐
│ SECTION LABEL │
│ │
│ Massive │
│ Headline │
│ Here │
│ │
│ Subtitle text in muted color │
│ [ref] ↗ │
└─────────────────────────────────────────┘┌─────────────────────────────────────────┐
│ 章节标签 │
│ │
│ 超大字号 │
│ 标题 │
│ 内容 │
│ │
│ 低饱和度色彩的副标题文本 │
│ [参考] ↗ │
└─────────────────────────────────────────┘Big Statement (maximum impact)
强冲击陈述式
┌─────────────────────────────────────────┐
│ SECTION LABEL │
│ │
│ │
│ Even Bigger │
│ Statement │
│ │
│ │
└─────────────────────────────────────────┘┌─────────────────────────────────────────┐
│ 章节标签 │
│ │
│ │
│ 更大字号 │
│ 陈述内容 │
│ │
│ │
└─────────────────────────────────────────┘Split Layout
拆分布局
┌─────────────────────────────────────────┐
│ SECTION LABEL │
│ │
│ Headline │ • Point one │
│ Here │ • Point two │
│ │ • Point three │
│ Subtitle │ • Point four │
└─────────────────────────────────────────┘┌─────────────────────────────────────────┐
│ 章节标签 │
│ │
│ 标题 │ • 要点一 │
│ 内容 │ • 要点二 │
│ │ • 要点三 │
│ 副标题 │ • 要点四 │
└─────────────────────────────────────────┘Section Divider (with gradient)
章节分隔页（带渐变）
┌────────────────────┬────────────────────┐
│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ Section │▓▓▓ Gradient ▓▓▓▓▓▓▓│
│ Title │▓▓▓ Background ▓▓▓▓▓│
│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ Subtitle │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
└────────────────────┴────────────────────┘┌────────────────────┬────────────────────┐
│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ 章节 │▓▓▓ 渐变背景 ▓▓▓▓▓▓▓│
│ 标题 │▓▓▓ ▓▓▓▓▓▓▓│
│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ 副标题 │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
└────────────────────┴────────────────────┘Code Slide
代码幻灯片
┌─────────────────────────────────────────┐
│ SECTION LABEL │
│ Headline │
│ Subtitle │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ // syntax-highlighted code block │ │
│ │ const result = await generate() │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘┌─────────────────────────────────────────┐
│ 章节标签 │
│ 标题 │
│ 副标题 │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ // 带语法高亮的代码块 │ │
│ │ const result = await generate() │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘Data/Metrics
数据/指标
┌─────────────────────────────────────────┐
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ $10M │ │ ~10% │ │ NPS │ │
│ │ ARR │ │ GROWTH │ │ 90 │ │
│ └────────┘ └────────┘ └────────┘ │
│ SECTION LABEL │
│ Headline │
│ Subtitle │
└─────────────────────────────────────────┘┌─────────────────────────────────────────┐
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ $10M │ │ ~10% │ │ NPS │ │
│ │ ARR │ │ 增长率 │ │ 90 │ │
│ └────────┘ └────────┘ └────────┘ │
│ 章节标签 │
│ 标题 │
│ 副标题 │
└─────────────────────────────────────────┘People/Photos Grid
人物/照片网格
┌─────────────────────────────────────────┐
│ Headline │
│ Subtitle │
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │photo│ │photo│ │photo│ │photo│ │
│ │Name │ │Name │ │Name │ │Name │ │
│ │TITLE│ │TITLE│ │TITLE│ │TITLE│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ Photo style: Rounded, B&W or consistent │
└─────────────────────────────────────────┘┌─────────────────────────────────────────┐
│ 标题 │
│ 副标题 │
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │照片 │ │照片 │ │照片 │ │照片 │ │
│ │姓名 │ │姓名 │ │姓名 │ │姓名 │ │
│ │职位 │ │职位 │ │职位 │ │职位 │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ 照片风格：圆形边框，黑白或统一色调 │
└─────────────────────────────────────────┘Slide Type → Layout Mapping
幻灯片类型→布局映射
| Slide Type | Layout |
|---|---|
| Title | Full statement, centered |
| Section divider | Split with gradient, section color |
| Statement | Full statement, left-aligned |
| Big statement | Big statement, maximum scale |
| Question | Full statement, centered |
| Goals/Agenda | Split layout, bullets right |
| Data | Metrics boxes top |
| Code | Headline + syntax-highlighted block |
| Quote | Centered, large quotation marks |
| People | Photos grid |
| Recap | Split layout, labeled bullets |
| Resources | Grouped reference links by section |
| Next steps | Timeline or labeled bullets |
| 幻灯片类型 | 布局 |
|---|---|
| 标题页 | 完整陈述式，居中对齐 |
| 章节分隔页 | 带渐变的拆分布局，使用章节色彩 |
| 陈述页 | 完整陈述式，左对齐 |
| 强冲击陈述页 | 强冲击陈述式，最大字号 |
| 问题页 | 完整陈述式，居中对齐 |
| 目标/议程 | 拆分布局，项目符号居右 |
| 数据页 | 指标卡片置顶 |
| 代码页 | 标题+语法高亮代码块 |
| 引用页 | 居中对齐，搭配大尺寸引号 |
| 人物页 | 照片网格 |
| 回顾页 | 拆分布局，带标签的项目符号 |
| 资源页 | 按章节分组的参考链接 |
| 下一步计划 | 时间线或带标签的项目符号 |
Embedded Content
嵌入式内容
Slides can embed rich media alongside headlines:
- Code blocks — syntax-highlighted, dark surface background
- Terminal output — monospace with ANSI color support
- Tweet cards — styled quote cards with avatar and attribution
- Video previews — thumbnail with play button
- Article previews — link cards with title and description
幻灯片可在标题旁嵌入富媒体内容：
- 代码块 — 带语法高亮，深色背景
- 终端输出 — 等宽字体，支持ANSI色彩
- 推文卡片 — 带头像和署名的引用样式卡片
- 视频预览 — 带播放按钮的缩略图
- 文章预览 — 含标题和描述的链接卡片
Visual Elements
视觉元素
- Section labels: Top-left, uppercase, section color
- Progress bar: Bottom edge, section color, thin (3px)
- References: Bottom footer with clickable URLs
- Gradients: Aurora-style background effects using section color
- Icons: Simple line icons, white or accent color, used sparingly
- 章节标签： 左上角，大写，使用章节色彩
- 进度条： 底部边缘，章节色彩，细线条（3px）
- 参考资料： 底部页脚，带可点击URL
- 渐变效果： 使用章节色彩的极光风格背景效果
- 图标： 简约线性图标，白色或强调色，少量使用
Things to Avoid
注意规避事项
- Dense paragraphs of text
- More than 4-5 bullet points
- Clip art or stock imagery
- Heavy font weights for headlines (use scale instead)
- Multiple competing focal points
- Animation for animation's sake
- 密集的大段文本
- 超过4-5个项目符号
- 剪贴画或库存图片
- 标题使用粗重字重（改用字号大小实现冲击力）
- 多个相互竞争的视觉焦点
- 为动画而添加动画