Empty 空状态
指当前场景没有对应的数据内容,呈现出的一种状态。
开发说明
文字型
纯文字的提示,对用户干扰较小,但不容易引起用户的注意。
页面中的控件没有内容时使用,例如下拉搜索、手风琴、折叠面板、穿梭框、下拉菜单等。
文字图标型
符合当前场景的图标加文字的说明,容易被理解,便于用户发现;但是与其他产品差异小,缺少情感化的表达。
页面中有其他内容,且某一个组件或模块没有数据时使用,例如空表单、空数据图等。
文字插图型
符合当前场景的插图加文字的说明,有较强的情感化表达,吸引用户注意,利于提升产品形象,但是对用户干扰较大。
面中没有内容时使用,例如页面无数据、网络连接失败、无权限、404、405 等。
引导操作型
符合当前场景的图标/插图和引导用户操作的按钮,突出引导用户进行其他操作,尽可能减少插图带给用户的理解成本,提升使用效率。
帮助用户摆脱空状态,提供出口或其他功能链接。
何时使用
- 当目前没有数据时,用于显示的用户提示。
- 初始化场景时的引导创建流程。
文案指南
- 当有图标或插图等有情感温度的信息时,空状态会感觉更好。
- 帮助用户摆脱空状态,进入可以操作的地方,建议突出显示用户可以采取的行动。
- 文字说明建议采用建议的语气而不是责怪和告知。
- 建议非视觉信息清晰,插图和图标只是辅助作用。