场景 C：专业设计师视角的深度审视（Professional Critique Playbook）
目标：提供一套超越“我觉得不好看”的主观臆断、能够从战略意图向下直达像素表现的专业设计审视框架。 理论根基：Jesse James Garrett 五层模型 [S1]、9 本经典书籍提炼的“四问框架” [S2]、跨设计体系七大共性原则 [S3]。
为什么非专业者的设计批评往往无效？
非专业者（或未经系统训练的工程师）在审视设计时，最容易犯以下两类错误：
- 直接扑向像素细节：“这个按钮往左移 5 像素”、“这个红色我不喜欢”、“字体能不能再大点”。这种批评完全忽视了底层的战略目标与信息架构，属于典型的“表现层盲动”。
- 凭个人主观好恶下结论：“我觉得不够高端”、“看起来不顺眼”。缺乏客观的心理学依据与度量指标，无法指导工程落地。
专业设计师的审视过程，是一套严谨的自底向上（或逆向自顶向下）的结构化解剖过程 [S1]。
一、 Garrett 五层模型：结构化提问阶梯
当面对一个完整的界面或流程时，按照 Garrett 五层模型 [S1] 自底向上层层推敲。
下方提供了 2.5D 立体分层透视模型，支持透视展开 (Exploded View) 与层叠合拢，点击任意层级可查看针对前端工程师的实战提问与代码防守要点：
SPATIAL STACK · 2.5D 立体分层透视模型
Jesse James Garrett 用户体验五层要素（从抽象战略到具象像素）
层级检查焦点 · Level 5
表现层 (Surface Layer)
感官视觉设计：配色、字阶、图标一致性、微动效、状态反馈
🔍 专业设计师视角核心审视问题 (Critique Questions)
- 色相与对比度是否满足 WCAG 2.2 AA (4.5:1)？
- 字体排印是否遵循层级节奏，行高是否达标 (1.5 - 1.8)？
- 按钮是否具备 Default/Hover/Active/Focus/Disabled 完整五态？
💻 前端工程师自查与代码防守要点
检查 CSS 变量是否全部继承语义 Token，严禁任何硬编码十六进制色值。
1. 战略层提问（Strategy Plane）
- 核心追问：这个页面存在的唯一核心理由是什么？它为用户解决了什么痛点？为业务创造了什么价值？
- 审视要点：如果页面上的功能无法回答“满足了谁的什么目标”，那么后续所有精心调教的视觉设计都是在粉饰冗余需求。
2. 范围层提问（Scope Plane）
- 核心追问：当前版本必须包含哪些功能与内容？是否存在过度设计的“镀金需求（Scope Creep）”？
- 审视要点：检查页面是否塞入了太多“用户可能有用”但实际极少点击的低频功能。根据特斯勒定律（复杂度守恒），无端增加的范围只会将复杂度转嫁给用户。
3. 结构层提问（Structure Plane）
- 核心追问：信息架构清晰吗？概念模型（Conceptual Model）是否符合用户的心智模型？
- 审视要点：
- 用户从这一页去往下一页的路径是否自然无阻力？
- 分类命名是否消灭了内部组织黑话？（参考 信息架构核心体系）
- 异常流（网络断开、空数据、权限不足）是否在结构中有妥善的闭环出口？
4. 框架层提问（Skeleton Plane）
- 核心追问：界面的空间排布是否顺应人类眼动规律？
- 审视要点：
- 内容排布是否符合西方/现代屏幕的 F 型或 Z 型视觉动线？
- 关键操作按钮是否位于动作完成路径的自然终点（例如表单右下方）？
- 界面元素是否符合费茨定律（Fitts's Law）：核心按钮足够显眼、易于点击？
5. 表现层提问（Surface Plane）
- 核心追问：界面的视觉秩序是否达标？美学是否达成了 Don Norman 的“本能层吸引”？
- 审视要点：
- 是否遵循 CRAP 四原则（对比、重复、对齐、亲密性）？（参考 工程师设计及格线）
- 颜色使用是否克制？全站是否拥有统一的设计系统 Token 约束？
二、 经典四问心智审查框架
在综合多本设计经典后，本站提炼出以下高阶心智四问 [S2]：
问 1（心理层）：系统映像匹配用户的心智模型吗？
- 引用出处：Don Norman《设计心理学》[S4]、Jon Yablonski《用户体验定律》[S5]。
- 检查项：当用户看到界面控件时，他脑中的预期反应和系统的实际行为是否 100% 吻合？有没有任何违反雅各布定律（遵循行业惯例）的标新立异？
2（原则层）：好设计的五大行为特征达标了吗？
- 可感知：功能是否可见？示标（Signifier）是否清晰？
- 有反馈：任何操作是否在 400ms 内给出系统已被响应的明确信号？
- 不思考：界面是否自解释（Don't Make Me Think）？
- 能容错：是否有撤销机制？是否在错误发生前做了防呆拦截？
- 有秩序：视觉排版是否有严格的间距尺度与数学比例？
问 3（流程层）：从想法到落地的推导链条断裂了吗？
- 引用出处：双钻模型（Double Diamond）[S3]、Garrett 五层模型 [S1]。
- 检查项：当前方案是否真正经过了“发散→收敛”的双钻推演？还是某个人拍脑袋直接在 Figma 里画出来的产物？是否有真实用户的测试数据支撑？
问 4（体验层）：在可用性之上，有令人愉悦的情感与意义加分吗？
- 引用出处：Don Norman《情感化设计》[S6]、原研哉《设计中的设计》[S7]。
- 检查项：
- 本能层：视觉第一眼是否让人感到整洁、专业、可信？（审美-可用性效应：用户往往认为好看的界面更好用）。
- 行为层：使用过程中是否体会到极致流畅、毫无阻碍的掌控感？
- 反思层：完成任务后，用户是否感受到了效率提升的自我认同？
三、 专业批评的沟通原则与交付纪律
提出设计批评（Critique）不是为了宣泄情绪或展示优越感，而是为了交付更具商业与体验价值的软件：
- 聚焦问题本身，严禁人身攻击：
- ❌ “这个页面设计得太业余了，没有任何美感。”
- ✅ “当前卡片内部间距（24px）大于卡片之间间距（16px），违反了格式塔亲密性原则，导致用户视线难以区分模块归属。”
- 先肯定符合战略意图的部分，再指出缺陷：
- 明确指出哪些设计决策是正确且被认可的，避免被评审方产生防御心理。
- 指出问题的同时，必须给出可执行的替代方案（Actionable Alternatives）：
- 永远不要只抛出“这样不行”，必须说出“建议将间距收敛为 8px，并将次要操作降级为幽灵按钮”。
信源合集
| 编号 | 来源 | 层级 | 出处 / URL | 取用日期 | 核心贡献 |
|---|---|---|---|---|---|
| [S1] | The Elements of User Experience (2nd Ed.) | L4 权威著作 | New Riders (Jesse James Garrett) | 2026-09-10 | 用户体验五层递进提问模型 |
| [S2] | 经典设计书籍共性提炼 | L4 站内提炼 | books/design-books.md | 2026-09-10 | 四层认知模型（心理/原则/流程/体验） |
| [S3] | 设计工作流与流程体系 | L0 官方索引 | process/design-process.md | 2026-09-10 | 双钻模型、跨体系 7 条共性检查原则 |
| [S4] | 《设计心理学 1：日常的设计》 | L4 权威著作 | Basic Books (Donald A. Norman) | 2026-09-10 | 概念模型 vs 心智模型、示能与示标 |
| [S5] | Laws of UX | L4 权威著作 | O'Reilly Media (Jon Yablonski) | 2026-09-10 | 雅各布定律、多赫蒂阈值、特斯勒定律 |
| [S6] | 《设计心理学 3：情感化设计》 | L4 权威著作 | Basic Books (Donald A. Norman) | 2026-09-10 | 本能层、行为层、反思层三层次情感模型 |
| [S7] | 《设计中的设计》 | L4 权威著作 | 山东人民出版社 (原研哉) | 2026-09-10 | “白”与“空”的留白哲学、信息克制 |