UI · №27 · SPECIMEN

骨架屏Skeleton

加载的时候一闪一闪的灰条内容还没出来时的灰色占位块微信文章没加载完那种灰框

LIVE SPECIMEN真的能玩，点点看

词

骨架屏加载完成

内容淡入，布局没有跳动

先看结论

内容加载完成前，用灰色占位块模拟最终布局的加载状态，比转圈等待感更短。

适合: 列表、卡片流、文章页这类布局可预测的内容加载时。
不适合: 布局不可预测、或加载时长完全未知时——那用 Spinner 更诚实。

直接发给 agent

Show skeleton placeholders while the list is loading: gray blocks matching the final card layout (avatar circle + two text lines), with a subtle shimmer animation, then fade in the real content.

已于 2026-07-17 实测通过

技术标注2 项

web: CSS animation（shimmer 效果）+ aria-busy="true"
react: <Skeleton>（shadcn/MUI 等均有现成组件）

详细说明

骨架屏是「感知性能」的经典手段——它并不让加载变快，但让等待变短。关键在于占位块要贴合最终布局，否则内容出现时的「跳动」反而比转圈更糟。