AI 设计方法

从用户研究、创意探索到原型与交付,找到适合当前任务的方法。

版权和第三方内容

用 Figma Make 这类工具生成原型时,可能会带进第三方字体、图片或代码包。对外发布前先查一下授权和商用许可,该署名的署名。

数据敏感度

问题发现阶段查公开资料没问题。一旦涉及用户访谈、工单、行为日志或内部文件,就用公司认可的合规环境,或者先把数据匿名化。

1) 问题发现

把用户反馈和研究资料摊开看,找出反复出现的问题。支持它的证据和反驳它的证据都留着。

  • 访谈、工单和研究笔记,先把用不上的个人信息去掉。
  • 每个关键结论都能找回原文。事实、猜测和还没验证的问题,分开写。

Perplexity

查市场背景和公开资料用它。它给的引用要点开原页面看一眼,别直接信。

Perplexity

Gemini

带 Google 搜索的通用助手。查公开资料时让它列出来源链接,再逐条点开核对。

Gemini

Claude

把去掉个人信息的研究笔记丢给它归类。让它带上来源编号和反例,优先级你自己定。

Claude

ChatGPT

先让它把用户反馈粗分一遍,你再抽几条看分得对不对。

ChatGPT

Gemini Notebook

手上已经有访谈记录或报告的话,用它归纳主题,还能跳回原文核对。导入网页主要读文字,导入视频得靠字幕。

Gemini Notebook

2) 问题定义

说清楚是谁、在什么情况下、卡在了哪里。然后定一个标准:做到什么程度算解决了。

  • 问题陈述只写用户的困难,别一开始就假定要用 AI。
  • 排在前面的假设,想好怎么验证,也想好看到什么结果你会改主意。

Claude

把你收集的证据和限制条件给它,让它起草一份问题陈述,你再改。

Claude

NN/g Problem Statement

NN/g 教你怎么写问题陈述:盯住用户的困难,别提前塞进解决方案。

NN/g Problem Statement

Atlassian Design Lab

一套团队工作坊的流程。大家一起把问题摆出来,看看不同角色理解得一不一样。

Atlassian Design Lab

Iceberg Model

问题老是重复出现?用它往下追,看表面现象底下是什么在起作用。

Iceberg Model

Issue trees

把一个大问题一层层拆成能单独研究的小问题。

Issue trees

Notion

假设、证据和验证结果记在同一个地方,团队谁都能接着更新。

Notion

Google PAIR Guidebook

帮你判断一个问题适不适合用 AI 解决。从用户需要什么、信不信任、想不想自己掌控这三个角度看。

Google PAIR Guidebook

Microsoft HAX Toolkit

微软的一套指南,讲 AI 在第一次用、平时用、出错时和用久了之后,分别该做什么、不该做什么。

Microsoft HAX Toolkit

问题陈述 Prompt

把证据填入 Prompt,让 AI 起草问题陈述,并按给定表头整理。

根据这些证据:【证据】,写一份问题陈述,包括:场景、触发条件、用户目标、怎样算成功、失败了会怎样、AI 在其中是什么角色、风险边界。 表头:场景 | 触发条件 | 用户目标 | 成功信号 | 失败后果 | AI 角色 | 风险边界 | 出错后怎么恢复

问题陈述 Prompt

3) 方案构思

多想几种解法,放在一起比:对用户价值多大、做起来多难、用户还剩多少控制权。

  • 不用 AI、AI 辅助、AI 自动执行,三种方案都想一想。
  • 挑出值得验证的方向,写清楚为什么选它、放弃了什么。

ChatGPT

让它按「AI 管多少、用户管多少」出几个不同方案,从全手动到全自动都来一版。

ChatGPT

FigJam

想法先全贴在一块画布上分组讨论,再用贴点投票收到一两个方向。

FigJam

Zwicky box

把方案拆成几个维度,每个维度列几个选项,交叉组合出你没想到的解法。

Zwicky box

AIUXPatterns

一个 AI 交互模式库。拿你的方案对着看,哪些地方用户可能看不懂或不会操作。

AIUXPatterns

Shape of AI

把常见的 AI 交互形态都列出来了。看完你能说清自己的方案和别人到底差在哪。

Shape of AI

Impact-Effort Matrix

横轴收益、纵轴成本,一眼看出先验证哪个。

Impact-Effort Matrix

IDEO Design Kit

IDEO 的方法卡,一张卡一个活动。带团队发散和收敛想法时照着用。

IDEO Design Kit

方案对比 Prompt

给 Claude 用,或者做成 Notion 表格。把几个方向的价值、风险、可控性和退路并排比。

从用户价值、实现成本、风险、可解释性、用户控制权、失败后的退路这几方面比较这些方向。输出一张表,每个方向标上建议:保留、观察,还是砍掉。

方案对比 Prompt

4) 设计实现

用现有组件和视觉规范把关键页面做出来。重复劳动、写文案、改方案,这些让 AI 搭把手。

  • 加载中、空白、出错、没权限,这四种状态别漏。
  • 批量出素材之前,先生成几个看看版式、字体和品牌对不对。

Figma

用组件和变量把主流程做出来,加载中、出错、没权限这几种状态也一起做。

Figma

Figma Agent

直接在画布里帮你改设计。用现有组件迭代的时候最省事。

Figma Agent

Stitch

Google Labs 的 UI 设计画布,可以和 Stitch Agent 实时迭代。生成的预览仍要单独检查响应式、无障碍和数据状态。

Stitch

IBM Carbon for AI

IBM 的设计系统里专门讲 AI 的部分。怎么标出哪些是 AI 生成的、怎么解释它做了什么,可以照着抄。

IBM Carbon for AI

Material Design 3

Google 的设计规范,布局、组件、交互怎么定都有,拿来保证页面之间一致。

Material Design 3

ChatGPT

让它先写一版报错提示、「信息不够」的说明和恢复操作的文案,你再润。

ChatGPT

WCAG Overview

无障碍的底线标准。标签、说明文字、状态提示怎么写,先对一下它。

WCAG Overview

Figma Weave

已经有品牌模板、要批量出素材的时候用。连上 Figma 的 Frame,换文字换图片就行。在 Design 里用能直接出图片和矢量。

Figma Weave

Midjourney

探索视觉方向和情绪板,可以用参考图锁定风格。默认生成结果公开,涉及未发布项目先确认隐私设置。

Midjourney

Google Flow

用参考图或首尾两帧先试一个镜头。角色、动作、镜头衔接都对了,再往长了做。

Google Flow

关键状态检查 Prompt

补充项目背景和材料后,将这段 Prompt 复制到 AI 工具中使用。

检查这个页面的默认、加载中、空白、出错和没权限这几种状态。每种状态说清楚三件事:用户看到什么、能做什么、下一步去哪。用现有的组件和文案风格。

关键状态检查 Prompt

5) 方案验证

找几个目标用户做真实任务。看他们在哪犹豫、在哪出错、在哪要人帮忙,回头改方案。

  • 任务只说目标,别提示点哪里。
  • 常规任务和出错后的恢复都要测。只记看到的,别替用户解释为什么。

Figma Make

做一个能点能用的原型,让用户把关键流程走一遍。

Figma Make

Figma Prototyping

Figma 原型功能的官方指南。把页面连起来,串成一条能测的任务流程。

Figma Prototyping

Maze

远程可用性测试。用户在家就能做,你看得到完成率和点击路径。

Maze

Lyssna

做首次点击这类小测试。看用户第一下点哪,就知道导航和信息组织清不清楚。

Lyssna

Axe DevTools

在跑着的页面上扫无障碍问题,能自动查的它都查。键盘操作和读屏软件的表现还是得人试。

Axe DevTools

WCAG Overview

对着无障碍标准过一遍界面。再补上键盘和读屏软件的测试。

WCAG Overview

可用性测试脚本 Prompt

让 Claude 出一份测试脚本:任务怎么说、怎样算完成、观察什么。

为【功能】写一份可用性测试脚本。包括:任务怎么描述、怎样算成功、怎样算失败,再给 3 个观察提示,专门看用户犹豫和出错后恢复的时刻。

可用性测试脚本 Prompt

6) 设计交接

把页面、组件状态和交互规则讲清楚。开发看完知道你想要什么,做完也能自己对一遍。

  • 写明组件从哪来、响应式怎么变、哪些边界状态容易漏。
  • 要求写成「做什么、出现什么」。设计改了,第一时间告诉开发。

Figma Dev Mode

开发在这里看尺寸、样式和组件信息。你在上面加标注,讲清设计意图和特殊状态。

Figma Dev Mode

Figma MCP

Figma 官方的 MCP 文档。让 AI 编码工具读设计稿、往画布写东西、用 Code Connect 对应组件,都从这里开始。

Figma MCP

Claude

让它把设计要求改写成「什么情况下、做什么、应该发生什么」的验收条目。

Claude

Notion

组件状态、交互规则、还没确认的问题,列在一页里。

Notion

验收标准 Prompt

丢给 Claude,出来的结果贴进给开发和测试的规范文档。

根据这份组件规范,用 Given/When/Then(在什么情况下 / 做什么 / 应该发生什么)的格式,给默认、加载中、出错、空、超长文本、空值和没权限这几种状态各写一条验收标准。

验收标准 Prompt

7) 设计走查

在真实页面上查布局、操作和无障碍。挡着用户完成任务的问题先修。

  • 只用键盘、只用手机,各把关键任务走一遍。看焦点、缩放和状态提示。
  • 自动扫描之外,再人工操作一遍。

Nielsen 10 Heuristics

尼尔森十条启发式原则。状态可见、前后一致、防止出错这些,一条条对着界面过。

Nielsen 10 Heuristics

WCAG 2.2

无障碍标准的正文。自动扫描过了不等于达标,还得人工查。

WCAG 2.2

FigJam

走查发现的问题全贴上来,按对用户影响多大排优先级。

FigJam

Notion

每个问题记四样:截图、复现步骤、谁负责、修到哪了。

Notion

8) 设计系统

反复用、验证过的组件、样式和交互,收进设计系统。下次不用重画。

  • 每个组件写清什么时候用、有哪些状态、什么时候别用。
  • 变量或组件改了之后,回头看看已有页面有没有被影响。

Figma

组件库、变量和文档放在共享文件里,整个团队都能用。

Figma

Figma Variables

颜色、间距、主题用变量管。改一处,全局生效。

Figma Variables

Tokens Studio

管设计 token 的插件。设计和代码之间怎么同步,能定出一套固定流程。

Tokens Studio

Style Dictionary

同一份 token,转成 Web、iOS、Android 各自要的格式。

Style Dictionary

组件贡献规则 Prompt

让 Claude 起草一份贡献规则,放进团队的设计系统文档。

给设计系统的新组件写一份贡献清单。包括:命名规则、必须有哪些状态、怎么用设计 token、无障碍底线、谁审核签字、什么情况下下线。

组件贡献规则 Prompt

9) 效果追踪

回到最初那个用户问题,看它有没有变好。行为数据和用户反馈一起看。

  • 先定三件事:指标怎么算、和什么比、看多久。
  • 写明样本量和限制。同一时期的变化不一定是设计带来的。

HEART Framework

Google 的 HEART 框架。从用户目标出发,在满意度、参与度、留存、任务完成率里挑合适的指标。

HEART Framework

AARRR Framework

海盗指标。把获客、激活、留存、收入、推荐拆开看,找到该盯哪一环。

AARRR Framework

Decision matrix

几个成功标准打架的时候,用它把指标或实验方案摆在一起打分。

Decision matrix

Notion

指标怎么定义、数据从哪来、看多长时间,写下来。不然过两周大家口径就对不上了。

Notion

Amplitude

看用户怎么用、在哪转化。改版前后一对比就知道有没有用。

Amplitude

Mixpanel

把用户分群,比较各群的漏斗、留存和使用习惯。

Mixpanel

Statsig

做 A/B 实验和灰度发布,两个方案谁好用数据说话。

Statsig

效果追踪 Prompt

补充项目背景和材料后,将这段 Prompt 复制到 AI 工具中使用。

这次设计改了:【描述】。用户要完成的任务:【任务】。请建议该看哪些指标、和什么比、数据怎么收。列出可能的干扰因素。没有数据支撑的目标值留空,别编。

效果追踪 Prompt

从这里开始

1. 了解 AI 交互模式

先看 AI 产品里常见的交互模式:怎么建立信任、怎么做到透明、用户怎么控制、出错了怎么办。

1. 了解 AI 交互模式

2. 把设计原则用于方案检查

用 HAX 指南把「以人为本」这类抽象原则变成一条条能勾选的检查项。

2. 把设计原则用于方案检查

3. 按当前设计阶段开始实践

找到你现在所处的阶段,按里面推荐的工具、模板和检查项开始做。

3. 按当前设计阶段开始实践

跨阶段方法和资源

Google PAIR Guidebook

Google 的 AI 设计指南,帮你判断一个 AI 功能对人到底好不好。

Google PAIR Guidebook

Microsoft HAX Toolkit

微软的 AI 交互指南,每条原则都配了能直接用的检查项。

Microsoft HAX Toolkit

Shape of AI

AI 交互模式库,好的例子和坏的例子都收。

Shape of AI

WCAG Overview

无障碍的底线标准,每个阶段都用得上。

WCAG Overview

Ken's Toolbox