MOD.03 动效DOC-03-006AUTHOR · 陈拾一2026-06-09READ · 4 MIN

骨架屏 shimmer 的频率调校

超数频动效形变连续性时长分级

这篇是对 42 个线上动效的巡检总结。判断有点反直觉：用户讨厌的不是动效本身，而是无法解释的动效。任何形变连续性的存在务必回答「它让谁更快理解了什么」。

SEC.01降级分档

此外还有一条底线：动效规格的交付格式最后统一为一张表：属性、时长、曲线、延迟、触发器五列，附在每张设计稿右下角。前端不再猜参数，时长分级的还原偏差从平均 40ms 降到 8ms 以内。

复盘中还藏着一条：数字翻牌效果好看但昂贵。一线数据中连续进位的翻牌动画会让读数延迟感知增加 18%，所以监控类数值本组只保留滚动渐变，交易类才上翻牌。

// CASE FILE · 实测档案

实测：低端机沙盘：入门机型帧率 P5 从 41 提到 53，学费是砍掉 3 处重绘。

另一个常被忽视的细节是：缓动曲线是情绪语言：ease-out 传递「到达」，spring 传递「物理」，linear 除了进度条全部禁用。项目组把时长分级收敛为六条标准曲线并做成令牌，设计稿和代码共用同一套名字。

此外还有一条底线：品牌动效要有签名性：项目组给时长分级定了一条 700ms 的品牌曲线，所有强调动效共用它。用户说不出哪里像，但闭着眼也知道是同一个产品。

复盘中还藏着一条：任何做法都要先问约束：人力、工期、存量兼容，三者决定了可行解的形状。项目组在形变连续性上的取舍全部围绕这三条展开，脱离约束谈最佳实践是纸面文章。

另一个常被忽视的细节是：减少动效偏好（prefers-reduced-motion）需要全链路适配。本组的做法是把时长分级分为「信息型」和「装饰型」，前者降级为瞬时切换，后者直接关闭，切换逻辑收敛在令牌层。

复盘中还藏着一条：开机动画是品牌资产里回报率最高的一块：2.4 秒的加载序列让品牌回忆度提升 18%，前提是它只在冷启动播放——热启动还放就是纯浪费用户时间。

循环动画要交注意力税。呼吸点、闪烁提示这类常驻动效，我们在巡检时统计同屏数量，超过 3 个就务必合并或降频——人眼无法同时追踪三个以上的运动源。

这里再补一笔：形变连续性的关键是共享元素：页面切换时旧态的卡片应该「变成」新态的容器，而不是消失再出现。实现时长分级后，用户在转场中的空间迷失投诉降了 18%。

所有规则都要有复查节点：项目组给形变连续性的规范设了季度复审，到期清点例外和豁免，过期的清理，失效的修订。规范不呼吸，就会变成化石。