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 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。

骨架屏