空状态Empty
你可能会说
没数据的时候别一片空白，放张图加句话，告诉用户接下来怎么办。
空状态是在内容区域没有可展示数据时说明原因和下一步的界面状态新项目列表为空时，可说明“还没有项目”并提供“新建项目”按钮。它不能代替加载失败或权限不足等错误提示，应说明真实原因。
什么时候用
- 列表 / 表格还没有数据，告诉用户这里本来有什么名称状态这里还没有任何数据
- 提供明确的引导按钮：新建项目、添加成员还没有项目新建项目
- 搜索无结果，提示换个关键词试试狼人杀没有找到相关内容，换个关键词试试
- 文案清楚说明：为什么是空的，以及下一步能做什么收件箱是空的——邮件都处理完了 🎉
什么时候不用
- 只写「暂无数据」，用户看不到原因和可执行的下一步暂无数据用户：然后呢？我该怎么办？
- 页面仍在加载时，应使用 骨架屏 Skeleton 或其他加载反馈，而不是空状态加载中，请稍候…
- 加载失败不是空状态，应使用 结果页 Result 说明错误和下一步暂无数据其实是网络错误，却被当成空的
- 插画做得比内容还花哨，喧宾夺主空空如也～
组成结构 · Anatomy
还没有任何项目创建第一个项目，开始协作吧
整个空白区域的容器
用于辅助识别，不应抢过核心文案
说清为什么是空的
可选，提供明确的下一步操作
常见变体 · Variants
简单文字Simple
暂无收藏收藏的内容会出现在这里
次要区域，说清是空的就够了
带引导按钮With Action
还没有任何项目
需要引导用户创建第一条数据时
自定义插画Custom
回收站是空的删除的文件会在这里保留 30 天
重品牌感的页面，插画贴合业务场景
典型使用场景
空列表 / 空表格
成员列表
搜索无结果
共找到 0 条结果
没有找到相关内容
换个关键词试试，比如「桌游」
引导创建第一条数据
还没有任何项目
项目用来组织你的设计稿和文件
回收站为空
回收站文件保留 30 天
回收站是空的，已删除的文件会出现在这里
延伸阅读 · 权威出处