一个0.3秒的渐入，五个岗位争的从来不是时长

项目周会放到第三个议题，产品详情页那组卡片的入场动效被拎出来单独讲。设计师做的是每张卡片延迟 0.1 秒依次淡入并上移 16 像素，六张走完 0.8 秒。会议室里五个人，意见没有一条能对上。

老板说太素了，看不出花过钱；市场负责人说这 0.8 秒正好压在用户扫标题的时间上；设计师坚持节奏不能再压，再快就成了抽搐；前端把测试机推到桌子中间，说这套在两年前的中端安卓上掉到 34 帧；运营问的是以后卡片加到十二张，最后一张岂不是要等一秒半。争到散会没人改口，议题原样挂起。

老板：他要的不是动效，是「没被糊弄」的证据

老板说不出具体参数，他给的词是大气、高级、有科技感，参照物往往是他前一天在手机上刷到的某个品牌站。翻译过来，他的真实诉求是：这笔预算要留下看得见的痕迹。一个通篇静止的页面，在他眼里和模板站没有区别，哪怕排版和字体下了再多功夫，他也感知不到。

跟他硬碰硬讲克制没有用，有效的做法是把「预算可见性」集中投放。他真正会反复打开看的页面就两处：首页首屏和「关于我们」的头图。在这两处各放一段做扎实的动效——首屏元素分两组进场、总时长 400 到 600 毫秒，头图给一层幅度不超过 40 像素的轻视差——比全站铺三十处平庸的淡入更能说服他。整站动效点位控制在 8 到 12 处，其中一半以上留给这两个位置。

冲突会出现在验收环节：他习惯一页一页翻，翻到产品参数页、报价页这类刻意保持静止的页面，第一反应是「这页怎么什么都没有」。所以在网页制作的中期评审上就要提前交底，明确说哪几页是故意做静的、理由是这些页面上用户在读数字，不是在看表演。这句话提前说，是解释；等他自己发现再说，就成了辩解。

市场负责人：她的账记在跳出率和表单提交上

她只盯投放落地页，判断标准非常硬：这个动效有没有拖慢用户看到卖点和点到按钮的速度。所以她第一个要砍的永远是开屏加载动画。那种 1.5 到 2.5 秒的品牌 logo 展开效果，对自然流量还能忍，对付费流量就是纯损耗——买来的点击，前三秒决定去留，拿其中大半去播一段用户看过一次就不想再看的片头，账怎么算都亏。

她的第二个要求更容易被忽略：主行动按钮不能排进滚动触发链的后段。有些页面把首屏元素做成依次进场，标题、副标题、说明文字、按钮，按钮排第四第五位，前面每级延迟 0.15 秒，等它显示出来已经过去 0.6 秒。这 0.6 秒里用户完全可能已经开始下滑。她要的是按钮和标题同时到位，哪怕看起来没那么讲究。

自动轮播是她和设计师最常见的分歧点。六屏轮播、每屏停 5 秒，走完一轮 30 秒，而首页平均停留常常只有 40 秒上下，意味着大多数人实际只看到一屏多一点，后面四屏做得再好也等于没做。她主张改成并列展示或手动切换，设计师觉得并列排出来拥挤难看。网页制作的报价单上，轮播往往被当成一个加分项来卖，但从数据回看，它更多是把内容藏起来的装置。

设计师：她守的是节奏，不是花样

设计师最常被误解成爱加特效的那一个，实际上她给的方案里有一套相当具体的时长分级：按钮点击、开关切换这类微反馈落在 100 到 200 毫秒，单个元素进出场落在 200 到 400 毫秒，整块区域转场或弹层打开落在 400 到 600 毫秒，超过 600 毫秒的等待感就会明显浮出来。她反对的不是把动效改快，是别人不看分级、拍脑袋把 300 毫秒直接改成 150 毫秒——同样一个渐入，300 毫秒是顺滑，150 毫秒是闪一下，观感差出一个档次。

比时长更影响质感的是缓动曲线。进场用先快后慢的曲线，元素像被轻轻放下；退场反过来，先慢后快，像被抽走。全站统一用匀速曲线，是最容易出现的廉价感来源，而这一项在评审时几乎没人提，因为它说不清、只能看出来。

她愿意让步的是数量，不愿意让步的是参数统一。同一个站里所有卡片的入场必须共用一套时长、一套位移距离、一套曲线。网页制作里最伤质感的从来不是动效多，是首页 300 毫秒、列表页 500 毫秒、详情页又换成 200 毫秒——单看每页都说得过去，连着翻三页就觉得这站是拼出来的。把这套参数写成三到四个变量交给前端，比在评审会上逐页比对省事得多。

前端：帧预算要算在最差的那台机器上

前端的立场最容易被当成推诿，但他手上的数字是硬的：要跑满 60 帧，每一帧只有 16.7 毫秒预算，动效和页面上其它所有事情共用这点时间。所以他反复强调的那条规则并不是刁难——只动透明度和位移缩放这类走合成层的属性，别去动宽高、上下左右偏移、外边距，那几样每一帧都会触发重新排版和重绘，六张卡片同时动就足以把帧率拽下来。

他真正头疼的是视差和高斯模糊。这两样在开发机的浏览器里毫无压力，在三年前的千元安卓机上能掉到 25 到 30 帧，滚动时的顿挫肉眼可辨。所以验收基准不能定在开发机上，测试机柜里至少要留一台老旧中低端机，动效上线前在它上面滚一遍。滚动触发也一样，用视口交叉观察的接口去判断元素进没进屏幕，比直接监听滚动事件省下大量无谓计算。

还有一条常被当成可选项、实际不该商量的：操作系统里开启了「减弱动效」的用户，页面必须把所有非必要动效降级成直接显示。有前庭功能障碍的人看大幅位移和视差会真的不适。这一行判断只有几句代码，但要在网页制作的交付清单里写死，不然赶工时第一个被省掉的就是它。

前端还有个诉求很少被听见：动效清单要在开发开始前给全。后期一条条补加的动效，常常需要额外包一层容器、改动结构，改完还要回归测试。同样十处动效，开工前一次给齐和分五次补，工作量能差出两三天。

运营：三个月后往里塞东西的人是他

他不参与评审，却是被坑得最实在的那个。上线时新闻列表 6 条，延迟递增 0.1 秒，最后一条 0.5 秒出现，很漂亮；运营半年后把列表加到 20 条，最后一条要等 2 秒才出来，用户看到的是一片空白在慢慢长出内容。问题出在延迟绑定了元素序号，而序号会随内容增长。

可行的做法有两个：给递增延迟设上限，第 6 个之后不再累加，统一用同一个延迟值；或者按视口分批，只对当前屏内的元素做进场，滚下去的批次各自独立计时。两种都不难，难在交付时内容量是理想值，没人想到去测二十条、五十条的情况。

另一类坑来自后台编辑器。运营从文档里粘贴一段内容进 CMS，样式类名丢失，绑在类名上的动效直接失效，页面上就出现一段莫名其妙不动的区块，夹在会动的区块中间，比全静止还难看。所以动效应该挂在外层容器上、由容器统一驱动子元素，而不是要求每个子元素自带标记。这一条在网页制作交付时最容易被漏掉，因为整个开发阶段用的都是写死的示例内容，从来没经历过真人往里粘东西。

把五张嘴收敛到一张判定表上

这五个人吵不出结果，不是因为谁不专业，是因为他们各自握着一套不通约的标准，而讨论的却是「这个动效要不要」这种没有共同尺度的问题。能把争论落地的抓手，是把问题换成三个所有人都答得上来的判断，做成表格，页面元素一行一行往下填。

第一问：这个元素承载的是信息，还是氛围？承载信息的一律不动。价格与优惠、库存与交期、资质证书编号、法律条款和合规声明、表单里已填的内容、校验提示和错误信息，全部禁止延迟出现或位移进场。用户在读数字时，任何移动都是干扰；更麻烦的是数字滚动动画——从 0 滚到 2000 用掉 1.8 秒，这期间用户截图、复制，拿到的都是中间态的错误数字，客服后面要为此解释很多次。

第二问：用户此刻是在等结果，还是在闲逛？提交表单、切换筛选、加载下一页时，用户在等，这时只允许状态指示类动效，而且反馈必须在 100 毫秒内起步，晚于这个数用户就会怀疑自己没点上，然后再点一次。闲逛浏览时，才轮到装饰性的进场效果登场。

第三问：这个位置将来会不会被批量复制？只要答案是会，就不许用序号驱动的延迟，只能用容器统一驱动。

三问填完，五个人的话各自有了落点：老板的「太素」落在氛围那一列，市场的「别挡按钮」落在等结果那一列，运营的「以后要加」落在批量复制那一列，前端的帧预算变成表格右侧的一栏实测帧率，设计师的时长分级则成了整张表的取值范围。谁要加一处动效，就填一行；填不满三问，这一处就先不做。

那组卡片最后定下来的版本是：延迟上限 0.4 秒、只动透明度和位移、第 5 张之后不再累加、减弱动效开关下直接显示。五个人各让了一步，但让在哪儿、为什么让，都写在表上——下一次改版换了一半人，也不用把这场会重开一遍。