开学特惠 会员低至4.4折 限时加赠 10000 AI积分 立即前往 arrow

空状态设计怎么做?首次使用、无数据与失败恢复

文章目录
免费使用墨刀
更新时间: 2026年10月12日

空状态设计不是把内容区留白,而是让用户知道当前为什么没有内容,以及怎样继续。首次使用需要引导创建第一条记录;主动筛选无结果要能清除条件;请求失败则要保留上下文并提供重试。把这三种情况拆开,页面才不会用一句“暂无数据”覆盖不同任务。

可以先在墨刀设计中搭建空状态界面,用同一个“项目任务列表”案例分别走完首次进入、筛选无结果和加载失败,再让产品、设计和研发按状态逐项对照。

任务列表首次使用、无数据和加载失败三种空状态界面
空状态要解释原因,并给出与当前任务相匹配的出口。

先判断用户为什么看到空白

首次使用时,用户还没有创建数据;“还没有任务,创建第一条任务”比“暂无数据”更能推动任务。筛选无结果时,数据可能存在,只是条件过窄;提示应复述条件,并允许一键清除。加载失败则是系统没有拿到结果,不能暗示数据不存在。

状态必须说明主要动作次要出口
首次使用还没有创建记录创建任务查看模板
筛选无结果当前条件没有匹配清除筛选修改关键词
加载失败结果暂时无法取得重试产品支持时查看离线草稿

判定顺序比插画风格更重要

同一个任务列表里,“没有任务”“没有权限”和“还没加载出来”看起来都可能是一片空白,但不能共用一个业务状态。先判断是否有访问权限,再判断请求是否完成、是否成功;只有成功拿到结果后,才能判断列表是否为空。请求尚未结束时应显示加载反馈,不要先闪出“暂无任务”,随后再出现数据。

还要区分整个空间为空和当前视图为空。比如团队已有任务,但“分配给我”里没有记录,标题应写“还没有分配给你的任务”,出口可以是“查看全部任务”,而不是诱导用户重复新建。没有创建权限的成员,则应看到管理员联系方式或申请入口,不能得到一个点了也无效的“新建任务”按钮。

局部失败也不必清空整页。如果只有统计卡片加载失败,保留正常的列表,在卡片范围内提示重试;用户已有可读的旧数据时,可以保留内容并注明更新失败。空状态的占位范围,应和实际无法完成的任务范围一致。

文案、插图和按钮要共同解释任务

标题先说事实,补充句说明影响,按钮使用动作动词。插图可以帮助识别场景,但不能把唯一操作写在图片里。首次使用可展示一条已完成的示例任务;筛选无结果不宜使用庆祝插画,以免和成功状态混淆。失败状态保留查询词、筛选和已输入内容,避免用户重来。

三组可以直接改用的空状态文案

下面以“项目任务”为同一个对象,分别说明标题、解释和按钮之间的关系。文案中的名称、权限和恢复能力应随实际业务替换,按钮不要承诺尚未设计的功能。

出现条件标题与解释按钮及点击结果
新项目没有任何任务还没有任务
创建第一条任务,分配负责人并约定完成日期。
创建任务 → 打开创建表单;提交成功后回到列表并显示新记录
筛选负责人“小林”和标签“本周”后无结果没有找到符合条件的任务
当前筛选:负责人小林、标签本周。可以调整条件后再试。
清除筛选 → 去掉筛选条件,保留当前项目位置
任务列表请求失败任务暂时无法加载
你的筛选条件已保留,请重新加载列表。
重新加载 → 使用同一条件再次请求,成功后展示结果
项目任务列表首次使用、筛选无结果与加载失败的提示文案和恢复动作对照
相同的任务列表,不同的空白原因,需要不同的下一步动作。

“清除筛选”也要约定到底清除什么。若搜索词与筛选面板相互独立,可以保留搜索词,同时在按钮旁提供“重置全部条件”。不要把用户看到的“清除筛选”实现成跳回首页,更不要顺便切换空间或清空未提交表单。

常见反例是给失败状态写“这里空空如也,快去添加吧”。用户可能因此重复创建数据。另一种反例是三个状态都放“立即体验”,它既没有说明将去哪里,也没有修复当前问题。把按钮改为“创建任务”“清除筛选”“重新加载”后,读者不必先理解产品术语就能继续。

空状态应该占多大空间

整页首次使用可以保留一幅适度的插图,旁边或下方放一组文案与一个主动作;表格内无结果应保持表头、筛选栏和所在项目可见。不要为了放大插画把操作推到首屏之外。移动端优先保住标题、说明和按钮,插图可以缩小,不能让用户滑过半屏装饰才找到恢复入口。

如果只是一个下拉选项没有结果,就在下拉面板内解释;如果用户刚完成全部待办,“今天的任务已完成”属于任务完成反馈,可以提供查看历史记录的次要入口。它和首次使用虽然都没有列表项,语气与下一步却完全不同。

把边界状态放进可点击原型

为案例准备三份页面:任务列表、筛选面板、创建任务页。默认进入首次使用,点击新建后回到有数据列表;输入“负责人=小林”再选择没有同时匹配结果的标签,进入筛选无结果;模拟接口失败后,点击重试仍保留筛选。验收时记录每次操作后文案、按钮和返回位置是否一致。

重试以后,必须回到正确的地方

  1. 创建第一条任务后,检查列表是否更新,而不是仍停在首次使用画面;返回操作不应再次打开创建表单。
  2. 在筛选无结果页修改一个条件,检查其余条件是否按约定保留;结果仍为空时,不出现重复堆叠的提示。
  3. 在失败页连续触发重试,检查加载反馈是否明确,并防止同时出现多个相同请求结果。
  4. 恢复网络后重新加载,检查负责人、标签、滚动位置是否符合保留规则;若仍失败,继续保留可恢复的输入。
  5. 用没有新建权限的账号走同样路径,确认按钮和说明没有泄露无权查看的项目名称或数据数量。

可以把一条验收要求写成:“当小林筛选本周任务且返回零条时,显示筛选无结果;点击清除筛选后仍留在当前项目,列表按默认条件刷新。”这比“空状态正常显示”更容易让开发与测试达成一致。

交付物至少包括状态清单、触发条件、展示文案、主次动作和恢复结果。若接口错误码、权限或缓存会改变状态,需在说明中标出负责人和待确认项。完成状态映射后,进入工作区制作并评审空状态原型。

免费在线原型设计工具

内容丰富组件拖拽即用

多人在线编辑实时协作

海量模板素材快速复用

一键分享交付在线评论互动