超急干货!有生命力的交互动效12条原则!(附案例实操)

我这里想要讨论的,是传统动画的设计思路如何运用于交互界面。换句话说,我们这里要先讨论如何“炫技”,然后再根据具体情况进行“收敛”。

标题中所谓“有生命力的动态效果”,即用符合有机体动力学特征的运动方式(Dynamic motions)去表现物体的动作。传统的游戏、动画等长期以来都有着力于创造这种由生命力的动态效果。随着技术的进步,越来越多的网站或APP也都倾向于借鉴游戏和动画的做法,用更为软性和拟人化的动态方式穿插或点缀。大到整体视觉表现,小到页面切换方式、互动反馈动画、动态icon、loading动画等等,都会涉及。它有效地淡化了一般概念里电子设备的“高科技”距离感。避免了僵硬机械化的动态,而选用更灵活、软性、有机、有弹性的运动方式。只要把控得当,细节入微,适量的有生命力的动态更有助于贴近用户,使操作体验的好感度增加。

Sergey Valiukh – GIF Animation of an App

超急干货!有生命力的交互动效12条原则!(附案例实操)

Hoang Nguyen – Pull down and refresh

超急干货!有生命力的交互动效12条原则!(附案例实操)

每次看到这些动效神作,总会不自觉盯着研究几十次,细细体会设计师那种对于细节的追求。从动画的基础上来讲,还是可以总结出一定可循的规律的。1981年出版的《The Illusion of Life:Disney Animation》一书中,动画制作人Ollie Johnston和Frank Tomas确立了迪斯尼经典的12条动画经典原则。这些原则因其实用性和可延展性,不断地被后来的动画制作人沿用至今。对于现在新媒体平台的动态设计而言,这些原则也有非常好的借鉴意义。

The Illusion of Life:Disney Animation (Wikipedia)

超急干货!有生命力的交互动效12条原则!(附案例实操)

1、挤压与拉伸(Squash & Stretch)

任何物体在进行运动的过程中,多少都会受到各种力的作用,被自身质量挤压或拉扯伸展而产生变形。加上动画独有的夸张表现方式,会使物体的动态看起来有弹性、有质量、更有“活物”的感觉。拉伸效果有助于营造速度感,当用在交互界面时,可以参考此原则创造干脆、利落的视觉观感。

Squash & Stretch

超急干货!有生命力的交互动效12条原则!(附案例实操)

2、期待(Anticipation)

让动画角色在进行主要动作前,先做一个让观众产生“预先判断”的准备动作。比如说,冲刺动作前先弓起腰背,抬起腿部,弯曲手肘;或者发射炮弹前,炮管先微微鼓起。这么做,是为了让观众对接下来要发生的动作产生“期待”,营造“蓄势待发”的感觉。同时,这也符合现实的视觉经验,有助于引导观众的注意力,让其集中在主要动作上。举例来说,不少实时资讯类APP(如新闻客户端)在页面顶端,都会设计用户主动刷新的功能,用于随时查看最新的消息。这时,相应的手势操作里就会包括“拖拽下拉”和“放开”这两步动作,动态效果就可以巧妙借用期待的原则,让刷新操作变得更有趣。

Anticipation

超急干货!有生命力的交互动效12条原则!(附案例实操)


3、登场(Staging)

Johnson和Thomas在书中将这条定义为“将任何想法完整无误地、清晰地呈现”。跟舞台戏剧一样,所有动画中的构图、运镜、动作、走位都需要经过仔细的设计安排,避免在同一时间点出现过多琐碎的动作变化。换句话说,要明确每个演出段落中的主次之分,尽力避免不必要的细节,让动画整体的观看流程更顺畅有序。在移动端设备里,适时出现的动态效果会有利于对用户视觉焦点的引导。

Staging

超急干货!有生命力的交互动效12条原则!(附案例实操)


4、连续动作与姿态对应(Straight Ahead Action and Pose to Pose)

“连续动作”和“姿态对应”是绘制动画的两种不同的方法。“连续动作”是将动作从第一帧开始,按顺序逐帧绘制。“姿势对应”则是将动作拆解成多个重要的关键帧(定格动作),然后补上关键帧之间的“补间动画”,进而产生动态的效果。

Straight Ahead Action and Pose to Pose

超急干货!有生命力的交互动效12条原则!(附案例实操)


5、跟随与重叠动作(Follow Through and Overlapping Action)

跟随和重叠动作的技巧,是相互关联的,它们是基于现实去模拟真实物理动力学。利用诸如惯性等原则让角色的动作看起来更生动。“跟随动作”的意思是当角色的动作停止时,其它与其相关联的部件仍然会保持动势而移动,用来模拟有弹性、有速度感的动作。比如,在模拟有机生命角色时,其动作停止越急骤,关联部件的跟随动作幅度越大。“重叠动作”的意思则是将角色的各部件拆解,将主次动作的起止时间错开,以不同的速率移动,产生分离重叠的时间差和夸张的变形,增加动画戏剧性与表现力。比如,突然启动奔跑的人物,他的假发会来不及反应,留在原地,慢半拍跟随人物飞走。同样的效果,也可以用于移动端,如网站页面上微小元素跟随大面积元素做错时运动,在下拉浏览的过程中,会大大丰富视觉体验。

Follow Through and Overlapping Action

超急干货!有生命力的交互动效12条原则!(附案例实操)


6、动势渐进渐出(Slow In and Slow Out)

真实世界里,任何角色动作的起止,从零速度到全速,都有一个缓冲的过程。普通生活中常见的物体动作,都需要时间来加速或减缓。动画的渐进渐出技巧也是顺应这一物理原则而出现的,可以让动作更加真实可信。同样的,也是为了迎合观众的视觉习惯,引导视线焦点,在动势的起止点,都会创造不同程度的缓冲时间。举例来说,在移动端设备上,当对某一元素进行点按,触发后的动态效果开头都可以适当加入缓动渐进,让用户的视觉有个短暂的适应时间。即便这个适应时间短到无法察觉,也会让人产生“恰到好处”的贴切感觉。

Slow In and Slow Out

超急干货!有生命力的交互动效12条原则!(附案例实操)

7、弧形动作(Arcs)

除了机械运动之外,真实世界大部分的有机活物都不会遵循完全直线的运动轨迹。动画中,角色的动势也要遵循这个原则,都要以不同程度的弧线的方式进行,可以让其看起来更加真实。有时候,即便是非活物的物体,也可以适当用到这个原则,让其更有生命力。比如,伸出手臂指向远方的动作,都会划出浅弧线的运动轨迹。这里有例外是,如果要强调高速动作或者纯机械动作的话,直线运动轨迹也许对塑造更有利。

Arcs

超急干货!有生命力的交互动效12条原则!(附案例实操)


8、次级动作(Secondary Action)

在主要动作之外,增加细微的次级动作,起到支持主要动作的作用。次级动作会让画面更活泼,起到画龙点睛的效果。次级动作并非可忽略的不必要动作,而是用以强化主要动作,且不会把观众的注意力带走。它的设计可以使角色更生动真实有生命。比如,奔跳的角色,每次跳跃时帽子都会微微弹起,营造轻盈活跃的动感。

Secondary Action

超急干货!有生命力的交互动效12条原则!(附案例实操)


9、节奏(Timing)

控制运动的关键是动作的节奏。动作的节奏就是速度的快慢,过快或过慢都会让该动作看起来不自然。优秀的节奏控制,在于通过模拟真实物理情境,创造速度和质量上的不同。正确的出现时机和速度,会使得物体更符合物理原则。移动端的界面,尤其是扁平化设计大行其道的今天,轻量化的图形和色彩更会让用户产生好感。同时,动态的效果也要通过不同的节奏控制,符合这种轻量化视觉的预期才行。比如,模拟纸张设计的APP界面,切换的速率也同样要柔和且轻盈。

Timing

超急干货!有生命力的交互动效12条原则!(附案例实操)


10、夸张手法(Exaggeration)

前面叙述的几种技巧,都是以模拟物理世界为准则的。但如果完全遵循现实来展现,会让动画变得很无趣呆板。动画的魅力在于,它本身就是偏夸张的表现方式。透过角色的夸张表现,强化剧情起伏,让观众更容易融入且乐在其中。夸张不只是把动作幅度扩大,而是巧妙地将剧情所需要的情绪释放出来。在设计动作之初,动画师对角色夸张程度的拿捏,即是动画精彩与否的关键。大部分的APP和网站,夸张的手法都不适合贯穿始终运用,技术上也不允许这么做。但适当在关键时间点运用这一原则,会和一般动态产生反差,让其体验更为出色。

Exaggeration

超急干货!有生命力的交互动效12条原则!(附案例实操)


11、立体造型(Solid Drawing)

对立体造型的把握是每个动画师都应该掌握的技巧。它代表了在三维的空间形态里,给予物体透视、体积、重量、光影等等,让其存在感可信。想要达成这点,需要对扎实的绘画功底,以及大量对现实物体的描摹经验。比起当年需要逐帧描绘立体动态而言,现在电脑能计算生成大多数的立体形象,肯定是方便多了。但对动画师三维视觉经验的要求,依然很高。在移动端,虽然现在都提倡扁平化的设计,但在很多地方仍然适用立体造型的设计思路,让细节更丰富耐看。

Solid Drawing

超急干货!有生命力的交互动效12条原则!(附案例实操)


12、吸引力(Appeal)

吸引力原则是任何一种艺术形式的最终准则。综合前面所述的所有技巧,来创造一个富有生命力的、活泼有趣的角色,是吸引力原则的关键。动画有别于其他艺术形式的地方在于,它的自由度极高,所有内容都是由动画工作者一手创造出来的,充满了想象力。因此,吸引力原则尤其倚仗于动画师对技巧的纯熟运用。正如一个网站或者APP的动态效果首先必须为它的功能服务的。因此外在表象上,不能像一些动画片或舞台剧那样纯粹靠动作和表演去吸引观众。动态吸引力的运用,更多时候是“画龙点睛”,而非“抢戏”。

Appeal

超急干货!有生命力的交互动效12条原则!(附案例实操)

上述12条经典动画原则的视觉化片段,由Cento lodigiani制作:Cento lodigiani – The illusion of life(需翻墙)

了解了这些经典动画原则,相信会对创造有生命力的动态元素有了基本的概念。落实到实际的设计思路上,该如何考虑呢?

除了常见的纯动画元素(GIF动画等)所起到的缀饰作用之外,也可以在用户的操作流程中尝试运用这类富有生命力的动态效果。比如,现在有一套APP的UI菜单,形式是圆形环绕式排布的按钮,要设计它的出场动态效果,该如何进行呢?

界面设计草稿

超急干货!有生命力的交互动效12条原则!(附案例实操)

请注意,我们这里仅从动态设计的思路出发,讨论如何创造有生命力的动态效果。

1、“吸引力”(Appeal)

首先,遵循“吸引力”(Appeal)原则,为整个UI设计一种“个性”。在排版和图形风格的基础上,动态效果也要契合这种“个性”。举例而言,圆形扁平化的图形风格,动态也可以适当地向活泼灵动的方向靠拢,更贴近用户。



2、
“登场”(Staging)

其次,确定角色们“登场”(Staging)的主次先后。在该UI菜单的出场动画里,就应该确定他们的排版位置,出场的次序、方向、运动的轨迹等。举例而言,环绕式排布的按钮,在逐个弹出的同时,可尝试顺沿圆形的运动路径做旋转,符合对排版动势的预期。

超急干货!有生命力的交互动效12条原则!(附案例实操)  超急干货!有生命力的交互动效12条原则!(附案例实操)

3、“节奏”(Timing)

控制“节奏”(Timing),同样要符合UI的排版和图形风格。举例而言,轻快的运动速率符合该UI的“个性”,因此可以尝试将整个动态的时长控制在1-2秒左右甚至更短。各个元素的出场时间点有错位和重叠,且尽量保证简洁干脆。

超急干货!有生命力的交互动效12条原则!(附案例实操)

4、“动势渐进渐出”(Slow In and Slow Out)

同时,也要符合“动势渐进渐出”(Slow In and Slow Out)的原则,将动态的前后速率进行快慢调节,进一步营造轻快的感觉。

超急干货!有生命力的交互动效12条原则!(附案例实操)

5、“跟随与重叠动作”(Follow Through and Overlapping Action)

运用“跟随与重叠动作”(Follow Through and Overlapping Action)原则,进一步细微调整各个元素出场时间点的错位和重叠,且模拟真实世界的物理运动效果。在控制节奏的同时,也创造了轻微的弹性效果,丰富了视觉体验。

超急干货!有生命力的交互动效12条原则!(附案例实操)

 

6、“弧形动作”(Arc)

可以将“弧形动作”(Arc)的原则融入其中,稍稍破除死板的既定走向,增加一点“抛物线”的动势,让物体产生由远到近朝镜头方向“投掷”出来的视觉感觉。

超急干货!有生命力的交互动效12条原则!(附案例实操)

7、挤压与拉伸”(Squash & Stretch)

在各个元素沿路径运动的过程中,可以适当加入“挤压与拉伸”(Squash & Stretch)的效果,让细节更有趣。

超急干货!有生命力的交互动效12条原则!(附案例实操)

8、“期待”(Anticipation)

如果时长允许,甚至可以加入一些“期待”(Anticipation)的手法在其中,让出场动态的开端变得更加精彩耐看。

超急干货!有生命力的交互动效12条原则!(附案例实操)

9、最终效果呈现。

超急干货!有生命力的交互动效12条原则!(附案例实操)

上述流程,并非每次都要按部就班执行;没有提及的剩余动画原则,也并非每条都要用上。正确的设计思路,应该是根据吸引力原则所塑造的“个性”和实际情况来衡量哪些动态效果真正适用。比如,在该事例中,夸张的手法会显得太“过火”,太多细节动作会显得琐碎凌乱,而三维立体的造型也与扁平化的图形风格相悖。这种判断,需要的是对现实世界动态规律的长期观察、描摹和拆解

况且,有质感的动态效果的最终实现,也要考虑到成本和技术难度是否对等,尤其是在移动端上(容量、加载速度、代码冗余等)。所以说,适当地、灵活地、有节制地选用富有生命力的动态效果,才会真正增色不少。

推荐18个学习交互设计的网站

http://t.cn/Rqe3VTL

超急干货!有生命力的交互动效12条原则!(附案例实操)

All posts

Other pages