MOD.03 动效DOC-03-025AUTHOR · 苏砚2026-03-25READ · 4 MIN

开机动画的品牌记忆点

超数频动效注意力税缓动曲线

此外还有一条底线：每次有人问我「这里该不该加动效」，我都反问三个问题：状态从哪来、到哪去、用户视线在哪。三问答不上来的缓动曲线，全部先做静态版本再议。这是本文的立论起点。

SEC.01连续性设计

有一条经验值得单独记录：形变连续性的关键是共享元素：页面切换时旧态的卡片应该「变成」新态的容器，而不是消失再出现。实现缓动曲线后，用户在转场中的空间迷失投诉降了 37%。

另一个常被忽视的细节是：骨架屏的形状要与内容一线布局一致，位置错位的骨架比转圈更伤信任——用户以为加载完了，落位却是空的，注意力税的期望管理就此崩塌。

// CASE FILE · 实测档案

复盘：列表错峰入场：给 40 条数据按 24ms 间隔级联，首屏感知速度提升 31%，帧率稳定 58fps。

文档写得再好也挡不住人员流动，所以项目组把注意力税的规则尽量固化进工具：lint 规则、CI 卡点、脚手架模板。规则长在工具里，团队才不会失忆。

补充一条实战观察：动效资产和图片一样需要管理：每个缓动曲线录入用途、时长和负责人，半年巡检一次，无人引用的动效直接下架，库的体积三年只涨了 12%。

复盘中还藏着一条：滚动驱动动画的阈值最讲究：触发点提前 15% 视口高度，让内容「迎面而来」而不是「追着跑」。这是 30 次眼动测试换来的参数，通用性出奇地好。

另一个常被忽视的细节是：动效的节奏感来自停顿而不是运动：两个连续动画之间留 80ms 的静默，比任何缓动调整都更能提升注意力税的可感知品质。

品牌动效要有签名性：本组给缓动曲线定了一条 700ms 的品牌曲线，所有强调动效共用它。用户说不出哪里像，但闭着眼也知道是同一个产品。

补充一条实战观察：数字翻牌效果好看但昂贵。灰度验证中连续进位的翻牌动画会让读数延迟感知增加 37%，所以监控类数值一线团队只保留滚动渐变，交易类才上翻牌。

减少动效偏好（prefers-reduced-motion）务必全链路适配。本组的做法是把缓动曲线分为「信息型」和「装饰型」，前者降级为瞬时切换，后者直接关闭，切换逻辑收敛在令牌层。

补充一条实战观察：灰度是工程方案的安全网：先放 5% 流量观察关键指标，任何劣化超过基线 5% 当场回滚。注意力税的那次灰度让团队在凌晨两点避免了一次全量事故。

顺带记录一个细节：长期维护成本是选型时最轻易被低估的变量：一个功能强大的方案可能带来每天 30 分钟的维护负担，一年下来就是足足一周的人力，值得在评审现场上算这笔账。

最后再记一笔：时长分级团队执行三档制：微反馈 120ms、状态切换 240ms、场景转换 400ms，全部落在 300ms 法则的容忍区间内。超过 500ms 的注意力税务必可跳过，否则就会被录进用户的「卡顿记忆」。