最有生命力的动态效果，都遵循这 12 条经典原则（上） : 经理人分享

了解了这些经典动画原则，相信会对创造有生命力的动态元素有了基本的概念。

几天前看了文章《花了7天看了上千个交互动效神作，我总结出5个技巧》，佩服它概括得非常到位。基于实际的用户体验考虑的出发点，和“去繁化简”的做法，我都非常赞同。尤其是它所指的“克制”，的确是非常多动态设计者会犯的毛病。有时候看到那些动态设计的神作，就会“痴迷”其中，忘了全局。动态效果是为了流畅的用户体验而存在的，不是单纯的动画炫技。希望大家都能先看一下那篇文章。

原标题：《创造有生命力的动态效果（上）》
数英网用户原创文章，转载请联系本人

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

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

更多的动效神作，直接可以移步以下这些文章：

1、《这有 36 个UI动效设计，也许能帮你从细节上提升产品逼格》

2、《灵感：31个Logo动画设计，好的创意总是令人惊叹！》

3、《灵感：31个Logo动画设计，好的创意总是令人惊叹！（第二期）》

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

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

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

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