AI 生成空状态：没有数据时，也要给用户下一步

AI 生成空状态：没有数据时，也要给用户下一步

一、空状态不是随便放一张插画

很多 AI 生成页面会把主要列表和表单做得很完整，却忽略空状态。没有数据、搜索无结果、权限不足、加载失败，这些场景如果没有设计，用户会被卡住。

空状态的目标不是填补空白，而是解释当前发生了什么，并给出下一步动作。AI 生成 UI 时，空状态必须成为组件协议的一部分。

二、空状态要区分原因

flowchart TD
  A[无内容] --> B{原因}
  B --> C[首次使用]
  B --> D[筛选无结果]
  B --> E[权限不足]
  B --> F[加载失败]
  C --> G[引导创建]
  D --> H[调整筛选]
  E --> I[申请权限]
  F --> J[重试或报错]

首次使用的空状态应该引导创建。筛选无结果应提示调整条件。权限不足应说明访问边界。加载失败应提供重试和错误信息。原因不同，文案和按钮完全不同。

AI 如果只生成一个通用“暂无数据”，会让用户不知道该做什么。空状态要和业务状态绑定，而不是装饰组件。

三、Schema 里要定义空状态

type EmptyStateSchema = {
  reason: "first_use" | "no_result" | "forbidden" | "error"
  title: string
  description: string
  action?: {
    label: string
    type: "create" | "reset_filter" | "request_access" | "retry"
  }
}

生成式 UI 可以要求模型为每个数据区域生成空状态 Schema。渲染器根据 reason 显示不同图标、文案和动作。这样空状态不会成为最后才补的边角料。

empty_state:
  reason: no_result
  action: reset_filter

空状态文案也要克制。不要责怪用户，不要写模糊鼓励。直接说明原因和下一步，体验通常更好。

四、空状态也要测试

前端测试应覆盖空数据、接口失败、权限拒绝和筛选无结果。视觉回归也要包含空状态截图。很多线上页面不好用，问题不在成功态，而在失败态。

还要检查无障碍。空状态如果只有插画，没有可读文本，读屏用户无法理解页面。按钮焦点顺序也要正确，重试和申请权限必须能用键盘操作。

空状态还要考虑恢复路径。加载失败时，重试按钮应保留；权限不足时，申请入口应明确；无搜索结果时，重置筛选应比创建新内容更优先。AI 生成文案时要理解业务动作，而不是只生成一段安慰文字。

不同密度页面的空状态也不同。后台表格可以更紧凑，移动端页面需要更短文案，营销页可以更有品牌感。组件库应提供多种空状态规格，而不是一个大插画模板到处套。

空状态的指标也能帮助产品判断。某个筛选条件长期产生大量无结果，可能说明筛选项设计不好。某个权限不足空状态被频繁触发，可能说明分享链路不清晰。空状态不只是 UI，它也暴露流程问题。

最后，空状态要和加载态区分。加载中不要显示“暂无数据”，否则用户会误判。数据为空、请求失败和仍在加载，是三种完全不同的状态。

空状态也要避免过度插画化。低频页面可以使用插画增强情绪，高频后台页面更适合简洁文案和明确动作。视觉表达要服务场景，而不是统一套一个漂亮模板。

国际化场景还要关注文案长度。空状态标题和描述在不同语言下可能明显变长，按钮也可能换行。生成式 UI 应在多语言样本下验证布局，不要只用中文短句验收。

五、总结

AI 生成 UI 时，空状态要按首次使用、无结果、权限不足和加载失败分别设计，并写入 Schema 和测试用例。

没有数据时，界面仍然要工作。好的空状态不是装饰，而是给用户下一步。