界面图鉴
骨架屏Skeleton
你可能会问
骨架屏到底是什么？为什么加载的时候会先看到一堆灰条？
简单来说
加载时按真实内容的形状先画一版灰色占位，让等待显得更短。
01 · 拆开看看
这一块由什么组成
它不是装饰，是承诺：告诉用户「内容马上来，长这个形状」。你在本站到处看到的灰条小模型，画的就是它。组成：
占位块Placeholder
按真实内容的形状摆放的灰块。
微光Shimmer
扫过的高光动画，暗示「还活着，在加载」。
一致布局Layout
和加载完成后的布局一致，内容到位不跳动。
02 · 常见变体
同一个零件，几种摆法
封面加两行字的形状，列表页标配。
一行行灰条，等文字列表。
圆形加短条，等用户信息。
03 · 火眼金睛
这个页面里，哪一块是骨架屏？
四个都和「状态」有关：加载中、加载完但没东西、有新东西。
点一块试试，看看它叫什么
骨架屏Skeleton
就是它！灰块按真实内容的形状排布——内容来了正好补进去。
加载指示器Spinner
不是它。转圈只说「在加载」，不说内容长什么样——骨架屏是它的升级版。
空状态Empty State
不是它。这是加载完了、但确实什么都没有时的引导。
徽标Badge
不是它。图标角上的红点是徽标，宣告「有新东西」。
04 · 用与不用
什么时候该上它
适合
- 首屏内容的加载等待
- 结构稳定的列表和卡片流
- 一到三秒量级的等待
先别用
- 超过几秒的等待——给进度和原因
- 结构不确定的内容——骨架会和结果对不上
- 瞬间完成的操作——闪一下更难受
05 · 想一想
一道题，检查眼力
列表要加载两秒左右。用骨架屏还是转圈圈？
对。用户提前知道会来什么，感知上更快，内容到位也不跳动。
能用，但转圈是「无信息等待」——不知道来什么、还要等多久。
两秒的空白会让用户怀疑页面挂了，然后开始狂点。
06 · 说给 AI 听
让 AI 改它时，这样说
强调骨架要「按真实内容的形状」画——不然 AI 会随手放几根条应付。
文章列表加载时显示三条卡片骨架
骨架屏加从左到右的微光动画
骨架的形状和真实卡片保持一致
加载超过五秒就把骨架换成重试提示
最容易踩的坑
骨架屏是止痛药不是解药：它改善等待的感受，不缩短等待本身。慢的根源还得去查请求。