跳到主要内容
界面图谱Interface Atlas
☰
EN
交互模式Feedback / Loading

骨架屏

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。占位尺寸应尽量接近真实内容,避免加载完成后布局跳动。

骨架屏Skeleton Loading进度条Progress Bar加载指示器Loading Spinner
打断程度低,页面结构不变低,嵌入版面不遮挡低,占位极小
信息量低,只表达结构中,传达比例与剩余量低,只表达忙碌
适用时长1~3 秒3 秒以上的确定性任务1~5 秒
与结果一致性高高,需绑定真实进度低,不预示结果形态

相关概念

加载指示器Loading Spinner

用一个持续旋转的圆环或圆点表示"正在处理"。占用空间极小、语义全球通用, 适合嵌入按钮内、跟随光标或作为局部区块的轻量加载反馈。 它只表达"忙碌",不表达进度多少,也不预告还剩多久。

动效替代方案
进度条Progress Bar

用横条从左到右填充来表示任务完成比例的加载指示,常配百分比或步骤文字。 适用于时长可预测的确定性任务:上传、下载、安装与分步表单。

组件替代方案
乐观界面Optimistic UI

用户操作后立即按"预计成功"更新界面,真实请求在后台进行,成功则落定, 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感,特别适合点赞、收藏这类高频轻操作。

交互模式相似概念
懒加载Lazy Loading

用"推迟加载"的方式处理暂不在视口内的资源:图片、列表分块、组件等在接近或进入可视区域时才真正请求和渲染。 首屏只承担可见部分的开销,配合占位骨架避免突然撑开布局,让长页面既快又稳。

交互模式相似概念
空状态Empty State

当列表或页面没有数据时,不留一片空白,而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点:首次使用教用户开始,搜索无结果给出路。

交互模式相似概念

可搭配的风格

参考来源

Markdown 版(给 Agent) · JSON