design-process

设计流程

项目很少败在执行上，而是败在简报不清晰或不完整。结构为创造力腾出空间。

适用范围

在以下情况下使用此技能：

• 从头开始规划设计项目
• 收集、验证或补全简报
• 创建线框图或原型
• 将情绪板用作决策工具
• 准备交付开发
• 规划设计评审或可用性测试

原则

1. 结构为创造力腾出空间

系统化的流程可以避免创造力在迷失方向中消散。

2. 简报决定成败

简报不清晰是项目失败最常见的原因。

3. 先发散，再收敛

每个阶段都包含探索部分（拓展选项）和评估部分（评估并筛选选项）。

4. 以用户为中心，不容妥协

只取悦客户而忽视用户的设计，就是失败的设计。

5. 优先差异化，而非墨守成规

好的设计需要勇气，在有利于用户的情况下有意打破惯例。

6. 重视迭代，而非追求完美

尽早展示并收集反馈，胜过长时间闭门打磨。

7. 文档不是事后才考虑的事

未经记录的设计决策会在实施过程中丢失。

规则

应做：系统地收集并验证简报

一份完整的简报应包含：

• 当前状态： 现有内容是什么？为什么已不再适用？
• 目标： 设计具体应实现什么？（以可衡量的结果表述）
• 目标受众： 用户是谁？（参阅客户旅程）
• 限制条件： 预算、时间线、技术要求、企业设计规范。
• 竞争情况： 竞争对手在做什么？哪些方面应有意做出差异？
• 成功标准： 如何衡量成功？

检查每份简报，找出矛盾、缺漏和隐含假设。

应做：遵循设计流程的 7 个步骤

1. 简报与调研 — 明确需求、收集数据、分析竞争情况。
2. 策略与概念 — 定位、信息架构、内容策略。
3. 线框图设计 — 不含视觉设计的结构布局。关注层级和用户流程。
4. 视觉设计 — 色彩、排版、图像、设计网格。
5. 原型设计 — 用于真实用户流程的交互式原型。
6. 评审与测试 — 可用性测试、无障碍检查、利益相关者反馈。
7. 交付与文档 — 提供结构化交付内容、样式指南和规格说明。

应做：将情绪板用作决策工具

• 至少创建 2 个视觉风格迥异的方向。
• 在进入视觉设计之前，将它们展示给客户。
• 情绪板是讨论的基础，而非最终交付物。

应做：获得线框图批准后再进行视觉设计

• 线框图可明确结构、层级和用户流程。
• 在线框图阶段获得批准，可以避免代价高昂的结构调整。
• 有意让线框图不包含色彩和图像。

不应做：从简报直接跳到视觉设计

• 没有概念阶段，设计可能看起来很吸引人，却无法满足策略目标。

不应做：闭门完成设计

• 尽早并定期展示中间成果。
• 缺少反馈的时间越长，方向偏离的风险就越大。

不应做：盲目追随趋势

• Dribbble 和 Behance 上的趋势可以带来灵感，但不是蓝图。
• 每个设计元素都必须有用户需求或品牌策略作为依据。

不应做：不附文档就交付

• 仅提供 Figma 链接不算完成交付。
• 记录：间距、交互行为、响应式行为、边缘情况、加载状态。

模式

双钻模型

适用于每个重要的设计项目。钻石 1（理解问题）：先探索，再定义。钻石 2（开发解决方案）：先开发，再交付。确保解决的是正确的问题。详情请参阅 references/double-diamond.md。

设计冲刺（5 天）

需要快速验证解决方案时。周一：理解，周二：构思，周三：决策，周四：制作原型，周五：测试。成果：一周内获得经过验证的原型。

风格指南优先

适用于大型项目：先定义设计系统（颜色、字体排印、间距、组件），再用它组装页面。成果：保持一致性、便于扩展、更快地构建页面。

内容优先设计

始终如此。先创建文案和图像概念，再设计布局。设计应根据内容调整，而不是反过来。

利益相关者协调研讨会

在项目启动时，如果涉及多位决策者，就召开研讨会。通过 90 分钟的研讨会讨论目标、目标受众、预期和禁区。以书面形式记录结果。

反模式

弗兰肯斯坦式设计

把各种趋势和利益相关者的诉求拼凑在一起，没有清晰的概念。**解决方案：**确定一种视觉方向并始终如一地遵循。

委员会式设计

每位利益相关者对设计都有同等的话语权。结果：折中设计。**解决方案：**收集反馈，但由一人做决定。

像素级完美的瀑布式设计

每个页面都先做到像素级完美，再开始下一个页面。**解决方案：**先构建设计系统，再组装页面。

Lorem Ipsum 式设计

使用占位文本设计布局，之后替换成真实内容会破坏布局。**解决方案：**以内容为先，使用真实或逼真的文本。

功能蔓延

在过程中不断添加新需求。**解决方案：**在第 1 阶段锁定范围。新需求纳入待办事项。

检查清单

• 简报已完成，并已检查是否存在矛盾
• 已定义目标受众／用户画像
• 已完成竞品分析
• 已建立信息架构和网站结构
• 至少展示了 2 种情绪板方向
• 已创建并批准线框图
• 已定义设计系统（颜色、字体排印、间距、组件）
• 已基于设计系统完成视觉设计
• 已定义所有断点下的响应式行为
• 已为核心用户流程创建交互式原型
• 已至少邀请 3 位用户进行可用性测试
• 已通过无障碍检查
• 已创建交付文档
• 风格指南文档已更新

交叉引用

• customer-journey — 用户旅程决定设计必须涵盖哪些用户流程
• ai-design-workflow — AI 工具可支持流程的多个阶段
• landing-pages — 落地页遵循相同流程，但侧重于转化
• website-audit — 审核和重新发布通过分析启动设计流程
• branding-identity — 品牌策略为视觉设计提供指导
• webdesign-review — 在流程末尾进行审核，作为质量保证