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

适用：

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

通用原则

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

类型

类型 何时使用
素雅 用于小型容器内占位，如表格
彩色 用于页面级或大型容器内占位

素雅

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

image.png

彩色

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

构成

image.png

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

行为

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