界面组件›空状态

空状态Empty State

列表没出现,是没有询盘,还是根本没读到?

专业定义

空状态是数据区域已经有了明确结果、但没有可展示条目时的界面。首次使用尚无记录与筛选后无匹配项都可能为空,却需要不同的说明和下一步;加载中、读取失败和无权限不能伪装成零条。

大白话

空白也要交代原因。真的没东西,告诉人从哪开始;只是没找到,就让人改条件。

生活类比

冰箱没买菜,可以去采购;菜在另一层,可以换个位置找;灯坏了看不清,不能断言冰箱是空的。

类比到这里为止:屏幕上的零条需要成功读取的依据。看不到与不存在不是同一回事,也不能靠插画判断真实原因。

外贸出海场景

询盘列表首次使用时介绍导入或接收入口;筛选“法国”无结果时保留筛选条件并提供清除入口。CRM 读取失败则保留错误提示,不显示“暂无客户”。

相同空白,四种处理

尚无记录
说明这个区域有什么用,给出合理的首次动作。
筛选无结果
保留条件,允许清除筛选,不删除原始记录。
读取失败
说明未能读取,提供重试;不声称已有零条。
无权查看
说明访问限制及合法申请入口,不伪装为没有客户。

空状态不是一张装饰图

优先说明原因与可做的事。首次使用可以适当介绍功能;反复搜索无结果时应简短,避免每次都放一大段欢迎语。

下面用同一份虚构名单切换不同情况。清除筛选只改变可见范围,重试只有取得结果后才结束等待。

动手看一遍 · 本地教学演示

列表没出现,是没有询盘,还是根本没读到?

可以操作,也可以重试。数据为虚构示例,不连接真实业务系统。

正在准备当前演示,正文可以继续阅读。

继续看项目应用与交付检查
先建立专业坐标

空状态 在项目中负责什么

什么时候用
成功读取后没有记录,或当前搜索与筛选没有匹配条目时。
它解决什么
避免用户把空白理解为故障,并根据实际原因给出创建、调整条件或返回的动作。
它不负责什么
无权限不应泄露受限记录的数量;读取失败不等于零条,也不能自动塞入假客户让页面好看。
放进真实项目
还没有收藏任何术语时,显示提示并提供回到词条页的入口。
专业拆解 · 业务场景

空白不是终点,要解释原因并给用户下一步

新用户打开收藏页、销售筛选后没有线索、搜索拼错关键词,都是不同的“空”。

  1. 01

    先识别是哪一种空,而不是一张通用插画。

  2. 02

    用一句话说明当前发生什么。

  3. 03

    给一条和任务相关的下一步:去浏览、清筛选、重试或申请权限。

一句话记住

先确认读到了,再解释为什么为空。

容易混淆的地方

空状态是结果,骨架屏是等待时的占位,错误状态表示未取得可靠结果。三者不能共用“暂无数据”。

随堂一练 用一个判断把概念记住

询盘接口读取失败,列表区域没有显示记录。哪种处理不会误导销售?

你可以这样告诉 AI Agent

“

我在处理这件事:还没有收藏任何术语时,显示提示并提供回到词条页的入口。请以“空状态”为主线,先说明它在这里负责什么、不负责什么;再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答,不确定的信息标为待确认。

内容依据与延伸

本站用原创中文解释把专业概念映射到外贸独立站;定义和机制继续以官方资料为准,业务例子再回到 外贸独立站询盘优化实战 验证。

本站整理说明:原创整理:AI 产品、外贸独立站与界面拆解实践
就地查词 · 关闭后继续阅读