design-brief-generator

设计简报生成器

概述

生成全面、结构清晰的设计简报，帮助利益相关方达成共识并指导设计项目。此技能可帮助设计师创建清晰的项目简报，明确范围、目标、约束条件和成功标准。

适用于：

• UX/UI 设计师
• 产品设计师
• 设计负责人
• 设计系统团队
• 品牌设计师

---

快速入门

1. 生成设计简报

运行交互式脚本：

scripts/generate_brief.sh

此脚本将引导你创建一份全面的设计简报，涵盖以下内容：

• 项目目标和宗旨
• 目标用户和用户画像
• 设计约束
• 成功标准
• 时间线和交付成果

2. 验证简报

检查简报是否完整：

scripts/validate_brief.sh <brief_file.md>

确保包含所有关键章节。

---

核心工作流

何时创建设计简报

适用于以下情况：

• 新产品／功能设计项目
• 设计系统项目
• 重新设计项目
• 品牌形象项目
• UX 研究项目

以下情况可跳过：

• 细微的 UI 调整
• Bug 修复
• 现有设计的小幅迭代

---

设计简报的组成部分

1. 项目概述

包含内容：

• 项目名称和描述
• 背景和上下文
• 当前开展此项目的原因
• 业务目标
• 要解决的用户问题

示例：

## Project Overview

**Project:** Mobile app redesign
**Background:** Current app has 2.8 star rating with users citing confusing navigation
**Business Goal:** Increase app retention from 15% to 40% (Day 30)
**User Problem:** Users can't find key features, leading to frustration and abandonment

---

2. 设计目标和宗旨

定义成功的标准：

• 主要设计目标
• 次要目标
• 成功指标
• 必备项与加分项

示例：

## Design Goals

**Primary Goal:** Create intuitive navigation that helps users complete core tasks in < 3 taps

**Secondary Goals:**
- Reduce visual clutter by 40%
- Improve accessibility (WCAG AA compliance)
- Establish reusable component library

**Success Metrics:**
- Task success rate: 90%+
- Time on task: -50%
- SUS score: 75+

---

3. 目标用户和用户画像

我们的设计对象：

• 主要用户画像
• 用户需求和痛点
• 用户目标和动机
• 技术熟练程度
• 使用场景

示例：

## Target Users

**Primary Persona:** Sarah, Marketing Manager
- **Age:** 32-45
- **Tech Savvy:** Medium
- **Goals:** Create campaigns quickly, track performance
- **Pain Points:** Current tool too complex, takes too long
- **Context:** Uses on desktop during work hours, sometimes mobile

---

4. 设计原则和方向

项目指导原则：

• 核心设计原则
• 视觉方向
• 交互模式
• 内容策略
• 无障碍要求

示例：

## Design Principles

1. **Clarity over cleverness** - Users should never wonder what to do next
2. **Progressive disclosure** - Show what's needed, hide complexity
3. **Consistent patterns** - Use established design system components
4. **Accessible by default** - WCAG AA minimum, aim for AAA

---

5. 范围和约束

明确范围内和范围外的内容：

范围内：

• 涵盖的屏幕／流程
• 平台（Web、移动端、平板）
• 设备和浏览器
• 无障碍要求

范围外：

• 不在设计范围内的内容
• 后续考虑事项

约束：

• 技术限制
• 时间线限制
• 资源限制
• 需遵循的品牌指南

示例：

## Scope

**In Scope:**
- Dashboard redesign (5 screens)
- Mobile responsive (iOS, Android)
- Dark mode support
- WCAG AA compliance

**Out of Scope:**
- Admin panel (separate project)
- Native mobile apps (web only)
- Marketing website

**Constraints:**
- Must use existing design system
- Launch deadline: 8 weeks
- Development team: 2 engineers
- No custom illustrations budget

---

6. 用户流程和旅程

需要设计的关键用户路径：

• 主要用户流程
• 入口
• 决策点
• 成功状态
• 错误状态

示例：

## Key User Flows

**Flow 1: Create Campaign**
1. Land on dashboard
2. Click "New Campaign"
3. Choose template
4. Customize content
5. Preview
6. Publish
7. Success confirmation

**Flow 2: View Analytics**
[Define the flow]

---

7. 交付成果和时间线

交付内容：

设计交付成果：

• 用户研究（如有需要）
• 线框图
• 高保真模型
• 交互式原型
• 设计规范
• 组件文档
• 无障碍标注

时间线：

• 第 1–2 周：研究和线框图
• 第 3–4 周：高保真设计
• 第 5–6 周：原型和测试
• 第 7–8 周：完善和交接

---

8. 成功标准

衡量成功的方式：

定性指标：

• 用户测试反馈
• 利益相关方批准
• 设计师评审
• 通过无障碍审核

定量指标：

• 任务成功率
• 任务耗时
• 错误率
• SUS 分数
• NPS

示例：

## Success Criteria

**Usability Testing:**
- 8/10 users complete primary task without help
- Average SUS score: 75+
- Zero critical accessibility issues

**Business Metrics (post-launch):**
- 40% Day 30 retention (up from 15%)
- 90% task completion rate
- < 5% error rate

---

设计项目类型

1. 新功能设计

重点领域：

• 验证用户需求
• 与现有产品集成
• 交互模式
• 边缘情况

简报模板： 标准简报，重点关注用户流程

---

2. 重新设计项目

重点领域：

• 当前状态分析
• 有效与无效之处
• 迁移注意事项
• 改版前后对比

附加章节：

• 当前痛点
• 竞品分析
• 设计审查结果

---

3. 设计系统

重点领域：

• 组件清单
• 设计原则
• 使用指南
• 治理

附加章节：

• 推广策略
• 文档计划
• 维护计划

---

4. 品牌／视觉设计

重点领域：

• 品牌属性
• 视觉语言
• 情绪板
• 设计探索

其他章节：

• 品牌指南
• 应用示例
• 交付素材

---

利益相关方协同

需求探索问题

开始前请询问：

1. 我们要解决什么问题？
2. 用户是谁？
3. 业务目标是什么？
4. 时间安排是什么？
5. 有哪些限制？
6. 如何衡量成功？
7. 谁需要审批？

利益相关方评审流程

简要评审清单：

• 产品经理已评审
• 工程负责人已评审（可行性）
• 设计负责人已批准
• 关键利益相关方已达成一致
• 已商定成功指标
• 已确认时间安排
• 已分配资源

---

设计简报最佳实践

应做事项：

• ✅ 从“为什么”开始 - 清楚说明问题
• ✅ 定义成功标准 - 具体、可衡量的标准
• ✅ 列出限制条件 - 技术、时间、资源方面的限制
• ✅ 展示示例 - 灵感、参考资料
• ✅ 尽早争取支持 - 与利益相关方评审草稿
• ✅ 保持简洁 - 最多 2-3 页
• ✅ 采用可视化表达 - 加入图表、模型图、参考资料

不应做事项：

• ❌ 直接跳到解决方案 - 先聚焦问题
• ❌ 含糊其辞 - “做得更好”没有帮助
• ❌ 忽略限制条件 - 它们会影响解决方案
• ❌ 闭门造车 - 尽早让产品经理和工程团队参与
• ❌ 跳过研究 - 根据数据做决策
• ❌ 忘记无障碍设计 - 从一开始就考虑

---

设计简报中的无障碍设计

最低要求

每份设计简报都应包含：

WCAG 合规性：

• 目标级别（A、AA、AAA）
• 颜色对比度要求（文本为 4.5:1）
• 支持键盘导航
• 兼容屏幕阅读器
• 触控目标尺寸（至少 44x44px）

测试计划：

• 屏幕阅读器测试（NVDA、JAWS、VoiceOver）
• 仅使用键盘进行导航
• 验证颜色对比度
• 自动化测试（axe、Lighthouse）

完整清单请参阅 references/accessibility_guidelines.md。

---

跨职能协作

与产品团队协作

产品经理提供：

• 业务需求
• 用户研究
• 成功指标
• 时间安排限制

设计师提供：

• 设计专业知识
• 用户体验建议
• 可行性反馈
• 设计时间安排

与工程团队协作

工程团队需要简报提供：

• 已说明技术限制
• 已定义交互模式
• 已记录边缘情况
• 已确定可复用组件

设计团队向工程团队提供：

• 设计规范
• 组件文档
• 交互细节
• 响应式断点

---

设计工具和模板

推荐工具

设计简报：

• Notion（协作式文档）
• Confluence
• Google Docs
• Figma FigJam（可视化简报）

用户流程：

• Figma
• Miro
• Whimsical
• FigJam

原型设计：

• Figma
• Framer
• ProtoPie
• Principle

---

设计简报示例

示例 1：移动应用功能

# Design Brief: In-App Messaging

## Project Overview
Add direct messaging between users within our fitness app.

**Business Goal:** Increase engagement, reduce churn
**User Problem:** Users want to connect with workout partners

## Design Goals
- Enable 1:1 messaging
- Keep it simple and focused
- Integrate with existing notifications

## Target Users
Primary: Sarah, fitness enthusiast, 28-45, uses app 4x/week

## Scope
**In:** 1:1 text messaging, read receipts, notifications
**Out:** Group chat, media sharing (future phase)

## Success Criteria
- 40% of users try messaging in first 30 days
- 20% become weekly active messagers
- No increase in support tickets

## Timeline
6 weeks: Research (1w), Design (3w), Prototype & Test (2w)

---

示例 2：仪表板改版

# Design Brief: Analytics Dashboard Redesign

## Project Overview
Redesign analytics dashboard to improve data comprehension.

**Current Issues:**
- Users overwhelmed by data
- Key metrics buried
- Poor mobile experience

## Design Goals
1. Surface most important metrics first
2. Enable drill-down for details
3. Make it mobile-friendly

## Target Users
- Marketing managers (primary)
- Executives (secondary)
- Data analysts (tertiary)

## Success Criteria
- Users find key metric in < 10 seconds
- Mobile traffic increases 30%+
- SUS score: 75+

## Timeline
8 weeks (Research: 2w, Design: 4w, Testing: 2w)

---

资源

脚本

• generate_brief.sh - 交互式生成简报
• validate_brief.sh - 检查简报是否完整

参考资料

• design_brief_template.md - 综合模板
• accessibility_guidelines.md - WCAG 清单
• design_principles.md - 常见设计原则
• user_research_methods.md - 研究指南

---

给设计师的建议

创建简报之前

1. 与利益相关方沟通 - 了解真正的问题
2. 查看现有研究 - 不要从头开始
3. 检查技术限制 - 与工程团队沟通
4. 了解时间安排 - 制定切合实际的计划

创建简报期间

1. 从模板开始 - 不要重复造轮子
2. 具体明确 - 含糊的简报会导致含糊的设计
3. 加入视觉素材 - 情绪板、参考资料、示例
4. 定义成功标准 - 如何判断是否达成目标？

创建简报后

1. 与 PM 评审 - 就目标和范围达成一致
2. 与 Engineering 评审 - 验证可行性
3. 获得利益相关者的签字确认 - 明确批准
4. 将其视为持续更新的文档 - 随着了解加深而更新

---

常见陷阱

陷阱 1：范围过广

问题：“重新设计整个应用” **解决方案：**分阶段推进，并确定优先级

陷阱 2：先入为主地确定解决方案

问题：“让它看起来像 Apple” **解决方案：**从用户问题着手，而不是从美观出发

陷阱 3：没有约束条件

**问题：**忽略技术或时间限制 **解决方案：**记录并遵守约束条件

陷阱 4：跳过调研

**问题：**基于假设进行设计 **解决方案：**至少查看现有数据

陷阱 5：成功标准含糊

问题：“做得更好”无法衡量 **解决方案：**定义具体、可测试的标准

---

总结

优秀的设计简报：

1. 清晰地定义问题
2. 设定目标和成功标准
3. 识别用户及其需求
4. 记录约束条件（时间、技术、预算）
5. 尽早与利益相关者达成一致
6. 指导工作开展，但不限定具体做法
7. 随着了解加深而不断完善

开始吧：

scripts/generate_brief.sh

这将为成功的设计项目打下坚实基础。