L6-05：设计计划评审 —— 确保产品设计在开工前就对了

🎯 学什么：不是画图，而是从视觉、交互、品牌一致性角度审查计划文档。四个评审维度（信息架构/视觉层次/交互模式/品牌一致性）+ 比较板方法 + 快照审计——确保"用户不跑"的设计验收。核心洞察：(1) 工程评审保证"功能不崩"，设计评审保证"用户不跑"；(2) "用户不阅读，他们扫描"——这一条原则可以解释 80% 的设计问题；(3) 比较板和快照审计互补——前者用于探索性方向选择，后者用于验证性改进检查。 💡 难易度：⭐⭐⭐ | ⏱️ 预计时间：35 分钟

---

[!quote]- 📖 原Skill精要 技能名称：plan-design-review 核心功能：设计师视角计划评审——交互式。每个设计维度评分 0-10，解释什么能让它达到 10 分，然后修复计划以达到目标。针对计划文档模式。实时网站视觉审计请用 [[L6-10-设计审计与修复|design-review]]。 所属体系：gstack 虚拟工程团队 协作关系：与 [[L6-02-CEO战略评审|plan-ceo-review]]、[[L6-03-工程架构评审|plan-eng-review]] 并列三级评审体系

---

1. 课程概览

💡 白话小课堂：工程评审保证"功能不崩"，设计评审保证"用户不跑"。设计评审关注：用户第一眼看到什么？交互流程是否连贯？视觉系统是否一致？用户会在哪里困惑、在哪里放弃？

---

2. 设计评审的独特视角

---

3. 评审维度

---

4. 设计审计方法

🔑 核心秘诀："用户不阅读，他们扫描"——这一条原则可以解释 80% 的设计问题。

---

5. 产出物

---

6. 结构拆解：设计计划评审 Skill 模板

---

7. 电商案例：设计评审——电商结算页

🛒 实战案例：一个服装DTC品牌App（月活120万，客单价¥380）的设计团队拿出了新版结算页方案：5步流程（购物车→地址→支付方式→确认订单→支付结果），视觉上用了品牌色薄荷绿作为主色调，整体风格"清新干净"。设计团队认为"体验流畅，视觉统一"。

plan-design-review从四个维度穿透评审：

• 信息架构评审：5步结算流程的问题在于"确认订单"这一步80%的信息与前两步重复（地址已在第2步确认、支付方式已在第3步确认）。对标的行业标准——淘宝3步（地址→确认+支付同页→支付）、拼多多2步（地址→直接支付）。减少1步（5→4）预估降低流失率8%，减少2步（5→3）预估降低流失率15%。建议合并"确认订单"和"支付方式"为同一页。
• 视觉层次评审：眯眼测试——模糊后只有薄荷绿Top Bar和"提交订单"按钮可见，但总价¥380和优惠券入口完全消失。问题有三：(1)总价字体仅14px与SKU列表同级，应放大到20px加粗独立一行；(2)优惠券入口是灰色12px小字"有优惠券？"，对比京东的橙色"+使用优惠券"按钮——前者的点击率仅0.7%，后者同类位置达4.2%；(3)"提交订单"按钮颜色与品牌色背景同色系，对比度仅2.1:1（不合格），应加深对比度到至少4.5:1。
• 交互模式审查：三个错误状态测试——(1)地址缺省"请完善地址信息"但未指明具体字段（是缺收货人？手机号？还是详细地址？），应具体为"请填写收货人姓名"；(2)优惠券不可用时仅提示"不可用"而不说明原因（是新用户专享？还是未达满减门槛¥499？），应补充具体原因降低客服咨询；(3)支付超时30秒后返回空白页面，用户不确定钱扣了没——应显示"支付结果查询中，请勿重复支付"并自动轮询结果。
• 横评参考：通过浏览器截图获取了淘宝、京东、拼多多的结算页作为可比基准。发现竞品结算页底部的"总价+立即支付"区域占屏幕高度15-20%，而该方案仅占8%——核心CTA区域的视觉占比不足竞品一半。

评审结果：DESIGN_REVISE。P0——合并"确认订单"到支付页（减少1步）、放大总价到20px加粗、按钮对比度修复到4.5:1。P1——错误提示具体化、支付超时态补充、优惠券入口优化。修复后A/B测试结果：结算完成率从设计前的62%提升到71%（+9个百分点，即14.5%的相对提升）。

🔑 启示：视觉上"看起来干净"不等于"转化上有效"。设计评审最重要的不是挑好看不好看——是看每个像素是在帮用户朝"下单"走一步，还是在制造不必要的摩擦。

---

8. 掌握检验

Q1：设计评审的"视觉层次"维度审查什么最关键的问题？

• A) 颜色对比度是否满足 WCAG AA 标准
• B) 最重要的元素是否视觉上最突出
• C) 是否使用了最新的设计趋势
• D) 字体数量是否控制在 3 种以内

Q2：在三个用户行为原则中，"用户不阅读，他们扫描"对设计有什么实际指导意义？

• A) 文案应该写得更详细，确保用户仔细读
• B) 页面应该减少文字，用图标替代所有文本
• C) 设计应让用户扫一眼就知道下一步该做什么
• D) 所有内容都应该用视频形式呈现

Q3：在结算页案例中，信息架构评审发现"确认订单"这步是多余的。请用设计评审的视角分析：多这一步除了增加摩擦，还可能带来哪些连锁的负面体验效应？至少列举两个。

Q4："比较板方法"与"快照审计"分别解决什么不同类型的设计问题？它们在什么阶段使用最有效？

Q5：在错误状态审查中，"请完善地址信息"和"请填写收货人姓名"的提示质量差距是什么？请用设计评审的"信息架构"和"交互模式"两个维度分别解释。

Q6：设计评审建议优惠券入口从"灰色小字'有优惠券？'"改为"总价旁边橙色文字'使用优惠券'"。请分析这个改动如何同时提升了视觉层次和信息架构。

---

9. 答案

点击查看答案

Q1：B —— 视觉层次维度的核心问题是"最重要的元素是否视觉上最突出"，这通过字号、颜色、间距建立清晰的层级。

Q2：C —— 用户扫描而非阅读，意味着设计要让最重要的信息和行动点能通过扫描就被理解。

Q3：至少两个负面效应：①认知负荷——用户看到"确认订单"时会产生怀疑："我前面选的东西不对吗？为什么要再确认一次？"增加了心理摩擦；②决策疲劳——每个额外步骤都是一次"我该点这里吗"的微小决策，累积后可能导致用户在最后一步放弃。

Q4：比较板方法用于创意方向选择阶段——生成多个视觉方向并排对比，避免在真空中单个评估。快照审计用于改进验证阶段——检查新方案是否在改进现有问题的同时引入了新问题，需要 before/after 对比。前者是探索性的，后者是验证性的。

Q5："请完善地址信息"是模糊的、无指向的错误提示——用户不知道该补什么（信息架构层面：没有指出哪个字段缺失）；"请填写收货人姓名"是具体的、可操作的信息（信息架构层面：精确定位了缺失信息）。交互模式层面：前者的反馈无效，后者的反馈有意义。具体 vs 模糊的错误提示直接影响用户完成任务的效率。

Q6：视觉层次上——总价和优惠券是"价格敏感用户"最关心的信息，放在一起形成"价格信息组"，减少眼球移动。信息架构上——优惠券是"支付前"决策的一部分，不是"支付后"的补充，放在总价旁边符合流程节点的自然位置。心理学依据：用户对"错过折扣"的恐惧（损失厌恶）比"获得折扣"的喜悦更强烈。

（5/6 通过）

---

10. 延伸阅读

• [[L6-06-开发者体验评审|下一课：开发者体验评审 —— 让你的API和工具好用到让人上瘾]]