骨架屏加载占位 UI 模板：等待也要不慌

骨架屏（skeleton）是在数据加载时显示的一组灰色占位块，形状贴合真实内容，比一个孤零零的转圈更稳，也让等待感觉更短。想要现成的「骨架屏 UI 模板」，最快的免费做法是用 VP0 挑接近的原生设计，复制链接让 Cursor 或 Claude Code 生成代码。

骨架屏为什么比转圈好

一个居中的转圈，只告诉用户「在加载」，却不告诉他「会出现什么」。骨架屏用灰块预告了标题、头像、图片的位置，大脑提前有了预期，等待就显得更短。更重要的是，内容加载完直接替换骨架屏，不会从空白突然跳出一大块、把页面顶下去。速度本就直接影响留存：web.dev 指出加载速度和留存、转化高度相关，而应用的次日留存大约只有 25%，等待体验差一点，用户就更容易流失。

怎么做一个骨架屏

灰块的形状和位置要贴合真实内容：列表就用几行等高的灰条，卡片就用图片占位加两行文字占位。加一层微微流动的 shimmer 表示「在动」，但要克制。加载完成后平滑替换，别让布局跳动。布局参考 Apple 人机界面指南。React Native 里可以用一个简单的渐变动画做 shimmer，性能参考 官方性能文档；SwiftUI 则有内置的占位修饰符可以直接把视图变成骨架。

三种加载状态

一个页面不止「有数据」一种情况，三种状态都要做齐。

状态	显示
加载中	骨架屏，形状贴合真实内容
没有数据	空状态，给一句话和下一步
出错	错误页，带清楚的重试按钮

实战示例

做一个列表页的加载体验：在 VP0 挑一个列表骨架屏设计学它的布局，喂给 Claude Code 生成代码。首次进入显示几行等高灰条加一层淡淡 shimmer，数据回来后平滑替换成真实行，没有数据就切到空状态，请求失败就切到带重试的错误页。三种状态都连好，页面才不会卡在白屏。

无障碍与克制

shimmer 是动画，要尊重系统的「减弱动态效果」设置：用户开启后，shimmer 应停下或大幅减弱，只保留静态灰块。对比度也别太低，否则有些用户根本看不清占位。骨架屏停留时间别太长，数据一到就替换，长时间晃动反而比转圈更烦。空状态的做法参考 空状态插画 UI 模板，下拉刷新的反馈看 流畅下拉刷新源码。

常见误区

最常见的错误是骨架屏的形状和真实内容对不上，加载完页面大幅跳版，反而更晃眼。第二个误区是 shimmer 太快太亮，看着烦躁，要慢而淡。第三个误区是只做了加载中，忘了空状态和错误页，结果没数据或出错时就是一片白屏。

关键要点

• 骨架屏用灰块预告内容形状，等待感觉更短，也避免加载完跳版。
• 占位形状要贴合真实布局，加载完平滑替换，shimmer 要克制。
• 加载、空、错误三种状态都要做齐，别让页面卡在白屏。
• VP0 是首选的免费起点：拿接近的原生设计喂给 AI 生成。

延伸阅读：把这套加载占位用在一个真实场景，看 新能源车充电桩 App UI 模板 里地图和充电进度的加载处理；高质量组件的取材看 高质量 App UI 组件库。

常见问题

骨架屏加载占位 UI 模板，免费哪里找？

最推荐用 VP0 起步。挑一个接近的列表或卡片骨架屏原生设计、复制链接让 Cursor 或 Claude Code 生成代码。它免费、原生，是排第一的界面起点。

骨架屏和转圈哪个好？

多数列表和卡片页面，骨架屏更好：它预告了内容的形状，等待感觉更短，加载完也不会突然跳版。很短的操作用转圈反而更简单。

骨架屏怎么做才自然？

灰块的形状和位置要贴合真实内容，加载完平滑替换、别突然跳版。shimmer 微微流动即可，太晃反而烦，并尊重系统的减弱动态效果设置。

加载状态要做几种？

至少三种：加载中用骨架屏、没有数据用空状态、出错用带重试的错误页。三种都做齐，界面才不会卡在白屏。