web design uiMay 10, 202613 min read

空的状态就是你的产品,而不是事后考虑的因素。

空状态页面是产品中最重要的页面,但大多数团队却把它放在最后发布。这是一份设计所有页面变体的权威指南,并附有示例。

By Boone
XLinkedIn
the empty state is your product

产品中最重要的一屏往往是空白的。大多数团队最后才发布这个页面,设计得最敷衍,然后就把它忘得一干二净。

第一次打开任何一款新应用。收件箱是空的,项目列表是空的,搜索结果为空,你刚刚清空了一个看板。五个不同的时刻,五个不同的空白屏幕,几乎所有产品都把它们当作同一个问题来处理。

它们并非同一个问题。这是五个完全不同的设计界面,它们共同决定了用户是继续使用你的产品,还是悄悄地关闭标签页。

为什么空白状态才是你真正的第一印象

人们不会根据你的主页来评判你的产品。他们会根据第二个屏幕来评判,也就是注册之后的那个页面。在这个页面上,他们期待着奇迹,却只看到一张略显失望的插图,上面写着“此处暂无内容”。

那一刻浓缩了整个产品推介。它告诉用户产品的功能,下一步该做什么,以及你对他们的用心程度。如果做得好,他们就会继续使用。如果做得不好,他们就会离开,再多的邮件营销也无法挽回他们。

一个优秀的空白状态可以同时完成三项任务:它能清晰地展示该功能的用途,营造产品的情感氛围,并为用户提供一个比关闭标签页更便捷的后续操作。

然而,大多数空白状态却无法做到这些。它们只是展示一些友好的卡通形象,为空白状态表示歉意,然后寄希望于用户自行摸索。这并非设计,而是敷衍了事。

五种空白状态类型(以及为何需要不同的处理方式)

将所有空白屏幕一视同仁是空白状态设计的原罪。以下列出了五个不同的空白状态,并按团队出错的频率排序。

  1. 首次运行空白状态:用户刚刚注册,之前从未接触过该产品,由于他们尚未进行任何操作,因此屏幕上没有任何内容。这是产品中风险最高的空白状态。

  2. 零状态空屏:用户之前使用过该产品,但某个特定区域自然是空的,例如新项目、新工作区或新创建的列表。他们了解产品,但对这个区域并不熟悉。

  3. 清空后空屏:用户刚刚清空了某些内容。他们清空了收件箱、完成了所有任务、归档了所有内容。这是一个完成的时刻,而不是空无一物的时刻。

  4. 错误空屏:屏幕为空是因为某些操作失败。例如,数据获取失败、连接断开或集成配置错误。用户误以为产品出现故障,即使实际上并没有。

  5. 搜索空屏:用户输入查询后没有得到任何结果。他们有明确的意图,也投入了精力,但你却没有返回任何结果。如果处理得当,这是最容易补救的空屏状态。

每种类型的空屏都需要不同的解释、操作和语气组合。首次运行状态需要引导用户,完成注册后的状态需要鼓励用户,搜索空白的状态需要提供建议。如果对这五个状态都使用相同的通用“此处无内容”模板,那么其中四个状态就浪费了。

五张标签卡片整齐地排列成一排,分别显示 FIRST-RUN、ZERO-STATE、POST-CLEAR、ERROR-EMPTY 和 SEARCH-EMPTY,每张卡片在柔和的粉彩色背景下都显得格外醒目。
五张标签卡片整齐地排列成一排,分别显示 FIRST-RUN、ZERO-STATE、POST-CLEAR、ERROR-EMPTY 和 SEARCH-EMPTY,每张卡片在柔和的粉彩色背景下都显得格外醒目。

并排比较:每个空白状态应该做什么和不应该做什么

将它们并排比较,差异就显而易见了。以下是简要说明。

| 空白类型 | 出现时机 | 应该做什么 | 应该避免什么 |

|---|---|---|---|

| 首次运行 | 用户刚刚注册,尚未进行任何操作 | 使用示例数据或引导式初始任务来教授核心操作 | 显示悲伤的表情符号和“开始使用”,但没有目标页面 |

| 零状态 | 用户对某个特定领域是全新的,但已经了解产品 | 建议 2 或 3 个具体操作,提示模板 | 重复整个引导流程 |

| 完成注册后 |用户刚刚完成、归档或清空列表 | 表示祝贺,然后引导用户执行下一步操作 | 表现得好像用户操作有误 |

| 错误提示 - 空列表 | 数据加载或同步失败 | 用通俗易懂的语言说明失败原因,提供重试机会,并链接到状态页面 | 显示通用的空状态,假装一切正常 |

| 搜索提示 - 空列表 | 用户输入查询,但未找到任何匹配项 | 显示搜索内容,建议相关查询,并提供创建查询的选项 | 显示“未找到结果”且无结果提示 |

请注意,表格中的失败模式几乎完全相同。大多数产品默认对所有空状态都显示相同的通用消息,这就是为什么大多数应用程序中的空状态都给人感觉平庸的原因。

让空状态发挥作用的四个设计技巧

您可以采用四种设计技巧。大多数优秀的空状态会结合使用其中两到三种,而不会同时使用全部四种,因为那样会显得杂乱无章。

  1. 示例数据。 在屏幕上预先填充真实示例内容,供用户操作、编辑或清除。Stripe 的仪表盘带有“查看测试数据”切换按钮,堪称教科书式的典范。

  2. 建议操作。 以按钮或卡片的形式呈现两到三个具体的后续步骤,而不是模糊的“开始使用”按钮。Notion 在新页面上提供的模板建议值得借鉴。

  3. 教学图示。 使用视觉效果展示填充后的状态,而不是使用令人沮丧的卡通形象。提供一个简短的预览,展示收件箱或看板填满后的样子。

  4. 定调文案。 用三到十二个字确立产品的个性,并告诉用户这个空间的用途。Linear 的空收件箱文案,一句话就比大多数落地页更能体现品牌调性。

诀窍在于根据不同的状态选择合适的组合。首次运行需要示例数据和建议操作,清理后需要定调文案,或许还可以小小庆祝一下,搜索为空则需要建议和创建邀请。要根据具体情况调整策略。

四个带标签的卡片排列在一个干净的网格中,分别显示示例数据、建议操作、教学插图和语气设定文字,背景是柔和的粉彩。
四个带标签的卡片排列在一个干净的网格中,分别显示示例数据、建议操作、教学插图和语气设定文字,背景是柔和的粉彩。

真正做好这一点的产品(以及值得借鉴之处)

快速掌握这一技巧的方法是研究那些将“空”状态视为设计问题的产品。以下是一些优秀案例的简要介绍。

Linear 的空收件箱。 Linear 将空收件箱视为一段短暂的假期。文案简洁幽默,符合品牌调性,视觉效果平静而非尴尬。没有“开始使用”按钮,因为根本不需要。

Notion 的模板建议。 新的 Notion 页面在技术上是空的,但它永远不会让人感觉空荡荡的。光标已准备就绪,斜杠命令有提示,模板建议会根据上下文显示。您看到的不是一片空白,而是琳琅满目的选择。

Figma 的 Drafts 墙。 新注册的 Figma 帐户不会显示空白的文件列表,而是显示 Drafts 空间,其中包含示例文件、创建团队的提示以及通往第一个画布的清晰路径。您可以通过查看来了解产品。

Cron,现在是 Notion 日历的引导日历。 完成引导后,日历会显示您实际关联的事件,同时也会显示键盘快捷键叠加层和一些示例事件,以展示产品的特性。十秒钟内,您就能轻松上手。

Things 3 的首次发布。 Things 3 附带一个引导项目,该项目利用产品本身来教授产品。每个任务都是一堂课。当你检查完最后一个项目时,你已经用完了所有需要的功能,而空空如也的状态正是你真实生活的写照。

更多值得借鉴的产品(Granola、Superhuman、Stripe、Replit、ChatGPT)

以下是一些其他值得借鉴的产品,主要侧重于较新的产品和人工智能工具,因为它们的模式仍在不断完善。

Granola 的首次转录提示。 Granola 深知最尴尬的时刻莫过于第一次会议,而你却没有任何内容需要转录。因此,它提供了录制简短测试或导入示例转录的功能,让你了解人工智能是如何运作的。这解决了产品原本可能面临的“先有鸡还是先有蛋”的问题。

Superhuman 的新手引导。 Superhuman 会在你看到空收件箱之前安排一次真人指导电话,但应用内的首次使用仍然会通过示例邮件和键盘快捷键演示来引导你。当你独自使用这款应用时,你会发现它的空白状态反而成了一种特色。

Stripe 的空白仪表盘。 Stripe 在你注册的那一刻就会显示一个包含示例数据的完整仪表盘。页面上有一个清晰的“正在查看测试数据”指示器,点击一下即可切换到你真实的、空白的账户。你甚至在看到路径之前就能看到最终结果。

Replit 的空白工作区。 全新的 Replit 工作区并非空白。它是一个代码编辑器,包含一个初始文件、一个带有友好提示的控制台,以及一个可以直接运行的运行按钮。你可以在最初的十秒钟内开始编写代码。

ChatGPT 的空白提示页面。 ChatGPT 的空白状态通常只有一个文本框,而这种设计之所以有效,是因为该产品具有一定的文化影响力。它仍然会在页面底部为新用户提供一些建议提示,但这已经是最基本的功能了。如果您没有 ChatGPT 的品牌,请勿复制 ChatGPT 的空白状态。

失败模式,点名批评

糟糕的空白状态遵循少数几种可识别的模式。一旦您能识别出这些模式,就应该停止发布它们。

四张失败卡片,分别标有“悲伤的插图”、“从零开始”、“死胡同”和“无限空白”,每张卡片都配有一个小小的视觉提示,说明出了什么问题,背景是柔和的粉彩。
四张失败卡片,分别标有“悲伤的插图”、“从零开始”、“死胡同”和“无限空白”,每张卡片都配有一个小小的视觉提示,说明出了什么问题,背景是柔和的粉彩。

令人沮丧的插图。 一个友好的吉祥物,眼睛耷拉着,旁边写着“此处暂无内容”。在 Figma 中看起来很可爱,但在产品中却显得很侮辱人。用户并非感到沮丧,他们只是刚刚注册。

指向虚无的“开始使用”按钮。 一个醒目的号召性用语,点击后却打开一个没有任何上下文、模板或示例的通用创建表单。用户点击后,看到的是一个空白表单,而此时空白状态已经深入了两页。

死胡同状态。 搜索结果为空,故事到此结束。没有建议,没有相关结果,也没有提供创建他们搜索内容的选项。用户输入了一些内容,你却说“不”,对话就此结束。

无限空白。 人工智能产品中常见的情况。整个界面就是一个空的输入框,等待提示。没有示例,没有默认值,没有引导。用户输入“你好”然后离开。

激活数学:为什么前 60 秒至关重要

每个产品都有一个激活时刻,即用户第一次执行使产品有价值的操作。发送第一条消息、创建第一个项目、导入第一个联系人、生成第一个输出。

空白状态是指注册和激活之间的屏幕。用户盯着“此处暂无内容”屏幕的每一秒,都是他们本可以用来激活的一秒,而用户流失率非常高。会话的前 60 秒与用户留存率的相关性,比接下来 60 分钟的总和还要高。

这就是为什么示例数据和建议操作几乎总是比空白屏幕更有效的原因。他们将激活步骤从“决定做什么,然后弄清楚怎么做,最后执行”缩短到“点击这个,看看会发生什么,了解产品”。三步简化为一步。

如果你的激活率很低,那么解决产品中的空白状态通常是最经济的方案。比重新设计引导流程、制作教程、发送邮件都便宜。只需在屏幕上显示一些有用的信息即可。

人工智能视角:为无限空白状态设计

人工智能产品面临着独特的空白状态问题。界面通常只有一个输入框,理论上可以执行任何操作,这意味着在用户知道要问什么之前,它实际上什么都做不了。这就是所谓的无限空白状态。

ChatGPT、Claude、图像生成器、光标,所有人工智能工具都面临着这个问题。最简单的解决方案是一个巨大的空白文本框,上面写着“问我任何问题”。面对无限的可能性,用户输入一些无关紧要的内容,得到一个通用的回复,然后得出结论:产品一般。

解决方法与常规产品相同,只是更加精准。提供建议提示,展示人工智能的优势范围;提供示例对话或生成示例,展示其质量;提供一些入门模板,帮助用户快速上手。Granola 的“录制测试会议”方法可以应用于你的人工智能的任何功能。

将输入框视为用户正在完成的句子,而不是他们正在开始的句子。提供前半部分。无限空白的状态会变成引导用户迈出的第一步,从而显著提升用户激活率。

设计师的审核工作站,配有一个小屏幕,屏幕上显示着一个空的收件箱,旁边是一个空状态类型的清单,以及一支小小的珊瑚色钢笔标记着产品涵盖范围,背景是柔和的粉彩色调。
设计师的审核工作站,配有一个小屏幕,屏幕上显示着一个空的收件箱,旁边是一个空状态类型的清单,以及一支小小的珊瑚色钢笔标记着产品涵盖范围,背景是柔和的粉彩色调。

语气和清除后的状态:充满情感的空白状态

大多数团队止步于首次运行。清除后的状态才是产品真正发挥作用的关键,它就像一位体贴入微的同事。

语气贯穿始终。 空白状态会在用户信心不足时被解读。例如,用户是新手、迷茫、刚刚完成某项工作或遇到了错误。在财务应用中,一个略带讽刺意味的空白状态提示会显得不尊重人;在创意工具中,一个正式的空白状态提示会显得僵硬;在错误提示中,一个欢快的空白状态提示会显得莫名其妙。空白状态提示的文案应该使用统一的语气,并根据具体情况进行适当变化。

清空任务后值得庆祝一下。 用户刚刚完成一个列表,归档了所有内容,实现了收件箱清空。Things 3 会在你完成所有任务时弹出一条简短的成就信息。Linear 会悄悄地庆祝待处理队列清空。这种多巴胺带来的愉悦感是真实的,也是产品真正为用户感到高兴的少数时刻之一。

不要过度庆祝。每次有人完成五个任务就播放彩带动画,到周二就会让人觉得乏味,而简洁、平静的确认信息加上一个贴心的“下一步是什么”的建议,每次都能起到很好的效果。收件箱清空后,建议用户规划当天的工作。完成一个项目后,建议用户回顾下一个项目。

错误和搜索:赢得或失去信任的空状态

用户最关心的就是这两种空状态,因为它们都发生在用户执行任务的过程中,并且用户当时正处于意图明确的状态。

错误空状态必须以信任为导向进行设计。 当数据加载失败时,大多数产品会显示一个通用的空状态或一个伪装成错误的堆栈跟踪。这两种方式都会以不同的方式破坏信任。通用版本更糟糕,因为用户甚至不知道产品出了问题,他们会认为空的收件箱是真的,然后就再也不会回来了。

正确的做法是用简洁明了的语言与用户沟通失败原因。用用户能理解的语言告诉他们哪里出了问题,而不是用你自己的语言。给他们一次重试的机会,链接到状态页面,或者指出配置错误的设置。如果错误空状态能够继承已填充状态的视觉结构,那就更好了,这样用户就能明白他们错过了什么。

搜索空状态最容易补救。 用户已经输入了内容,你完全知道他们想要什么,而显示“未找到结果”并配上一个悲伤的表情符号是错误的。最小可行版本会复述查询并建议相关搜索。良好版本会提供创建用户搜索内容的选项。卓越版本会利用查询建议模板、操作或帮助文章。

GitHub 的搜索为空时,通常会建议创建一个以查询标题为标题的问题。Notion 建议创建一个页面。Linear 建议提交错误报告。搜索为空时,“开始使用”按钮才能真正发挥作用,因为目标页面已经清晰可见。

如何审核产品中的空白状态

没有记录的内容,就无法修复。大多数团队在实际统计空白状态的数量后,都会惊讶于其数量之多。请按以下顺序执行审核:

以全新用户身份登录,并在全新的隐身模式下打开产品的每个页面。截取所有包含空白区域的屏幕截图。将它们列在电子表格中,每行代表一个屏幕,列包括类型、当前文案、当前视觉效果和当前操作。

然后,用五种类型之一标记每个屏幕:首次运行、零状态、清除后、错误空状态、搜索空状态。你会发现大多数产品都有十到三十个空状态,其中只有一两个是故意设计的。

对于每个空状态,问自己三个问题:它是否能说明这个界面的用途?它是否提供了具体的后续操作?它是否与产品的其他部分风格一致?如果所有问题的答案都是肯定的,则无需修改;如果任何一个问题的答案是否定的,则修改该部分并继续进行下一个。

如果你想把这变成一项团队活动,可以预留 90 分钟,邀请设计师、产品经理和一位不擅长写文案的工程师参与。议程非常简单,而且你可以在一周内交付成果。

前 30 分钟,团队一起进行审核,共享一个屏幕,逐个浏览每个空状态。讨论每个状态的类型。意见不一致没关系,重要的是讨论本身。

接下来的 30 分钟,挑选出三个流量最高的空白页面,并当场重写。只需一句定调文案、两个建议操作,以及是否添加示例数据即可。先别急于完善视觉效果,先写文案。

最后 30 分钟,分配负责人,并设定一周的上线目标。不要把这变成季度计划。空白页面规模小、内容集中,上线速度快。本周上线三个,下周再上线三个,一个月内你的激活曲线就会有所改善。

空白页面是产品的肢体语言

你可以伪造营销网站,也可以伪造首页,但你无法伪造空白页面,因为这是产品停止承诺、开始兑现承诺的时刻。

当用户访问一个空无一物的页面时,你做出的每一个选择都会被展现出来。你是否考虑过用户的需求,还是直接发布了默认选项?你是否教会了用户如何使用产品,还是仅仅因为页面空白而道歉?你写的文案听起来像是真人写的,还是像2008年巫师写的?

把空白页面当作正门,而不是脚注。先设计空白页面,而不是最后才设计。每月审核一次。专门雇人负责。

产品中最容易被忽视的页面,往往也是用户看到频率最高的页面。务必重视它。

Want your product's empty states designed by people who treat them like the front door, not a footnote? Hire Brainy.

Get Started

More from Brainy Papers

Keep reading