
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 和测试用例。没有数据时界面仍然要工作。好的空状态不是装饰而是给用户下一步。