如何创造有生命力的动态效果? (下)​

转载 收藏4 评论
举报 2016-05-13

作者:Tony Tong

继上篇《最有生命力的动态效果,都遵循这 12 条经典原则(上)》中介绍了迪斯尼经典的12项动态原则之后,我们接着讨论如何在实战中运用这些原则进行动态交互设计。

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

如何创造有生命力的动态效果 (下)

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


1、“吸引力”(Appeal)

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


2、“登场”(Staging)

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

如何创造有生命力的动态效果 (下)   如何创造有生命力的动态效果 (下)


3、“节奏”(Timing)

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

如何创造有生命力的动态效果 (下)


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

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

如何创造有生命力的动态效果 (下)


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

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

如何创造有生命力的动态效果 (下)


6、“弧形动作”(Arc)

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

step 06_Arc.gif


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

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

step 07_Squash & Stretch.gif


8、“期待”(Anticipation)

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

step 08_Anticipation.gif


9、最终效果呈现。

iPhone6_mockup.gif

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

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

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)