SuperAPI AI 工具集

empty-states

设计与创作

查看项目

更新于 10-16 04:15

技能介绍

用途

Empty States(空状态)模式用于在界面没有内容可显示时引导用户,把空白或零结果的视图转化为提供下一步操作的帮助时刻,而不是让用户陷入死胡同。它最适用于团队需要处理首次使用的仪表盘和收件箱等场景。

与相邻模式相比,该模式应在不隐藏状态、规则或用户继续前进所需的恢复路径的前提下减少摩擦。

适用场景

  • 首次使用的仪表盘和收件箱
  • 搜索或筛选结果为零匹配
  • 队列完成或列表已清空

应避免的场景

  • 当事件过于微小、不值得打断任务时,应使用更安静的状态。
  • 避免对用户之后必须能够重新查看的事件使用瞬时反馈。
  • 不要在没有层级规则的情况下在多个渠道重复同一条消息。

实现工作流

  1. 在复制示例之前,确认该模式与问题和约束条件匹配。
  2. 从 references/pattern.md 中的结构和示例开始,然后选择最小的可行变体。
  3. 在叠加视觉打磨之前,先应用无障碍、性能和交互护栏。
  4. 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。

无障碍护栏

键盘交互

  • 验证空状态可以仅使用键盘完成操作。
  • 当模式打开、更新或显示额外 UI 时,保持焦点顺序合乎逻辑。
  • 保持可见的焦点状态,且在高倍缩放时仍然可读。

屏幕阅读器支持

  • 优先使用语义元素,仅在语义不足时添加 ARIA。
  • 在正确的位置以正确的礼貌级别宣布错误、加载或完成等状态变化。
  • 在有用时,通过 aria-describedby 或结构化标题连接标签、提示和状态文本。

视觉无障碍

  • 不要仅依赖颜色来传达严重程度、完成或选中状态。

常见错误

过度信号化一切

问题:当每个状态都使用强烈的颜色、动效和声音时,人们会停止关注。

修复方法:创建严重程度阶梯,将最强的处理保留给真正需要打断用户的状态。

时机与任务不匹配

问题:短任务因沉重的加载 UI 而显得迟缓,长任务因没有进度指引而显得被遗弃。

修复方法:根据等待时长选择尽可能轻的反馈,并让模式诚实地反映已知信息的程度。

跳过宣布策略

问题:当实时区域行为不一致或缺失时,屏幕阅读器用户会错过瞬时变化。

修复方法:定义每个状态如何被宣布,并使用真实的辅助技术测试礼貌与断言式更新。

相关模式

  • https://uxpatterns.dev/patterns/data-display/filter-panel
  • https://uxpatterns.dev/patterns/user-feedback/loading-indicator
  • https://uxpatterns.dev/patterns/user-feedback/notification

完整实现细节、示例和测试说明,请参见 references/pattern.md。

模式页面:https://uxpatterns.dev/patterns/user-feedback/empty-states