长文多图!超实用的网页动画终极指南 - 优设网 - UISDC

长文多图!超实用的网页动画终极指南

2015/06/15 17424评论区

ultimate-guide-to-web-animation-1

编者按:今天这篇重磅推荐一下,全文近6000字,从网页动画的简史、种类到实现都有特别细致的讲述,附大量原生教程,帮你彻彻底底掌握这个点。特别感谢译者@十萬個為什麽 的辛勤付出,同学们记得给他点赞哟 >>>

译者的个人网站也很有趣,推荐关注下:可乐橙

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

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

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

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

6kl20150615

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

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

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

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

网页动画简史

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

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

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

7kl20150615

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

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

是时候成为先行者了。

网页动画的种类

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

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

8kl20150615

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

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

界面元素动画

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

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

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

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

Pro-foods

9kl20150615

等待动画

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

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

原文作者的网站不对,可参见:《让等待变爽快!一组加载体验超舒服的网站设计欣赏》

11kl20150615

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

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

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

10kl20150615

讲故事的动画

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

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

Kennedyandoswald

12kl20150615

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

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

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

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

Apple

14kl20150615

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

纯装饰动画

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

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

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

Brightmedia

13kl20150615

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

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

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

Photojojo

15kl20150615

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

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

广告。对于某些网站来说就是他们收入来源(咳咳),对于另一些网站则如同瘟神。给广告加上动画,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属性。学习easeIn和easeOut的区别——其实我也要查阅一下。

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

【优设指南类好文人气榜!】

Top 1:作者自学成功的亲身经验,实用性高!
《超赞!设计师完全自学指南》

Top 2:从新手技巧到高手教程都在这儿了!
《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》

Top 3:集合多位交互大牛的经验合集!
《交互设计师修炼指南!教你从零开始成为优秀交互设计师》

原文地址:webdesignerdepot
译文地址:colachan
译者:@十萬個為什麽

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量96万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ultimate-guide-to-web-animation

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里