空状态

本词条尚无可操作示例；插画为编辑示意，对照三种成因的不同说法，不代表已验证的实现。应用到产品前仍须确认失败不会被写成"暂无数据"，并检查每种空状态都有可达的下一步。

{
  "states": [
    "first-run",
    "no-results",
    "cleared",
    "error"
  ],
  "a11y": [
    "空状态的说明是真实文本，可被读屏朗读，不只是一张插图",
    "从筛选变为无结果时，通过状态消息播报结果数量的变化"
  ],
  "motion": "无动效；插图为静态"
}

{
  "id": "empty-state",
  "type": "micro",
  "name": {
    "zh": "空状态",
    "en": "Empty State"
  },
  "aliases": [
    "Blank Slate",
    "Zero State",
    "空白状态",
    "空页面"
  ],
  "granularity": "state",
  "intents": [
    "inform",
    "reduce-complexity"
  ],
  "tags": [
    "空",
    "首次使用",
    "引导",
    "无结果",
    "占位"
  ],
  "definition": "容器里没有内容时呈现的那一屏：它说明为什么这里是空的、这里本该出现什么，并给出一个把它填满的具体下一步，而不是留下一片空白。",
  "boundary": "\"空\"至少有三种成因，它们需要不同的说法：还没开始（首次使用）、找完了没有（筛选或搜索无结果）、以及原本有但被清空或出错（删除、权限不足、加载失败）。把三者用同一句话打发，会让用户在\"我该做什么\"上得不到答案——尤其是出错被说成\"暂无数据\"时，用户会以为是自己的问题。空状态也不是加载状态：加载表示内容正在来的路上，空状态表示它不会来了。它同样不是推销位：把首次使用的空屏变成套餐推广，会让用户在最需要指引的时刻得不到指引。",
  "signature": [
    "说明为什么是空的，而不是只显示\"暂无数据\"",
    "说明这里本该出现什么内容",
    "给出一个具体的下一步，并且这一步就在手边"
  ],
  "when": [
    "用户第一次进入，容器里本来就还没有内容",
    "筛选或搜索没有结果，需要说明如何放宽条件",
    "内容因权限、删除或失败而不可见，需要说明原因"
  ],
  "when_not": [
    "把加载中当作空状态，用户以为没有内容其实是还没到",
    "把失败说成\"暂无数据\"，用户无从知道是系统出了问题",
    "把空屏变成推广位，真正的下一步反而不见了"
  ],
  "tradeoff": "在最空的时刻给出解释与入口，能把一次挫败转成一次开始；代价是这一屏要为三种不同的\"空\"各写一套说法并各自维护，而它们又恰恰是最容易在改版中被遗忘的界面。",
  "comparison": {
    "focus": "在没有内容时说明原因并给出下一步",
    "mechanism": "按\"还没开始／没找到／没有了\"分别给出说法与入口",
    "cost": "三种成因各需一套文案，且容易在改版中被遗忘"
  },
  "sources": [
    {
      "id": "emptystate-carbon",
      "title": "Carbon Design System · Empty states",
      "url": "https://carbondesignsystem.com/patterns/empty-states-pattern/",
      "claim": "该模式把空状态定义为应用中没有数据可展示给用户的时刻，说明它最常出现在用户首次接触某个产品或页面时，但也可能出现在数据被删除或不可用时；文中还指出空状态可以在告知用户的同时提供关于下一步的建设性指引，说明若有数据用户会看到什么。本词条的定义与三种成因据此转述。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://carbondesignsystem.com/patterns/empty-states-pattern/",
        "status": "pending",
        "checkedAt": "2026-09-16T17:37:14.637Z",
        "error": "status-request-failed",
        "jobId": "spn2-61a17eaa49727d3d997e1441af9b8a6d417084e0"
      }
    },
    {
      "id": "emptystate-ui-patterns",
      "title": "UI Patterns · Blank Slate design pattern",
      "url": "https://ui-patterns.com/patterns/BlankSlate",
      "claim": "该模式把问题表述为：用户想开始使用应用，但需要以示例的形式了解应用在填满数据、完整运转时会是什么样子；并建议在应用尚未录入数据、显得空洞无生气时使用，用以激励用户开始使用并帮助他们上手。本词条\"说明这里本该出现什么\"的要求据此转述。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://ui-patterns.com/patterns/BlankSlate",
        "status": "pending",
        "checkedAt": "2026-09-16T17:37:17.345Z",
        "error": "status-request-failed",
        "jobId": "spn2-49b3430aa5f022adb7178137533397e09382a47a"
      }
    }
  ],
  "relations": [
    {
      "target": "skeleton",
      "kind": "alternative",
      "condition": "容器当前没有内容可显示",
      "reason": "骨架屏表示内容正在来的路上，空状态表示它不会来了；把两者用错会让用户在该行动时继续等待。",
      "basis": "editorial"
    },
    {
      "target": "status-message",
      "kind": "composes_with",
      "condition": "空是由失败或权限不足造成的",
      "reason": "这种情况下用户需要的是原因与重试入口，而不是一句\"暂无数据\"。",
      "basis": "editorial"
    },
    {
      "target": "search-and-filter",
      "kind": "composes_with",
      "condition": "空是筛选条件过窄造成的",
      "reason": "此时最有用的下一步是放宽或清除条件，空状态应当把这个动作直接放在手边。",
      "basis": "editorial"
    },
    {
      "target": "disguised-ads",
      "kind": "conflicts_when",
      "condition": "首次使用的空屏被用来推销套餐或附加服务",
      "reason": "用户在这一刻寻找的是\"怎么开始\"，把推广放在这个位置等于替换掉了他们要的答案。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "容器为空",
      "instruction": "区分\"还没开始\"\"没找到\"\"没有了或不允许\"三种成因，各写各的说法；失败时说明是系统的问题并提供重试。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "空状态提供一个下一步动作",
      "instruction": "让这个动作就在当前屏可以完成，而不是把用户送去别处再找回来。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "first-run",
      "no-results",
      "cleared",
      "error"
    ],
    "a11y": [
      "空状态的说明是真实文本，可被读屏朗读，不只是一张插图",
      "从筛选变为无结果时，通过状态消息播报结果数量的变化"
    ],
    "motion": "无动效；插图为静态"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，对照三种成因的不同说法，不代表已验证的实现。应用到产品前仍须确认失败不会被写成\"暂无数据\"，并检查每种空状态都有可达的下一步。",
  "image": {
    "src": "/images/empty-state.webp",
    "alt": "一张三联示意图：三个并排的虚构面板都没有内容，但各自配一张不同的简笔插图、一段灰色占位说明条与一个按钮——分别代表\"还没开始\"\"筛选后没找到\"与\"加载失败\"三种空的成因。"
  },
  "searchTerms": [
    "empty",
    "first run",
    "guidance",
    "no results",
    "placeholder"
  ]
}