Ant Design X · RICH 设计范式

AI 设计不是加一个聊天框

给前端与 UI 设计师的 AI 交互范式学习课

24 个规范页 203 张图 R · I · C · H

核心变化

从“用户操作界面”到“用户表达意图”

传统 GUI 要用户拆解步骤并逐个点击
AI 产品要理解模糊目标并协助规划
体验不只看界面，还看 AI 是否听懂、会问、可信

传统 UI vs AI UI

设计对象变了

Traditional UI

对象、菜单、状态

用户知道路径，系统执行命令。

AI UI

意图、角色、会话、混合界面

用户表达目标，系统参与规划与反馈。

变化的本质：从“降低操作成本”扩展到“降低认知、表达和信任成本”。

RICH 框架

四个问题，覆盖 AI 体验全链路

学习路径

不要背规范，要把 24 页变成检查表

R

Role

AI 以什么身份面对用户。

I

Intention

用户意图如何被识别和表达。

C

Conversation

会话如何开始、追问、确认和结束。

H

Hybrid UI

哪些内容用界面承载，哪些交给语言。

Role

角色不是人设，是体验契约

01

真实一致

能力、身份、表达前后一致。

02

流畅自然

回应像协作，不像机械脚本。

03

有人情味

有边界地表达关怀和温度。

Intention

意图设计解决“我该怎么问”

类型

明确意图类型

咨询、生成、分析、执行不能混为一谈。

预期

提供能力预期

告诉用户可达范围、输入要求和结果形态。

表达

引导意图表达

用示例、快捷入口、结构化输入辅助表达。

Conversation

会话是状态机，不是文本框

开始追问提示确认错误结束

每个节点都要有目标、UI 状态、文案策略和异常兜底。

Hybrid UI

不要让语言承载所有信息

复杂参数用控件，不用长句解释
结构结果用卡片、表格、引用来源
关键动作保留按钮、确认、撤销与状态反馈

给前端

AI UI 多了三类工程状态

Intent

意图状态

用户目标、置信度、缺失槽位。

Agent

执行状态

规划、调用、流式生成、取消。

Trust

信任状态

引用、可解释、风险、回滚。

给 UI 设计师

AI UI 多了三层体验资产

语义

能力和边界

用户一眼知道 AI 适合做什么。

流程

多轮协作

追问、确认、纠错形成闭环。

证据

结果可信

来源、过程、可编辑降低不确定性。

十大原则 · 1-5

先听懂，再引导表达

01

先判意图

从用户想完成什么开始，而不是从组件开始。

02

选择形态

点击、会话、混合界面按任务复杂度选择。

03

定义角色

身份、能力、边界、语气必须稳定一致。

04

暴露能力

让用户立刻知道 AI 能做什么、不能做什么。

05

引导表达

用示例、模板、快捷意图降低表达成本。

十大原则 · 6-10

过程可信，结果可用

06

过程透明

展示生成状态、步骤、进度、可取消能力。

07

会话闭环

开始、追问、确认、错误、结束都要设计。

08

结构承载

结果、参数、引用、操作用图形界面承载。

09

结果可用

可验证、可编辑、可复制、可直接应用。

10

用户掌控

AI 推进任务，用户保留选择、撤销与决策权。

表达阶段

输入框要变成意图启动器

不是只给空白 textarea
提供快捷意图、示例、附件、上下文入口
输入前就降低用户的表达焦虑

确认阶段

等待也需要被设计

显示 AI 正在做什么，而不只是 loading
长任务给步骤、进度、取消和重试
必要时让用户确认关键假设

反馈阶段

结果必须能进入下一步工作流

长文本可折叠、可复制、可继续追问
图片、代码、表格用匹配的容器
引用来源和应用动作要贴近结果

落地流程

一次 AI 产品设计评审可以这样走

1

列任务

区分咨询、生成、分析、执行。

2

定形态

选择 Do、Chat 或 Hybrid。

3

画状态

覆盖开始到反馈的每个节点。

4

验信任

检查来源、确认、错误与撤销。

常见误区

五个地方最容易做错

01

把聊天框当 AI

没有意图入口和结果应用。

02

角色漂移

语气、能力、边界前后不一致。

03

过程黑箱

用户不知道系统是否在正确执行。

04

结果孤岛

生成完不能编辑、引用或进入工作流。

05

过度会话

简单选择被迫多轮对话。

团队分工

UI 与前端要共用同一张状态表

UI

定义体验契约

角色、意图入口、会话节点、结果容器。

Frontend

实现状态机器

流式状态、工具调用、取消重试、证据展示。

AI 产品的组件库，要和意图模型、执行状态一起设计。

下一步

把 RICH 变成团队设计语言

每个 AI 需求先补一页 RICH 检查表
每个关键任务画一张会话状态机
每个结果页补齐引用、应用、撤销与继续追问

从“界面好看”升级为“协作可信”。