骨架屏是一种以用户为中心的、提升用户感知性能的前端优化技术。

它通过提前展示页面结构和布局，将原本“令人焦虑的等待”转变为“充满期待的加载”，极大地提升了产品的用户体验和精致感。

如今，它已经成为现代 Web 和移动应用设计中超级流行和重大的一个实践。

一、是什么？

骨架屏是一种在页面数据加载完成前，屏幕先展示一个页面大致框架轮廓的图像或者动画。

它不是具体的真实的数据内容，而是用灰色块、线条等元素勾勒出页面未来会显示内容的布局和结构，就像大纲视图的“骨架”一样。

你可以把它想象成：在观看一个视频时，当视频还没加载出来，但你看到了视频的播放条、标题栏和按钮的轮廓，这就是骨架屏。

二、有何用？

骨架屏的核心目的是为了提高用户体验，具体体目前以下几个方面：

1.减少用户感知上的加载时间，提升流畅感

传统的加载提示方式：用户只看到一个旋转的加载图标（Loading Spinner）或空白屏幕，然后内容“嗖”地一下突然出现。这种从“无”到“有”的感觉是断裂的，用户会觉得等待的时间很长，页面不稳定。

骨架屏的加载提示方式：用户在请求发出后立刻就能看到页面的基大致框架轮廓。这给了用户一个“页面正在快速渲染”的积极心理暗示。当真实内容逐渐填充到这个框架中时，过渡超级平滑自然，整体加载动作快速连贯。虽然实际加载时间可能一样，但用户感觉上更快、更流畅。

2.降低用户等待过程中的焦虑感

一个简单的加载图标无法告知用户接下来会看到什么。而骨架屏则提前展示了页面的结构（列如这里有一张图，那里是一段文字，旁边是按钮列表）。这让用户对即将呈现的内容有了预期，感觉一切尽在掌握，从而降低了因等待而产生的焦虑感。

3.保持用户视觉体验的连续性

从骨架屏到真实内容的过渡是渐进式的，避免了内容突然“跳动”或布局突然“重排”带来的不良视觉体验。这使得整个加载过程看起来是一个连贯的动画，而不是生硬的切换。

三、举例和比较传统的加载提示VS骨架屏的加载提示

1.举例

假设你要加载一个用户信息卡片：

很明显，第二种方式给人的感觉更加连贯，更“快”一些。

2.比较