越来越多的设计师认识到在用户体验的背景下动画动设计的重要性。动画不再只是使人们使用我们的产品感到高兴的一种方式,而是一种使体验变得轻松有趣的功能性工具。我们大多数人都听过一句话(并且仍然是事实),说好的设计就是讲故事。但是动画可以帮助我们在更少的时间更清晰地讲述这个故事。
 
用户界面内的动画使我们能够:
突出重点
建立对象之间的层次和空间关系
塑造品牌形象

用户界面环境下的动画仍然是一个非常新的领域。几乎没有资源来教授页面过渡的最佳实践或显示加载屏幕的通用模式。我们可以做的是通过研究传统的动画原理并学习如何将它们应用于抽象的形状和图案(例如我们在数字界面中看到的形状)来开发一个可用的运动库。“运动不再仅仅是使人们使用我们的产品感到高兴的一种方式,而是一种使体验变得轻松有趣的功能性工具。”动画技术最常引用的资源之一是迪士尼的12条动画原理,由弗兰克·托马斯(Frank Thomas)和奥利·约翰斯顿(Ollie Johnston)在1980年代提出。这些原则旨在角色动画中创建自然运动错觉。虽然动画设计人员非常了解这些原理,但是通过用户界面的角度来查看它们可以使我们为以前不存在的原理增加一个方面:功能。以此为指导,我们可以提供反馈并提供清晰的信息,以便更有效地与我们的用户进行沟通。

通过更深入地了解这些原则,我们可以提取出有价值的信息,说明如何在功能上使用每项功能,从而为用户创造更好的体验:
 
实体图
这个原理或多或少是材料设计的基础。实体图是指将形状视为实体,因此要服从物理自然定律。使用实体绘图的概念对于开发面板或信息之间的空间关系至关重要。所有物体保持一定的重量和体积,并受到重力,摩擦和惯性等力的作用,因此任何运动结果都应反映这一点。当对象遵守自然法则时,它们所属的位置和前进的方向对用户而言更直观且普通感觉更好。随着面板的相互作用,阴影,层和速度会根据物理定律发生变化。
 
弧线
对象移动的方向表明了对象的类型。通常,只有机械对象才能以完美的直线移动,而有机质更高的对象则以弧形移动。无论您希望以技术,愚蠢或优美的方式来接收产品,更改弧形运动都可以使它真正符合品牌的性格。直线运动可保持该应用程序的整洁和专业,同时增加柔和的缓动效果使运动感觉更自然。
 
分阶段
分阶段就是为即将发生的事情设置场景。在界面的情况下,良好的运动设计可将视线引向重要内容。当它们在屏幕上过渡时,分段动画将注意力集中在接下来应解决的问题上,或者引起对可能引发的潜在交互作用的注意。这有助于建立层次结构并为用户阐明操作流程。仅在用户开始输入评论后才显示“提交”按钮,这为他们下一步应采取的操作奠定了基础。
 
夸张
夸张恰恰是听起来的样子:使事物更具戏剧性,以引起人们对事物的关注或提出观点。这可以通过摇动的通知铃声或响应交互错误来体现。夸张引导焦点,并明确指出用户应注意。夸张可以强调确认和错误状态。
 
次要动画
过渡时,如果动作太快或突然,很容易让用户感到困惑;次要动画确保不会发生这种情况。它重申了主要操作,以便用户可以确定发生了什么。这是一种微妙的,有时甚至是鲜为人知的肯定。屏幕的其余向上移动加强了“我的收藏”类别的主要移动,并将其移至顶部。
 
感染力
感染力以喜悦为中心。如果您的动画使用户眼前一亮,嘴角上扬或轻笑,您的互动就很吸引人。这为互动提供了更难忘的体验,并为您的品牌树立了个性。感染力将您的产品带入一个新的高度 -它不仅解决了问题,而且具有情感上的吸引力,这就是促使人们回头使用您的产品的原因,而不是可以帮助他们实现相同目标的另一种方法。吸引力使标准交互更有趣。
 
知道这些原则只会让您走得更远
学习这些原理将使您扎实地进入UI动画之门,但是有时即使您已遵循所有规则,但动画似乎仍然不可用。作为一个动作设计师,最重要的一个教训就是培养你大脑中的肌肉的味觉,这种肌肉告诉你什么时候感觉是对的。密切关注现实世界中事物的运动方式可以极大地改善您的运动视力。你最好的朋友怎么走?潮水滚滚时看起来像什么?您周围的物体如何响应自己的运动?开始接受日常生活的变化,它将以惊人的方式转化为您的数字作品。
 
“每次移动都应该是有意的,并以某种方式使用户体验受益。”
 
结论
这些动画原理是永恒的,有充分的理由-在设计用户界面时牢记这些原则可以极大地改善产品的功能。如果使用得当,动画甚至可以对整个产品和品牌的成功产生积极影响。为产品制作动画时,请始终牢记该动作的功能-每次移动都应是有意的,并以某种方式有益于用户体验。使用物理自然定律作为对象应如何运动和相互影响的参照。
 
最后,保持乐趣!有目的的设计不必无聊。设计令人愉悦的体验,您的用户将不断回来获得更多。