VOCABULARY / 词条

骨架屏

Skeleton Screen

加入比较＋

微交互与反馈粒度：状态／细节skeleton · v0.1.0

内容加载完成前，用与预期内容结构相近的占位形状表示正在加载。

可操作示例 · 虚构产品 FIELDNOTES

载入手记

准备载入内容。

先开始加载，再选择模拟完成或失败。等待由你控制。

识别特征

接近最终内容结构
占位而非假数据
加载完成后替换

概念边界

占位形状不提供完成百分比，也不能把未获取的数据伪装成真实内容。

什么时候考虑它

内容结构已知，但完成比例不可用
需要为即将出现的内容保留空间

什么时候慎用

最终内容结构完全不确定
已经失败却继续无限展示加载占位

取舍

可以预示结构，但需要超时、错误和重试出口。

条件规则 · 编辑建议

当启用减少动态效果必须使用静态占位，继续提供文字加载状态。

当加载失败必须停止加载状态，提供原因和重试。

查询前提：known_structure = true
需要知道即将加载的内容结构，才能有意义地占位。

来源与支持范围

Carbon · Loading patterns ↗

骨架是初始加载时尚未完成内容的简化组件形状。

检索日期：2026-09-15

定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。

类型扩展与实现说明

能力标签只描述本演示；应用到产品时仍须重新验证。

{
  "states": [
    "idle",
    "loading",
    "success",
    "error"
  ],
  "a11y": [
    "占位装饰对读屏隐藏",
    "容器提供 busy 状态和文字消息"
  ],
  "motion": "默认静态占位"
}

完整 Agent 条目 JSON

{
  "id": "skeleton",
  "type": "micro",
  "name": {
    "zh": "骨架屏",
    "en": "Skeleton Screen"
  },
  "aliases": [
    "Skeleton Loading",
    "加载占位",
    "骨架加载"
  ],
  "granularity": "state",
  "intents": [
    "wait-for-content"
  ],
  "tags": [
    "加载",
    "未知进度",
    "占位",
    "异步",
    "loading"
  ],
  "definition": "内容加载完成前，用与预期内容结构相近的占位形状表示正在加载。",
  "boundary": "占位形状不提供完成百分比，也不能把未获取的数据伪装成真实内容。",
  "signature": [
    "接近最终内容结构",
    "占位而非假数据",
    "加载完成后替换"
  ],
  "when": [
    "内容结构已知，但完成比例不可用",
    "需要为即将出现的内容保留空间"
  ],
  "when_not": [
    "最终内容结构完全不确定",
    "已经失败却继续无限展示加载占位"
  ],
  "tradeoff": "可以预示结构，但需要超时、错误和重试出口。",
  "comparison": {
    "focus": "告诉用户内容正在到来",
    "mechanism": "结构占位",
    "cost": "不表达完成比例"
  },
  "sources": [
    {
      "id": "carbon-loading",
      "title": "Carbon · Loading patterns",
      "url": "https://carbondesignsystem.com/patterns/loading-pattern/",
      "claim": "骨架是初始加载时尚未完成内容的简化组件形状。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://carbondesignsystem.com/patterns/loading-pattern/",
        "status": "available",
        "checkedAt": "2026-09-15T16:50:44.269Z",
        "jobId": "spn2-3b0dc711f48ca28755724206ac848b795d3b387d",
        "url": "https://web.archive.org/web/20260915165155/https://carbondesignsystem.com/patterns/loading-pattern/",
        "timestamp": "20260915165155"
      }
    }
  ],
  "relations": [
    {
      "target": "determinate-progress",
      "kind": "alternative",
      "condition": "选择等待反馈方式",
      "reason": "以是否有真实完成量与内容结构判断。",
      "basis": "editorial"
    },
    {
      "target": "calm-technology",
      "kind": "composes_with",
      "condition": "采用静态占位",
      "reason": "状态可见而不持续争夺注意力。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "启用减少动态效果",
      "instruction": "使用静态占位，继续提供文字加载状态。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "加载失败",
      "instruction": "停止加载状态，提供原因和重试。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "requirements": [
    {
      "fact": "known_structure",
      "value": true,
      "reason": "需要知道即将加载的内容结构，才能有意义地占位。"
    }
  ],
  "behavior": {
    "states": [
      "idle",
      "loading",
      "success",
      "error"
    ],
    "a11y": [
      "占位装饰对读屏隐藏",
      "容器提供 busy 状态和文字消息"
    ],
    "motion": "默认静态占位"
  },
  "demo": "skeleton",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "能力标签只描述本演示；应用到产品时仍须重新验证。",
  "searchTerms": [
    "loading",
    "unknown progress",
    "placeholder",
    "asynchronous",
    "loading"
  ]
}

骨架屏