回到目录

[前端知识体系] 动画的意义

2017-04-04

动画的意义是什么,这是我在 2016 年经历过最多的反思。作为网页动画的实现者,经常需要在网页中实现各种动效,但其内在含义却未曾深思过,没有深度认同的前提下的工作往往是无用的,所以经过一段时间的学习,这里试图总结动画的意义与作用。
 
同时,这里也特别说明,本文把「动画」和「动效」做了等同处理,严格来说「动画」从故事性、完整度、时间长度和精细度都超过动效,动效则简单微小,基于某些操作和交互。但这里不做严格区分。也有人称其为 Motion Design(动态设计),或 Motion Graphic Design(运动图形设计)。

一、什么是动画

什么是动画?动画是什么?动画是真实世界的反映,是关于时间的画像。它是我们艺术创作中最接近真实反映生活的东西。正因为这样,网页设计中才如此需要它,人类对真实而自然的反馈是有本质需求的,这里的反馈可以指视觉上的、听觉上的、触觉上的、嗅觉上的等等。

拿视觉这部分来讲,我们希望看到的东西真实,符合自然规律。为什么我们会对电影逼真的 CG 效果大为赞叹,因为它逼近真实而且超越真实,能引发内心共鸣甚至创造未曾感受过的体验。再反观国产动画或电影特效,分分钟让人出戏,虚假而浮夸,无法投入感情。

所以,对于一个生活在真实世界中的人,「真实」已经成为了我们衡量万物的「一把尺子」,也许你注意不到,但它就在那里。这也是为什么我们需要通过网页中的动画来还原真实感,让用户在使用的过程中不会眉头紧锁。

现在的互联网行业,动画对于网页设计师已经不再新奇,它正在成为最基础的交互设计效果。为什么,罗子雄在知乎是说出了其中一部分原因:

目前 UI 圈重视动效的几个原因:
* 扁平化后视觉层级变的更模糊难以定位,动效可以辅助交互层级定位
* 扁平化后复杂的动效更容易实现,曾经拟物化全是各种位图,只能做简单的 tween 或者用序列做,现在没那么麻烦了
* 中间件的成熟让开发带动效的 UI 从开发层面更方便
* HTML5 的成熟让 App 圈的 UI 设计师看到了很多 Web 圈的动效于是拿来用
* 移动平台性能变强后以前动画很多性能障碍被扫除
* 扁平化把设计水平拉的很平后设计师真的不知道该干什么了……

二、动画的分类

1、功能性动画

功能性动画的核心是什么:解决用户需求。

① 如满足用户对界面关系感知的需求:帮助用户在界面中定位并建立逻辑关系。我们的大脑和眼睛会快速注意到移动的目标。动效可以帮助眼睛注意到新的目标出现或者一个目标的隐藏。通过对系统的解释,动画允许用户持续的思考一个任务,而无需回想之前的操作。有助于用户理解界面,提高使用效率。而且还使界面的体验更愉快更舒适。

举个例子,在 iPhone 中打开一个 Folder(文件夹展开,注意是展开而非直接出现),再从 Folder 中打开一个 App(App 从小变大到占满屏幕,而非直接出现),这个过程的切换会让你感受到无比的自然和明晰,知道你目前所处哪个环节,不带任何疑惑。

Mac 中 Finder 最大/小化也是同理,你可以清楚知道界面的层次和逻辑关系:


图片来源

再对比 Windows 的做法(反例):


图片来源

spell 在知乎里这么说:

我们正在进入一个信息复杂度超越以往任何年代的纪元。人脑能处理的信息,是有一定维度的,从今往后我们设计师要做的,不仅仅是考虑用户的使用体验,更多的是使用设计为用户所接触到的信息进行“降维”。而做到这一点的方法,就是通过细节对于用户进行引导。

② 满足用户交互预期的需求:让用户了解他们的每个动作以及下一步即将发生的事情,优化用户对界面的感知,使其感到更轻快更全面。 比如点击反馈、滑动反馈等。

③ 满足用户对进度掌控的需求:最典型的就是加载/loading 动画了,它诞生于图形化用户界面首次发明的时候。

最早的方式是鼠标指针变成沙漏。Apple 在某时刻采用了「旋转的沙滩排球」,而 Windows 则呈现了文件优雅地从一个文件夹飞向另一个。无论哪种方式,告诉用户正在发生的事情,哪怕通过一个简单的进度条,也能极大减轻精神负担。

2、物理性动画

物理性动画的真正意思是,让你 UI 符合空间逻辑并根据物理定律做动画。当你的动效考虑到像重力和惯性,速度和刚性,它就显得很真实,用户会觉得更加自然,当然就有助于快速形成使用习惯,因为这些动效都是熟悉并可预知的。这也符合我们对「真实」的内在需求。

提炼一些关于物理性动画的关键词:重力、加速度、运动模糊、惯性、反弹、阻力。


图片来源


图片来源

3、趣味性动画

让动画成为你的品牌的一部分,让内容变得生动起来。

① 交互式动画:通过与用户交互(比如向下滑动)的操作来触发了动画,讲述了故事。


图片来源

还有跟物理传感器相关的交互动画:


图片来源

跟某些操作隐喻相关的动画:


图片来源

② 彩蛋类动画:没有明确告诉你如何触发,但在不经意之间让你感觉额外惊喜:


图片来源

总结:

  • 功能性:缩小理解鸿沟,告知用户系统正处于什么状态。
  • 物理性:遵从真实世界的物理认知,让界面变得可预测。
  • 趣味性:能够创造情感上的共鸣,营造愉悦感。

三、动画的好处

1、更高效地传达信息

一个好的动画比任何文字和插画都能快速表达一段故事。动画是语言,是世界通用,因此你没必要把动画翻译成英语或日语。正确的界面转换动效可以让你用户快速养成使用习惯。

在网页中,动画可以展示产品的功能、界面、交互操作等细节,让用户更直观的了解一款产品的核心特征、用途和使用方法。


图片来源

2、品牌塑造

什么样的品牌设计能够让用户记住?除了其视觉设计以及背后的文化输出,还能通过动画来传达。举个例子,说起 Meterial Design 就能想到 Android:


图片来源

20 世纪福克斯片头(还有那只狮子吼的片头记得是哪家公司不?):


图片来源

3、符合自然

符合自然也就是真实,上面多次提及,这里就不再赘述了。人是自然的一员,生活中接受到的所有反馈都是自然的相互作用。没有运动的物体能瞬间停下;没有碰撞的物体能不经历反弹;没有物体可以没有重力;

所以即使在网页上,人们都需要得到「符合自然」的预期:我点击按钮需要有挤压反馈;我滑动页面会慢慢减速下来;人们与真实物体互动时,也会触发并体验到类似的感觉。好的动画设计应该是自然无感的,因为「处处皆自然」。

4、用户体验

动画跟用户体验有什么关系?用户对产品的体验如何,来自于它对从产品里获取到的反馈,这里的反馈会直接影响用户的情绪,如愉悦、平淡、焦虑、失去耐心。正如等待太久用户会毅然关闭网页,而良好的 loading 设计可以缓解这种焦虑感,这不就是在提升用户体验。

5、吸引注意

这是对动画最最最基本的认知了,人类会对运动的物体会投以更多的注意。也许是来自于动物的本性,在远古时期因为对环境中运动物体的敏感,能够发现危险保全性命。但来源不重要,吸引注意是动画最基础且影响最大的作用之一。

6、创造惊喜感/趣味性

产品使用久了自然会逐渐厌倦,正如两个相处久的夫妻同样会觉得生活平淡无味。所以偶尔来点「小浪漫」不仅可以提升彼此的「新鲜感」和「互动性」,还可以增强感情冲淡无味。

同理,动画也可以为常规的操作增加点「小浪漫/小惊喜」,重新刷新用户对产品的感知,并提升好感和忠诚度。

7、氛围营造

这在游戏里会运用的比较多,如光影、烈焰。视觉冲击。网页里常用的节日氛围。


图片来源

相关链接: