去年测试过一个客户引以为傲的新官网，首屏文字飞入，往下滑图片视差滚动，鼠标扫过按钮发光旋转，导航栏还会随滚动变色。看着热闹，可一位用旧手机访问的客户私下说，页面划起来一顿一顿的，他以为网站坏了。客户自己用新手机看没问题，就以为所有人都没问题。网站设计的动效是调味料，放多了抢主菜的风头。
值得加动效的三个位置
页面切换的加载过渡、悬停反馈、关键数据的出现时刻。悬停反馈最实用：按钮颜色微微变化、卡片轻轻上浮一两个像素，用户立刻知道「这里可以点」。数字滚动展示年服务客户数，出现的瞬间确实抓眼球，加载过渡别超过半秒，等着看动画的用户一个都没有。这三个位置加起来，页面已经显得活了，根本用不着满屏飞。
这几处动了不如不动
正文阅读区千万别加任何动画干扰，用户在读字，每个多余的移动都在拆台。表单填写页面保持安静，填到一半元素乱动的表单流失率明显高。还有那种整页滚动劫持——滚一下直接翻一屏的设定，看着炫，实际很多用户滚不过瘾、找不到位置，退出来骂一句。视频背景同理，自动播放的一定静音，声音突袭是最招人烦的。有机构做过对比，去掉滚动劫持后页面平均浏览深度反而上来了。
性能账要提前算
- 移动端优先做减法，低端安卓机上视差效果掉帧明显，干脆整组关掉
- 动画时长控制在200到300毫秒，再长用户就开始等
- 用系统支持的变换属性做动画，别动布局属性，掉帧能少一大半
- 首屏动画放在内容加载完之后跑，别让用户看着白屏等入场
动效要有退路
系统开了「减少动态效果」的用户，网页动效最好跟着关，这是基本的尊重，实现也简单。再加一层判断：检测到设备性能弱就自动降级成静态。有位客户的全站视差在低配机上白屏了两秒，加了降级逻辑后投诉归零。炫的部分永远要给不炫的版本留个出口。
两条建议：网站设计的动效方案要在真机上试，别只在设计师的高配电脑上看；给整站动效设一条预算——动画总时长和元素数量有上限，超了就砍。上线后看一眼低网速用户的跳出率，差距大的话先动视频和动效。比格网络交付前会用三四年的旧手机过一遍动画性能，这关过了才算完。
