用户体验中的动画可以通过提供反馈和防止迷失化来帮助或者可以分散注意力,烦人和眩晕。制作动画有两个维度,用户体验的积极方面:他们的目的及其执行。

在上一篇文章中,我们审核了第一维 - 动画如何用于使反馈明显并为系统构建正确的心理模型。在本文中,我们探讨了第二个维度:如何以自然,平滑和可见的方式执行运动,而不会导致用户的挫败感,不适或大量延迟。

值得注意的是,过度使用运动和动画是一个无障碍问题:在颜色或颜色之间硬切割的动画闪烁可以触发癫痫患者的癫痫发作。视差旋转木马转发动画,和滚动插孔可以让用户前庭疾病头晕或恶心,触发偏头痛。克制很重要,您应该尊重将浏览器或设备设置为“减少动作”的用户来尊重这些用户。

动画的目的通常决定动画或转换的类型。另外,请记住用户将遇到动画的频率如何:动画越频繁,您将更加微妙,更短。

元素和触发器

扳机是开始动画的事件。通常,触发器将是用户操作:例如,点击或点击按钮,例如,可能会触发短加载动画。

YouTube:点击封闭的标题按钮显示一个动画作为反馈。

更复杂的交互可以具有微妙的触发器 - 例如,在视频洗涤器栏上悬停在视频中的预览图像上可能会逐渐消失。

YouTube:在时间线上悬停在时间线上的洗涤器上,在该点的一小部分预览中会逐渐消失。在这种情况下,动画触发器是一个悬停,而不是点击或手势。此动画需要稍微延迟,以避免使用许多闪烁预览的压倒性用户,因为它们在屏幕上移动鼠标
最好的:徘徊在添加到购物车按钮触发一个快速的微妙动画,表示获取按钮。这种类型的动画必须具有非常快的响应时间

诸如滑动的手势可能在滑动方向上显示一个小动画,作为刷卡手势被识别的确认。

Google Chrome:在Mac的触控板上滑动导致动画图标出现;图标可确认用户操作的系统识别。

有时,触发器与将移动的元素不同 - 例如,单击按钮可能会导致模态弹出窗口滑入视图。或者,触发器可以是滚动页面的动作,从而导致传统的,预设动画,甚至是在用户继续滚动时移动页面的视差运动。(是谨慎与视差或滚动旋转动画,因为这些动画往往令人沮丧,令人眼花缭乱,令人讨厌。)

像素4站点显示通过滚动触发的多个动画。一旦用户滚动到页面上的相应点,就会触发某些动画(例如2.5秒钟)。其他形式的动作(例如在11秒上滑动的黑色覆盖盒)是视差效果,其中移动速度由用户的滚动速度直接控制,并且如果用户停止滚动部分方式,则会暂停。

一些动画将仅涉及一个移动项目;其他人可以包括多个元素一起移动或略有偏移时序。在某些情况下,单个对象的不同部分将具有不同的动画。

Warby Parker:动画变形汉堡图标进入X.触发器正在点击按钮。移动元件有一些微妙的:汉堡菜单的顶部和底线将旋转到X形中,而第三个中间杆会同时淡出。

过渡属性

虽然动画可以获得非常复杂,但有一些标准属性,我们可能会在UX上下文中设置动画:不透明度,位置,刻度,颜色,形状,模糊和旋转。虽然这些不会涵盖每个可能的动画,但它们足以轻松地向用户传达清除反馈。

谷歌的材料设计拨动开关使用所有以下动画来形成一个短(100ms)的反馈微互动:按钮从一侧移动到另一侧,按钮颜色从灰色变为紫色,靠近动画的末端,紫色晕褪色:它从按钮周围的一个小,半透明的紫色圆圈,迅速放大,速度快,最后消失了。

当物体从一个地方移动到屏幕周围的另一个地方时,我们需要决定其开始和结束位置,以及其移动路径 - 弧路径通常看起来比对角线更自然,这忽略了布局的规律性。超过一个世纪的动画片的经验已经得出结论,当他们的动画中,物体的动作看起来正确遵守物理法律。它超越了这篇文章的深入讨论了这个话题,但观察了任何诡计大学赛车的电影追逐道路赛道,你会得到基础。

什么时候向购物车添加物品在无缝中,一个小型动画复选标记从中移动添加至购物袋到右下角的推车。在这种情况下,移动路径是弧形而不是完全直的对角线。然而,这个动画很长,很可能在重复时令人讨厌,因为它是整个屏幕上的夸张运动。

一个对象可能会随着时间的推移而改变颜色或淡出,以建议状态的变化或被新的东西替换。改变不透明度是另一个常见的过渡,但在很多平台上它将是计算昂贵的(导致次优的性能和平滑度),尤其是当许多元素一次发生变化时。

另一个常见的过渡涉及对象生长或萎缩。有时,我们可能会转换到另一种形状的形状 - 例如,圆形按钮可能会扩展到成为圆角矩形卡或模态。在这种情况下,我们可以使用透明掩模,该遮罩尺寸展开并在一个运动中逐渐消失。

iOS App Store:轻敲卡上的全屏元素,具有其他详细信息 - 一个越来越多的动画的示例。

动画持续时间

动画的速度对于可用性而言非常重要 - 太快,并且很难看到或眩晕;太慢,它变得侵入性,感觉就像用户的延迟。通常,大多数动画的持续时间应该在100-500毫秒的范围内,具体取决于复杂性和元素行驶的距离。作为一项经验法则,寻找动画可以在不跳跃的情况下进行的最短时间。动画比太短的动画更常见。

简单的反馈动画,例如显示复选框或切换开关,总持续时间应大致100毫秒(0.10秒)。这个持续时间感觉即时向用户S并创建物理操纵物体的幻觉。100毫秒位于可感知运动的下端,在那里几乎感觉就像一个从一个地方到另一个地方的瞬间跳跃,但足以让反馈明显。

当动画涉及大量屏幕变化时,例如当模态窗口移动到视图时,200-300毫秒的持续时间可以是合适的。另一个元素必须移动,更重要的是它使其如此平滑和非剧集(特别是对运动敏感的人,例如癫痫或前庭疾病的用户)。

在500毫秒,动画开始觉得对用户的真正拖累 - 他们变得繁琐令人讨厌。在大多数情况下,100-400毫秒的范围是合适的,400ms是一个非常慢的动画,仅用于大屏幕上的大动作。试验这些值,因为从250到300毫秒移动的小变化可以感觉很差。注意出现或进入屏幕的动画对象通常需要比对象消失或退出屏幕的对象需要细小的持续时间:弹出窗口可能需要300ms才能出现,但仅消失200或250ms。(但请记住,那弹出窗口在许多情况下都存在问题,我们劝阻过度使用它们。)

缓解使运动感觉更自然

完全线性运动看起来很奇怪,不自然给用户。在整个时间以完全相同的速度移动屏幕上移动的对象比一个自然更加自然,而不是随着时间的推移逐步加速。这种印象与对象如何在物理世界中移动,我们不经常看到以完全稳定的速度移动的东西 - 它们倾向于在开始和分别停止移动时加速和减速。为了让动画感到自然,我们想从现实世界借钱(一个称为s)使用略有不同的定时。

宽松我们如何指定动画是如何感受的。最常见的宽松各种各样的宽松变化(其中一个物体开始缓慢移动),然后加速),易于出局(在结束时减慢),或两者的组合,易于输入(其中动画在中间最快,但在开始和结束时上下倾斜)。

最常见的是,您将想要使用一个缓解动画,这开始快速但减慢。这种类型的宽松,这使得动画感到敏感,但允许眼时关注休息时的元素。轻松和易用性有时用于离开屏幕的元素,但如果初始动作需要一段时间,那么这种易于曲线可能会感到没有响应。

与缓释运动相比,线性运动通常被认为是不自然的或尴尬。所容易得到的示例在盒子时使用轻松进入框架,盒子盒子的框架树叶框架。虽然术语可能看起来令人困惑和矛盾(易燃物在某事时使用进入框架,并且在某些东西时使用和缓解树叶可见区域),在入口处易于出现意味着物体在休息之前减慢,允许眼睛预测它将停止的地方,同时放松出口时意味着当物体从框架移动时速度加速那feeling like it’s accelerating away.

请注意,宽松是最具挑战性的方面之一交流对于工程团队,每个平台都有不同的指定易化曲线的方式(例如,立方体贝塞尔格式用于CSS,IOS和Android使用命名的Easing曲线,Adobe After Effects使用传入和传出百分比值)。与您的开发团队交谈,以便您可以以最容易翻译成代码的方式指定这些值。

把它整合在一起

如果工程团队没有有意义的,从设计团队中明确的规格,它就会很少建立设计师所铭记的内容。从某些视频软件中交出编译的视频文件并不好,并且希望开发人员通过帧进行帧,试图找出易于曲线的所有微妙之处。

特别是对于一次发生多种动作的复杂动画,时间表是与工程团队共享动画特征的最有效方法(以及动画的非交互式导出视​​频,称为运动Comp.)。显示所有将移动的不同元素,具有改变的属性类型,并记下每个特定的曲线。

UX动画属性的时间表,显示为几个并行线图,其中每个元素上的详细信息显示在MS持续时间内。
与导出的视频不同,开发人员必须逐帧地帧并猜测发生了什么,动画时间轴与所有元素,触发器,转换类型,持续时间(以毫秒为单位,而不是帧),以及易于判定规范。强烈建议您在达到这种策略水平之前与您的开发团队交谈,因为技术现实可能会使一些选择难以或不可能。还要确保您使用最简单的格式(例如,以Cubic-Bezier格式与Easeinout等命名曲线缓解)。

结论

我们经常这么说细节很好对于UX质量。在动画中,这句话比其他设计元素更准确。实际上,微小的细节很重要,因为动画是用户界面设计的一个区域,其中十分之一的第二个将对用户体验产生很大的差异。得到它一切正确,用户可以欣赏你的动画,因为它可以增强UI的可读性,并增加了设计的奢华和聚集的感觉。获得半秒的错误(甚至是十分之一秒太长),动画会感到震惊和烦人。

这就是为什么值得关注任何动画的设计,以使其对并获得以充分的清晰度传达的规范,即它也可以正确实现。

来源

v.(2016)设计界面动画。Rosenfeld媒体。

Saffer,D。(2014)。微互动奥里利媒体。

普拉特,J.,Radulescu,P.,Guo,R.m.,&Abrams,R.A。(2010)。它还活着!动画运动捕获视觉注意心理科学,21,1724-1730