E6.06.3empty-state next action设计

空状态需提供下一步动作

别名: 空态行动点 · empty CTA · 下一步

概念解释

空状态说明了「为什么是空的」之后,还要给出立刻可做的那一步。无数据对应创建或导入,无结果对应清空筛选或改词,出错对应重试或换一条通路。没有动作的空状态把用户停在诊断上:知道没有邮件,却不知道该写一封还是该检查过滤器。下一步必须是这条空之所以能结束的动作,不是随手塞一个「了解更多」去文档。

机制

空白会结束当前的扫描:没有行可以点,任务线索断了。人接着寻找「能让这里不再空」的控件。若动作在顶栏一个与空插画无关的按钮上,空状态和动作在空间上脱节,新手找不到,老手则习惯去顶栏,空区域变成死区。把动作放进空状态内部,是把断掉的线索接回对象将要出现的地方。动作还要把原因接上:无结果的下一步是改查询,不是新建;对着搜空的人给「创建项目」,会造出与搜索意图无关的对象。所以下一步不是通用的主按钮,而是这条诊断的解法。

边界

只读观察者看一个合法的空(本周无告警),硬塞创建会越权,下一步应是「调整通知规则」或「返回」,甚至可以没有创建。动作需要权限或外部条件(先接仓库、先验证邮箱)时,空状态应指向那个前置步骤,而不是一个点了就失败的主按钮。多个同样合理的下一步(从模板开始 / 导入 / 空白)可以并列,但要分主次,不能三个同权重实心按钮。出错时的下一步若只有「联系支持」而没有重试,等于把可恢复的失败当成终态。

怎么落地

  • 每一种空状态指定一个能结束该空的主动作,放在插画和说明旁边,不要只靠远处顶栏。
  • 动作文案接原因:创建第一项、清除筛选、重试加载,避免「了解更多」「返回首页」当唯一出口。
  • 主动作不可用时,改成通向前置条件的动作,并写明为什么现在不能直接创建。
  • 验证:关掉顶栏,只留空状态区域,看用户能不能完成「让这里出现内容」或「让结果回来」。不能,动作就没接上。

延伸

  • 同组E6.06.1 空状态需区分无数据、无结果与出错 · E6.06.2 空状态是引导首次使用的最佳位置
  • 相邻E1.01 按钮的层级 · E6.10 错误页与降级页 · E6.13 操作结果的内联呈现
  • 站内检索empty-state action · next step · zero-data CTA

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E6.06.3