设计流程检查

  产品从无到有的设计流程检查表，每完成一项就勾选一项，检查必要设计环境是否有遗漏，细节是否到位。

流程

项目实施过程，及需要关注重点流程。
部分项目实际工作中并非有必要或具备条件开展，供参考。

1.1 速写/方案

开始动手做线框图或原型图前，先快速原型方法推敲、验证方案可行性，降低错误成本。

1.2 线框图

介于 sketching 和 prototype 之间，主要通过流程设计页面布局、框架。通常可以作为原型设计的早期阶段。

1.3 原型图

通常可交互，可以完整体验产品全流程。原型图以能与团队充分沟通，消除不必要的解释和误解为宜。与原型目的和团队默契度及团队类型、规模息息相关。

1.4 专家/团队评审

根据需求类型、大小、重要程度等，确定进行专家评审还是不同规模的团队评审，以控制产出质量。 含UI&ID

1.5 样式指南

完整的设计样式指南，用于指导该产品的设计工作，主要为统一团队设计风格，保证后续迭代设计统一性。

1.6 交互验收

通过评审后验收或团队内交付给UI设计开始后续流程，并保持沟通，处理设计过程中设计需求或产品变更导致的变化。

1.7 界面验收

接近最终设计团队产出结果，需要产品、利益相关者、交互、研发一同完成验收。

1.8 开发验收

开发完成，测试验收完成后（或验收中时），ID UI共同验收最终研发结果，是否符合设计预期，并提供验收问题记录。

1.9 上线后跟踪

产品成功上线后，持续或阶跟踪用户使用反馈和用户数据，获取产品、设计启发从而优化产品。

背景

优化输入，使其具备开工条件。
部分项目实际工作中并非有必要或具备条件开展，供参考。

2.1 需求评审

接手的项目是否已经经过需求评审，具备介入条件。

2.2 产品文档

是否已有产品文档并已阅读充分理解。

2.3 产品目标

是否了解产品目标，并可以简短的描述出来。

2.4 信息架构

新的项目如何设计信息架构，能适应何种程度的迭代需求；项目或迭代是否涉及到信息架构的调整。

2.5 利益相关者访谈

与利益相关者或需求方沟通，了解一手反馈，清楚产品目标、战略实施路径等。避免信息不对等导致额外的成本损失。

研究

相关的用户研究活动。

3.1 竞争/竞品分析

看看其他人如何解决类似问题，避免重复造轮子。

3.2 调查

通过调查，分析数据了解用户需求，或寻找合理优化方向。

3.3 用户画像

创建用户画像，并为用户设计产品。

3.4 用户流程

根据场景创建用户流程。

3.5 故事板

通过编写用户案例和方案设计为用户服务的产品

3.6 用户旅程图

通过创建旅程图，更好地理解目标用户的感受、想法和行为，寻找用户的痛点。

交互

交互质量控制部分自查。建议全部自查

Ⅰ 信息架构

4.1 五秒内清楚页面目标

能否在 5 秒内，清楚 “我在这里做什么？”。

4.2 五秒内清楚当前位置

能否在 5 秒内，清楚 “我现在在那里？”。

4.3 三步以上使用步骤指示器

任务流程 > 3 步时，使用步骤指示器。

Ⅱ 错误恢复

4.4 提供简单的可操作逆转

用户必须能够识别，诊断错误并从错误中恢复

4.5 破坏性操作二次确认

执行具有破坏性操作时（如删除、格式化）是否有确认提示？

4.6 任务中断恢复

任务中断恢复 用户在任务中出现意外时如何提示，及后续后续操作建议 任务被中断后可能的场景中如何恢复

Ⅲ 体验优化

4.7 是否为用户设计新手提示

功能变更，或者新用户首次使用等情况，是否为用户设计了提示信息？

4.8 使用缺省状态

没有数据或内容时，应提示缺省状态，并给出可以执行的推荐操作（如果有）。

4.9 表单易用性

表单是人机交互的重要组成部分，涉及各类交互动作、输入体验、数据验证等。

4.10 交互文案

文案是否清晰易懂，符合用户习惯。

4.11 流量消耗提示

较大流量消耗提醒用户是否使用数据流量下载，避免用户经济损失。

4.12 网络状态

无网络、网络慢、网络中断等状态和设计的完整性。

Ⅳ 其他

4.13 几步完成页面主流程

页面级的主要流程能在几步完成？是否高效？可以精简吗？

4.14 是否能明确区分主次任务

页面布局是否能明确反映主次任务层级？使用户专注于主任务流程。

4.15那些设计未使用标准组件

哪些设计为何未能使用标准组件？是否有合理的理由支撑，是否需要加以梳理创建业务组件？

界面设计

确定界面设计的快速走查项目。建议全部自查

5.1 文本对比度

文本可读性设计是否符合WCAG 2.1 内容无障碍指南：1.4 可辨别性最低要求。

5.2 CTA button 风格统一

重要的 CTA button 的视觉风格、应用位置等是否统一

5.3 Card block 类组件是否风格一致

版块内容的视觉样式是否统一，包括线条、投影、倒角间距等

5.4 交互还原度

页面流程是否完整，是否完整设计了所有交互稿件的状态。

5.5 图标可用性

寓意准确 避免使用混淆图标(1标多义) 通过5s测试 测试图标可记忆性 必要时使用文字标签

5.6 一致性检查

信息结构深度一致性 语言、语法一致性 重点元素（如标题、CTA btn）一致性 布局规则一致性

5.7页面视觉重心在那里？

当前页面的主视觉重心在那里？ 它的主要 Action 是什么？是否符合任务目标？

5.8内容区域分隔明确吗？

当前页面的区域分隔是否明确，通过区域分隔理解页面基本逻辑和影响范围。

交付检查

确定设计文件具备交付条件。 建议全部自查

6.1 交付检查

项目页面结构、交互逻辑是否清晰 标注可读性 进行设计时那部分最复杂，能否通过重新组织或图示使其易读易懂？ 不同状态完整性

6.2 设计 assets 是否标记完整

最新设计图是否已上传交付工具 设计稿是否按前端需求标记 assets 是否下载验证 assets 符合前端要求，或确定 assets 处理正确。