在我们热火朝天往画面上添加各种动效的时候，我们是不是应该问问自己，这么做真的对吗？凡事是否都应该有个度，动效当然也不会例外。下面我们就从“为什么动？”“哪里动？”“怎么动？”这三个方面来说说我们的一点想法：

一、为什么动？

首先，为什么要动？可能你会想到以下几条理由：

这让我的作品看起来很炫酷，碉堡了！
动效会带来流量，助我完成KPI！
别人都这么做了，我也得做！
编辑让我这么干的！
呵呵，你要这么想就完了。

那么该如何衡量一个动效是否应该出现呢，我们认为有几个考核标准：

1. 这个动效是否会影响性能？

首先，这个动效是否会影响性能？这个是最重要的，添加任何动效前都要考虑是否会影响产品的性能，如果一个很酷炫的动效会拖累性能，使体验变得卡顿不流畅，那么必须毫不犹豫的砍掉或简化。

2. 这个动效是否会提高产品的可用性？

任何动效的出现都必须带有明确的目的性，能够解决用户在使用过程中的困惑，而不是炫技。单纯的炫技只会分散用户的注意力，弱化内容，变得适得其反。

3. 这个动效是否会给你的产品带来独特气质？

这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花，深化你的主题和功能，注意，一定是与主题相关的，牵强的搭配只会叫人觉得莫名其妙，毫无意义。

4. 重新审视第一条，看你的动效是否影响性能

所以，合理的动效不应是花拳绣腿，而应该是解决问题的手段。

二、哪里动？

好，我们再看看哪里需要动效，这里举几个例子：

1. 加载

首先是出现在加载环境，不管是网页还是H5都不可避免的会出现让用户等待的情况，在等待的过程中为了让用户知道他的手机没有死机以及网络是通畅的，我们应该在这个时候加入一些与主题相关的动效来提醒他内容正在加载中。

2. 转场

第二个情景是转场。具有意义的转场会降低产品割裂感，我们看两个例子就明白了。

3. 页面元素的互动

也可以为网页元素增加一些必要的动效。

4. 心理需要

这里所说的心理需求是指气氛和情景的营造，例如节日，游戏活动等产品，是需要一些动效去满足用户心理需求的。大家都知道在微信里输入“生日快乐”是会掉下生日蛋糕的，这个动效就比干巴巴的文字有趣多了。

三、怎么动？

好，说完哪里动，我们现在看看怎么动。

1. 基于真实形态的模拟

基于真实的动画会叫人看起来自然流畅，符合规律，比如物体运动时的加速度现象。

2. 人物动作夸张化

在H5的设计中，经常会出现各种各样的人物形象，夸张的人物动作会生动你的形象，增加趣味性，给用户以惊喜。

3. 给元素赋予弹性

有弹性的物体会叫用户觉得具有生命感和真实性，弹的程度取决于你对元素软硬度的设定。

4. 蒙太奇

这是一种类似蒙太奇的手法，通过快速切换的画面来形成一种奇妙后现代感觉。

好，以上只是一些基本的动效手法，在实际的应用中其实有很多手段，在这里我建议大家可以去看看迪士尼和皮克斯的动画，应为动画本身是一种对于动作行为高度概括的手段。虽然这些都是电影，但是他们使用的手段和遵循的理念是非常值得我们去学习和借鉴的。注意观察这些大牛们的作品，你会发现他们的作品中充满了走心的细节。

四、结语：

简单来说，当用户打开一个界面，注意力首先会被动态的物体吸引，然后才会把注意力转向颜色对比强的部分，最后才是形状。这一过程是人在进化过程中形成的本能反应，基本适用所有用户。同时一个非常重要且容易被忽略的原则：用户的注意力是有限的，而且越来越少。很可能在用户注意到一段动效之后，注意力和耐心已经用尽，无法看到其他内容就着急去下一个界面了。

本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司！