骨架屏 · Skeleton
英文:skeleton/ˈskelɪtn/(重音在前)
界面与交互难度:进阶 ★★
🗣️一句话大白话
数据没加载完时先显示灰色「占位轮廓」(形状和真实布局一样):用户知道「在加载、大概长这样」,而不是盯着白屏怀疑死机。
🎬真实场景
列表页打开要 2 秒。白屏 2 秒=用户走了;骨架屏 2 秒=用户等着。同样的等待时间,感受天差地别——这就是骨架屏的全部价值。
📮你可以这样说
「「列表和详情页加骨架屏:加载中显示与最终布局一致的灰色占位(头像圆形、文字条状),数据到达后替换。别用转圈 spinner 盖全屏。」」
⚠️边界与常见误解
- ▸骨架形状要和真实内容一致:形状对不上反而更乱
- ▸加载很快(<300ms)别闪骨架屏:闪一下更难看
- ▸它管「加载中」不管「失败」:失败要有重试入口