空状态系统 是做什么的？
目的
空状态系统提供了一个框架，用于设计当没有数据可显示时出现的屏幕或组件。与显示空白屏幕或通用的“未找到结果”消息不同，该系统将空状态视为入门引导、教育和主动发现的机会。它将潜在的“死胡同”转化为富有成效的时刻，保持用户的动力并阐明系统的实用性。
使用场景
- 首次运行体验： 当用户首次登录且尚未创建任何内容时（例如，空仪表盘或项目列表）。
- 搜索结果： 当用户的搜索查询返回零匹配时。
- 筛选： 当组合的活跃筛选器导致空白网格时。
- 空容器： 特定的UI元素，如空购物车、清空的通知中心或全新的收藏夹列表。
- 错误状态： 当内容由于权限或连接问题无法加载时（次要使用场景）。
何时不该使用
- 加载状态： 当内容预计很快出现时，应使用骨架屏或加载动画。
- 永久“死”页面： 对损坏的链接或已删除的资源使用404页面。
- 部分内容： 如果有一些数据可用但有限，应使用标准布局模式而非空状态。
- 被动背景： 不要用于设计上本应为空的部分（例如，边距或装饰性空白）。
输入
- 空场景类型： 这是用户清理后的状态（成功）、首次运行状态（引导），还是搜索失败（发现）？
- 用户意图： 用户试图实现或找到什么？
- 核心价值主张： 当前缺失内容的主要好处是什么？
- 可用操作： 用户的“最佳下一步”是什么？
输出
- 空状态蓝图： 一个包含插图、标题、正文和主要行动号召的结构化定义。
- 情境逻辑： 决定何时何地触发空状态的规则。
- 发现策略： 填补空白的推荐内容或教育提示建议。
工作流程
1. 识别触发原因
确定状态为空的原因。进行分类以选择合适的语气：
- 首次运行（教育）： 鼓励第一次“创建”操作。
- 用户清理（积极）： 确认完成（例如，“全部搞定！”）。
- 搜索/筛选（帮助）： 提供扩大或调整搜索范围的方式。
2. 建立视觉层次
使用“三点规则”（针对空状态修改）构建空状态：
- 锚点（视觉）： 一个不分散注意力的图标或插图，奠定基调。
- 情境（消息）： 一个清晰的标题解释为什么为空，以及说明如何改变的正文。
- 目标（行动号召）： 触发内容创建或重置筛选器的主要按钮。
3. 起草行动导向的文案
- 标题： 具体明确。不要用“没有项目”，而用“您还没有创建任何项目。”
- 正文： 提供价值。“项目帮助您组织任务。创建第一个项目以开始使用。”
- 行动号召： 使用利益驱动的动词。“创建项目”或“开始免费试用”。
4. 提供发现路径（次要操作）
如果没有直接的“创建”操作（如在搜索中），提供替代方案：
- 重置： 清除所有筛选器的链接。
- 建议： 热门类别或“您是不是要找？”建议。
- 教育： 链接到文档或视频教程。
5. 定义技术约束
- 响应式： 确保空状态在小视口中保持居中且可读。
- 可访问性： 使用适当的ARIA角色（例如，
role="status"），确保在状态动态出现时被宣告。
决策规则
- 单一行动规则： 只聚焦于一个主要操作，避免在用户可能困惑的时刻让他们不知所措。
- 同理心优先于幽默： 虽然可以有一点个性，但优先考虑清晰和帮助性。避免隐藏解决方案的“机灵”文案。
- 直接与间接：
- 如果用户能够解决（例如，首次运行），则使用主要行动号召。
- 如果用户无法解决（例如，搜索失败），则使用建议或重置链接。
- 图片相关性： 使用能强化特定情境的插图（例如，搜索用放大镜，文件用文件夹）。
约束条件
- 可访问性： 空状态插图必须具有
aria-hidden="true"或纯装饰性。文本必须满足WCAG AA对比度标准。主要行动号召及任何次要链接/按钮必须满足WCAG 2.2 SC 2.5.8（最小目标尺寸24x24px）。 - 缩放： 空状态不应超过其所替代的实际内容的容器宽度。
- 一致性： 在网站上的所有空状态中使用相同的视觉风格和布局，以建立模式识别。
常见失败模式
- “死胡同”： 告诉用户某处为空，但不告诉他们如何解决。
- 过度设计： 使用复杂、沉重的插图，分散对主要行动号召的注意力。
- 负面语气： 使用听起来像错误或失败的语言（例如，“搜索失败！”）。
- 通用文案： 从搜索到首次引导，所有情况都使用“无结果”。
- 移动端溢出： 在桌面上看起来很棒但在移动端需要垂直滚动才能看到行动号召的设计。
验证标准
- 空状态清楚解释它为何出现。
- 有一个清晰、可操作的主要行动号召或“重置”路径。
- 视觉层次引导视线从视觉元素到行动号召。
- 语气与情境匹配（引导 vs. 搜索失败）。
- 状态可访问（对比度、键盘导航、屏幕阅读器通过
role="status"或等价的实时区域宣告）。 - 主要行动号召满足WCAG 2.2 SC 2.5.8（最小目标尺寸24x24px）。
- 布局响应式并居中在其父容器内。