文 / 可乐橙

　　动画是人类毕生的理想之一(如果像某些历史学家相信的那样)。这个理论源起于洞穴壁画：在某些洞穴壁画中，经常见到一些生物被画上远多于正常数量的肢体。

　　这背后有很多套理论。有些指出这很简单，因为艺术家们并没有方法可以擦除这些肢体，于是将他们的错误留在壁画上，传给了子孙。还有理论相信，这些是最早的试图在静止图像中捕捉动态的方法。我选择相信后者。

　　还有比捕捉动态更加自然的愿望了吗？自然界的一切都在运动。人在行走，水在流动，植物开枝散叶，自然界唯一不变的就是变化，以一种运动的形式。有些在模糊中一闪而过，有些则慢到难以察觉，但这些都在发生。

　　动画对于网页设计师已经不再新奇……它正在成为最基础的交互设计效果。

　　动画就是变化，是一种运动。它是我们艺术创作中最接近真实反映生活的东西。这就是为什么人们总是说“动画使我们的网站(或是演讲，诸如此类)鲜活起来。”这可能是陈词滥调了，但这个词很优美地呈现了动画在网页设计中的目的。

　　正确使用运动感，可以告诉用户他们完成了某些操作。他们成功地与界面进行了交互，引发了某些变化。

　　人们与真实物体互动时，也会触发并体验到相同的感觉(至少是类似的感觉)。就某种程度而言，动画是拟物的。没错，我说的就是拟物。

　　使用得当时，动画可以被设计成模仿真实世界的交互。我们似乎在原地打转。可能我们不会再过多使用复杂的皮革纹理，但我们仍然在尝试效仿现实世界。

　　网页动画简史

　　在进入实用部分之前，我们看看互联网上的动画是如何发展到今天(这么酷)的。最初一切都诞生于gif图……

　　原来.gif文件年龄甚至比我还大2岁。它们在1987年被创造，正是早年我们刚知道(或多或少)互联网的时候。因此开创了跳舞婴儿的，那些东西太可怕了，还是忘了好。

　　如果gif图的流行告诉了我们什么，那就是人们想要将动画引入网页中。在此提醒一下，多数人可能并没有从改善可用性的方式考虑动画。一切都只是为了产生一点个性，表现一点生机，与其他静止的网页区分开。

　　现在正是关注网页动画与App动画的最佳时机。

　　当.gif文件的能力耗尽后，人们想要一种更好的方式，来向网站中添加动画。对，声音！声音太棒了。如果人们打开你的网页，开始播放你最喜欢的歌曲，这得有多棒啊？要像真正的歌曲……而不是那种破烂电脑音乐，对吧？

　　是Flash让我们艰难地学到了这个教训。但是别忘了Flash在它所处的年代是相当惊艳的。实际上它是一种革新。它是一种进步。它非常酷。

　　无论后来它被如何滥用，要知道Flash让我们在互联网中做一些从没想过的事情。它拓宽了创意的视野，为人们在一个崭新的行业创造了工作机会，带来了“网页动画”和90年代最棒的东西(除了天堂)：Flash游戏。甚至直到现在，我都觉得那些游戏使人入迷。

　　随着时间推移，很多设计师转移到基于Javascript的动画上，用于创造一些小东西，比如下拉菜单和其他导航元素。毕竟如果做得恰当的话，这更有利于SEO。其他人只用Javascript是因为，那正是FrontPage和DreamWeaver调用按钮图片的方式。微小的进步仍然是进步。

　　00年代中旬，W3C已经在努力将动画加入到CSS规范中。2009年，首份公开的CSS动画规范初稿就发布了。

　　如今呢？我们探索出了强制硬件渲染、CSS动画结合SVG文件、延伸基本动画功能的JavaScript库，等等。

　　现在我们正在探寻各种方式，不仅仅是为网站增添风格。我们在试图改善可用性，告知并教育用户，让用户更容易了解他们在做什么。

　　对于网页设计师，动画不再是新奇事物。它成为了影视行业的基础，一种全新的叙事方式。对我们而言，它成为了有效交互设计的基础。


　　讲故事的动画

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

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


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

　　广告中的动画，可以说：内心抗拒，钱包却不听使唤

　　广告。对于某些网站来说就是他们收入来源(咳咳)，对于另一些网站则如同瘟神。给广告加上动画，duang！视线就被吸引过去了，违背了本意。这是个条件反射动作。

　　再加入声音，用户会感到强烈的憎恨……这也是条件反射。

　　但这几乎无法避免。如果想让人看广告，让它动起来就是个好方法。这可能在某些自我标榜“不喧宾夺主”的广告平台那里不受欢迎，但如果动画广告不起作用，我们就不需要它们了。

　　不过这种动画也有着与装饰性动画相同的问题：将用户的注意力从主要任务上分散开。这个在线销售的世界，分心就意味着死亡。

　　最终，衡量利弊还取决于你。没有广告、低调的广告、或是动画广告，都需要权衡。

　　你可能注意到了，我前面一直没提过启动界面动画。那是因为我觉得大家都已经很了解了。

　　动画的实现

　　技术实现方面也很重要，但无论你用.gif图、视频、CSS、SVG、甚至Flash(天哪)，都有一些更重要的原则。暂时忘掉你打算使用的技术与技巧，再多做一些理论储备。用户会感谢你的。

　　性能，性能，还是性能

　　你会想，“当然，这很明显。动画应当运行流畅，不能卡顿。”正确，这在理论上确实显而易见。但问题是我仍然能看到一些网站，虽然用最新技术构建，动画却很卡。

　　我的Nvidia GTX 750 TI显卡要200美元。你的动画没理由卡。最近有些网站让我觉得，“《上古卷轴》运行也比这流畅。”我没有开玩笑说大话。

　　现在，想象一下在低分辨率的平板或手机上，浏览那些网站是什么样子。一方面，这是个检验个性的方法，但另一方面，它无法给这些龟速网站带来任何业务。如果你的印象中只有卡顿的动画，或者压根没有动画，那还不如让界面元素直接各就各位。

　　这就是说，那些加入了诸多动画和特效的网站也不怎么样，它们需要加载界面和进度条。没有人在看到想要的信息前，有义务等待动画加载。让人等待，就是你业务流失的方式。

　　我们将这些分成几点：

　　如果《上古卷轴》比网站的桌面端运行更流畅，那很糟糕。

　　如果用户看到主页前要等待加载动画，那相当糟糕。

　　在此我要给出一点技术层面的建议：考虑了硬件加速和性能之后，CSS几乎总是优于JavaScript。有选择时，使用基于CSS的动画，将JS作为备选。

　　从细微处开始

　　将动画当作设计工具而非样式表现时，最好从细微处着手。比如，微小低调的动画表现更好(见上一章)。第二，巨大炫目的动画必须带有实用的目的，不能只为了“好看”。

　　除了那些让UI元素感觉“真实”和接近自然的动画，多数网站都不需要任何动画。想像一下婚礼上撒米祝福的场景，加入那种视觉差滚动效果之前，问问自己，它真的改善了用户的体验吗。巨大炫目的东西在屏幕上四处移动，比常规文字和美丽的图片更能告知和引导用户吗？

　　多数情况下，答案很可能都是“不”。当然也会有例外。例外总是会有。但多数时候，让按钮动起来，让隐藏的导航条滑入，用动画移除发送客服邮件后的成功提示，这就足够了。

　　微妙是好设计的关键，这点往往被低估。以此为起点，然后如果你能确信，更大更闪耀的东西在用户体验方面更符合你的目标，那么再全力以赴！

　　持续时间要短，或者说：我觉得有必要加快速度

　　动画要快，准确的说，应该发生得快。这里我不是在说性能，而是一个物体在运动过程中实际耗费的时间。

　　想想我们如何与真实物体互动。有时候我们动作很快，有时慢。我们操作物体的速度，取决于它的尺寸。是顺手而为的任务，还是像端着满满一碗水那样。通常我们会很快地拿起物体，快速移动。单个动作可能发生在毫秒间。

　　在我们度量界面动画时，“毫秒”是最通常的度量单位。再长的话，人们就会开始对机器或产品、或是两者失去耐心。得确保它够短，不然让人感觉迟钝。

　　对于人们反复使用的产品，这点尤其正确。即使某个动画相当有趣好玩，第10次看到时也会失去吸引力。它只是个跳动的按钮或是滑动菜单，而不是你最爱的电视节目的片头。没有人会为此随声附和。

　　有时要让物体具有弹性

　　真实物体都会回弹。有些并不明显，但基本上所有的物体都有一点弹性。如果将它从足够高的地方扔向坚硬的表面，而且如果没有太大的空气阻力的话……总之你懂我意思。

　　与UI元素交互就像在操作硬质的小物体。将它们抛到一边，它们回弹一点。扔下去，也会回弹一点。

　　因此这很有帮助，适当时候让你的动画“回弹”，尤其是当它们垂直移动的时候。这都是在维持运动感。

　　物体不会突然停止

　　移动中的物体需要一些时间才能静止。静止物体需要一定时间加速。耶，物理现象！

　　所以，当你使物体移动或停止时，记得给他们一些时间(以毫秒计)来减速或加速。这个叫做“缓动”，这个功能被置入了CSS中。

声明：游资网登载此文出于传递信息之目的，绝不意味着游资网赞同其观点或证实其描述。

锐亚教育，游戏开发论坛|游戏制作人|游戏策划|游戏开发|独立游戏|游戏产业|游戏研发|游戏运营| unity|unity3d|unity3d官网|unity3d 教程|金融帝国3|8k8k8k|mcafee8.5i|游戏蛮牛|蛮牛 unity|蛮牛