留白是给动效让路

评价一个带动画的页面，有一个残忍但有效的方法：把动画全部关掉，只看剩下的那一帧。如果那一帧本身就站不住——标题居中、三张等宽卡片、一段说不清在说什么的文案——那再优雅的缓动曲线也救不了它。动画只是放大器，放大的是版面本身的功力。

反过来也成立：一帧设计得好的版面，动起来几乎不会难看。

注意力的余地

所以动效设计的顺序，不是「先做页面再加动画」，而是「先想清楚什么东西要动，然后为它留出空间」。这里的空间不是空白，而是注意力的余地：

一、英雄区不是文案区。首屏如果塞满了标题、副标题、两个按钮和一个徽章，那么无论放什么动画进去，读起来都像贴上去的装饰。首屏的动画需要整块的空间做舞台。

二、一个窗口只发生一件事。滚动到某个位置时，如果入场动画、视差、导航高亮同时抢注意力，等于什么都没发生。让别的元素在该位置保持安静，运动的东西才有意义。

三、页面上要有一块永远不动的区域。全都动等于全都没动。留一块静的，动的那块才显出来。

中文排版在这里有个额外的坎：大字号黑体容易糊成一团，宋体在负字距下会闭死。中文展示字的呼吸感靠行距和字重撑，不靠压缩字距。这大概也是为什么中文网页动效做得好的少——不是动画能力的问题，是肯在字上花时间的人少。