Back to Details

empty-state

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Design or improve empty states so blank areas become useful product moments that teach, orient, and move users toward the next step.
This skill is specifically for zero-data and no-content surfaces. Use 
onboard
for broader activation strategy, aha moments, first-run education, tours, and adoption planning.
设计或优化空状态，让空白区域成为有价值的产品时刻，起到教学、引导作用，并推动用户采取下一步行动。
本技能专门针对零数据及无内容界面。更广泛的激活策略、啊哈时刻、首次使用教育、引导之旅和采用规划请使用
onboard
技能。

MANDATORY PREPARATION

必备准备工作

Users start this workflow with 
/empty-state
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: the value users should reach from this surface.
用户通过
/empty-state
启动本工作流。本技能激活后，加载$frontend-design——其中包含设计原则、反模式以及上下文收集协议。在继续操作前必须遵循该协议——如果尚无设计上下文，你必须先加载$setup。此外还需收集：用户通过该界面应获得的价值。

Assess the Empty State

评估空状态

Understand what kind of absence you are dealing with:
  1. State type:
    • First use / never created content
    • No results from search or filters
    • Previously cleared content
    • Permission/access restriction
    • Error while loading content inside an existing surface
    • Route-level or full-page failure such as 401, 403, 404, 429, 500, or 503
  2. User question:
    • What is this area for?
    • Why should I care?
    • What should I do next?
  3. Dead chrome audit:
    • Are tabs, filters, sidebars, sort controls, or empty toolbars visible even though they do nothing yet?
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
CRITICAL: An empty state is often the user's first impression of a feature. Treat it like a real screen, not a fallback.
明确你正在处理的是哪种类型的内容缺失：
  1. 状态类型：
    • 首次使用 / 从未创建过内容
    • 搜索或筛选无结果
    • 此前已清空内容
    • 权限/访问受限
    • 现有界面内加载内容时出错
    • 路由级或整页故障，例如401、403、404、429、500或503
  2. 用户疑问：
    • 这个区域是做什么的？
    • 我为什么要关注它？
    • 我接下来该做什么？
  3. 闲置界面框架元素审计：
    • 标签页、筛选器、侧边栏、排序控件或空工具栏是否在尚无作用的情况下仍然可见？
如果以上任何信息无法从代码库中明确，请直接询问用户以澄清你无法推断的内容。
关键提示：空状态通常是用户对某个功能的第一印象。要把它当作正式界面对待，而非备用方案。

Plan the Empty State

规划空状态

Consult the empty-state patterns for the main empty-state types, full-page error variants, CTA rules, and chrome-reduction guidance.
Design the state around this structure:
  • What this area is for
  • Why it’s useful
  • Primary CTA
  • Optional template/example
  • What inactive chrome should disappear for now
参考空状态模式了解主要空状态类型、整页错误变体、CTA规则以及精简界面框架元素的指南。
围绕以下结构设计空状态：
  • 该区域的用途
  • 它的价值所在
  • 主要行动号召（CTA）
  • 可选模板/示例
  • 当前应隐藏的闲置界面框架元素

Build Better Empty States

打造更优质的空状态

First-Use States

首次使用状态

  • Explain what will appear here
  • Frame the value clearly
  • Offer the clearest starting action
  • Consider a starter template or sample data shortcut
  • 说明此处将展示什么内容
  • 清晰传递价值
  • 提供最明确的起始操作
  • 考虑提供入门模板或示例数据快捷方式

No-Results States

无结果状态

  • Explain that the current query/filter produced nothing
  • Offer a recovery action like clearing filters or broadening search
  • Preserve enough context so users understand what happened
  • 说明当前查询/筛选未返回任何结果
  • 提供恢复操作，例如清除筛选条件或扩大搜索范围
  • 保留足够的上下文，让用户明白发生了什么

Cleared-Content States

内容已清空状态

  • Use a lighter tone than first use
  • Offer a simple path back to creation
  • Add undo or recovery when appropriate
  • 语气比首次使用状态更轻松
  • 提供返回创建内容的简单路径
  • 适当时添加撤销或恢复功能

Permission States

权限受限状态

  • Explain the access limitation plainly
  • Say who can grant access or what role is needed
  • Offer a request-access path when possible
  • 直白说明访问限制
  • 说明谁可以授予访问权限或需要什么角色
  • 尽可能提供申请访问的路径

Error States

错误状态

  • State what failed in simple language
  • Match the recovery path to the failure type: retry for transient failures, sign-in for expired sessions, request access for 403, home/search for 404, and status/support for broader service failures
  • Add support/help path when needed
  • 用简洁的语言说明哪里出了问题
  • 根据故障类型匹配恢复路径：临时故障可重试，会话过期请登录，403错误可申请访问，404错误可返回首页/搜索，更广泛的服务故障可查看状态/联系支持
  • 需要时添加支持/帮助路径

Reduce Dead Chrome

精简闲置界面框架元素

  • Hide tabs, filters, sidebars, or sort controls that provide no value before content exists
  • Keep the screen focused on the message and the next step
  • 隐藏在内容存在前没有任何价值的标签页、筛选器、侧边栏或排序控件
  • 让屏幕聚焦于信息和下一步操作

Use Visual Interest Carefully

谨慎使用视觉元素

  • Illustration or icon is optional, but helpful when it supports comprehension or attention
  • The CTA should still be stronger than the decoration
NEVER:
  • Leave users staring at “No items” with no next step
  • Keep inactive controls visible just because the full UI normally has them
  • Let the illustration overpower the message and CTA
  • Use the same empty-state tone for first use, permissions, and errors
  • Use a generic catch-all error page when a more specific recovery path is available
  • 插图或图标是可选的，但如果有助于理解或吸引注意力则很有帮助
  • CTA的视觉权重仍应高于装饰元素
绝对禁止：
  • 让用户盯着“暂无项目”的提示却没有下一步操作指引
  • 仅仅因为完整UI通常包含这些控件就让闲置控件保持可见
  • 让插图盖过信息和CTA的风头
  • 对首次使用、权限受限和错误场景使用相同的空状态语气
  • 在有更具体的恢复路径时使用通用的错误页面

Verify Empty-State Quality

验证空状态质量

  • Clarity: Does the state explain what belongs here?
  • Value framing: Does it explain why the user should care?
  • Next step: Is the CTA obvious?
  • Chrome cleanup: Is inactive UI removed?
  • Appropriate tone: Does the state match first use / no results / permission / error?
Remember: The best empty states feel like helpful product design, not like the app ran out of things to say.
  • 清晰度：该状态是否说明了此处应展示什么内容？
  • 价值传递：是否说明了用户为什么要关注？
  • 下一步指引：CTA是否明确？
  • 界面精简：闲置UI是否已移除？
  • 语气适配：语气是否匹配首次使用/无结果/权限受限/错误的场景？
请记住：最好的空状态是贴心的产品设计，而不是应用无话可说的敷衍。