Skeleton
骨架屏
WebMobile上手难度: 中等
数据没到之前，先用灰色块把未来的布局摆出来。
Live Demo
真的可以点你刚才看到的这个：打开小红书还没加载完时，那些灰色的头像方块、标题横条、图片占位块——就是骨架屏。
它到底是什么
Skeleton 的价值是消除「页面在组装」的过程感。用户先看到内容形状，再看到内容本身，感知等待时间会明显缩短。它比 Spinner 更高级的地方在于——它同时也在传递「这个页面会长什么样」。
骨架屏skeleton骨架占位skeleton screen灰屏占位
Anatomy · 它由什么组成
Block占位块
圆角与真实元素一致
Shimmer微光扫过
可选的循环高光动画
Layout Mirror布局镜像
形状对应真实内容
Fade Out淡出
数据到达后骨架消失
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 首次加载一个有固定结构的页面 | 用 |
| 等待超过 1 秒 | 用 |
| 需要让用户提前理解页面结构 | 用 |
| 分页加载更多（追加到列表底部） | 用 |
| 结构不固定（无限滚动未知内容） | 不用 |
如果数据 200ms 就回来了，Skeleton 的闪现本身就是干扰——加一个最短显示时长（如 300ms）。
骨架的形状要真的和最终内容一致，否则用户会看到「形状变了」的抖动。
Similar Patterns
别搞混一句话区分：数据没到之前，先用灰色块把未来的布局摆出来。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
列表加载时用 Skeleton：显示 6 个和真实卡片等高的灰色占位块，带微光扫过动画，数据到达后淡出替换为真实内容。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加载的时候显示灰块占位。
改成这样说
列表加载用 Skeleton：占位块尺寸与真实卡片完全一致（文字行模拟 60%/40% 宽度），浅灰底 + 1.5s 微光扫过，数据到达后淡出；加载很快时加「最短显示 300ms」避免闪烁，reduced-motion 下关闭微光。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。