用户体验模式6 分钟阅读·Updated 2026 年 10 月·ExodeUI 团队
骨架屏幕：何时使用它们代替旋转器
骨架屏幕是什么，它们何时击败旋转器，如何设计它们以使其与真实内容相匹配，以及如何在不损害性能或可访问性的情况下为它们设置动画。
直接总结和定义
核心要点
骨架屏幕是一个类似线框的占位符，它在加载时显示内容的布局。将其用于具有可预测形状的整页和列表；对于小区域或未知内容使用旋转器，对于长期任务使用真正的进展。使骨架与真实布局相匹配，这样当内容到达时就不会发生任何跳跃。
什么是骨架屏
Nielsen Norman Group 将骨架屏幕定义为加载页面的占位符，该页面通过类似线框的视觉效果来模仿布局。它用于整页加载并减少感知加载时间，因为人们看到的是即将到来的内容的结构而不是空白区域。
何时使用哪个
将指示器与内容相匹配并等待：
- 骨架：布局已知的页面或列表加载，例如提要、卡片和配置文件。
- 旋转器：小区域、按钮或形状无法预测的内容。
- 进度条：您可以衡量的长任务，例如上传和导出。
- 没什么：响应非常快，指示器只会闪烁。
设计一个好的骨架
使用真实的组件尺寸，以便内容到达时页面不会移动，这也可以保护您的累积布局移动分数。保持形状简单（图像块，文本条），使用低对比度灰色，并在准备好后立即用真实内容替换每个占位符，而不是等待一切。
动画骨骼
NN/g 指出，某些骨骼包含脉冲或闪烁动画，以表明系统仍在工作。保持缓慢而微妙的动画不透明度或变换而不是布局属性，并在减少运动时停止它。为加载区域提供可访问的标签，例如“加载结果”。
要记住的关键 Principle
- 骨架显示即将到来的内容的布局并减少感知等待
- 将它们用于可预测的页面和列表加载；适用于小区域或未知区域的旋转器
- 匹配实际尺寸以避免布局变化
- 保持微光微弱并停止以减少运动
- 屏幕阅读器的标签加载区域
常见问题解答
来源
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev