动效与动画

骨架屏 Skeleton Screen

内容加载前显示灰色占位块,扫光动画暗示"马上就来"

**骨架屏(Skeleton Screen)**是在数据到达之前,先用灰色占位块把页面布局“描”出来:头像是圆形、标题是长条、正文是几行短条,再叠一道缓慢扫过的高光(shimmer),暗示“内容正在路上”。

什么时候用:所有需要等待的页面加载。相比转圈 spinner,骨架屏提前锁定了布局——内容到达时页面不跳版,用户感知的等待时间明显更短。

对 AI 说清楚的三要素:① 占位块与真实内容同构(比例对得上,不要加载完跳版);② shimmer 扫光的方向与周期(左→右、1.2~1.6s);③ 真实内容到达后用 200ms 淡入替换,不要瞬间闪切。

复制即用的提示词片段

列表加载时显示骨架屏(Skeleton Screen):占位块与真实内容布局同构
(头像圆形 + 文本横条),灰底 #2a303c 上叠加 1.4s 循环的 shimmer 扫光
(linear-gradient 从左到右),数据到达后 200ms 淡入替换。