官网动效怎么用，才不拖慢页面

不少品牌希望官网「动起来」：首屏有入场动画，滚动时元素依次浮现，按钮悬停有反馈。动效用得好，页面更有品牌气质，访客也更容易看懂重点；用得不好，页面加载变慢、手机发烫，访客还没看到内容就离开了。

动效要服务于信息层级，同时兼顾加载性能和无障碍。下面是我们在官网项目里常用的几条做法。

一、先想清楚动效要做什么

每一处动效都应该能回答「它帮访客做了什么」。适合用动效的，大致有三类：

• 引导视线：把注意力带到关键信息上，比如首屏的一句定位、一个主要按钮；
• 操作反馈：点击、悬停、提交表单之后，用轻微的变化告诉访客「收到了」；
• 交代关系：展开菜单、切换标签、打开详情时，让访客看出新内容从哪里来、回到哪里去。

说不出用途的动效，可以先去掉。一页里同时动的东西越多，访客越难分辨哪里是重点。

二、选轻量的动画方式

同样的视觉效果，实现方式不同，对性能的影响差别很大。位移、缩放和透明度这类变化，浏览器处理起来负担小；频繁改动元素的宽高、位置和阴影，容易让页面卡顿。大面积的背景动画，与其用很长的动画序列，不如用一段压缩好的短视频，或者干脆换成静态图。

图片和视频本身的体积也要控制。可以把这一项放进官网上线以后要持续做的事里的技术体检：每次新增素材，都看一眼体积和加载时间。

三、内容先出来，动效后加上

首屏的文字和主要图片要先显示，动效在内容加载完成后再叠加。不要让访客盯着一个加载动画等几秒，也不要把关键文字放在动画里才出现，否则网速慢的时候，访客看到的是一片空白。

首屏以下的动画素材按需加载：访客滚动到附近再开始加载，不和首屏抢资源。首页第一屏该放什么，可以参考官网首页放什么：访客前十秒要看到的几件事。

四、尊重「减弱动态效果」的设置

手机和电脑系统里都有「减弱动态效果」一类的设置，有些访客对大幅度的运动会感到不适。网站要读取这个设置：打开时，把入场动画和视差滚动换成简单的淡入，或者直接显示。同时保证不看动效也能读懂内容、完成操作，动效只是锦上添花。

五、上线前在真实条件下测

动效在设计师的电脑上流畅，不代表在访客手机上也流畅。上线前至少在两种条件下各测一遍：

1. 一台中低端安卓手机，看滚动是否卡顿、手机是否明显发热；
2. 弱网环境，看首屏文字多久出来，动画没加载完时页面是否完整可用。

小结

官网动效先想清楚用途：引导视线、操作反馈、交代关系；实现上选轻量的方式，内容先出来、动效后加；尊重系统的减弱动态效果设置；上线前在中低端手机和弱网下测一遍。我们做品牌官网时，把交互与动效和视觉、信息架构放在一起规划，见数字体验。