网页设计中的动画详解

    一.界面元素动画

    这是一种让用户了解他们的操作（比如点击）被记录的动画。变化的发生需要他们的点击来催化，无论是转向另一个页面，打开侧边栏或模态窗口，还是在客服窗口中发送电子邮件。

    不是说有反馈更好，而是如今反馈是必须的，这是个扁平化设计的世界。人们需要了解界面与装饰物之间的区别。让元素运动起来，是简单微妙的交互方式，给予用户他们所需的反馈。

    它就像改变按钮背景色或让它跳动那么简单。这个类型也包含了侧边栏菜单“滑入”页面的动画，还有模态窗口放大显现的动画。

    二.等待动画

    这个也是，同样是为了给用户提供反馈。这类动画，会在某些操作正在后台进行时呈现给用户，你可不想让他们等到崩溃。

    这类动画的作用很久以前就得到了印证，就在图形化用户界面首次发明的时候。最早的方式是鼠标指针变成沙漏，还有进度条也是。Apple在某时刻采用了“旋转的沙滩排球”，而windows则呈现了文件优雅地从一个文件夹飞向另一个。这些惯例第一时间就被网页采用了，理由很充分。当用户开始疑惑正在发生什么时，他们会一直点击或点按。这是沮丧的一种表现。他们认为这样会让进度加快一点。

    无论哪种方式，告诉用户正在发生的事情，哪怕通过一个简单的进度条，也能极大减轻精神负担……即使对于我们这些使用电脑很久的用户也是一样。

    三.讲故事的动画

    如今，用动画来讲故事已经超越了卡通。实际上，我要讲的完全不是那些动画。而是那些被设计出来与用户互动（比如向下滚动）的网站，操作引发了动画，讲述了故事。

    有些普遍例子，那些页面会在你眼前将产品“装配”起来，以此展现新产品。其他则更像卡通片，有个小卡通形象跟随你到页面的每个地方。

    这些动画的作用……存在争议。通常它们并没有提升可用性的意图，只是为了让用户印象深刻，为他们提供页面主题相应的环境。它们可能是在试图呈现一件产品的工艺，或是分享打造这件创造物的经历。

    动画能否做到这点，取决于它们本身的质量。是否过度影响了网站的性能，或是影响了页面内容本身。如果用户在网站上找不到自己要的东西，世上所有的动画效果都救不了它。

    有两个案例我的确很喜欢，它们来自深谙此道品牌：Apple和Sony。

    Mac Pro的页面，致力于向下滚动时精确呈现内部构造：

    同时，在Sony网站中，他们展现了多款不同设备。当然，“装配感”并没有那么强烈，各部分相互撞击，在火焰效果中成型。

    四.纯装饰动画

    无论好坏，有些人在网站上加入一些没有目的的动画，只是为了让人看到。这值得吗？

    值得，也可以说不值得……

    我会尽量避免，因为它使人分心。你想要人们的视线集中在商品信息和购买按钮上。让他们来此达成目的。如果网站没有提供特定的目标，或者确定目标时过于使人分心，他们就不会再回来了。

    装饰性的动画应该完全隐藏起来。在人们完成行动召唤后再展现出来。还可以包含微妙的动画，只在用户触发某个特殊操作时才展现，比如鼠标悬停在页头和页尾的某个小物件上面。

    在WDD网站中，鼠标悬停在logo上会让它动起来，虽然这点尚存争议。因为logo是个链接，并非纯装饰物，但它仍然是个不错的例子。Google随便一搜，就会找到很多带有彩蛋的网站（比如跳出一只哥斯拉并且咆哮怒吼……我不是在开玩笑）。

    还有很多其他例子，包括Google众所周知的彩蛋：

    在任何页面一路滚动到最底部，会出现一只友善的恐龙“给你拍照”。而且在有气球的页面上，画面中的气球会微妙地来回飘浮。