✅ 正确的骨架屏长什么样:
① 布局和真实内容一致 骨架屏的灰色块形状要和实际内容的位置、大小匹配。头像是圆形、标题是长条、描述是短条
② 有 shimmer 闪光效果 静态的灰色块看起来像加载失败。加一个从左到右的闪光扫过效果,暗示"正在加载"
③ 颜色要足够浅 灰色块用 E0E0E0 到 F0F0F0 之间。太深会抢视觉焦点,太浅看不出来
④ 不要加文字 骨架屏里不应该有任何真实文字。看到文字用户会以为已经加载完了
❌ 常见错误:
错误一:骨架屏布局和实际内容差很多 用户看到骨架屏的布局形成预期,内容加载出来后布局突变,会有"晃动"的不适感
错误二:骨架屏显示太久 如果数据 200ms 就加载完了,骨架屏闪一下反而不如直接显示内容。建议设一个 200ms 的延迟,超过 200ms 才显示骨架屏
错误三:整个页面只有一个大灰色块 骨架屏的意义是预告内容结构,一个大色块等于没说
错误四:加载完成后没有过渡 骨架屏直接"砰"变成内容 → 用淡入效果平滑过渡更好
做对了,用户感觉页面"秒开"。做错了,用户感觉"卡了"⚡






