Web、App中添加动效设计应遵循的12条原则

曾近某高级产品经理指导工作中一再的强调要炫酷炫酷，动效交互不能少。于是苦逼兮兮地在原型上加各种交互。但是最终做出来的成品很差强人意。用户体验糟糕，炫酷的效果大打折扣。吸取了如此教训，那一起来看看动效炫酷的效果应该如何做吧~

没有用户请求就不会产生交互

当你关闭一个标签时，它就会从屏幕上消失：简单地说，这给了用户一个即时的反馈动作（这个视觉效果对我们来说非常重要）。深入地说，动作让人类感受到了现实生活中的行为。动画让界面变得鲜活，带给用户真实的响应感觉。

过去，在网站上增加动画效果是奢侈的，而且大部分是针对基于Flash的网站。但是现在几乎每一个网站都在使用CSS/Javascript/HTML5的动画功能，小到简单的滑动模块，大到更复杂的“视觉滚动差”效果。

这不是一件坏事——除了看起来漂亮和取悦用户以外，动画也解决了很多界面上的实际性问题。就像我们曾在《 Interaction Design Best Practices》中提到的那样，动画起了一个“传播者”的作用，比起文字描述和图片，动画能使内容表达得更彻底且简洁。

下文，我们将探讨如何处理长时间加载等待及自然转场过渡，有哪些策略可以采用，及交互设计中可遵循的迪斯尼动画准则。

在用户等待过程中分散他们注意力

“人心不足蛇吞象”，内容的臃肿导致加载时间过长，这在技术层面无法解决。某些产品深受其害(如视频游戏、重度数据网站)，但对于大多数数字产品来说又是不可避免的。

我们没办法缩短加载时间，但是我们可以让等待的过程更愉悦。加载时间动画（一种静态动画）就派上用场了。

虽然动画不能完美的解决这个问题，毫无疑问，它缓解了这个问题。

加载时间，它的关键是创建一个动画来替代原有的简单的加载进度条。最理想的情况是，动画加载过程中，通过动画向用户展现你产品的技术含量，给用户一个好的印象。就算是最差的情况，用户至少能在他们等待的过程中看一些有趣的东西，这就提高了整个用户体验！

事实上，与用户之间建立情感联系的应用和网站，更容易获得用户的宽容。好比一个优秀的404错误页面设计可以减少用户访问失败的挫折感，一个有趣的加载页面可产生更多情感价值而不是白白浪费掉等待时间。

口说无凭，让我们一起来看看数字创意机构Dunckelfeld的例子。当你第一次进入他们的网站时，你会看到下图所展示的一个有个性且有趣的加载动画。

Dunckelfeld创造性地利用传统的加载条和他们独特的橙色对角线标志作为开场动画，让用户知道等待不会太久,安抚他们的同时提升了品牌知名度。一旦完成,加载条就只剩下Dunckelfeld标志,飞到屏幕的左上角,无缝过渡到操作界面，用户现在可以自由地与它交互了。

现在的网站通常都能很好地支持动画，关键是探索出与自己网站定位相符的界面移动和变化的动画方式。将各式各样的 微交互（microinteractions）植入到你的产品中，让你的产品为用户带去更多有乐趣的体验。

无论是初始化时的加载动画还是微交互动画对网站而言都需要一些技巧——毕竟,他们的加载时间并不会太长,微动画大多起美化和装饰作用。然而，这些小的增加可使网站脱颖而出,使交互更令人满意。在交互设计中，永远不要低估它们的价值，它们不仅仅是“花瓶”。

场景过渡和用户通知

动画不应仅仅用于枯燥的等待时间中，以分散用户注意力，还应用来为用户推送通知并引导他们访问相应内容。

无论是从一个页面或者对象跳转到另一个，或者仅仅是一个简单的下拉菜单的出现，动画可以提高每一个细节上的交互——最好的动画看起来顺畅自然，而不会把用户的主要注意力吸引到动画本身。

接下来，让我们看看如何在动画速度和用户认知方面建立一个平衡点,同时使你的网站显得更流畅。这些可作为一个UI模式来定制你的网站或App。

1.让通知更具动态

运动的物体可吸引人的注意力。让你的消息通知动起来，是一个很好的提醒用户的方式，且不会让用户感觉突兀。

在线照片礼品零售商Photojojo就做了这样一个有趣且有用的动画。当用户添加一个新商品到购物车时，一个“+1”的文本会滑过屏幕漂浮到购物车图标处再增加商品计数。

动画运用得好，也可很好为商业目的服务：通过即时动态，向用户反馈商品已添加入购物车，可使用户不必急于去结算页面支付。这样用户的购物体验就未被打断，使得用户有更多时间去浏览或购买更多的商品。

当然，这样的动画模式不仅仅适用于电子商务的网站。如果你想以友好的方式将消息推送给用户，可以考虑使用动态消息，像RelateIQ那样向下滑动一个通知条（几秒钟后自动消失）。

2.展示隐藏信息

通过动画方式动态显示一些隐藏的信息。两种最常见的方法是Hover-to-Reveal（鼠标悬停时触发）和Click-to-Reveal（点击时触发）。

悬停技术直截了当。当鼠标悬停在作用区域时，更多的隐藏内容将展现出来。我们并不鼓励将涉及用户操作的元素通过悬停的方式来显示，但可以用它来显示一些次要的信息。请记住,通过移动设备访问网站，悬停方式是不生效的(移动设备不支持Hover操作)。

例如，Flickr上，你只要将鼠标悬停在照片上就能显示照片的说明信息。

为了让用户更多的关注主体内容，我们尝试一种叫做Click-to-Hover的替代方法。如AirBnB的地图将各目地有趣的建议（网站的主要内容）进行了隐藏，只有单击每个目的地的Icon才能看到它们。

3.内容突出

如果使用网格或卡片布局，这一点很容易实现。当用户鼠标滑到内容区域（不单单指文本链接），确保设置好合适的参数以保证动画的触发。下面我们可以看看阿迪达斯的例子。