骨架屏Skeleton
提示与状态反馈内容加载前先保留大致位置
骨架屏用简化色块预留标题、图片和列表的位置，减少真实内容出现时的页面跳动。它适合结构可预测的加载过程；失败或等待过久时，要切换成明确提示。
什么时候用
- 首屏加载：先给轮廓，内容陆续到位
- 列表 / 信息流：画几条假条目占位
- 卡片 / 图片位：大图未出先占好位置
- 长文详情页：段落形状防止布局跳动
什么时候不用
- 几百毫秒的小加载 → 一闪而过更晃眼加载中，请稍候…
- 有明确进度 → 用 进度条 Progress 说到哪了📎 设计稿.sketch66%
- 骨架和真实结构差太远 → 内容一出全页乱跳真实内容是个表单，骨架和布局对不上
- 加载失败也一直摆骨架 → 配 结果页 Result 给个交代请求失败了，骨架还在装样子
组成结构 · Anatomy
1骨架组Skeleton一组占位色块，形状对齐真实布局
2头像 / 图占位Avatar圆形或方块，对应媒体位
3标题占位Title短而粗的一行
4正文行占位Line长短错落的灰条，模仿段落
常见变体 · Variants
列表项List Item
信息流、消息列表加载时占位
文章段落Paragraph
长文详情页加载，先摆出段落形状
卡片Card
图片、封面类卡片加载前占位
典型使用场景
首页首屏加载
列表加载占位
图片卡片占位
文章详情加载