骨架屏Skeleton
你可能会说
加载时先显示灰色的框框占位，别一直转圈。
页面加载时先出现的灰色轮廓，用来占住稍后内容的位置例如打开商品列表时，可先看到图片框和两行文字的轮廓，真实内容到达后再替换。它只表示正在加载；等待过久或加载失败时，必须改成明确的提示和重试入口。
什么时候用
- 首屏加载：先给轮廓，内容陆续到位
- 列表 / 信息流：画几条假条目占位
- 卡片 / 图片位：大图未出先占好位置
- 长文详情页：段落形状防止布局跳动
什么时候不用
- 只有几百毫秒的短加载：骨架可能闪现并干扰浏览加载中，请稍候…
- 有明确进度：使用 进度条 Progress 显示完成程度📎 设计稿.sketch66%
- 骨架与真实结构差异过大：内容出现时会引发明显跳动真实内容是个表单，骨架和布局对不上
- 加载失败后仍持续显示骨架：使用 结果页 Result 说明结果和后续操作请求已失败，骨架屏却没有切换为错误状态
组成结构 · Anatomy
一组占位色块，形状对齐真实布局
圆形或方块，对应媒体位
短而粗的一行
长短错落的灰条，模仿段落
常见变体 · Variants
列表项List Item
信息流、消息列表加载时占位
文章段落Paragraph
长文详情页加载，先摆出段落形状
卡片Card
图片、封面类卡片加载前占位
典型使用场景
首页首屏加载
列表加载占位
图片卡片占位
文章详情加载