---
title: 空页面
slug: 空页面
category: 组件
figma_node_id: 1:33
figma_page_name: ＞空页面
aliases: [EmptyState, Empty, 空状态, 缺省页, 缺省, 缺省页面, 占位页]
last_extracted: 2026-05-19
status: ok
---

# 空页面

> 当页面无数据 / 网络异常 / 无权限 / 加载失败时展示的占位插画 + 文案组合。如流空页面分**全局缺省**与**模块缺省**两个层级、**浅色**与**深色**两种模式，并覆盖 7 种语义场景：无权限 / 无网络 / 加载失败 / 直播空 / 空事件-日程-审批 / 消息空 / 空内容-搜索-文件。桌面端缺省图 170×170px，移动端缺省图 130×130px（模块缺省）或 100×100px（小尺寸模块缺省），插画与文字间距均为 0px。

## 类型与号型

### 缺省语义类型（7 类组件）

| 类型 | 用途 | 示例触发场景 |
|---|---|---|
| 缺省 - 无权限 | 当前账号无权限访问 | 私密群、企业内部资料 |
| 缺省 - 无网络 | 网络断开或不可达 | 离线状态 |
| 缺省 - 加载失败 | 请求失败但网络正常 | 服务端报错 |
| 缺省 - 直播空状态 | 没有直播或直播未开始 | 直播列表无内容 |
| 缺省 - 空事件/日程/审批 | 时间维度无内容 | 日历周内无日程 / 无待审批 |
| 缺省 - 消息空状态 | 会话无消息 | 新群、清空后会话 |
| 缺省 - 空内容/搜索/文件 | 列表 / 搜索 / 文件无结果 | 搜索无结果、空文件夹 |

### 缺省层级（2 层）

| 层级 | 应用范围 | 文案规则 |
|---|---|---|
| 全局缺省规则 | 整页空状态 | 含文案 + 按钮（可选） |
| 模块缺省规则 | 卡片 / 区块内空状态 | 仅文案 + 小尺寸插画 |

### 模式（2 种）

| 模式 | 底色 |
|---|---|
| 浅色模式 | `#FFFFFF` |
| 深色模式 | `#121214` |

> 原文："深色模式（根据页面底色可适当降低整体透明度）"

## 尺寸规格

数据来自 Figma layout token：

| 元素 | 宽 × 高 | 来源 layout token |
|---|---|---|
| 桌面端规则画板 | 1280 × 2879px | `layout_B4SUG4` |
| 桌面端规则画板（含模块缺省） | 1280 × 3629px | `layout_PGYJPP` |
| 移动端规则画板 | 1280 × 2879px | `layout_B4SUG4` |
| 移动端浅色 / 深色场景画板 | 1280 × 3463px | `layout_DM77EV` |
| 全局缺省示例区（含 960 / 640 标尺） | 960 × 640px | `layout_K8FHIO / KD8FMR / 8CY94D` |
| 桌面端缺省图（INSTANCE） | 170 × 170px | `layout_TNTFQB / T6BV68` 等 |
| 移动端模块缺省图（大） | 130×130px | 原文 "图片大小为 130px 和文字 0px 间距" |
| 移动端模块缺省图（小） | 100×100px | 原文 "图片大小为 100px 和文字 0px 间距" |
| 移动端深 / 浅模式实例 | 580 × 580px | `layout_HW7G8G / 8IITK2 / 74FNOZ / ZLDKGO / F7IOFT / PEN4VX / NC436L` |
| 移动端场景卡片（手机壳） | 375 × 818px / 375 × 812px | `layout_FJ6RR1 / 4Q3MIA` |
| 标尺虚线长度 | 161px / 106px | `layout_SAY818 / G8DVV7` |
| 章节大标题"全局缺省规则 / 模块缺省规则 / 使用场景示意 / 浅色模式 / 深色模式 / 文字按钮展示规则 / 文案+按钮" | 24px Medium | `style_8F4ZAX` |
| 缺省语义标签（"无网络/空事件/日程/审批" 等） | 20px Regular，行高 32px，opacity 0.4 | `style_OYSSQD` |

### 关键标尺标注（原文摘录）

> 12px #5C6473
> 12px #878D99
> 图片大小为 130px 和文字 0px 间距
> 图片大小为 100px 和文字 0px 间距

## 状态

| 状态 | 含义 |
|---|---|
| 默认 | 展示占位插画 + 文案 |
| 含按钮（可选） | 全局缺省可加文字按钮（如"重试"、"去权限设置"） |
| 浅色 | 浅底，黑文字 |
| 深色 | 深底，白文字，可降低整体透明度 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 浅色模式底 | `#FFFFFF` = `White` | 常规背景 |
| 深色模式底 | `#121214` | 深色模式背景 |
| 章节标题文字 | `#11141A` | 24px Medium |
| 缺省语义标签 | `#000000`（透明度 40%） | 20px Regular，行高 32px |
| 深色模式标题 | `#FFFFFF` | 与背景对比 |
| 12px 灰文字 token #1 | `#5C6473` | 标尺标注辅文字 |
| 12px 灰文字 token #2 | `#878D99` = `C-Coolgray60` | 模块缺省图标尺标注 |
| 灰底示例区描边 | `#CEDEFF` | 示例区描边色，2px 边框，12px / 20px 圆角 |
| 标尺红色（演示用） | `#FF0000` | 演示标尺（非组件本体色） |

> 关联 token 详见 [色彩](../基础/色彩.md)。

## 间距与排布

- **缺省图与文字间距**：0px（原文强调"图片大小 130px 和文字 0px 间距"）
- **桌面端缺省图**：170×170px，纵向居中容器内
- **移动端模块缺省图**：130×130px（大）或 100×100px（小）
- **桌面端 7 种缺省横向排布**：每种 170×170 区块，水平间距均匀（标尺 210px）
- **示例容器**：960 × 640px，描边 2px、圆角 12px（桌面端）；375 × 818px、描边 3px、圆角 20px（移动端手机壳）
- **行内文字行高**：32px（缺省语义标签）/ 20px / 12px（标尺说明）

## 文案规则

- 缺省语义名称使用 4–7 字（"无权限"、"无网络"、"加载失败"、"空事件/日程/审批"、"空内容/搜索/文件"、"消息空状态"、"直播空状态"）
- 文案可附按钮（如"重试"、"刷新"、"申请权限"），按钮使用文字按钮形态
- 深色模式下文案使用浅色字，根据底色降透明度

## 交互行为

- **静态展示**：缺省页本身无交互，仅展示插画 + 文字
- **可选按钮**：含按钮的缺省页，按钮触发对应动作（重试 / 申请 / 切换）
- **网络恢复**：网络恢复后自动重新加载（无网络场景）
- **权限申请**：无权限场景下，按钮跳转至权限申请页

## 示例

![桌面端-空页面-7种缺省总览](../图片/组件/空页面/desktop7zhong-que-shengoverview.png)
![桌面端-空页面-全局缺省](../图片/组件/空页面/desktopquan-ju-que-sheng.png)
![桌面端-空页面-模块缺省](../图片/组件/空页面/desktopmo-kuai-que-sheng.png)
![桌面端-空页面-文字按钮展示](../图片/组件/空页面/desktoptext-btndisplay.png)
![移动端-空页面-浅色模式](../图片/组件/空页面/mobileqian-se-mo-shi.png)
![移动端-空页面-深色模式](../图片/组件/空页面/mobileshen-se-mo-shi.png)
![移动端-空页面-130px插画](../图片/组件/空页面/mobile130pxcha-hua.png)
![移动端-空页面-文案加按钮](../图片/组件/空页面/mobiletextjia-an-niu.png)

## 设计考量 / 原文摘录

> 全局缺省规则。
> 模块缺省规则。
> 使用场景示意。
> 浅色模式。
> 深色模式（根据页面底色可适当降低整体透明度）。
> 文字按钮展示规则。
> 文案+按钮。
> 12px #5C6473 / 12px #878D99（标尺标注）。
> 图片大小为 130px 和文字 0px 间距。
> 图片大小为 100px 和文字 0px 间距。

- **图文 0 间距**：插画自带留白，无需再加间距，保证视觉一体
- **同插画跨场景复用**：一套插画支持 7 种语义，依文字区分含义，降低维护负担
- **深 / 浅模式独立组件**：每个语义都提供深浅两套，不通过滤镜动态切换
- **170 / 130 / 100 三档插画尺寸**：覆盖全局桌面、移动模块大、移动模块小三种位置

## 不推荐用法

- 自定义缺省插画尺寸（应使用 170 / 130 / 100 三档之一）
- 缺省图与文字间留出额外间距（违反"0px 间距"原文）
- 在卡片 / 区块内使用全局缺省 170px 大图（应改用模块缺省 100/130px）
- 缺省页同时使用多种语义插画（应只选一种主语义）
- 深色模式套用浅色组件（应使用深色专用组件）

## 关联

- 列表的空状态触发见 [列表](列表.md)
- 搜索无结果见 [搜索框](搜索框.md)、[结果列表](结果列表.md)
- 加载状态见 [加载](加载.md)
- 横幅类提示见 [横幅提示](横幅提示.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
