网页动画终极指南

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

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

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

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

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

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

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

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

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

网页动画简史

在进入实用部分之前,我们看看互联网上的动画是如何发展到今天(这么酷)的。最初一切都诞生于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库,等等。

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

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

coffee

现在正是关注网页动画与App动画的最佳时机。科技尚没有完全成熟(什么时候会呢),也无法提供全方位支持(何时能够呢),但我们在探寻新的方式将它呈现在世人面前,无需通过插件或是专用代码。

我们越是以开放的动画标准为基础,越多的人就能首先看到。近年来人们专注于运用动画驱动交互,这是一件非常非常好的事情。

是时候成为先行者了。

网页动画的种类

回到正题。我们在谈论的是哪种动画?我的意思是,我说了很多关于使用动画改善用户界面的言论,那些究竟是什么意思?

很显然,我们不能将动画效果随手加于网页元素之上,然后期盼它能提升转化率。那太傻了。就像设计的所有其他方面,使用哪种动画,何时使用,这都需要仔细考虑。

infographic

实际细节与实现也是必须考虑的。如果你的动画过于耗费资源,拖慢用户的移动设备,或者更糟的是拖慢他们的桌面设备,这就有问题了。很多问题。

我们由此入手,看看网页上几种典型的动画:

界面元素动画

我不知道这是不是最普遍的一类动画,不过我猜是的。它应该获此殊荣。在我的观念中,这是最有用的动画类型。

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

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

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

profoods

等待动画

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

这类动画的作用很久以前就得到了印证,就在图形化用户界面首次发明的时候。最早的方式是鼠标指针变成沙漏,还有进度条也是。Apple在某时刻采用了“旋转的沙滩排球”,而windows则呈现了文件优雅地从一个文件夹飞向另一个。

loaders

这些惯例第一时间就被网页采用了,理由很充分。当用户开始疑惑正在发生什么时,他们会一直点击或点按。这是沮丧的一种表现。他们认为这样会让进度加快一点。

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

Beegit是一款写作应用,我用它来撰写和编辑这篇文章。它提供了一个便捷的“进度圈”,告诉我图片何时会上传完成,在模态窗口的左上角可以看到:

screenshot-beegit.com 2015-04-01 14-03-34.png

讲故事的动画

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

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

kennedy

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

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

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

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

mac_pro

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

纯装饰动画

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

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

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

brightmedia

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

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

还有很多其他例子,包括Google众所周知的彩蛋,下面这个来自photojojo.com:

screenshot-photojojo.com 2015-04-01 14-21-49.png

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

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

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

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

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

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

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

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

动画的实现

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

性能,性能,还是性能

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

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

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

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

我们将这些分成几点:

  • 如果《上古卷轴》比网站的桌面端运行更流畅,那很糟糕。
  • 如果用户看到主页前要等待加载动画,那相当糟糕。

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

从细微处开始

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

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

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

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

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

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

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

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

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

有时要让物体具有弹性

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

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

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

物体不会突然停止

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

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

链接

终极指南如果没有一个满是链接的章节,就是不完整的。下面来了。我们整理了一些文章链接,围绕网页动画背后的基本理论、入门教程,还有大量案例。请尽情享用。

网页动画理论

开始做动画前还想了解更多信息?没问题。这儿有一大堆聪明人的建议,其中一些还对网页动画的未来作了预测。

Animation Principles for the Web 这篇文章围绕CSS动画。描绘了运动物体背后最基础的原则。仔细看看他们网站的其余案例、教程和邮件课程。(不过,邮件课程是收费的)

Invisible animation Steven Fabre告诉我们动画要如何像设计本身那样,基本不可见。读了之后你就不会觉得这句话矛盾。快去吧。

Will animation be the big UI trend of 2015? 对于动画的指导原则做出了一些很棒的推测性的阐释,如果再短点就好了。

The Role of Animation in Web Design 另一则简单基础的建议。短小精悍,当你每次需要做出动画方面的重要抉择时,都值得回来重读一遍。可以将它作为记录思想的便条。

The State Of Animation 2014 Rachel Nabors出品,一套非常棒的总览,(或多或少)讲述了网页动画是如何完成的。你还会见到她的名字好几次,因为她是这个领域的专家。

Five Ways to Animate Responsibly Rachel Nabors的又一篇干货(我早说过还会看到她的作品……)。这篇中,她重温了5种加入动画同时不会疏远用户的方法。

教程

关键在这里!学习更多你想都没想过的CSS属性。学习easeIneaseOut的区别——其实我也要查阅一下。

4 Simple CSS3 Animation Tutorials 跳过简介部分,直达干货,如果这样符合你习惯。我在下面还包含了很多引导性的教程。如果你想直接看一些基础代码,请由此开始。

A Beginner’s Introduction to CSS Animation 正如标题所描述的。只要你有基础的HTML和CSS知识,就能跟上这个教程,掌握一些有用的基于CSS的动画知识。

The Guide To CSS Animation: Principles and Examples Smashing Magazine为读者奉献了大量的基本动画。这是简单却有价值的知识。

Flashless Animation 又一篇很好的CSS动画介绍,传奇的Rachel Nabors出品。没错,它是2012年的文章,但那时与现在的唯一区别,是她提供的技巧如今得到了更多浏览器的支持。

Codrops tutorials 我说真的,Codrops的这些家伙,推荐多少次都不为过。他们创作了大量的案例、概念样品、灵感收集,当然还有教程。他们热爱动画,并且做了许多来分享他们的爱好。

这里是一些他们创作的动画相关的教程:

CSS3 Transitions, Transforms, Animation, Filters and more! 深入全面的交互教程,大量生动的案例。当你完成了大部分基础教程,可以来这里看看。它给你很多用于练习的创意。

Transitions & Animations 一篇简易CSS动画教程,特别关注transition和相关属性。

Shaking Up The Web With CSS3 (How To Make Links Shake) 重点讲述晃动物体的教程。我是指……看看就知道了。

High Performance Animations 这篇教程由众人爱戴的Paul Lewis和Paul Irish联合创作完成,关注如何在不拖慢浏览器的情况下完成动画。由于这点在移动端尤其重要,很值得一读。

Tutorial: Using animation-fill-mode In Your CSS Animations 在学了这么多让物体运动的方法后,还可以学着处理那些尚未移动、或是运动完成的物体。有时候样式会很棘手,这就是为什么需要animation-fill-mode属性。

Keyframe Animation Syntax css-tricks.com提供的一些非常有用的片段。不记得如何设定keyframe来达成目标?收藏这篇,就再也不用担心了。

A Look Into: Cubic-Bezier In CSS3 Transition 这篇完全是关于时间。我是指动画字面意义的时间。更确切的说,是讲述使用贝塞尔曲线来使动画节奏适中。

弹跳物体! 我发现两个不同的教程,讲述如何打造弹跳动画。每个都采用了不同的方式,有一些其他所没有的内容。犹豫不决之余,我干脆把两者都放出来。

Create a CSS Flipping Animation CSS Transitions, Transforms & Animations – Flipping Card

Animating CSS3 Gradients 多数动画教程都假定你是要改变物体的几何形体或在页面上的位置。这篇则教你如何改变他们的内部……在本例中是指渐变。

 

标题图:动画图片,来自Shutterstock

原文链接

作者信息:

EZEQUIEL BRUNI

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy. More articles by Ezequiel Bruni

#专栏作家#

可乐橙,微信公众号:可乐橙(colachangreen)。人人都是产品经理专栏作家,UI/UX设计师,关注互联网,关注科技。现居杭州,与小伙伴们正在创业途中。或许不是一名优秀的设计师,至少是个快乐的设计师。

转载请保留上述作者信息并附带本文链接

您的赞赏,是对我创作的最大鼓励。

评论( 1

登录后参与评论
  1. 我是个前端攻城狮,看完了,现在正在继续看提供的链接文章,挺好的,特别对那些原理又有了一定的了解~ :smile:

    回复
加载中