# 空状态
对内容、结果为空，或是整个动作完成的即时反馈。
## 使用规则
在初始态、空数据状态、结果为空、错误态（无权限、404、500、租户停用、链接失效等）等状态下，利用示意图和文字描述，及时反馈为空信息给用户。
如有解决方案或引导方法，应在明显位置提供。
在整个较为复杂的交互动作完成后，给予用户的反馈。
## 空状态反馈组件
### 组成要素
1. **插画：** 为空的情感化配图
1. **标题（可选）：** 精简概要，短语、断句表达功能
1. **描述：** 对其功能、内容的简单解释（如果整个空状态仅需插图，也可以省略该项）。任何空状态下都需要有相关场景的描述，包括 loading 和 正反馈
1. **按钮（可选）：** 行动按钮，建议优先使用「面性按钮」，如果同时存在主、次按钮，主要行动按钮在右侧
### 使用规则
- 目前在UD组件中，空状态组件中包含大量的插画，我们在选用插画时应该符合空状态组件尺寸规范，根据场景和界面功能来选取插画，不可随意选取插画填充至页面。
- 从产品体验的角度来，空状态大体可以由以下三类情况触发：
- 产品初体验，第一次看到某个功能（正反馈）
- 成功完成目标任务 （正反馈）
- 出错、失败、无结果 （缺省态负反馈/中性反馈）
- 空状态反馈场景下，**插画有介绍/解释产品功能的作用，带有一定的场景性**，引导用户进行下一步操作(一般是启用或开通新功能)。建议使用**近景特写、画面信息少**的插画，不建议使用场景复杂、元素较多的插画。此场景通常带有「行动性指令」文案的CTA按钮，插画不可抢占CTA主行动按钮的视觉焦点。
- ### 插画示例
| 负反馈 | 中性反馈 | 正反馈
---|---|---|---
**插画场景** |  |  | 
**特征** | 中性色为主、突出错误、一般会带有警示、报错元素 | 灰色块面居多，用色中性，不会太绚丽 | 绚丽、愉悦的配色
**使用说明** | 出现错误、故障等因素打断用户进行目标操作，可以使用负反馈插画。运用插画在这种情况下可以减少用户的挫败感和负面情绪，提升产品体验。选用插画时，应符合简单易懂，与页面内容和文案相对应的特点。**突出错误** (可能存在红色警告元素或红叉等)。 | 当搜索、筛选等结果为空、权限不够、未选中列表中的项、详情为空(或没有预览)等，可使用中性反馈。空的页面对于用户来说过于冷漠及不友好，可用中性反馈插画**引导用户**或者**说明状况**。 | - 场景默认为空时，需用图片示意，且传达正向情感。
- 引导用户进行下一步操作。一般是启用或开通新功能。
- 用户成功完成某个操作或动作后可使用正反馈空状态，加强用户的参与感，使产品与用户的对话更加有人情味。此时插画也可作为作占位符或品宣使用。
- 用于页面以及模块容器中的加载状态，即时告知用户他的请求正在处理中。
**场景示例** |  |  | 
#### 负反馈使用场景
页面加载失败，打断用户进行目标操作，使用负反馈插画。
#### 中性反馈使用场景
当搜索、筛选等结果为空、权限不够、未选中列表中的项、详情为空(或没有预览)等，可使用中性反馈。空的页面对于用户来说过于冷漠及不友好，可用中性反馈插画**引导用户**或者**说明状况**。
#### 正反馈反馈使用场景
- 用户成功完成某个操作或动作后可使用正反馈空状态，加强用户的参与感，使产品与用户的对话更加有人情味。此时插画也可作为作占位符或品宣使用。
- 场景默认为空时，需用图片示意，且传达正向情感。
- 引导用户进行下一步操作。一般是启用或开通新功能
- 用于页面以及模块容器中的加载状态，即时告知用户他的请求正在处理中。
#### 行为引导组合展示
### 设计元素
- 插画：客户端内尺寸120 * 120px，60px * 60px。网页端内尺寸150 * 150px，120px * 120px，60px * 60px
- 标题：建议文案简短单行，使用短语或词组
- 描述：建议文案控制在一句话，完整句子需使用。建议最大宽度为插画的200%，即 250px。 如果只需要一行，优先使用副标题描述
- 主要按钮
- 次要按钮
- 按钮排列顺序：优先同行左右展示按钮，当按钮一行排列不下时候，执行二行并列排列
**插画三端尺寸适配**
| Mobile | PC | Web
---|---|---|---
示例 |  |  | 
尺寸建议 | 100 * 100px | 120 * 120px | 150 * 150px
**特殊场景**
空状态用于小卡片等极小场景中，插画的大小需要等比缩小插图尺寸为 60 px，文字与间距自行调整不做固定，间距需满足 4N 原则。
### 位置说明
#### 客户端内
**卡片内居中：** 对于有固定窗口、卡片大小的客户端，使用卡片内部居中。
**全页面内居中：** 对没有固定卡片容器的场景，使用客户端内的总高居中。
**复合场景：** 一个场景内使用到多个空状态，以最复杂的构成项的图片顶对齐为准。如下图：
#### 网页端内
**常态情况：**
对于有模块范围、非信息流的网页，如下图有固定卡片样式的空白区域内，建议使用原生客户端的位置则：整体空状态保持上下居中。如下图：
**复合场景：**
一个场景内使用到多个空状态，以最复杂的构成项的图片顶对齐为准。如下图：
## 初始化组件
### 使用规则
初始化空状态-组合场景下，**插画有详细介绍/解释产品功能的作用，带有一定的场景性和引导性**，引导用户启用或开通新功能。建议使用**中景(如有人物一般为半身)、画面信息适中**的插画，此场景通常带有「行动性指令」文案的CTA按钮，插画不可抢占CTA主行动按钮的视觉焦点。
### 说明引导类初始化
#### 组成要素
1. **初始化插画（必选）** 为空的情感化配图，最好对与产品功能有所相关，用于说明动作或目标效果
1. **主标题（可选）** 说明页面的核心功能
1. **副标题（可选）** 对功能点进行拆解说明
1. **文案说明 （必选）** 精简概要，短语、断句表达功能
1. **按钮（可选）** 行动按钮，用于引导用户操作或帮助解决问题
#### 场景示例
邮件首次开启引导页面
**设计元素（尺寸、间距、字号、字色）**
- 插画：尺寸350*350px
- 主标题：字号24px，Semibold，N900，建议文案简短单行，使用短语或词组
- 副标题：字号14px，Meduim，N900，建议文案简短单行，使用短语或词组
- 内容说明：字号14px，Regular，N900，建议文案简短单行（可双行），建议文案控制在一句话，完整句子需使用。
- 主要引导按钮：按钮高度40px
- 次要引导按钮：按钮高度40px
- 按钮排列顺序：左右展示按钮，主要引导按钮在最左侧为最高优先级，后侧依次按照优先级层级排列，建议最多2个按钮
#### 插画示例
 |  | 
---|---|---
 |  |
### 行为引导类初始化
#### 组成要素
1. **初始化插画（必选）** 为空的情感化配图，最好对与产品功能有所相关，用于说明动作或目标效果
1. **功能操作** 页面核心功能，操作项
1. **卡片式入口** 复杂功能分流页，通过卡片入口进行分类
1. **表单填写** 核心流程填单页，让填写信息更有仪式感
#### 场景示例
#### 页面类
**设计元素（尺寸、间距、字号、字色）**
- 插画：350*350px
- 自定义模块：最大宽度为350px，最大高度为350px
- 布局：整体模块上下居中，插图和内容布局支持左右更替
#### 弹窗类
**设计元素（尺寸、间距、字号、字色）**
- 插画：250*250px
- 自定义模块：最大宽度为375px，最大高度为375px
- 布局：整体模块上下居中，插图和内容布局支持左右更替
#### 插画三端尺寸适配
类型 | PC | Mobile | 适配方式指导
---|---|---|---
弹窗类 | 
- 插画尺寸 250*250 px
- 弹窗尺寸840*560 px | 
- 插画尺寸 250*250 px
- 界面尺寸375*812 px | - 弹窗下插画和操作模块左右布局插画为250*250 px
- 移动端下插画和操作模块上下布局插画为 250*250 px
页面类 | 
- 插画尺寸 350*350 px
- 页面尺寸 1200*700 px | 
- 插画尺寸 250*250 px
- 界面尺寸 375*812 px | - 页面中插画和操作模块左右布局插画为350*350 px
- 移动端下插画和操作模块上下布局插画为250*250 px
登录注册类 | 
- 插画尺寸 250*250 px
- 页面尺寸1200*700 px | 
- 插画尺寸 250*250 px
- 界面尺寸375*812 px | *
* - 登录注册页面中插画和操作模块左右布局插画为 250*250 px
- 移动端下插画和操作模块上下布局插画为 250*250 px