Empty 空状态

当界面中没有内容／数据时，为用户提供说明信息或操作指引。

适用：

• 初始无数据：如列表中暂无条目
  
• 用户清除数据：用户主动清除了当前界面的内容／数据
  
• 无数据返回：用户的筛选或搜索没有返回有效结果

通用原则

• 文字和插画为必要构成元素，其余构成元素可以按不同场景需求来选用
  
• 行动点（操作项）最多 2 个，并区分主次
  
• 当同一页面 / 视图中出现多个占位或行动点不在占位插画附近时，使用中性调插画来减弱插画对用户的视觉干扰
  
• 所有占位都应绝对居中偏上于容器内

类型

素雅

• 用于局部或小型容器内的占位
  
• 插画元素简单，整体视觉较为轻量
  
• 组成为插画 + 描述
  
• 行动点按需选择，保证不超过 2 个，行动点必须采用「Secondary Button」或 「Text Button」
  

彩色

• 用于页面级或大型容器内占位
  
• 插画元素更加丰富，整体视觉更加厚重
  
• 组成为插画 + 标题 + 描述
  
• 行动点按需选择，保证不超过 2 个。如果只有一个行动点，必须采用「Primary Button」；若为两个行动点，则必须为「Primary Button」+「Secondary Button」
  

构成

1. 插图
   1. 所选用的插画应该与文案传达的主题一致，快速表达含义
      
   2. 常规情况下用「彩色」，当页面中有多个占位的时候用「中性调」
      
2. 标题（可选）
   1. 使用精确、简洁的词语为用户提供信息和指引
      
   2. 尽量使用短语语句，不要使用标点符号或换行
      
3. 描述
   1. 对标题补充描述，帮助用户理解当前页面的功能和价值
      
   2. 不可带任何操作或链接
      
   3. 鼓励用户进行下一步操作
      
4. 操作项（可选）
   1. 展示基于当前场景可执行的操作
      
   2. 把用户的注意力集中在主要操作上，操作最好不要超过 2 个，2 个操作时一个主要按钮，另一个普通按钮，主按钮在左
      
   3. 小型的行动点，用「文字 Button」；常规型的用「常规 Button」

行为

当页面数据为空的时候，一定要保证用户有出口，所以务必至少提供一个行动点。行动点需有主次，且默认不超过 3 个。