跳到主要内容

Empty 空状态

指当前场景没有对应的数据内容,呈现出的一种状态。


开发说明
  • 多了一个文字图标的类型,其实本质上对应的还是图片。
  • 样式上的变化。
  • 文字型

    纯文字的提示,对用户干扰较小,但不容易引起用户的注意。

    页面中的控件没有内容时使用,例如下拉搜索、手风琴、折叠面板、穿梭框、下拉菜单等。

    文字图标型

    符合当前场景的图标加文字的说明,容易被理解,便于用户发现;但是与其他产品差异小,缺少情感化的表达。

    页面中有其他内容,且某一个组件或模块没有数据时使用,例如空表单、空数据图等。

    文字插图型

    符合当前场景的插图加文字的说明,有较强的情感化表达,吸引用户注意,利于提升产品形象,但是对用户干扰较大。

    面中没有内容时使用,例如页面无数据、网络连接失败、无权限、404、405 等。

    引导操作型

    符合当前场景的图标/插图和引导用户操作的按钮,突出引导用户进行其他操作,尽可能减少插图带给用户的理解成本,提升使用效率。

    帮助用户摆脱空状态,提供出口或其他功能链接。

    何时使用

    • 当目前没有数据时,用于显示的用户提示。
    • 初始化场景时的引导创建流程。

    文案指南

    • 当有图标或插图等有情感温度的信息时,空状态会感觉更好。
    • 帮助用户摆脱空状态,进入可以操作的地方,建议突出显示用户可以采取的行动。
    • 文字说明建议采用建议的语气而不是责怪和告知。
    • 建议非视觉信息清晰,插图和图标只是辅助作用。