骨架屏过渡 Skeleton Fade-in Handoff
加载完成后内容以淡入上滑替换骨架占位,交接不闪跳的加载态收尾
加载中…(骨架占位)
**骨架屏过渡(Skeleton Handoff)**是加载故事的下半集:骨架屏负责“等”(占位示意结构),这个过渡负责“换”——内容到位后逐行淡入替换占位,而不是啪一下闪变。上半集大家常做,下半集被跳过的最多,结果就是占位图和真实内容之间生硬跳切。
什么时候用:所有用了骨架屏的列表、卡片、详情页——有骨架就必须有交接,否则骨架屏的体验分掉一半。纯 loading 转圈的场景用不上(没有占位结构可交接)。
对 AI 说清楚的三要素:① 替换瞬间骨架隐藏与内容入场同时发生,不留空窗;② 内容逐行错峰淡入(0.1s 步进),不要整块一起砸出来;③ 交接动画 0.3~0.5s,超过 0.5s 用户以为又卡了。
复制即用的提示词片段
加载收尾用骨架屏过渡(Skeleton Handoff):数据到达后骨架立即 隐藏,真实内容逐行淡入 + 上滑 10px,行间 0.1s 错峰,单行动画 0.4s;首行可先到先显(流式渲染),别等全部数据到齐才切换。