空状态设计：当没有数据时，界面该说什么？

用户第一次打开一个任务管理工具，看到的是空白页面；搜索一个关键词，结果列表空空如也；筛选条件太严格，什么也没留下；网络断开，数据加载失败；权限不足，内容被隐藏。这些场景在界面上都表现为“没有内容”，但用户需要的回应完全不同。统一用一句“暂无数据”打发，等于把用户留在原地。空状态是产品与用户之间的一次对话，它要回答三个问题：为什么这里没有内容，这意味着什么，接下来能做什么。回答得好，用户继续前进；回答得差，用户直接离开。

空状态不是一种状态，而是五种

很多团队把空状态当作一个组件，设计一次就复用到所有场景。但“空”的原因不同，用户的情绪和需求也不同。至少可以分成五类。

把这几类混在一起，就会出现“搜索无结果”显示“快来创建第一个项目”的荒谬情况。空状态设计的第一步，是识别当前属于哪一类，再决定文案、插图和操作。

首次使用：不要只给一个空页面

首次使用是空状态中最重要的场景。用户刚进入产品，还没有任何数据，此时界面应该承担 onboarding 的职责。它要告诉用户：这个功能是做什么的，为什么值得用，第一步怎么开始。

一个常见的错误是只放一张插图和“暂无数据”。用户不知道是该点某个按钮，还是等待数据出现。更好的做法是提供明确的行动入口，并且尽量降低第一步的难度。

首次使用空状态通常包含：

• 一句简短的价值说明：这个列表/项目/看板用来做什么。

• 一个主行动按钮：创建第一个项目、添加第一条记录、导入数据。

• 可选的模板或示例：让用户不必从零开始。

• 简短的步骤提示：最多三步，避免变成教程。

• 如果支持导入，提供导入入口，减少手动创建成本。

例如，一个项目管理工具的空状态可以写：“这里会显示你的项目。创建第一个项目，或从模板开始。”按钮分别是“新建项目”和“浏览模板”。这比“暂无项目”有用得多。

无结果：解释为什么空，并给出退路

搜索和筛选后的空状态，用户通常带着明确目标而来。他们输入了关键词，调整了筛选条件，期待看到结果。此时空状态的首要任务是解释“为什么没有”，并帮助用户调整。

无结果空状态的文案应该具体。不要只说“没有找到结果”，而是说明搜索词和筛选条件。例如：“没有找到与‘季度报告’相关的文档。试试更短的关键词，或清除筛选条件。”同时提供操作：

• 清除筛选条件

• 修改搜索词的建议

• 扩大时间范围

• 查看全部内容

• 检查拼写

如果搜索支持模糊匹配，可以给出相近结果。如果筛选条件过多，可以提示当前生效的条件数量。用户需要知道是“真的没有”，还是“条件太窄”。

无结果空状态最忌讳的是把责任推给用户，比如“您输入的关键词有误”。应该用中性、帮助性的语气。

全部完成：肯定用户，而不是制造新任务

待办清空、收件箱为零、任务全部完成，这类空状态是积极的。用户完成了工作，界面应该给予肯定，而不是立刻推销新功能或制造焦虑。

这类空状态的设计要点：

• 用简洁的文案肯定成果：“所有任务都完成了。”

• 视觉上保持轻松，不要用警告色。

• 可以提示后续动作，但不要强迫。

• 如果适合，可以显示完成统计或下一个周期。

• 不要用“暂无数据”这种中性词，浪费了积极时刻。

例如，一个客服工单系统的空状态可以写：“当前没有待处理工单。干得漂亮。”下面可以有一个次要链接“查看已解决工单”。这比“暂无工单”更有人情味。

权限与不可见：说明原因，给出路径

用户看到空白，有时不是因为真的没有内容，而是因为没有权限、内容被隐藏、或者需要申请。此时如果只显示“暂无数据”，用户会误以为系统故障或数据丢失，产生不安。

权限类空状态必须说明：

• 为什么看不到：无权限、需要登录、需要申请、内容已归档。

• 谁能看到：管理员、特定角色、项目成员。

• 怎么获得权限：申请按钮、联系管理员、切换账号。

• 是否真的没有内容：有时候只是当前视图过滤掉了。

文案示例：“你没有查看此项目的权限。请联系项目管理员，或申请访问权限。”按钮：“申请访问”。这比“暂无数据”清晰得多。

错误与加载失败：区分“空”和“坏”

错误状态和空状态在视觉上可能都是空白，但含义完全不同。空是“没有内容”，错误是“没能拿到内容”。用户需要知道区别，否则会误以为数据丢失。

错误空状态应该：

• 明确说明是加载失败，而不是没有数据。

• 给出可能原因：网络、服务、超时。

• 提供重试按钮。

• 如果可能，保留上一次成功加载的内容。

• 不要显示技术错误码给普通用户，但可以提供复制详情入口。

• 自动重试时显示进度，避免用户反复点击。

一个常见的错误是把加载失败显示成“暂无数据”，用户会以为数据被删了。正确的做法是：“内容加载失败，请检查网络后重试。”按钮：“重新加载”。

文案：空状态的灵魂

空状态的文案比视觉更重要。它需要同时做到：简洁、具体、有温度、可行动。以下是几个写作原则。

• 不要用“暂无数据”“空空如也”这类无信息量的词。

• 说明原因，让用户知道为什么空。

• 给出下一步，至少一个明确操作。

• 语气与产品调性一致，但不要过度卖萌。

• 避免指责用户，如“您没有添加任何内容”。

• 控制长度，移动端不超过三行。

视觉：插图不是必需品

空状态常用插图来缓解空白感，但插图不是必须的。如果插图与场景无关，或者过于复杂，反而会分散注意力。视觉设计应该服务于信息层级。

空状态的视觉元素可以包括：

• 简单图标：比复杂插图更轻量，适合工具型产品。

• 线性插图：适合首次使用，传达场景。

• 品牌元素：强化识别，但不要喧宾夺主。

• 留白：有时候什么都不放，反而更清晰。

关键原则是：视觉不能替代文案。用户需要先读到“为什么空”和“怎么办”，然后才是装饰。移动端尤其要注意，插图不能占满屏幕，把操作按钮挤出首屏。

行动引导：一个主操作，最多两个次操作

空状态最重要的功能是引导用户离开空状态。操作按钮的设计要遵循：

• 一个主按钮：最可能帮助用户前进的动作。

• 最多两个次按钮：如“导入”“查看示例”。

• 按钮文案要具体，不要用“确定”“好的”。

• 如果操作需要权限，提供申请入口。

• 如果操作不可用，说明原因。

例如，一个数据看板的空状态，主按钮是“添加数据源”，次按钮是“查看示例看板”。这比只有一个“新建”按钮更有效，因为用户可能不知道新建什么。

可恢复性：别让用户白忙一场

空状态有时是因为用户操作导致的，比如删除、归档、清空。此时可恢复性至关重要。删除后应该提供撤销，而不是直接显示空状态。如果用户误删了内容，空状态应该包含“撤销删除”或“恢复”入口。

对于筛选导致的空状态，应该保留筛选条件，让用户知道怎么改回去。对于搜索无结果，应该保留搜索词，方便修改。对于加载失败，应该保留之前的内容或至少保留页面结构。

空状态是产品态度的体现

空状态不是异常，而是产品的正常组成部分。它出现在用户第一次使用、搜索无果、任务完成、权限不足、网络故障的时候。这些时刻用户最需要清晰的指引。一个好的空状态，能降低新用户门槛，能安抚搜索失败的用户，能肯定完成任务的用户，能引导权限不足的用户找到路径。它不需要华丽的插图，但需要准确的判断、具体的文案和明确的行动。把空状态当作一次对话来设计，用户就不会在空白面前迷失。