I2.01.7unified skeleton cadence设计

骨架屏的动画节奏需要统一,杂乱的呼吸动效会显得廉价

别名: 骨架呼吸节奏 · shimmer cadence · 杂乱骨架动效

概念解释

骨架用来声明「这些槽位还活着」。活着的证据通常是一层很轻的呼吸或扫光(shimmer)。同一屏上的色块必须共用一个周期、一个相位基准,最多沿阅读方向做一点点延迟。各块自己吹风——有的快闪、有的慢胀、有的扫光有的脉冲——节奏对不上,等待会从「系统在工作」滑成一套互不相干的装饰。杂乱的呼吸动效显得廉价,不是因为有动画,而是因为动画没有被当成同一次等待的单一信号。

机制

人用节律给「是否同一过程」分组。相位锁定的微动被编成一个物体的表面在亮;相位散开的微动被编成多个物体各自在表演。骨架的任务是让整页还没到的内容共享一次心跳,证明它们属于同一次加载。心跳一散,分组失败:这块像广告位在闪,那块像禁用控件在抖,中间那条又像进度。注意被拉去跟踪几套互不同步的周期,计时和定向都变贵,等待的身份也变脏。

廉价感来自信号过载。真内容的运动有语义:列表插入、图片淡入、按钮按下。骨架阶段没有这些语义,只剩节律。节律一旦花、一旦各行其是,它就会被拿去跟那些有语义的运动比,比输了就显得像未完成的特效,而不是克制的占位。统一节奏把运动降回「还活着」的最低剂量;杂乱把它升成一场没有剧情的演出。

边界

沿阅读方向做 50–80 毫秒级的错相,仍可以被读成同一波扫过,不算杂乱,还能提示「内容将按这个方向到达」。错相拉大到各块明显各跳各的,分组就破了。降低动效的系统设置里,呼吸应停,改用静止骨架加一次状态文案;继续闪是在无视那条通道。长等待里再克制的呼吸也会被习惯化,活着的证据变弱,那是转圈那类信道枯竭的表亲,要用阶段变化而不是把呼吸加快、加密来救。骨架若与页面里真正的循环广告、骨架以外的加载点抢节奏,统一只在骨架内部成立,整页仍会吵。

怎么落地

  • 全页骨架共用一个周期和缓动,用同一套透明度或扫光。不要给头像圆、标题条、图片框各写一套时长。
  • 若需要方向,只允许沿阅读方向的短错相,错相应是同一波形的平移,不是不同波形。
  • 尊重减弱动态:呼吸关掉,骨架静止,另给「正在加载」的文本状态。
  • 验证:录一段骨架等待,静音看。应能看出一次心跳扫过整页。若眼睛被迫在几块之间跳着追不同的闪,节奏就散了——收成一个周期再看廉价感是否落下。

延伸

  • 同组I2.01.1 结构可预知时用骨架屏 · I2.01.2 结构不可预知时用不确定指示 · I2.01.3 骨架结构与实际内容不符会造成跳变 · I2.01.4 骨架屏比转圈更能降低用户对等待时长的主观估计 · I2.01.5 极短的加载时间内出现指示反而会制造多余的视觉闪烁 · I2.01.6 转圈缺乏进度信息,长时间使用会被误认为卡死
  • 相邻E6.07 骨架屏 · I4.09 节奏与操作韵律 · I2.07 感知性能
  • 站内检索skeleton shimmer · shared cadence · breathing placeholder

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/I2.01.7