F7.06.1Motion covering a loading gap设计研究

动效可填充加载间隙

别名: 转场盖延迟 · 加载间隙 · 掩盖往返

概念解释

网络或解码往往在点击之后、新界面可画之前留下一段空窗。若这段空窗正好被一次已经有理由存在的转场占满,人不会再单独经历一次空白等待。这里的运动不是为了把两秒估成一秒,而是用路径把往返藏进过渡里。时距知觉可以顺便变短,但这种掩盖成立的条件是:空窗是真的,转场也是真的。

机制

点击到首帧可交互之间的延迟,若裸露出来,会被标成系统迟钝。转场把这段时间改写成「正在去下一处」:路径在走,目标页的结构可以在幕后解码、排版。当转场结束和内容就绪落在同一时刻附近,因果故事完整,中间没有无主的空白帧。

这要求转场有独立的空间或身份理由。没有理由的循环旋转不是掩盖,只是承认空窗还在。骨架屏是另一类填充,它承认「页已经到了、内容还没有」;转场掩盖的是「页还在路上」。两类空窗不要用同一种运动去盖。

怎么研究

固定真实延迟,比较「空白等待后硬切」「转场与加载并行」两组的迟钝评分、放弃率,以及能否说出「我在等网络」还是「我在进下一页」。自变量:延迟与转场时长的相对关系、转场是否有空间语义。因变量:迟钝评分、归因(网络 / 导航 / 卡死)、放弃。

关键是把物理延迟从转场时长里拆开报告,否则看不出是掩盖成功还是只是把等待改了个名字。

边界

  • 空窗短到转场还没起作用就结束,掩盖无对象,转场只会拖住。
  • 空窗远长于任何可跟踪的路径,转场播完后仍会露出加载,需要在终态接上进度,而不是把转场拉长去硬盖。
  • 前庭敏感用户会宁可看见短空白,也不要大位移来盖几百毫秒。

怎么落地

  • 把可预期的短往返(缓存未命中、图片解码)和本来就要做的页面过渡叠在同一段时间里。
  • 转场期间预渲染目标页,结束时尽量已可交互,而不是播完再开始请求。
  • 验证:在弱网下录时间线,看「空白帧」是否出现在点击与可交互之间。空白消失且没有额外拖长,才是间隙被路径占用。

延伸

  • 同组F7.06.2 掩盖不能超过实际延迟 · F7.06.3 用动效制造的假延迟是净损失
  • 相邻F7.01.3 填充等待,改变对时长的主观感知 · I2.07 感知性能 · I1.01 即时感阈值
  • 站内检索latency masking · loading gap · perceived performance

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F7.06.1