骨架屏
Skeleton Loading
别名:Skeleton骨架加载内容占位灰色占位加载占位图shimmer 占位
这是什么
用与真实内容结构一致的灰色占位块表示加载状态,通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位,结构长这样",而不是让用户盯着空白或转圈等待。
交互实验室
试一试,再决定怎么用正在加载实验室…
✓ 适用场景
- 内容结构相对稳定、可预知
- 预计加载时间在 1~3 秒之间
- 列表、卡片流等重复结构的内容页
✕ 不适用场景
- 加载极快(< 300ms),骨架屏会闪一下反而干扰
- 内容结构完全不可预测,占位与结果差异过大
- 后台操作但页面结构不变,用进度或按钮状态更合适
常见形式
静态占位
Static
纯灰色块,最克制
呼吸
Pulse
透明度缓慢起伏
微光扫过
Shimmer
一道高光斜向扫过,iOS 风格
实现要点
backgroundanimationbackground-clip: textlinear-gradient占位块用 border-radius 模拟头像/文字形状;shimmer 用 linear-gradient 高光叠层, 通过 background-position 动画扫过,或对伪元素做 translateX。 pulse 直接动画 opacity。占位尺寸应尽量接近真实内容,避免加载完成后布局跳动。
横向对比
查看完整对比 →相关概念
用一个持续旋转的圆环或圆点表示"正在处理"。占用空间极小、语义全球通用, 适合嵌入按钮内、跟随光标或作为局部区块的轻量加载反馈。 它只表达"忙碌",不表达进度多少,也不预告还剩多久。
动效替代方案用横条从左到右填充来表示任务完成比例的加载指示,常配百分比或步骤文字。 适用于时长可预测的确定性任务:上传、下载、安装与分步表单。
组件替代方案用户操作后立即按"预计成功"更新界面,真实请求在后台进行,成功则落定, 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感,特别适合点赞、收藏这类高频轻操作。
交互模式相似概念用"推迟加载"的方式处理暂不在视口内的资源:图片、列表分块、组件等在接近或进入可视区域时才真正请求和渲染。 首屏只承担可见部分的开销,配合占位骨架避免突然撑开布局,让长页面既快又稳。
交互模式相似概念当列表或页面没有数据时,不留一片空白,而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点:首次使用教用户开始,搜索无结果给出路。
交互模式相似概念