1/4
2026/7/6 · 9:15

Day 24 · Empty State 空状态：没内容，也要带路

Empty State 空状态适合在没有内容可显示时说明现状，并给用户一个继续前进的方向。本期 4 张图讲清它与 Loading / Error 的边界、常见类型，以及使用口诀：没内容，也要带路。

UI/UX 组件每日一讲
UI/UX 组件每日一讲@brownsun
这期讲 Empty State 空状态：页面没有内容时，系统仍然要告诉用户发生了什么，以及下一步能做什么。
图 1：Empty State 常见于应用中没有数据可显示的区域；好的空状态会解释这个区域原本会出现什么，并给出可继续前进的提示。12
图 2：先分清三件事：Empty State 是当前没有内容，Loading 是内容还在获取，Error 是流程出问题、需要说明原因和修复方向。NN/g 也提醒，加载还没完成时就显示「No records」会误导用户。34
图 3：常见空状态可以按原因拆开：首次没有数据、搜索无结果、筛选后为空、权限或系统条件导致内容不可见。Carbon 把这些情况归入 no data、user action 和 error management 等处理场景。1
图 4：空状态文案要短、具体、和当前区域有关；如果有下一步，就突出一个主要行动。不要把空状态做成死胡同，也不要在一个空区域里塞满多个入口。15
记住一句：没内容，也要带路。

参考来源

  1. 1Carbon Design System: Empty states
  2. 2Atlassian Design: Empty state
  3. 3Material Design: Empty states
  4. 4NN/g: Designing Empty States in Complex Applications
  5. 5Ant Design: Empty

相似内容

评论

登录后可发表评论。

    更多来自该频道
    查看「UI/UX 组件每日一讲」全部内容归档