后Flash时代的Web动画

本文概述

• Web动画如何开始, GIF的兴起
• Flash Web动画的黎明
• 今日网页动画
• 为什么要使用网络动画？
• 网络动画的优缺点

在这种竞争激烈的环境中, 公司正在疯狂地寻找方法来吸引并留住人们的注意力。在我们的日常生活中, 无尽的视觉刺激源于街道上的动画广告, 手机上的视频(更不用说我们的社交媒体供稿)涌向我们, 营造出一种持续不断的运动感, 吸引着我们的注意力。

对我们环境中运动的瞬间反应是出于生存的需要而产生的, 并被认为是潜在威胁或有害的环境刺激所触发；人们特别注意移动的事物。当我们捕捉到一些快速从眼角移出的东西时, 大脑会在一秒钟内向我们发出警报, 因为我们的潜意识大脑已经在意识的大脑有时间处理信息之前对危险做出了反应。

广告商知道这一点, 这就是为什么我们在公交车站和地铁站台上播放街头动画广告, 在社交媒体流中弹出视频广告以及带有全动态视频的电子广告牌的原因。该技术是一种旨在传递营销信息的一拳两击的效果。首先, 通过吸引我们的注意力, 其次, 使用视频和动画来传达信息。

如果一张静态图片值一千个单词, 那么动画值多少钱？

这就是Web动画的用武之地。Web设计师希望抓住并保持我们的注意力, 并可能会带来意想不到的喜悦。 Web动画可用于可视化复杂过程或构想中的各个步骤, 以说明简单的营销信息, 或随着人们的滚动以自然而流畅的方式在网页上移动事物, 从而再次引起人们的注意。

具有动作和网络动画的登录页面(由Mason Yarnell为Mixpanel提供)。

Web动画如何开始, GIF的兴起

在万维网的早期, 事情是相当静态和无聊的。网页主要基于印刷世界的图形设计和布局。但是, 尽管存在技术和带宽方面的挑战, 但一些设计人员齐心协力, 包括了早期形式的网络动画, 以使其更具活力和吸引力。 1995年, 杰弗里·扎德曼(Jeffrey Zeldman)的《蝙蝠侠永远》(Batman Forever)首次在网站上添加了GIF动画。

蝙蝠侠永远促销网站是当时最受欢迎的网站之一。它启发了其他Web设计师和开发人员将GIF Web动画作为一种古怪, 引人注目的元素纳入其网站。

快进20年和动画GIF到处都是。它们在Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram和Facebook上。 GIF适用于短循环动画, 图像序列, 甚至短视频循环。不幸的是, GIF文件格式没有透明的可变性, 也不支持Alpha通道。因此, 所有像素都是完全不透明或完全透明的。

GIF动画是网页设计复兴的开始, 但并不理想。特别是在拨号上网和互联网速度较慢的早期, GIF就是带宽消耗。结果是一个低分辨率的像素化序列。设计人员不得不将GIF压缩到最小尺寸的缺点是有限的8位调色板, 这导致了很多抖动。随着21世纪高速互联网的普及, 这种情况发生了变化, 结果, 网络动画在数百万种颜色下变得更好看, 并且在更高的帧频下变得更加流畅。

Flash Web动画的黎明

随着1996年Macromedia宣布其Web插件和随附的基于帧的动画工具：Macromedia Flash(在他们收购了矢量动画程序FutureSplash Animator之后), Flash的引入引起了网络动画的巨大发展。 Flash在将新功能引入Web方面发挥了领导作用。从音频和动画到交互性和视频, Flash帮助推动了互联网的发展。

在包括交互在内的整个网站上构建简单, 精简, 基于矢量的Web动画的机会创造了可以称为Web设计的”巴洛克式”时期, 其中(太多)动画元素拥挤了整个景观。尽管如此, Flash还是提供了动态网页设计的可能性的一瞥, 使设计人员有更多的时间进行实验, 并释放了一段快速的网页设计发展历程。

Flash动画轻巧且相对易于制作。它们只有几千字节大小, 以SWF文件格式分发, 并且使用带有清晰矢量图形的声音进行分发。创建网络动画成为简化的过程, 并没有增加太多的网页加载时间。但是尽管如此, 仍然存在一个明显的缺点-运行它需要一个浏览器插件。

具有图层和基于时间轴的界面的Flash动画软件工具。

另外, ActionScript(AS)是Flash中复杂的交互功能, 它是一种类似于JavaScript的面向对象的编程语言。 ActionScript最初被设计为控制简单的2D矢量动画, 但随后演变为复杂的工具。

不幸的是, Flash动画本来并不是想要响应的, 并不是在所有设备上都能正常运行, 并最终从所有流行的移动设备上删除。尽管文件大小相对较小, 但Flash没有进行优化, 最终导致CPU饥饿, 这也是移动设备上的问题。在乔布斯决定不支持Apple移动设备上的Flash之后, Flash时代就此终结。

Flash是在PC时代为PC和鼠标创建的。但是移动时代是关于低功耗设备, 触摸界面和开放式Web标准的, 而Flash是所有这些领域的不足。史蒂夫·乔布斯

在Adobe Flash中创建的网络动画。

今日网页动画

如今, 由于Flash已过时, 我们对Web动画有不同的需求。工具必须灵活, 轻便。 Web设计人员必须考虑到各种屏幕尺寸, 浏览器, 长宽比, 像素密度等, 为不同的设备(台式机, 平板电脑和移动设备)创建自适应的适应性内容。我们的网络动画杰作必须能够在5英寸, 720像素的移动设备上工作, 再到9.7英寸的QXGA平板电脑, 再到32英寸的Retina 6K显示器都可以工作。

技术已经成熟到某种程度, 即使功率不足的移动设备也具有带宽和处理能力, 可以处理非常苛刻的Web动画和高分辨率视频内容。这并不意味着网站应该超级”忙”。与往常一样, 这是在动画, 动态互动和静态元素之间取得适当的平衡。今天我们可以实现很多精美的网络动画这一事实并不意味着我们应该这样做。

Web设计人员/动画师还必须考虑跨平台支持。十年前, 设计人员不必确保自己的创作在如此广泛的设备上看起来不错。必须考虑不同的宽高比, 纵向和横向方向, 以及各种像素密度和观看距离。这个难题向网页设计师提出了一系列新的挑战和潜在的陷阱。用户测试会浪费宝贵的时间, 在许多平台上可能会出错, 并且网络动画必须比以往更加详细。

HTML5, CSS3, JavaScript和SVG(可缩放图形)似乎是Web动画的最佳解决方案。使用这些现代的网络技术和语言将有助于解决大多数(但不是全部)上述问题。但是, 谨慎行事始终是个好主意, 尤其是在未知领域中, 并且必须进行广泛的质量检查和测试。

为什么要使用网络动画？

与静态网页相比, 网络动画可以使人们的注意力吸引并持续更长的时间, 并且可以更清晰, 更有效地传达想法或概念。出色的网络动画传达了每一个动作背后的故事。这就是将动画赋予生命的意义和”灵魂”(迟来的动画)。

网络动画应流畅, 有意义, 并支持访问者的旅程。 Web设计人员/动画师需要了解动画如何适应用户体验, 尝试预测可能的用户流, 然后以有意义的方式对其进行支持。

网络设计师不得纯粹从技术角度来看网络动画；他们需要从用户的角度来看它。

动画是动画的基本要素之一。适当的时机赋予动画以物理和情感上的意义。经验应该是无缝的和合乎逻辑的。如果动画不流畅(出现时间问题), 人们可能会认为它是错误, 并失去了进一步浏览网站的全部动力。

动画师需要使用适当的时间来提供预期的效果。动画中应使用几个关键帧？动画中的哪种动态变化是由于访客的交互作用引起的, 并且在交互之后响应速度有多快？动画异想天开, 严肃有趣吗？

从逻辑角度来看, 我们可以将网络动画分为两种基本类型：

• 静态的非交互式Web动画, 例如GIF动画。
• 具有用户参与度和交互性的动态Web动画, 可根据用户输入进行更改。

动态动画的最佳示例是游戏, 用户可以在其中操纵屏幕上的内容。另一个简单的示例是, 当网站访问者滚动浏览视差滚动网站时, 更改某些元素的位置。动画不是被动的, 它取决于用户的动作。

动态网络动画通常用于在网站上显示动画图表, 因此人们在滚动页面时会更加注意特定区域, 这是突出显示相关信息的有效方法。

网络动画的优缺点

以下是网络动画技术的一些利弊, 包括不再使用的旧版解决方案。

一般而言, 网络动画的优缺点如何？执行良好的网络动画仍然显得不合时宜, 因此, 在继续将动画集成到网站设计中之前, 提出一些关键问题(以及测验客户和其他团队成员)总是一个好主意。

首先, 我们需要检查动画将如何影响用户体验。会改善网站的用户体验吗？设计师应：

• 检查现有的网站设计(如果有)
• 检查目标受众及其使用的硬件平台
• 检查站点加载时间和CPU负载
• 探索其他替代品
• 留意可用性

在网站上使用网络动画来简单地跟踪趋势不是一个好主意。

使用网络动画的决定应被视为任何其他设计决定；网站设计师必须权衡利弊, 并确保不损害用户体验。他们还应该与开发人员合作, 以确定代码要求, 并确保他们不会陷入可能不得不加以调整的低效代码。

在过去的20年中, 现代Web动画技术已经显着成熟, 性能, 可用带宽和渲染质量都得到了提高。但是, 设计人员应该谨慎行事, 并且只有在动画可以显着增强用户体验的情况下, 才将动画添加到网站中。

• • •

在srcmini设计博客上进一步阅读：

• 如何创建自定义加载动画以降低跳出率
• 立即使用Sketch和Looper创建可弯曲的插图
• 使用原理和草图的UI动画分步指南
• 徽标动画的灵感使你的品牌更加与众不同
• 创建动画产品说明视频的分步指南