返回知识库

产品与设计 · 界面体验

空状态设计Empty State

空状态先说原因再给一个主动作;不同原因配不同恢复路径,语气友好、与错误态视觉区分。

项目列表空状态验收台:切换原因,看主动作怎么变

同一个项目列表,三种「为什么空」配三种恢复路径。切换场景看空状态卡的标题、文案、标记和主动作一起换;执行主动作后,列表物件本身长出真实项目行——空状态不是页面终点。

任务:下面是同一个项目列表。切换三种「为什么空」,看空状态卡的标题、文案、标记和主动作怎么一起换; 再点空状态卡上的主动作,看列表物件本身怎么从空恢复——不是只读下方说明。

项目列表
还没有项目

创建第一个项目后,这里会显示目标、进度和下一步练习。

为什么这样设计:首次空用友好引导 + 主 CTA「创建项目」,告诉用户这里本来就该是空的、第一步做什么。

场景:首次打开。原因:首次使用,列表本来就该是空的。下一步:点空状态卡上的「创建项目」,看列表物件如何从空恢复。

面板里测到的结论怎么用

刚才的切换和恢复对应四条判断:三件套、原因决定动作、语气不怪用户、与错误态视觉区分。

  • 空状态 = 原因 + 说明 + 主动作三件套;面板里三种场景的卡片都同时具备这三块,缺一就让用户卡住。
  • 原因决定主动作:首次空给「创建项目」、搜索无结果给「清除筛选」、加载失败给「重试」——不能全部写成「暂无数据」。
  • 语气友好不怪用户:写「还没有项目,创建第一个开始」,不写「你还没有任何数据」这类暗示用户有错的文案。
  • 与错误态视觉区分:友好空态用中性色,可恢复失败用警示色但仍留在原地给重试,不直接跳 404 错误页。

什么时候需要专门设计空状态

从「用户可能在这里看到什么都没有」的信号开始,判断要不要单独做空状态。

适合

列表、搜索结果、筛选、仪表盘、收藏夹——首次使用、筛选无结果或请求失败时会出现「没内容」的容器,都需要空状态引导下一步。

不必或换做法

还在加载时用骨架屏或加载器(不是空状态);确认型系统错误用错误页;已有数据但要引导新功能时用引导卡,不要伪装成空。

怎么做一次空状态验收

从「为什么空」走到「用户能继续」的最短路径。

  1. 先判断这一屏为什么空:首次使用、搜索/筛选无结果、加载失败,还是无权限?原因不同,主动作就不同。
  2. 给三件套:一句原因 + 一句用户能听懂的说明 + 一个主动作(创建、清除筛选、重试、查看归档等)。
  3. 语气把原因说成产品状态,不暗示用户有错;插图只辅助,文本和按钮要能被键盘和读屏使用。
  4. 验收文案、主动作、焦点、窄屏长文案,以及执行主动作后列表是否真的恢复、返回时筛选语境是否保留。

同一空列表:正例与反例

目标都是让用户在空的项目列表前能继续。差异只在有没有说清原因和下一步。

正例三件套:原因 + 友好文案 + 主动作
还没有项目

创建第一个项目,开始练习。

创建项目
差异:说清为什么空、下一步做什么;主 CTA 用中性墨色,避免把示例卡当成页面的真 CTA。
反例纯白屏 · 冷漠「暂无数据」
暂无数据
差异:只把页面留白、甩一句「暂无数据」——用户不知道是首次、没搜到还是出错了,也无法继续,只能干瞪眼。

快速自测

搜索结果页筛选后一条都没匹配上。这个空状态的主动作最该是什么?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。