列状态清单 | 设计交互 | 做产品

列状态清单

开工前把每个元素会出现的样子列成一张表。这张表既是需求，也是验收清单。

你会遇到的现象

• 做完了自己点一遍没问题，别人一用就撞到没做的状态

• 不知道该测什么，只能凭感觉点几下

• 让 AI 补状态，它补了两个，还有三个没提也没做

状态遗漏的根源是它们不出现在需求描述里。你说「做一个对账页」，脑子里的画面是有数据、一切正常的那一屏。清单的作用就是逼你把其余那些屏也想一遍。

怎么列

四列就够：元素、状态、触发条件、显示什么。最后加一列打勾，写完的时候当验收表用。

• **按元素列，不按页面列。**一个页面有列表、按钮、输入框，各自有各自的状态，混在一起会漏。

• **触发条件要写具体。**写「出错时」不够，写「接口 500 或超时」才知道怎么测。

• **显示什么要能直接照着做。**写「显示错误提示」不够，写「显示原因加一个重试按钮」才行。

• **列完先自己扫一遍再动手。**这时候加一个状态是改一行表格，写完再加是改代码。

你说「做一个对账页」时，脑子里的画面只有最左边那一屏

正常

空

加载中

出错

禁用

处理中

极值 状态遗漏的根源是它们不出现在需求描述里 清单的作用，就是逼你把其余那六屏也想一遍

最右边那格最容易被跳过。它不是状态，是边界——但表现出来的效果一样：一个四十字的名字能把整行布局挤变形。 列完先自己扫一遍再动手。这时候加一个状态是改一行表格，写完再加是改代码。

触发条件要写具体：写「出错时」不够，写「接口 500 或超时 10 秒」才知道怎么测；显示什么也一样，「显示错误提示」不够，得是「显示原因加一个重试按钮」。这张表列完，它同时就是验收清单。

对每个元素问六句

问对应的状态 没有数据时呢空态。要区分「本来就没有」和「筛选筛没了」 数据还没回来呢加载态。超过一秒才需要显示 失败了呢错误态。要有原因和重试 不能点的时候呢禁用态。还要说清为什么不能点 正在处理的时候呢处理中。按钮要锁住，防重复提交 数据特别多或特别长呢截断、折叠、分页。极值下布局不能垮

第六句最容易被跳过。它不是状态，是边界，但表现出来的效果一样——一个四十字的名字能把整行布局挤变形。

输入类元素还要多问两句：校验不过的时候显示什么，以及只读态长什么样。

给 AI 的话

让 AI 先出清单，你改几行，再让它照着实现。比直接要代码稳得多。

复制 PROMPT · 状态清单

页面：[页面名和用途]
主要元素：[列表 / 表单 / 按钮 / 筛选器…]

先不要写代码。请输出一张状态清单，表格四列：
元素 | 状态 | 触发条件 | 显示什么

要求：
1. 逐个元素过一遍这六个问题：没数据、加载中、失败、
 禁用、处理中、极值（超长内容 / 超多条数）。
2. 输入类元素额外列出：校验失败、只读。
3. 触发条件写具体，比如「接口返回 500 或超时 10s」，
 不要写「出错时」。
4. 显示什么要能直接照着实现，包含文案要点。
5. 最后单独列出你不确定的状态，问我要不要做。

我确认清单之后再写代码。实现完成后，
按这张清单逐条自检，报告哪几条做到了、哪几条有偏差。

接着看

四态齐全 清单里最核心的四行。那一篇讲了每种状态各自该回答什么问题。

交互管的是行为 状态只是七类交互说明里的一类。还有字符限制、操作结果、必填规则要一起写。

真实数据压测 清单里的极值那一行，靠这个方法验证。用超长内容和零条数据各跑一遍。