跳转至

Deep Research: Testing AI with Real Design Scenarios: Evaluation Methodology and Prompts - NN/G

  • Source: https://www.nngroup.com/articles/testing-ai-methodology/
  • Snapshot: ../../sources/md/www-nngroup-com-articles-testing-ai-methodology-57d653f81b9e.md
  • Category: UX / UI & Design Systems (ux_ui)
  • Chapters: 04-prototype, 06-ui, 05-validation, 08-frontend

TL;DR

NN/G 提出了一套严谨的 AI 设计工具评估方法论，主张通过真实业务场景（如复杂个人中心页、批量购买流程）而非简单组件来测试 AI，并建立了一个包含目标匹配度、提示词合规性、视觉层级及无障碍标准在内的六维评估模型，为从零生成到遗留系统重构提供了标准化的验证框架。

核心观点

  1. 真实场景压测（Real Context）：评估 AI 设计能力不能仅靠生成登录页这种通用组件，必须使用带有具体业务约束（如特定认证规则、企业级审批流）的真实案例。NN/G 专门设计了单页信息展示和多页复杂流程两个测试场景。
  2. 分层提示词策略：提示词的质量决定产出上限。研究采用了四种递进策略：
    • 宽泛提示词：测试 AI 的创意发散能力。
    • 具体提示词：测试 AI 对详细需求文档（PRD）和设计规范（颜色、形状绑定）的执行力。
    • 多模态输入：测试草图/截图/Figma 文件 + 文本的还原与优化能力。
    • 重构提示词：测试 AI 对现有糟糕设计的诊断与修复能力。
  3. 六维评估模型：AI 产出不能仅看颜值，必须从目标一致性（是否解决了业务问题）、提示词遵循度（是否遗漏需求）、创意质量（方案多样性）、视觉表现（层级与平衡）、交互可用性（是否符合习惯）及辅助功能（WCAG 标准）六个维度进行量化。
  4. 工具能力的参差（Jagged Capabilities）：不同工具的能力边界差异巨大。有的擅长从零生成（Uizard），有的擅长代码化还原（v0/Bolt），有的甚至不支持复杂的文本输入（字符限制）。
  5. 将评估视为研究：AI 评估应遵循 UX 研究规范，包括预测试提示词（Pilot Test）、控制变量（相同提示词跨工具测试）以及标准化的结果归档（FigJam 看板）。
  6. 迭代优化的必要性：在使用 AI 时，单次生成往往不够，需要通过追问来激发变体（例如：保持内容不变，生成一个布局完全不同的方案），这能有效测试 AI 的潜在设计广度。

可落地做法

1. 构建分级提示词库（面向产品/设计）

不要只写一种提示词，针对每个设计任务准备三组输入： * L1 概念验证：仅提供用户故事和核心功能点（例如：设计一个企业级批量采购后台）。 * L2 详细规格：通过 Markdown 列表明确组件细节、状态逻辑（成功/失败/空状态）及品牌色值。 * L3 视觉参照：准备手绘线框图或旧版系统截图，测试 AI 的看图说话能力。

2. 实施重构测试（面向工程/重构）

利用 AI 进行 UI 债务清理： * 输入：上传当前系统中体验最差的页面截图。 * 指令：明确指出当前的问题（如视觉层级混乱、风格过时、缺乏引导），要求 AI 针对性输出优化方案。这比从零生成更能检验 AI 对 UX 原则的理解。

3. 建立 AI 设计评审会（面向评测）

不要直接采纳 AI 结果，组织快速评审： * 合规性检查：AI 是否擅自增加了未要求的功能（幻觉）？是否忽略了特定的业务规则（如认证需要 5 门课）？ * 代码/设计一致性：如果是 v0/Bolt 类工具，检查生成的代码是否使用了正确的语义化标签。

检查清单：AI 设计产出质量评估表

此清单改编自 NN/G 的评估标准，可用于 18-evaluation 章节或设计验收环节。

✅ 目标与合规 (Goal & Compliance)

  • [ ] 业务目标达成：设计是否直观地支持了核心任务（如批量购买、查看证书）？
  • [ ] 需求完整性：提示词中列出的所有功能点（组件、文案、数据字段）是否都已包含？
  • [ ] 约束遵守：是否严格遵守了指定的颜色代码、字体和特定的视觉映射逻辑（如管理类课程对应正方形）？
  • [ ] 无幻觉：是否存在未请求且不合理的元素（如内部系统出现社交分享按钮）？

✅ 视觉与体验 (Visual & UX)

  • [ ] 信息层级：关键操作（CTA）和核心数据是否在视觉上最突出？
  • [ ] 布局平衡：页面是否存在过密或过疏的区域？留白是否合理？
  • [ ] 一致性：按钮风格、字体大小、间距在页面内是否统一？
  • [ ] 交互范式：是否使用了通用的 UI 模式（用户无需重新学习）？
  • [ ] 可访问性 (Accessibility)：文本与背景对比度是否达标 (WCAG AA)？表单是否有清晰的标签？

✅ 创意与多样性 (Creativity)

  • [ ] 方案差异化：如果要求生成变体，新方案是否在布局上有实质性改变，而非仅换肤？
  • [ ] 智能化建议：AI 是否在满足需求外，补充了合理的交互细节（如空状态提示、错误反馈）？

常见坑与对策

  1. 坑：提示词过载（Context Overload）
    • 现象：一次性输入几千字的需求，导致 AI 忽略后半部分指令或产生混乱。
    • 对策：参考 NN/G 的经验，先在通用 Chatbot（如 ChatGPT/Claude）中验证提示词逻辑，再拆解步骤投喂给专用设计工具。对于有字符限制的工具（如 Uizard），精简非必要修饰词。
  2. 坑：忽视状态设计
    • 现象：AI 通常只生成理想状态（Happy Path），忽略报错、加载、空数据等边缘情况。
    • 对策：在 Prompt 2 (Specific Text) 中显式要求展示考试不及格、过期或无数据时的 UI 样式。
  3. 坑：过度拟合旧设计
    • 现象：上传旧图让 AI 重构时，AI 往往不敢大改，导致结果只是旧图的高清重制版。
    • 对策：在提示词中明确授权：彻底改变布局结构（Drastically change the layout）、忽略原有的导航模式。
  4. 坑：可访问性灾难
    • 现象：AI 生成的配色往往追求好看而牺牲对比度，字体过小。
    • 对策：在提示词的 Design Language 部分强制加入标准：All elements must meet WCAG AA standards。

可用于丰富《AI 辅助软件产品》的写作点

  • 第 04 章 Prototype（原型设计）：
    • 引用 NN/G 的 Text + Design Artifact 模式，介绍如何用手绘草图 + 提示词快速生成高保真原型。这是连接非设计师（PM/开发）与专业设计的桥梁。
    • 增加一节关于 迭代式提示词工程：展示如何通过 Follow-up prompt（追问）让 AI 生成布局截然不同的 Alternative Design（备选方案）。
  • 第 06 章 UI Design（界面设计）：
    • 重构场景：利用 NN/G 的 Prompt 4 (Redesign) 案例，讲解如何编写用于 UI 现代化的提示词模板（指出问题 -> 定义新风格 -> 输出）。
    • 设计系统落地：在提示词中绑定具体的设计 Token（如 NN/G 案例中的颜色与形状对应关系），展示 AI 如何执行 Design System 规范。
  • 第 18 章 Evaluation（评估与测试）：
    • 直接引入 六维评估模型 作为 AI 辅助设计的验收标准。
    • 强调 控制变量法：在评估不同模型（如 Claude 3.5 Sonnet vs GPT-4o）的设计能力时，必须使用标准化的 Benchmark 提示词。
  • 第 05 章 Validation（验证）：
    • 讨论如何利用 AI 快速生成 多页流程（Flow Design） 原型，用于早期的用户可用性测试，这比传统的静态图测试更接近真实产品体验。