越来越多的设计师意识到动效设计在用户体验中的重要性。动效不再仅仅是让使用我们产品的人感到愉快的一种方式,而是一种让体验变得轻松而有趣的功能性工具。我们大多数人都听说过古老的(并且仍然如此)说法:“优秀的设计就是讲故事”。那么运动可以帮助我们以更少的时间和更清晰的方式来讲述这个故事。
用户界面中的动效使我们能够:
1. 直接焦点;
2. 建立对象之间的层次和空间关系;
3. 建立品牌个性;
用户界面中的动效仍然是一个非常新的领域。几乎没有任何资源可以传授页面转换的最佳实践或显示加载屏幕的常用模式几乎没有资源。我们可以通过研究传统动画原理并学习如何将其应用于抽象形状和图案(如我们在数字界面中看到的图案)来开发可用的动画库。
“Motion不再仅仅是让使用我们产品的人感到满意的方式,而是一种让体验变得轻松而有趣的功能性工具。”
动画技术最常被引用的资源之一是迪士尼的动画原则,由Frank Thomas和Ollie Johnston在20世纪80年代引入。这些原则的目的是为了创造角色动画中自然运动的幻觉。尽管运动设计人员很好地理解了这些原理,但通过用户界面的视角来看待它们,可以让我们在以前没有的原则上添加一个方面:功能。使用它们作为指导,我们可以提供反馈并提供清晰的信息,以便与我们的用户进行更有效的沟通。
通过更深入地了解这些原则,我们可以获取关于如何在功能上使用每种方法的宝贵信息,为我们的用户创造更好的体验:
立面体
立面体是指将形状看作是立体物体,因此受物理学的自然规律支配。使用实体绘图的概念对于开发面板或信息之间的空间关系至关重要。所有物体都保持一定的重量和体积,并受到重力,摩擦和惯性等因素的影响,所以任何移动的结果都应该反映出这一点。当物体遵守自然法则时,它们属于哪里,它们往往对用户来说更直观,而普通感觉更好。
随着面板的交互,阴影,图层和速度根据物理定律而变化。
弧
物体移动的方向告诉物体的类型。通常只有机械物体以完美的直线移动,而具有更多有机质量的物体则以弧形移动。无论您希望您的产品以技术性,愚蠢性还是优雅的姿态被接受,改变弧形动作都可以使其对品牌的特征产生真实感。
直线运动使这个应用程序保持干净和专业,同时增加柔软的松弛使运动感觉更自然。
分段
分段就是为即将发生的事情设定场景。良好的运动设计引导人们注意重要的内容。当他们通过屏幕过渡时,分段动画将重点放在下一个应该解决的问题上,或者引起人们对可能发起的潜在互动的关注。这有助于建立层次结构并阐明用户的操作流程。
只在用户开始输入评论后出现的提交按钮才会为他们接下来应采取的操作设定舞台。
夸张
夸大其实就是:让事情变得更加戏剧化,以唤起对某事的注意或说出一个观点。这可以表现在摇动的通知铃中,或者响应于交互错误。夸张引导焦点,并明确指出用户应该注意。
夸大可以强调确认和错误状态。
次要动画
当涉及到转换时,如果它太快或突然移动,很容易让用户感到困惑; 辅助动画确保不会发生。它重申了主要行动,以便用户可以确定发生了什么。这是一种轻微的,有时不肯定。
屏幕向上移动,我的收藏类别的主要运动被选中并移动到顶部。
吸引
如果你的动画让用户放大了他们的眼睛,转动他们嘴唇的角落,或者发出一声轻笑,你已经做出了吸引人的互动。这给交互带来了更难忘的体验,并为品牌塑造品格。吸引力将产品提示到一个新的水平,它不仅解决了问题,而且还解决了情绪问题,让人们回来使用你的产品,而不是另一种能够帮助他们实现相同目标的产品。
吸引力使互动更有趣
了解这些原则会让你事半功倍
学习这些原则会让你在UI动画的门户中占据一席之地,但有时甚至当你遵循所有的规则时,你的动画仍然显得不可靠。作为动作设计师学习最重要的经验教训之一是开发品味的重要性 - 即在你的大脑中能够告诉你何时感觉正确。密切关注事物如何在现实世界中移动可以显着改善您对运动的注意力。当潮汐流入时它看起来像什么?你周围的物体如何对自己的运动做出反应?开始接受日常生活中的动作,它会以令人惊讶的方式转化为您的数字作品。
“每一个动作都应该是有意的,并以某种方式使用户体验受益。”
结论
这些动画原理是永久的,因为有充分的理由 - 在设计用户界面时可以牢记它们可以极大地提高产品的功能。如果使用得当,动画甚至可以对整个产品和品牌的成功产生积极影响。在为产品设计动画时,请始终记住动作的功能 - 每个动作都应该是有意的,并以某种方式为用户体验带来好处。利用物理学的自然规律来指导物体如何相互移动和互动。
最后,保持乐趣!有意义的设计不应该是无聊的。 设计一个愉快的体验,你的用户会不断地回来。