打开一个列表页，数据要一两秒才回来。这段时间里放什么，我见过三种做法：什么都不放，放一个转圈，或者先画出一份灰色的版式。数据到达的时间完全一样，但三种做法给人的感觉差得很远，最后一种明显显得更快。
✕ 空白
两秒钟什么都没有。页头还在，下面一片空白，人会以为页面坏了，开始刷新或者直接离开。
✕ 转圈
知道在加载，但不知道会来什么。盯住下面的“查看更多”：内容一到，它会被整块冒出来的列表一下顶到最底下。
✓ 骨架屏
先把版式画出来：头像、名字、两行正文各在什么位置，一眼就知道。内容到了原地填上，“查看更多”一动不动。
01空白最糟。没有任何反馈，人会以为页面卡住了。哪怕只放一个转圈，也比一片空白强。
02转圈只说“在等”，不说“等什么”。内容到的那一刻整块出现，下面的东西被顶走，视线要重新找位置。
03骨架屏和最终版式一一对应。等待时眼睛已经在熟悉结构，内容来了只是“填进去”，等待也显得更短。
为什么这样更好#
- 空白让人以为坏了。页头还在、下面一片空，人分不清是在加载还是出了错，很可能开始刷新或者直接离开。
- 转圈只说明“在等”。它确认了系统没死机，但不告诉你会来什么、来多少，等待的这段时间什么也做不了。
- 骨架屏提前给出结构。头像、名字、两行正文的位置先摆好，眼睛在等待中就已经熟悉了版式，内容到达时不用从头去读整页。
- 内容原地填上，不跳。骨架和最终版式尺寸一致，数据到了只是灰块变成文字；转圈那一栏的列表则是整块冒出来，把下面的按钮一下顶走。
- 等待显得更短。页面是一点点“长出来”的，而不是空了很久突然出现，同样两秒，感觉上更快。
关键是骨架必须照着真实版式画：头像多大、每条有几行字，都要对得上。随手画几条灰块，内容到达时照样会跳。
什么时候不该用#
- 加载不到 1 秒就完成，任何加载提示都不需要，骨架屏一闪而过反而成了干扰。
- 等待超过 10 秒，或者是上传、导出这类有明确进度的任务，应该用进度条告诉用户还要多久。
- 只是页面里的一个小模块（一段视频、仪表盘上的一张卡片）在加载，用一个转圈就够了。另外，只画页头页脚、中间留空的“骨架”，效果和空白差不多。
出处#
来自 Nielsen Norman Group 的 Skeleton Screens 101 ↗。文章把骨架屏定位为整页加载时的进度提示，认为它能让等待显得更短、减少认知负担；同时给出了边界：1 秒以内不需要提示，10 秒以上用进度条，单个模块用转圈，只有页头页脚的框架式骨架会让人以为页面坏了。