太全面了!网页动画设计**指南

动画曾经一直是人类的梦想之一。这种梦想甚至从远古时期的岩洞壁画上就能看出来:在岩洞壁画中,拥有许多条腿的动物是十分常见的景象。




人们对这一现象有不同看法。一些人认为赋予动物很多条腿是为了祈求后代多多繁衍,而另一些人则认为这是当时的艺术家想要在静态的图形中表现动态。我倾向于同意后一种观点。

还有什么比动态更为自然的事呢?自然界中的一切都处于变动之中,自然的本性就是变化。虽然有些变化比较隐秘,有些变化非常慢速,但一切依然都在变化。

动画就是关于变化的艺术。这也正是为何人们会说“动画让我的网站更有生命力”的原因。这句话也许听起来像滥调,但它无疑清楚地说明了网页设计中动画化的作用和目的。

网页设计动画简史

让我们先从gif开始,来聊聊动画是一步步通过互联网走到今天的……

.gif文件格式比我大两岁。它诞生于1987年,正好赶上互联网兴起的时候。如果.gif的流行能说明任何事情的话,那就是人们对让网页动起来的极大兴趣。当时人们并没有想到利用动画改善网页的易用性,只是为了给静态化的网页增添一点生动的风格。

当.gif的作用被开发到极限之后,人们又开始追寻新的网页动画手段—和声音。是的,美妙的声音。不止是MIDI,还有真正的音乐声。这时Flash便应运而生。不管后来Flash后来被如何滥用,我们必须承认Flash让互联网变得更为丰富多彩。Flash游戏也是90年代影响力大的事物之一,即便到现在,我们也觉得Flash游戏十分让人着迷。

随着时间的推移,许多设计师开始在较小的元素中使用基于JavaScript的动画,如在下拉目录和其他导航元素中等。毕竟,如果使用得当的话,它更为“SEO友好”。然而在过去的十年中,W3C一直在尝试将动画包括在CSS规范中。在2009年,**版CSS动画规范正式发布。

那么现在呢?现在,我们已经找到强制硬件渲染的方式,我们可以将CSS动画与SVG文件及JavaScript文件库结合起来,从而扩展基本的动画功能。

现在,动画对于网页设计师而言早已不是什么新鲜事物。在电影产业中,它已经被公认为是一种新的叙事手段。对我们网页设计师来说,动画正在成为优质交互设计的基础。


 
网页动画的类型

当然,如果仅仅将动画胡乱添加进网页中并期望它能为网页增色,是荒唐的。正如设计中的其它方面一样,在使用动画的时候,还应该认真考虑它的种类和使用条件。


下面,我们就来考察一下网页动画的几种典型。

作为界面元素的动画


正如我在前面的内容中提到的,这种类型的动画,其目的主要是让用户知道他们的操作(如点击)已经被识别。“点击”只是一个催化剂,它引发的行为可能是打开导航或另一个网页,打开弹窗或发送电子邮件等等。

这种动画的作用不止是一种令人愉悦的反馈形式,在扁平化设计风格大行其道的今天,它也是网页设计中必不可少的一部分。用户需要知道界面元素与装饰元素的区别。动画化的元素是一种简单而巧妙的互动方式,用户由此能获得他们需要的反馈。



等待动画

如同上面提到的动画类型一样,这种类型的动画也是为了向用户传达反馈信息。这种类型的动画意在提醒用户:后台正在进行某种操作,应耐心继续等待。

这种类型的动画很早之前就存在了。它初的表现形式包括光标变化而成的沙漏和进度条等。高级的形式则有后来苹果开发出的“死神旋转之球”和微软优雅的文件传送动画等。



也许只是一个简单的进度条,这类动画总能够有效地平复用户焦躁的心情,即使对那些很早就开始使用电脑的用户而言也是如此。Beegit是我写作和编辑这篇文章时所用的一款软件,它便使用了一个十分贴心的动画功能:在我使用它上传照片的时候,它会显示一个“进度环”,提示这些文件大概什么时候可以上传完成。正如你在下面截图中的弹窗部分可以看到的那样。



叙事型的动画

现在叙事型的动画早已超越了卡通的阶段。很多网站是为了与用户展开互动而设计的,当用户触发这种互动时,动画便开始为用户讲述故事。



然而,这种类型的动画所能达到的效果是值得怀疑的。一般而言,这种类型的动画主要不是为了提高网页的易用性,而是为了吸引用户,或为网页中的内容创造某种环境。而这些目的能否实现主要取决于动画本身的质量,动画与网页内容的结合度等因素。如果用户无法在网站中找到自己所需要的内容,那么就算把全世界的动画都放到网站上,也无法留住用户。

我特别喜爱这种动画类型中的两个例子,它们都来自有着丰富的动画使用经验的品牌:苹果和索尼。拿Mac Pro来说吧,当用户向下拉动网页时,很快就能明白动画制作者的用意:




纯装饰性的动画

有些设计师在网页中使用动画的**目的就是“让用户看到它”。但这么做是不是一个好的策略呢?这是一个难以回答的问题。

我自己会避免使用这种类型的动画,因为它会分散用户的注意力。网站的核心目的是说服用户购买你的产品或服务。你应该致力于为用户提供他们需要的东西。如果你的网站不能满足用户的任何需求,反而在他们搜寻内容时一再分散他们的注意力,那么他们很可能会不再访问你的网站。



纯装饰型的动画应该完全隐藏。只有当用户完成某项任务或操作时才可以显示它。或者,当用户启用某个非常特殊的操作时,比如将光标置于标题/脚注中的某个小元素之上时,才可以显示视觉效果不太强烈的动画。

这类动画中一个著名的例子是谷歌的复活节彩蛋动画。下面的示例来自photojojo.com:

将这个页面拉至底部,一个友好的恐龙会“为你拍照”。而且,在有这个动画的页面中,截图中出现的气球还会轻轻地从网页的一侧飘到另一侧。


广告中的动画

如果你想让自己的广告抓住别人的目光,在广告添加动画是一个有效的方法。坚持传统广告策略的人也对会对动画广告不怀好感,但如果动画广告没有效果的话,它也不会像今天这样大行其道了。

但这种广告同样具有纯装饰型广告的缺陷:它会分散用户的注意力。而对于在线销售网站而言,打乱客户的注意力可能会有灾难性的后果。


动画的执行

在动画中,技术当然是重要的。但无论你采用的动画形式是.gif,视频,CSS,SVG或是Flash,有一些基本原则甚至比技术更重要。或许你应该暂时忘掉技术,去更多地关注一下理论。你的用户会因此而感激你。

顺畅度

你或许会想:“很显然,动画应该快速,而不是慢速。”是的,从理论上而言的确如此。但问题是,我还是到处都能看到质量很差的动画,尽管它们也采用了最新的制作技术。

我电脑上的显卡是Nvidia GTX 750 TI,当初买它花了我200美元。按说以它来播放动画的话应该是很顺畅的,但有些网站的动画却让我不由得想:“上古卷轴都比这运行的更快。”---我并不是在夸张或开玩笑。.

设想一下,如果以配置更低的平板设备或智能手机播放的这些动画的话,情境又是如何。从一方面来说,这可能会让用户更有耐心。从另一方面而言,这些低效的动画会让网站失去生意。如果这些动画只能以如此慢的速度播放的话,不如干脆把网页设计成完全静态的好了。

用户不应该在等待动画播放上花费过多时间。让用户无止境地等待是失去生意的全面办法。简单来说:

• 如果上古卷轴在我的台式机上运行得比你的网站动画还要顺畅,说明你的动画存在问题
• 如果用户在看到你的主页之前,还会先看到一个加载进度条,说明网站的动画确实存在问题

在这里,我要给出一个技术上的建议:在硬件加速和播放的顺畅度上,CSS几乎总是优于JavaScript。如果能够选择的话,应该优先使用基于CSS的动画,而把JS作为备选项。

从细节元素开始


大多数网站需要的只是能让UI元素显得更“真实”,更“自然”的动画,而不是花哨的装饰。在你决定在网站中使用大量动画之前,或许应该问问自己,这么做是否真的能优化用户体验。网页中炫目的动画是否真的比文本和图片更能引导用户?

在大多数情况下,答案都是否定的。当然,不排除少数例外情况。但更多的 时候,仅仅将按钮做成动画,仅仅当用户使用联系表格后才显示(动画化的)成功提示,无疑是更好的选择。
压缩播放时间

动画应该是快速的,或者说,它应该非常快速地发生。这里我并不是在说它的顺畅度,而是在说它实际的播放速度。

在现实中,我们处理其他物体的速度与物体的大小,任务难度及物体的性质等因素有关系。但基本上,我们拿动和放置物体的速度是非常快的。如果把动作分解的话,甚至可以以毫秒来计算。

“毫秒”同样衡量动画与用户的互动时间的标准。如果超过一定的毫秒,用户就会失去对网页或产品的耐心。如果动画不够短的话,用户就会觉得它很“慢”。对于需要用户经常使用的产品,这种情况尤其明显。即使你的动画极其有趣,一连播放十遍的话,用户也会觉得无聊。

让动画具备“弹性”


在真实的世界中,物体是会“反弹”的,如果距离够远,空气阻力又小的话,反弹的情况就会很明显。

与UI元素的互动与现实中小而坚固的物体的运动方式类似。如果这些元素翻转或坠落的话,也会有一定的反弹度。

在动画中,这个特性也十分有用。我们可以让动画也具备一定的“弹性”,尤其是当物体以垂直方式运动的时候。在动画中,多制造一些幻觉总是不错的。


运动不会立即停止


运动的物体需要一定的时间才能停止,静止的物体需要一定的时间才能加速,这是物体运动的规律。在动画中,当你让物体停止或加速时,也要给它们一点时间(以毫米计)停止或加速。

 

所属类别:
设计培训
网页设计培训