空状态Empty
你可能会说
没数据的时候别一片空白,放张图加句话,告诉用户接下来怎么办。
空状态是在内容区域没有可展示数据时说明原因和下一步的界面状态新项目列表为空时,可说明“还没有项目”并提供“新建项目”按钮。它不能代替加载失败或权限不足等错误提示,应说明真实原因。
组成结构 · Anatomy
还没有任何项目创建第一个项目,开始协作吧
整个空白区域的容器
用于辅助识别,不应抢过核心文案
说清为什么是空的
可选,提供明确的下一步操作
常见变体 · Variants
简单文字Simple
暂无收藏收藏的内容会出现在这里
次要区域,说清是空的就够了
带引导按钮With Action
还没有任何项目
需要引导用户创建第一条数据时
自定义插画Custom
回收站是空的删除的文件会在这里保留 30 天
重品牌感的页面,插画贴合业务场景
典型使用场景
空列表 / 空表格
成员列表
搜索无结果
共找到 0 条结果
没有找到相关内容
换个关键词试试,比如「桌游」
引导创建第一条数据
还没有任何项目
项目用来组织你的设计稿和文件
回收站为空
回收站文件保留 30 天
回收站是空的,已删除的文件会出现在这里
延伸阅读 · 权威出处