263 lines
7.0 KiB
Markdown
263 lines
7.0 KiB
Markdown
# 场景模板库：按输出类型组织
|
||
|
||
> 与 design-styles.md 的「提示词DNA」组合使用。
|
||
> 公式：`[风格提示词DNA] + [场景模板] + [具体内容描述]`
|
||
|
||
---
|
||
|
||
## 1. 公众号封面 / 文章题图
|
||
|
||
**规格**：
|
||
- 封面图：2.35:1（900×383px 或 1200×510px）
|
||
- 正文插图：16:9（1200×675px）或 4:3（1200×900px）
|
||
|
||
**关键设计要素**：
|
||
- 视觉冲击力优先（用户在信息流中快速扫过）
|
||
- 文字极少或无文字（公众号标题会覆盖在上面）
|
||
- 色彩饱和度适中（微信阅读环境偏白）
|
||
- 避免过度细节（缩略图也要可辨识）
|
||
|
||
**推荐风格**：01 Pentagram / 11 Build / 12 Sagmeister / 18 Kenya Hara / 07 Field.io
|
||
|
||
**场景提示词模板**：
|
||
```
|
||
[风格DNA插入此处]
|
||
- Article cover image for WeChat subscription
|
||
- Landscape format, 2.35:1 aspect ratio
|
||
- Bold visual impact, minimal or no text
|
||
- Moderate color saturation for white reading environment
|
||
- Must remain recognizable as thumbnail
|
||
- Clean composition with clear focal point
|
||
```
|
||
|
||
---
|
||
|
||
## 2. 正文配图 / 概念插画
|
||
|
||
**规格**：
|
||
- 16:9（1200×675px）最通用
|
||
- 1:1（800×800px）适合强调
|
||
- 4:3（1200×900px）适合信息密集
|
||
|
||
**关键设计要素**：
|
||
- 服务于文章论点，不是装饰
|
||
- 与上下文形成视觉节奏
|
||
- 简洁表达一个核心概念
|
||
- AI生成优先，HTML截图仅在精确数据表格时用
|
||
|
||
**推荐风格**：根据文章调性选择，常用 01/04/10/17/18
|
||
|
||
**场景提示词模板**：
|
||
```
|
||
[风格DNA插入此处]
|
||
- Article illustration, concept visualization
|
||
- [16:9 / 1:1 / 4:3] aspect ratio
|
||
- Single clear concept: [描述核心概念]
|
||
- Serve the argument, not decoration
|
||
- [Light/Dark] background to match article tone
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 信息图 / 数据可视化
|
||
|
||
**规格**：
|
||
- 竖版长图：1080×1920px（手机阅读）
|
||
- 横版：1920×1080px（文章内嵌）
|
||
- 方形：1080×1080px（社交媒体）
|
||
|
||
**关键设计要素**：
|
||
- 信息层级清晰（标题 → 核心数据 → 细节）
|
||
- 数据准确，不编造
|
||
- 视觉引导线（用户阅读路径）
|
||
- 适当使用图标/图表辅助理解
|
||
|
||
**推荐风格**：04 Fathom / 10 Müller-Brockmann / 02 Stamen / 17 Takram
|
||
|
||
**场景提示词模板**：
|
||
```
|
||
[风格DNA插入此处]
|
||
- Infographic / data visualization
|
||
- [Vertical 1080x1920 / Horizontal 1920x1080 / Square 1080x1080]
|
||
- Clear information hierarchy: title → key data → details
|
||
- Visual flow guiding reader's eye path
|
||
- Icons and charts for comprehension
|
||
- Data-accurate, no decorative distortion
|
||
```
|
||
|
||
---
|
||
|
||
## 4. PPT / Keynote 演示
|
||
|
||
**规格**：
|
||
- 标准：16:9（1920×1080px）
|
||
- 宽屏：16:10（1920×1200px）
|
||
|
||
**关键设计要素**：
|
||
- 每页一个核心信息（不堆砌）
|
||
- 字号层级明确（标题40pt+ / 正文24pt+ / 注释16pt+）
|
||
- 大量留白，投影时更清晰
|
||
- 图文比例至少 60:40
|
||
- 一致的视觉系统（颜色、字体、间距）
|
||
|
||
**推荐风格**：01 Pentagram / 10 Müller-Brockmann / 11 Build / 18 Kenya Hara / 04 Fathom
|
||
|
||
**场景提示词模板**：
|
||
```
|
||
[风格DNA插入此处]
|
||
- Presentation slide design, 16:9
|
||
- One core message per slide
|
||
- Clear type hierarchy (title 40pt+, body 24pt+)
|
||
- Generous whitespace for projection clarity
|
||
- Consistent visual system throughout
|
||
- [Light/Dark] theme
|
||
```
|
||
|
||
---
|
||
|
||
## 5. PDF 白皮书 / 技术报告
|
||
|
||
**规格**：
|
||
- A4 纵向（210×297mm / 595×842pt）
|
||
- Letter 纵向（216×279mm / 612×792pt）
|
||
|
||
**关键设计要素**：
|
||
- 长文阅读优化（行宽66字符、行高1.5-1.8）
|
||
- 清晰的章节导航系统
|
||
- 页眉/页脚/页码的统一设计
|
||
- 图表与正文的优雅共存
|
||
- 引用/注释系统
|
||
- 封面页设计精致
|
||
|
||
**推荐风格**：10 Müller-Brockmann / 04 Fathom / 03 Information Architects / 17 Takram / 19 Irma Boom
|
||
|
||
**场景提示词模板**：
|
||
```
|
||
[风格DNA插入此处]
|
||
- PDF document / white paper design
|
||
- A4 portrait format (210×297mm)
|
||
- Long-form reading optimized (66 char line width, 1.5 line height)
|
||
- Clear chapter navigation system
|
||
- Elegant header/footer/page number design
|
||
- Charts integrated with body text
|
||
- Professional cover page
|
||
```
|
||
|
||
---
|
||
|
||
## 6. 落地页 / 产品官网
|
||
|
||
**规格**：
|
||
- Desktop: 1440px 宽度设计（响应至320px）
|
||
- 首屏高度：100vh
|
||
|
||
**关键设计要素**：
|
||
- 首屏5秒内传达核心价值
|
||
- 清晰的CTA（行动按钮）
|
||
- 滚动叙事结构（问题→方案→证明→行动）
|
||
- 移动端适配
|
||
- 加载速度
|
||
|
||
**推荐风格**：05 Locomotive / 01 Pentagram / 11 Build / 08 Resn / 06 Active Theory
|
||
|
||
**场景提示词模板**：
|
||
```
|
||
[风格DNA插入此处]
|
||
- Landing page / product website
|
||
- Desktop 1440px width, responsive
|
||
- Hero section 100vh, core value in 5 seconds
|
||
- Clear CTA button design
|
||
- Scroll narrative: problem → solution → proof → action
|
||
- Modern web aesthetic
|
||
```
|
||
|
||
---
|
||
|
||
## 7. App UI / 原型界面
|
||
|
||
**规格**：
|
||
- iOS: 390×844pt（iPhone 15）
|
||
- Android: 360×800dp
|
||
- 平板: 1024×1366pt（iPad Pro）
|
||
|
||
**关键设计要素**：
|
||
- 触摸友好（最小点击区44×44pt）
|
||
- 系统设计语言一致性
|
||
- 状态栏/导航栏/Tab栏的标准处理
|
||
- 信息密度适中（移动端不宜过密）
|
||
|
||
**推荐风格**：17 Takram / 11 Build / 03 Information Architects / 01 Pentagram
|
||
|
||
**场景提示词模板**：
|
||
```
|
||
[风格DNA插入此处]
|
||
- Mobile app UI design
|
||
- iOS [390×844pt] / Android [360×800dp]
|
||
- Touch-friendly (44pt minimum tap targets)
|
||
- Consistent design system
|
||
- Standard status bar / navigation / tab bar
|
||
- Moderate information density
|
||
```
|
||
|
||
---
|
||
|
||
## 8. 小红书配图
|
||
|
||
**规格**：
|
||
- 竖版：3:4（1080×1440px）最佳
|
||
- 方形：1:1（1080×1080px）
|
||
- 首图决定点击率
|
||
|
||
**关键设计要素**：
|
||
- 视觉吸引力第一（在瀑布流中竞争）
|
||
- 可以有少量文字（但不超过画面20%）
|
||
- 色彩鲜明但不俗
|
||
- 生活感/质感/氛围感
|
||
|
||
**推荐风格**：12 Sagmeister / 11 Build / 20 Neo Shen / 09 Experimental Jetset
|
||
|
||
**场景提示词模板**：
|
||
```
|
||
[风格DNA插入此处]
|
||
- Social media image for Xiaohongshu (RED)
|
||
- Vertical 3:4 (1080×1440px)
|
||
- Eye-catching in waterfall feed
|
||
- Minimal text overlay (under 20% of area)
|
||
- Vivid but tasteful colors
|
||
- Lifestyle/texture/atmosphere feel
|
||
```
|
||
|
||
---
|
||
|
||
## 组合示例
|
||
|
||
**场景**：公众号封面，介绍一款AI编程工具，想要专业但有温度
|
||
|
||
**Step 1**：选风格 → 17 Takram（专业+温度）
|
||
**Step 2**：取Takram提示词DNA + 公众号封面模板
|
||
|
||
```
|
||
Takram Japanese speculative design:
|
||
- Elegant concept prototypes and diagrams
|
||
- Soft tech aesthetic (rounded corners, gentle shadows)
|
||
- Charts and diagrams as art pieces
|
||
- Modest sophistication
|
||
- Neutral natural colors (beige, soft gray, muted green)
|
||
- Design as philosophical inquiry
|
||
|
||
Article cover image for WeChat subscription
|
||
- Landscape format, 2.35:1 aspect ratio (1200×510px)
|
||
- Bold visual impact, minimal text
|
||
- Moderate color saturation for white reading environment
|
||
- Must remain recognizable as thumbnail
|
||
- Clean composition with clear focal point
|
||
|
||
Content: An AI coding assistant tool, showing the concept of human-AI collaboration
|
||
in software development, warm and professional atmosphere
|
||
```
|
||
|
||
---
|
||
|
||
**版本**：v1.0
|
||
**更新日期**：2026-02-13
|