专题篇章 · Interaction Engineering:让产品真的好用

把状态机和边界写进提示词

每个界面把状态列全,把边界情况说死,把防错要求写明。状态机补全器 + 边界轮盘,配可复制的验收话术模板

本页解决的问题

先给结论

「把状态机和边界写进提示词」要解决的关键问题是什么?

每个界面把状态列全,把边界情况说死,把防错要求写明。状态机补全器 + 边界轮盘,配可复制的验收话术模板

判断标准

把品味变成产品可重复的行为。 有用的结果不是一句“我觉得更好”。它应该是一条看得见的规则、一个小例子,以及判断体验何时低于标准的方法。

下一步

记录一个前后对比,让别人不用听解释也能看懂质量线。

常见误区

表面更精致了,却没有减少用户的不确定感。

为什么 AI 的产出总是「晴天版」

你说「做一个订单列表页」,AI 脑补的画面永远是:网络通畅、数据正好一屏、用户不会点错。它不是偷懒,是你给的描述里只有晴天。本章第 2 节讲过界面的状态三件套(加载、空、错误),第 3 节讲过防错与可逆,那两节教你识别,这一节教你把识别出的要求变成提示词里白纸黑字的条款

跨章引用 · 状态三件套与错误信息三要素加载、空、错误各自长什么样才合格,错误信息怎么说人话,第 2 节已经玩过一遍,这里直接引用它的结论。
动手 · 状态机补全器

下面这段提示词是典型的晴天版,右边的状态板上五个格子还全是问号。点下方的状态芯片,逐个把状态写进提示词,看规格一条条长出来。

状态机补全器 已定义 0 / 5
点一个状态芯片,就往提示词里写进一条对应的规格。
做一个订单列表页,显示订单、金额和状态,顶部可以按状态筛选。// 到这就停笔的话,下面五个状态全部由 AI 自由发挥
加载中
AI 自由发挥
空列表
AI 自由发挥
加载失败
AI 自由发挥
弱网超时
AI 自由发挥
操作成功
AI 自由发挥
「自由发挥」四个字在交互上的意思通常是:白屏、alert、没反应。
对决 · 同一个空列表,两种命运

规格里那句「空态给引导」到底值多少?下面是同一个订单页在新用户眼里的两个版本:左边的提示词没提空态,右边多写了一句。点你觉得留得住新用户的那边。

晴天版 vs 全天候版 点选一边
A · 提示词没提空态
shop.example.com/orders
我的订单
全部 待付款 已完成
暂无数据
B · 多写了一句空态规格
shop.example.com/orders
我的订单
你的订单会出现在这里 下第一单后,物流和发票都在这页管 去逛逛
边界轮盘:AI 最爱糊弄的六种情况

状态列全之后,还有一批藏得更深的边界情况。它们共同的特点是演示时永远碰不到,上线第一周全都来报到。抽一个看看 AI 默认会怎么糊弄,以及提示词里该补哪句。

边界轮盘 已抽 0 / 6
? / 6点下面的按钮,抽第一个边界情况
六种全抽完,你就有了一张边界自查单。
先报姿态,再谈状态密度

状态和边界要写到多细,取决于界面的姿态。《About Face 4》第 9 章把产品分成几种姿态,最常用的两种抄给你。写提示词时先报姿态,AI 对状态密度的拿捏会准很多。

主权姿态(sovereign)
用户整天开着的主力工具:IDE、后台、表格。屏幕归它独占,用户是熟手。状态可以密:骨架屏、行内校验、批量操作的进度、快捷键提示,都值得写进规格。
临时姿态(transient)
用完就走的小工具:扫码、计算器、请假申请。用户每次来都像第一次来。状态要少而醒目:一屏一件事,反馈大而直白,别摆密密麻麻的仪表盘。

姿态报错的典型翻车:给用完就走的请假页配上主权级的筛选器和统计图,或者给整天盯着的监控后台配上大字报式的单屏流程。密度跟着姿态走,姿态跟着使用频率走

拼装 · 交互规格积木机

审美篇的积木机拼的是视觉规格,这一台拼交互规格。五组条款自由开关,右侧预览实时更新;哪组选了「不提」,预览里会标出 AI 将在哪里自由发挥。拼好复制,贴在你生 UI 提示词的末尾。

交互规格积木机
状态全集
空态
网络与错误
危险操作
控件与文案
五组全开就是一份完整的交互验收附件,关掉任何一组,风险都标在预览里。
考一下:防错条款怎么写才对
给「删除项目」写防错要求,哪句最好 单选
A删除前弹两次确认框,第二次加倒计时
B删除立即执行并给撤销入口,回收站保留 30 天
C把删除按钮做小做浅,放进三级菜单
D不用写,AI 知道删除要小心
本节要点

AI 只写你提到的状态:加载、空、错误、弱网、成功,五态点名列全,没点名的就是白屏和 alert 的温床。

边界要说死:列表为空时、网络失败时、重复提交时、权限不足时,每个「时」后面接一句明确要求。

先报姿态再谈密度:主权姿态的界面状态可以密,临时姿态的界面要少而醒目,别拿错剧本。

规格拼好当附件:目标场景(上一节)打头,交互规格(这一节)殿后,两段合起来就是喂 AI 的完整需求。

内容来源:newwebplay AI「交互工程」专题原创;错误与状态的原则整理自《About Face 4:交互设计精髓》第 15 章,界面姿态整理自第 9 章(Alan Cooper 等)。

从「为什么 AI 的产出总是「晴天版」」把感觉变成判断

「你说「做一个订单列表页」,AI 脑补的画面永远是:网络通畅、数据正好一屏、用户不会点错。它不是偷懒,是你给的描述里只有晴天。本章第 2 节讲过界面的状态三件套(加载、空、错误),第 3 节讲过防错与可逆,那两节教你识别,这一节教你把识别出的要求 变成提示词里白纸黑字的条款」指出,AI 降低了做出“能用”成品的门槛,读者真正需要练的是看出哪里不对,并把感觉说成可以执行的要求。

观察用户的下一步,而不是只看表面

「下面这段提示词是典型的晴天版,右边的状态板上五个格子还全是问号。点下方的状态芯片,逐个把状态写进提示词,看规格一条条长出来」可以转成几个可观察的问题:用户是否知道现在发生了什么,是否知道下一步做什么,出错或空白时能否恢复,以及信息层级是否让重要内容先被看见。

漂亮不等于容易用

把「规格拼好当附件: 目标场景(上一节)打头,交互规格(这一节)殿后,两段合起来就是喂 AI 的完整需求」用在第二个页面或流程上,记录一个具体犹豫点和一个改动后的用户动作;能被观察到的变化,才是体验改善。

从「为什么 AI 的产出总是「晴天版」」走到「动手 · 状态机补全器」

「为什么 AI 的产出总是「晴天版」」先把问题落在「你说「做一个订单列表页」,AI 脑补的画面永远是:网络通畅、数据正好一屏、用户不会点错。它不是偷懒,是你给的描述里只有晴天。本章第 2 节讲过界面的状态三件套(加载、空、错误),第 3 节讲过防错与可逆,那两节教你识别,这一节教你把识别出的要求 变成提示词里白纸黑字的条款」上;到了「动手 · 状态机补全器」,讨论继续推进到「下面这段提示词是典型的晴天版,右边的状态板上五个格子还全是问号。点下方的状态芯片,逐个把状态写进提示词,看规格一条条长出来」。两段连起来,重点就不只是记住一个结论,而是看清它成立所依赖的条件。

把这条判断带到下一个场景

评估体验时,把抽象的“好看”或“顺手”换成用户动作:他是否看懂状态、找到了下一步、能从错误中恢复,并且愿意继续使用。

  • 「为什么 AI 的产出总是「晴天版」」:你说「做一个订单列表页」,AI 脑补的画面永远是:网络通畅、数据正好一屏、用户不会点错。它不是偷懒,是你给的描述里只有晴天。本章第 2 节讲过界面的状态三件套(加载、空、错误),第 3 节讲过防错与可逆,那两节教你识别,这一节教你把识别出的要求 变成提示词里白纸黑字的条款
  • 「动手 · 状态机补全器」:下面这段提示词是典型的晴天版,右边的状态板上五个格子还全是问号。点下方的状态芯片,逐个把状态写进提示词,看规格一条条长出来
  • 「最后的要点」:姿态报错的典型翻车:给用完就走的请假页配上主权级的筛选器和统计图,或者给整天盯着的监控后台配上大字报式的单屏流程。 密度跟着姿态走,姿态跟着使用频率走

最后的「最后的要点」把讨论落到「姿态报错的典型翻车:给用完就走的请假页配上主权级的筛选器和统计图,或者给整天盯着的监控后台配上大字报式的单屏流程。 密度跟着姿态走,姿态跟着使用频率走 」。回看这条线索时,最值得保留的是:当输入、规模或风险改变,哪些判断需要重新做一遍。

标记为已学完 阅读进度会自动记录
← 上一篇下一篇 →

继续阅读

同一条线上的下一篇。

文章讨论

读到这里,留下一个判断。

把刚想明白的地方、还没想通的问题,留给下一位一起学习的人。

正在讨论 把状态机和边界写进提示词 Interaction Engineering:让产品真的好用
3条讨论文章讨论 · 与共学社区同步
在共学社区查看
AM
Asha Morgan内容编辑
观点实践记录

我把这篇文章里的一个判断改写成了今天可以验证的小实验。比记住结论更有用的是,知道下一步要观察什么。

文章讨论7 有帮助
LH
Lin Harper独立开发者
观点观点

读完以后我先回头找它成立的条件,而不是直接把方法搬进项目。这个顺序让后面的取舍清楚很多。

文章讨论5 有帮助
KM
Kiki Moore产品运营
问题问题

如果把这个判断放到真实工作里,最先需要补的约束是什么?我想知道从阅读到第一次实践之间,哪一步最值得先做。

文章讨论4 有帮助