空状态不是“留白”，是用户心里的一句问话

你有没有点开一个列表页，屏幕中央只孤零零躺着一行灰字：“暂无数据”？
或者刷新后，图标转了几圈，最后弹出个带叹号的提示框——那一刻，你下意识滑走，甚至没看清那行字写了啥。

空状态（Empty State）常被当作UI里的边角料：设计师随手塞个图标+文案，前端顺手写个 v-if="list.length === 0" 就交差。但真实场景里，它不只是一段条件渲染的分支逻辑，而是用户操作链条中断时，系统唯一能开口说话的机会。

它得回答三个问题：

• 我刚才干了啥？
• 为什么啥也没出来？
• 接下来该怎么做？

缺一个，用户就容易卡住、猜疑、放弃。

空状态的核心，从来不是“美不美”，而是“准不准”

很多人花半小时调图标大小、阴影深浅，却没想清楚：这个空状态，到底是给谁看的？在什么情境下出现的？

比如搜索页的空状态和新建项目的空状态，情绪完全不同：

• 前者带着轻微挫败感——“我搜了，但没找到”，需要轻量引导+容错暗示（比如“试试换关键词？”或展示热门搜索）；
• 后者是起点，用户刚打开应用，手里还没内容，这时候放一句“暂无数据”就像对刚进门的朋友说“家里没人”，既失礼，也浪费建立信任的黄金3秒。

判断空状态是否合格，第一标准不是视觉完成度，而是它能否还原用户此刻的认知上下文。
你得知道：用户是主动触发（如点击“清空回收站”），还是被动遭遇（如网络断开后列表消失）？是首次使用（没数据很正常），还是老用户突然发现历史记录不见了？——不同动因，文案语气、交互路径、甚至图标隐喻都该变。

别让“暂无数据”成为默认答案

“暂无数据”这四个字，像万能创可贴，哪都能贴，哪都治不好。它不解释原因，不提供出口，还自带一股冷淡的官腔味。

更务实的做法，是把空状态拆成三层信息：

1. 状态说明（发生了什么）
   → “您还没有创建任何项目”比“暂无数据”多出主语和动作，用户立刻对号入座；
   → “网络已断开，最近一次同步时间为昨天14:22”比“加载失败”更有时间锚点，降低不确定性焦虑。

2. 轻量归因（为什么发生）
   不必讲技术原理，但要给合理归因。比如：

   • “可能被过滤掉了”（暗示用户检查筛选条件）；
   • “权限不足，无法查看他人笔记”（点明限制来源，而非模糊说“无权限”）；
   • “该分类下暂无内容，但您可以添加第一条”（把空转化为行动入口）。

3. 明确动线（下一步做什么）
   按钮文案别写“确定”，写“新建第一个任务”；
   图标别用通用问号，用铅笔（代表编辑）、放大镜（代表搜索）、加号（代表添加）——视觉符号本身就在说“点这里，就能动起来”。

空状态也要有“呼吸感”

我们习惯把空状态做成静态卡片：固定高度、居中排版、统一圆角。但真实界面是有节奏的。当用户从满屏列表突然滑到一片空白，视觉落差越大，心理落差越强。

试试这些小调整：

• 留白做减法，但别真“空”：底部留一指高安全距离，避免文字紧贴屏幕底边，制造视觉缓冲；
• 动效带温度：列表清空后，原条目淡出，新空状态从下方轻缓上浮（非生硬弹出），像一次自然过渡；
• 字体有层次：主文案用稍大字号+适度字重，副文案用常规尺寸+60%灰度，按钮则用100%黑+微凸阴影——信息优先级，全靠视觉重量说话。

这些细节不增加代码量，但能让用户觉得：“哦，这页面懂我在想什么。”

最后一个提醒：空状态不是终点，是流程的中途站牌

很多团队把空状态当成“功能做完后的补丁”。其实它该前置——在PRD阶段就定义：这个模块有哪些空场景？每种对应什么用户意图？技术方案是否支持差异化兜底？（比如API返回{ data: [], hasMore: false, reason: 'no_permission' }，比笼统的{ data: [] }更能支撑精准空状态）

上线后也别忘了回访：

• 用户在空状态页面的平均停留时长是多少？
• 点击“新建”的比例 vs 直接退出的比例？
• 搜索为空时，有多少人紧接着点了“热门推荐”？

数据不会说谎。如果空状态区域的点击率长期低于2%，大概率不是用户不想动，而是你没把路标立清楚。

空状态不是设计的休止符，而是交互乐谱里那个延长音——它不响亮，但决定余韵长短。
下次写 v-if 或 *ngIf 的时候，不妨停两秒：
此刻站在屏幕前的人，正看着什么？
他心里那句没说出口的话，你想怎么答？