F7.06.1Motion covering a loading gap设计研究
动效可填充加载间隙
别名: 转场盖延迟 · 加载间隙 · 掩盖往返
概念解释
网络或解码往往在点击之后、新界面可画之前留下一段空窗。若这段空窗正好被一次已经有理由存在的转场占满,人不会再单独经历一次空白等待。这里的运动不是为了把两秒估成一秒,而是用路径把往返藏进过渡里。时距知觉可以顺便变短,但这种掩盖成立的条件是:空窗是真的,转场也是真的。
机制
点击到首帧可交互之间的延迟,若裸露出来,会被标成系统迟钝。转场把这段时间改写成「正在去下一处」:路径在走,目标页的结构可以在幕后解码、排版。当转场结束和内容就绪落在同一时刻附近,因果故事完整,中间没有无主的空白帧。
这要求转场有独立的空间或身份理由。没有理由的循环旋转不是掩盖,只是承认空窗还在。骨架屏是另一类填充,它承认「页已经到了、内容还没有」;转场掩盖的是「页还在路上」。两类空窗不要用同一种运动去盖。
怎么研究
固定真实延迟,比较「空白等待后硬切」「转场与加载并行」两组的迟钝评分、放弃率,以及能否说出「我在等网络」还是「我在进下一页」。自变量:延迟与转场时长的相对关系、转场是否有空间语义。因变量:迟钝评分、归因(网络 / 导航 / 卡死)、放弃。
关键是把物理延迟从转场时长里拆开报告,否则看不出是掩盖成功还是只是把等待改了个名字。
边界
- 空窗短到转场还没起作用就结束,掩盖无对象,转场只会拖住。
- 空窗远长于任何可跟踪的路径,转场播完后仍会露出加载,需要在终态接上进度,而不是把转场拉长去硬盖。
- 前庭敏感用户会宁可看见短空白,也不要大位移来盖几百毫秒。
怎么落地
- 把可预期的短往返(缓存未命中、图片解码)和本来就要做的页面过渡叠在同一段时间里。
- 转场期间预渲染目标页,结束时尽量已可交互,而不是播完再开始请求。
- 验证:在弱网下录时间线,看「空白帧」是否出现在点击与可交互之间。空白消失且没有额外拖长,才是间隙被路径占用。