web design uiMay 1, 20269 min read

空状态就是产品本身

空状态不是锦上添花。它是激活的界面,是第一印象,也是在用户看到真实数据之前,决定你的留存曲线是否断裂的那一屏。

By Boone
XLinkedIn
Empty States Are the Product

你产品里最重要的一屏,是什么都没有的那一屏。不是仪表盘,不是设置页,而是用户在任何数据出现之前落地的那一屏。这一屏把整个产品压缩进一个画面,而大多数团队把它当成事后补丁。

空状态通常交给谁有空谁做。配一张拿着放大镜的小人库存插画,再加一句“这里还没有内容”。然后团队上线,再纳闷为什么激活率一动不动。空状态不是锦上添花,它就是产品。只是你做错了一个。

空状态是激活界面

**激活不发生在仪表盘里,而发生在空状态里。**用户就是在这里决定,这个产品值不值得再用第二次。

新用户看不到你的路线图,也看不到你的案例研究。他们看到的是一块印着你 logo 的空白屏幕,和一个小声嘀咕的“好吧,然后呢”。这一屏接下来说什么,什么就成了产品。空状态是他们用过的唯一产品。

Linear 懂这一点。它的空收件箱不是一句“没有 issue”,而是一块构图紧凑的画布:一个键盘快捷键,一个明确的下一步动作,还有一种你正身处一群用心的人打造的工具之中的感觉。空状态是激活,仪表盘是奖励。

每个空状态在说什么

空状态是系统在无话可说时开口。它说的话,就成了品牌,也成了用户对这个产品如何对待自己的第一印象。

糟糕的空状态为没有数据而道歉。好的空状态默认用户是有备而来,并递给他们下一步。区别在于姿态。一个说“抱歉这里什么都没有”,另一个说“这件事是这样开始的”。

Notion 的空白文档是业内最干净的例子。一句轻柔的提示词,一个斜杠菜单提示,光标立刻获得焦点。没有插画,没有欢迎页。敲下第一个字就是激活,空状态就是产品。

设计师一再做错的五种原型

大多数团队把“空状态”当成一个设计问题。其实它是五个。每一种出现在不同的时刻,在留存中扮演不同的角色,失败的原因也各不相同。

体素图,一排五张带标签的卡片,每张代表一种空状态原型:首次运行、无结果、无权限、无连接、无 AI 输出
体素图,一排五张带标签的卡片,每张代表一种空状态原型:首次运行、无结果、无权限、无连接、无 AI 输出

1. 零数据,首次运行

用户第一次打开产品时看到的那一屏。没有项目,没有文档,没有历史记录。这是应用里赌注最大的空状态,也通常是被忽视最多的。

Cursor 的首次打开状态就是一课。一个编辑器窗口,一句轻柔的提示,一条为键盘准备好的示例命令。没有导览,没有一连串气泡提示,没有“欢迎使用 Cursor”的弹窗。用户已经身在工作之中。

Figma 的新文件画布用另一种语气做了同样的事。干净的无限画布,触手可及的工具栏,光标就停在你离开的地方。对比那些一上来就甩出五步清单和一堵“连接你的工作区”之墙的产品。一个像工具,另一个像作业。

2. 筛选后零结果

用户刚刚提出了具体的要求,而你的产品没有东西可展示。这是一个信任时刻。空状态必须承认这次搜索,确认它确实执行了,并给出下一步。

Linear 会显示当前生效的筛选条件、一行说明,以及一个清晰的“清除筛选”操作。Stripe 的支付仪表盘在某个日期范围没有结果时也这样做。页面不会消失,它先解释,再给出选择。

失败的模式是死胡同:“未找到结果。”句号。没有上下文,没有出路。用户被困在产品自己制造的状态里,而产品拒绝帮他们出来。

3. 零权限

没人设计、人人都在上线的空状态。用户落在一个没有访问权限的页面上,产品因为他们的好奇而惩罚他们。一个 403,一句“您没有权限”,一条死路。

好的版本尊重用户。它说明谁可以授予权限,给出一个一键“申请访问”的按钮,并告诉他们接下来会发生什么。Slack 在非成员点进私有频道时就是这么做的。空状态把一堵墙变成了一扇门。

4. 零连接

用户打开了你的产品,而它还没有连接到任何东西。Stripe 还没有任何支付。Vercel 还没有任何部署。一个新的 Slack 工作区里还没有真正的频道。这是应用中流失风险最高的时刻,因为用户正盯着一个空白的产品,还没有承诺去填满它。

Stripe Atlas 的“暂无支付”状态堪称大师课。没有哭丧着脸的空图表。它展示仪表盘将会呈现的活动类型,引导你完成第一次集成,并直接链接到你下一步需要的 API 密钥。

Vercel 的空项目列表与虚空截然相反。一个部署按钮,一个导入选项,一个示例模板,全在同一屏上。第一次部署是激活事件,空状态是跑道。

5. 零 AI 输出

这是新问题,而大多数产品都在栽跟头。用户发出了提示词,系统却没有东西可返回。模型超时了,输入不足,或者输出护栏拦住了它。

糟糕的版本说“抱歉,出了点问题”。好的版本很具体:为什么什么都没返回,用户可以改什么,有没有重试路径。Loom 的首次录制流程很好地处理了类似的问题:录制上传失败时,空状态会解释失败原因,并在不丢失文件的前提下提供即时重试。AI 产品引导设计的拆解讲了当 AI 成为核心界面时,整体引导的形态会如何改变。

每个空状态都需要什么

强的空状态都有五个共同要素。少了任何一个,这一屏就会滑回道歉模式。

  1. **上下文。**说明用户正在看什么,以及为什么是空的。“暂无 issue”不够。“本周期没有 issue。按 C 添加第一个。”才是一个在尽职的页面。
  2. **行动。**一个主要动作,一个按键,一个按钮。如果你要写三句话告诉他们该做什么,设计就错了。
  3. **语气。**系统在无话可说时的声音,必须与品牌其余部分一致。在一个友好的产品里冒出冷冰冰的报错腔,魔法就破了。
  4. **层级。**标题,一行说明,主要动作,可选的次要链接。四个元素,由真正的视觉层级来承担工作。再多就是杂乱。
  5. **动效。**一个表明这一屏是活的的轻柔提示。闪烁的光标,微妙的 CTA 脉冲,一个小小的动画箭头。一个产品正在等待用户的信号。

杀死空状态的失败模式

有六种模式杀死的空状态比其他任何东西都多。

**敷衍的插画。**一个抱着写字板的卡通人物。一架望远镜。一个漂浮的宇航员。它们取代了这一屏本该完成的工作,并暗示这个产品还不够认真,连一句像样的文案都不愿写。

死胡同状态。“这里还没有内容”,没有下一步。一个没有出口的 404。一个没有获取权限路径的 403。每一个没有下一步动作的空状态,都是留存上的一个漏洞。

**说教的空状态。**一大段解释这个板块是干什么的文字。用户是来用产品的,不是来读教程的。如果空状态需要三段话,说明产品需要的是更少的解释,而不是这一屏需要更多文字。

**收件箱清零陷阱。**先设计“全部完成”的庆祝,再设计“第一个动作”的流程。Superhuman 靠几个月的真实工作才赢得收件箱清零。大多数产品照搬了庆祝,却没有赚到它,用户在第一天就觉得被居高临下地对待。

**“这里还没有内容”的敷衍。**三个词,没有上下文,没有动作,没有声音。空状态版本的设计师放弃治疗。如果这个字符串出现在你的产品里,你的留存早就断了。

**所有原型一刀切。**同一个组件复用于首次运行、无结果、无权限、无连接。每种原型的赌注不同。一个组件无法同时服务它们,只会把每一种都压扁。

空状态审查

体素渲染图,一叠垂直的清单卡片朝镜头倾斜,每一行都有一个珊瑚色复选框和一条白色文字条,暗示正在进行一次审查
体素渲染图,一叠垂直的清单卡片朝镜头倾斜,每一行都有一个珊瑚色复选框和一条白色文字条,暗示正在进行一次审查

让每个空状态都过一遍这七个问题。只要有一个答不出明确的“是”,这一屏就没做完。

  1. **这一屏有没有告诉用户他们在哪里,以及为什么是空的?**一个标签,一行说明,一个原因。如果他们得靠猜,这一屏在加载之前就失败了。
  2. **是否恰好只有一个主要动作?**不是两个互相竞争的按钮。一个动作,靠层级和对比变得显而易见,就像这一屏实际上就是的那个首屏英雄区。
  3. **语气是否与产品其余部分一致?**把它和一个有数据的页面并排大声读一遍。如果语气变了,空状态就是穿着另一个品牌的衣服。
  4. **下一步能否一次按键或一次点击完成?**不是“去设置,然后连接,然后再回来”。一步到位。任何更长的流程,都是空状态本该替用户吸收掉的工作。
  5. **这一屏是否有生命感,而不是被遗弃的感觉?**一个光标,一个脉冲,一个占位符,一句提示。静止的空白即使运行正常,也像坏了。
  6. **这一屏是否针对其原型量身定制?**每种原型的赌注和文案都不同。复用的通用组件是坏味道,不是体系。
  7. **如果用户只看到这一屏,它能把产品卖出去吗?**如果答案是否定的,空状态就没有尽到本分,而这恰恰是大多数新用户用来评判产品的那一屏。

每个空状态都通过这七问的产品,不费吹灰之力就能激活用户。其他一切都叠加在已经完成说服工作的页面之上。

先选原则,再上线页面

空状态不是抛光层,而是承重层。2026 年的赢家,是那个首屏、零结果页和未连接的仪表盘,就已经像用户注册时所期待的那个产品的产品。落地页设计原则的拆解是营销页面版本,而网页设计原则一文则讲了产品其余部分如何跟上。

别再先设计仪表盘了。从什么都没有的那一屏开始。仪表盘是奖励,空状态才是交易。

常见问题

空状态和零状态有什么区别?

在大多数团队里它们是一回事。“零状态”往往特指首次运行、没有数据的场景。“空状态”更宽泛,涵盖任何预期内容缺失的页面,包括筛选结果、权限墙和 AI 失败。原则是相同的。

每个空状态都应该有插画吗?

不。大多数不该有。当插画承载信息、营造品牌需要的氛围,或在视觉上锚定复杂的首次运行说明时,它才有理由存在。一个抱着写字板的友好卡通人物是装饰,不是设计。如果没有插画这一屏也成立,那就不带插画上线。

怎么给空状态写文案?

最多两句话。第一句说明用户正在看什么,以及为什么是空的。第二句用主动语态、带动词,告诉他们下一步。删掉每一个形容词和每一句道歉。大声读出来。如果听起来像库存模板,就重写。

先设计那个空屏

什么都没有的那一屏,决定了一切。仪表盘和各种集成,都建立在一个你可能并非有意设计的第一印象之上。把这一屏做对的成本是多花一周。做错的代价,是没人能解释的留存曲线。

如果你想要一支把空状态当作产品一部分来设计,而不是最后收尾的团队,雇用 Brainy。我们交付的产品,用户看到的第一屏,就是他们会记住的那一屏。

Want a product where the empty states do the selling instead of the apologizing? Brainy designs first-run flows and zero states as part of the product, not as cleanup.

Get Started

More from Brainy Papers

Keep reading