Empty State 空状态

空状态就是页面没东西时不能装死。它要告诉用户:这里现在为什么空,以后会有什么,你现在可以做什么。它把“空白”从疑惑变成下一步,尤其适合新用户第一次进入产品或筛选没有结果的时候。

关键结构图

用自己的话表达讲给别人听卡住补理解

重新讲一遍

左边是空列表,中间说明“为什么空”,右边是一个明确行动按钮。

Empty State 是页面没有内容时对用户的解释和下一步引导。

Empty State 空状态是界面在没有数据、没有内容、没有搜索结果或用户尚未开始使用时呈现的状态。它不只是留白,而是产品在空白时的沟通。它的边界是“没有内容但流程仍可继续”;如果是加载中、权限错误或系统失败,就应该用加载、权限或错误模式表达。

StructureEmpty State = 空的原因 + 原本会有什么 + 下一步行动

当新用户还没创建内容、搜索没有结果、筛选条件太窄、权限不足或某模块暂时没有数据时,需要空状态。

先说明为什么为空,再告诉用户这里原本会展示什么,最后给一个清楚行动:创建、清除筛选、返回、联系或稍后再试。

一个新建项目列表为空时,页面写还没有项目,下面说明项目会用于组织任务,并提供创建第一个项目按钮。

搜索没有结果时,空状态不要只写无结果。更好的是提示用户检查关键词、清除筛选或查看全部内容。

类型:设计系统实践 / 产品体验

事实线:Atlassian Design System 将 empty state 作为组件,用于解释为什么没有内容并引导用户采取下一步。

依据:Atlassian Empty State guidance,以及常见产品 onboarding、搜索和列表页设计实践。

边界:适合没有内容、没有结果、第一次使用、筛选过窄等场景;不等于错误提示,也不等于加载状态。