返回模板

Helpful empty state

An empty state that explains why the page is empty and gives one relevant next action.

适用场景

这个空状态适用于集合本身有效、但暂时没有条目的情况。它解释当前状态并提供一个相关操作,不把正常的首次使用误报为错误。

布局原理

装饰图标、直接标题、简短说明和单一操作形成紧凑阅读顺序。卡片没有固定高度,因此翻译文本和浏览器缩放都能安全扩展。

如何定制

准确写出缺少的对象,说明是筛选后为空还是尚未创建,并提供能解决该状态的操作。搜索无结果时要保留查询并允许清除筛选。

发布前检查

确保装饰图标对辅助技术隐藏、操作标签说明结果,并避免责怪用户。不要用空状态掩盖加载失败、权限问题或服务器错误。

带着上下文继续制作

在编辑器中改编示例之前,可以先比较相关模式或阅读实用指南。