设计指南:在UX中如何正确使用动画设计

电视资讯 浏览(1082)
兴发娱乐网网页版

  人人都是产品经理2天前我要分享

 这篇文章是关于如何在ux设计中正确使用动画设计,让我们来看看它

今天,界面动画很难给人留下深刻印象甚至是惊喜。它显示了屏幕之间的交互,解释了如何使用应用程序或只是引导用户的注意力。在浏览关于动画的文章时,我发现几乎所有这些都只描述了特定的用例或关于动画的一般事实,但我没有遇到任何关于界面动画的所有规则的文章,这些规则将被清楚地和实际地描述。

好吧,我不会在本文中写任何新内容,我只想在一个地方收集所有主要原则和规则,以便其他想要启动动画界面的设计师不必搜索其他额外信息。

动画的持续时间和速度

当元素改变其状态或位置时,动画的持续时间应足够慢,以允许用户注意到更改,但同时足够快,不会导致等待。

在动画中使用适当的持续时间。不要太快,不要让用户有足够的时间打哈欠

大量研究发现界面动画的最佳速度在200到500毫秒之间。这些数字基于人脑的特殊感知。任何短于100毫秒的动画都是瞬时的,根本不会被识别。超过1秒的动画传达了延迟感,因此对用户来说是无聊的。

你应该在界面中有更好的动画持续时间

在移动设备上,“MaterialDesign Guide”还建议将动画的持续时间限制为200-300毫秒。对于片剂,持续时间应延长30%C约400-450毫秒。原因很简单:屏幕尺寸很大,因此在更改位置时,物体将克服较长的路径。在可穿戴设备上,持续时间应减少30%C约150-200毫秒,因为在较小的屏幕上行程距离较短。

移动设备的大小会影响动画的持续时间

Web动画以另一种方式处理。由于我们习惯于在浏览器中几乎立即打开网页,因此我们希望能够在不同状态之间快速切换。因此,网络转换的持续时间应比移动设备短2倍 - 在150到200毫秒之间。在其他情况下,用户不可避免地认为计算机已死或网络连接存在问题。

但是,如果您在网站上创建装饰动画或尝试吸引用户注意某些元素,请忘记这些规则。在这些情况下,动画可以更长。

大屏幕电脑=慢动画?没门!

无论平台是什么,你都需要记住。动画的持续时间不仅取决于行进的距离,还取决于物体的大小。变化较小的较小元素或动画应移动得更快。因此,具有大型复杂元素的动画在持续时间更长时看起来更好。

在相同大小的移动物体中,停止的第一个物体是通过最短距离的物体。小物体比大物体移动得慢,因为它们会产生更大的偏移。

动画的持续时间取决于对象的大小和移动的距离。

当物体碰撞时,碰撞能量必须根据物理定律在它们之间均匀分布。因此,最好排除弹跳效果,在特殊情况下使用它才有意义。

避免使用反弹效果,因为它会分散注意力

物体的运动应该清晰锐利,所以不要使用运动模糊(是的,AfterEffects用户,这次不使用)。即使在现代移动设备上也难以重现这种效果,并且它根本不用于界面动画。

不要在动画中使用模糊效果

列表项(新闻卡,电子邮件列表等)的外观应该有很短的延迟,每个新元素应该持续20到25毫秒。较慢的元素可能会对用户造成烦扰。

列表项的动画应持续20-25毫秒

轻松

放松有助于使物体的运动更自然。这是动画的基本原理之一,在《生命的幻觉:迪斯尼动画》中有详细描述。这本书由两位迪士尼动画师奥利约翰斯顿和弗兰克托马斯撰写。

为了使动画看起来像机械和人工,物体应该以一定的加速度或减速度移动 - 就像物理世界中的所有生物一样。

动画动画看起来比线性动画更自然

不受任何物理力影响的物体线性移动,换句话说,以恒定速度移动。由于这个事实,它们看起来非常不自然并且对人眼来说是人为的。

动画的所有应用程序都应使用动画曲线,我将尝试解释如何阅读它们及其含义,曲线显示对象(y轴)的位置如何在同一时间间隔发生变化(x轴)。在当前情况下,运动是线性的,因此物体同时行进相同的距离。

线性运动曲线

例如,线性运动只能在对象更改其颜色或透明度时使用。通常,当对象不改变其位置时,我们可以将它用于状态。

我们可以在曲线上看到,在开始时,物体的位置变化缓慢,速度逐渐增加,这意味着物体以一定的加速度移动。

加速曲线

当物体以全速飞出屏幕时,应使用此曲线。这些可以是系统通知或只是接口。但请记住,只有当对象永远离开屏幕并且我们无法回忆或返回时,才应使用此类曲线。

将卡扔出屏幕的加速曲线

动画曲线有助于表达正确的心情。在下面的示例中,我们可以看到移动的持续时间与所有对象的距离相同,但即使曲线中的微小变化也会影响动画的氛围。

当然,通过更改曲线,您可以将对象移动到与现实世界类似的位置。

相同的持续时间和距离,但心情不同

它与缓入曲线相反,因此物体快速覆盖长距离,然后慢慢减速直至最终停止。

减速曲线

当元素出现在屏幕上时,应使用这种类型的曲线C以全速飞行到屏幕,逐渐减速直到它完全停止,这也可以应用于从屏幕外部出现的不同卡或对象。

减速曲线是一个很好的显示

该曲线使对象在开始时获得速度,然后慢慢将其降低到零。这种类型的移动最常用于界面动画中,每当您怀疑动画中使用了哪种类型的动作时,请使用标准曲线。

标准曲线

根据MaterialDesign指南,最好使用不对称曲线使运动看起来更自然逼真。曲线的末端必须比其开始更加强调,因此加速的持续时间短于减速的持续时间。在这种情况下,用户将更加关注元素的最终移动以关注其新状态。

查看对称和非对称标准曲线之间的区别

当对象从屏幕的一个部分移动到另一个部分时,请使用“缓入”。在这种情况下,动画避免了引人注目和戏剧性的效果。

卡片在屏幕上的移动和相应的不对称曲线

当元素从屏幕上消失时,应该使用相同类型的移动,但用户可以随时将其返回到先前位置,它涉及导航抽屉等。

导航抽屉使用标准曲线隐藏在屏幕上

从这些例子中可以看出,许多初学者忽略了C的基本规则。开始动画不等于结束动画。与导航抽屉的情况一样,它显示为减速曲线,并随标准曲线消失。此外,根据GoogleMaterialDesign,对象应该显得更长,以吸引更多关注。

侧面菜单的出现和消失是通过减速和相应的标准曲线实现的

函数cubic-bezier用于描述曲线。它被称为立方体,因为它基于四个点。坐标为0的第一个点; 0(左下角)和坐标为1的最后一个点; 1(右上角)已在图表上定义。

基于此,我们需要在图上仅描述两个点,通过函数的四个参数给出三次贝塞尔曲线:前两个是坐标x和y第一个点,第二个是坐标x和第二点。

为简化曲线工作,我建议使用网站easings.net和cubic-bezier.com。第一个包含最常用曲线的列表,您可以将参数复制到原型工具中。第二个源允许您使用不同的曲线参数并立即查看对象的移动方式。

函数cubic-bezier的不同类型的曲线及其参数

界面动画中的编排

与芭蕾舞编排一样,主要思想是在从一个状态到另一个状态的过渡期间引导用户进入流畅的方向。

等交互平等交互意味着所有对象的外观都受特定规则的约束。

在这种情况下,所有卡片的外观被视为指导用户从一个方向从上到下注意的过程。如果我们不遵守订单,用户的注意力就会分散注意力。所有元素的外观一下子看起来很糟糕。

应引导用户顺利开展

至于表视图,它有点复杂。在这里,用户的焦点应该是对角线,因此逐个显示元素是一个坏主意。逐个显示每个元素会使动画过长,并且用户的注意力会被锯齿状,这是错误的。

卡片表格视图的对角线外观

从属交互从属交互意味着我们有一个中心对象引起所有用户的注意,所有其他元素都从属于它。这种类型的动画给出了一种秩序感,并引起了对主要内容的更多关注。

在其他情况下,用户很难知道要跟随哪个对象,因此他的注意力会分散注意力。因此,如果要将多个元素设置为动画,则需要清楚地定义其动作的顺序,并将动画设置为可能的最小可能对象。

只有一个中心对象值得动画,所有其他对象都受其影响。否则,用户将不知道要遵循的对象

根据MaterialDesign,当移动物体不成比例地改变它们的大小时,它们应该沿着弧线而不是沿着直线移动,这有助于使运动更自然。 “不成比例地”意味着物体的高度和宽度通过增加/减少而不对称地改变,即具有不同的速度(例如,方形卡变成矩形)。

当对象按比例改变其大小时,使用沿线的移动。由于这种运动的实施更容易,因此经常忽略不成比例的弧运动规则。看看应用程序的真实示例,您将看到线性运动的规则。

尺寸的比例变化是以直线实现的

曲线上的运动可以通过两种方式实现:第一种称为垂直向外 - 物体水平开始,垂直运动结束;第二个 - 水平输出 - 物体开始垂直移动并以水平运动结束。

对象沿曲线移动的路径必须与滚动界面的主轴重合。例如,在下一个图像上,我们可以向上和向下滚动界面,因此卡片向外垂直扩展 - 首先向右,然后向下。反向运动以相反的方式完成,即卡首先垂直上升并最终水平移动。

展开/折叠卡的方向应与界面的轴重合

如果移动物体的路径彼此相交,则它们不能彼此移动,并且物体应该通过减慢或加速其自身速度而为其他物体的运动留下足够的空间。另一个选择 - 他们只是推开其他物体。

为什么?因为我们假设界面中的所有对象都在一个平面中。

在移动过程中,物体不应相互穿过,而是留出空间移动另一个物体。

在另一种情况下,移动物体可以高于其他物体。但它也没有消失或通过其他物体移动。

为什么?由于我们认为界面的元素符合物理定律,现实世界中没有可以做到这一点的固体物体。

结论

因此,如果我们总结所有上述规则和原则,界面中的动画应该反映我们从物理世界知道的运动C摩擦,加速度等。模仿现实世界中对象的行为我们可以创建一个允许用户理解界面内容的序列。

如果动画构建正确,则不显眼,不会分散用户的目标。如果是这样,您需要软化它,或者根本不需要删除它。这意味着动画不应该减慢用户的速度或阻止执行任务。但是不要忘记,动画更像是一门艺术,而不是一门科学,所以最好是对用户进行实验和测试。

作者:Chris,LDesign1)

本文由