文章、列表、卡片等「有明确布局」的区域，用骨架给出形状预览，降低感知等待。
骨架复刻真实内容的形状
文章页加载前，用灰色占位块按真实封面、标题、正文比例预留位置；数据到达后骨架被真实内容替换。形状对齐时布局不抖动，错位时则相反。
文章详情页 · 加载实验台骨架形状：对齐
骨架按真实文章布局预留封面、标题和正文尺寸（正例）。点击「模拟加载完成」，真实内容会替换骨架；对照文章框，高度不应抖动。
知识点总结
把刚才面板里能直接看到的规律命名下来。
- 形状对齐：骨架的封面高度、标题宽度、正文行数要和真实内容一致，替换时文章框高度不变。
- shimmer 微动效：灰色块用缓慢渐变提示「还在加载」，但动效不是状态本身；减少动效时仍有占位和文字说明等待。
- 结果长在物件上：加载完成时骨架消失、真实文章出现在同一个框里，不是只换一句提示语。
- 失败要脱离骨架：请求失败时移除骨架、显示错误原因和重试，不能让灰块一直闪。
什么时候用骨架屏
从用户等的是什么、大概等多久来判断。
太短的等待显示骨架只会一闪而过；先用空白或极短 spinner，确认是慢请求再上骨架。
不适用：未知时长的短任务用 spinner；已知完成比例用 progress；数据加载完却没有结果用空状态。骨架只负责「内容即将到来」的等待。
怎么用
从开始到判断的最短路径。
- 量真实内容：先确定真实封面、标题、正文的尺寸和行数。
- 按尺寸搭骨架：用相同高度的灰块复刻布局，加缓慢 shimmer。
- 数据到达交叉替换：真实内容淡入到同一容器，验证文章框高度不变。
- 失败移除骨架：错误态显示原因和重试，不留永久灰块。
- 尊重减少动效：检测 prefers-reduced-motion，关闭 shimmer 后仍保留占位与文字状态。
正反例：同一篇文章的骨架
目标都是「等待时给形状预览」，只改一个关键选择——骨架形状是否对齐真实内容。
骨架封面与正文行数和真实文章一致。加载完成时文章框高度不变，用户视线不跳。
骨架封面过高、正文只剩一行。真实内容到达后封面塌缩、正文变多，文章框高度突变，布局抖动。
快速自测
文章页骨架的封面比真实封面高很多，加载完成后最可能出什么问题？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。