跳到主要内容

5个关键动画模式以及如何使用它们

动画可以是非常强大的网页设计工具。但在设计我们设计的每个元素之前,我们必须了解何时以及如何使用这个新工具。强大的力量带来了巨大的责任,等等。由于动画必须与开发和设计时间的许多其他问题竞争,因此将资源用于最远的地方是有意义的。

本文将为您设置一些核心动画模式,并向您展示动画如何应用于更大的系统。然后你将学习如何发现认知瓶颈和低调的果实,最大化你投资的动画的影响,以改善用户体验

  • 这是Rachel Nabors的动画片作品的摘录 -在这里买

如果您像我一样在Web和应用程序界面上查看了很多动画示例,那么某些模式就会出现。这些模式有助于识别和简洁地将动画的目的用于其他人。

以下是我发现自己使用最多的类别:过渡,补充,反馈,演示和装饰。让我们看看它们中的每一个,看看它们如何影响用户的体验。

01.过渡

转变 将用户从一个地方带到信息空间中的位置,或将它们从一个任务转移到另一个任务。这些往往会对页面上的内容产生巨大影响,取代大部分信息。

网络最初设计为一系列链接文档。点击链接会导致浏览器擦除屏幕,在从头开始绘制下一页之前,通常会产生明显的白色闪烁。虽然这在链接的基于文本的文档的上下文中是有意义的,但在页面共享许多丰富的设计元素并属于同一域的时代,它却没那么有意义。不仅浪费了浏览器的资源来反复重新创建相同的页面布局,而且当它们必须重新定向和重新评估页面内容时,它还会增加用户的认知负担。

动画,特别是动作,可以通过将这些努力卸载到大脑的视觉皮层来促进用户在信息空间中的定位。使用任务流程中的变化或信息架构中的位置之间的转换,理想地强化了用户的位置,他们的去向以及他们现在的位置。

例如,在Nike的SB Dunk页面(如上所示)上,当用户点击导航箭头时,当下一个运动鞋从相反方向移入时,当前运动鞋会移开。这些过渡清晰地向用户展示了他们如何沿着线性连续的运动鞋进行导航,帮助他们跟踪他们的位置并加强了仔细观察现实世界的运动鞋的空间模型。

在另一个鞋子站点John Fluevog,转换将用户从一个任务移动到另一个任务(见上文)。用户开始在搜索字段中键入后,结果将在较暗的背景上进行动画处理。这将用户从浏览上下文转换为精炼他们的搜索结果,简化他们的焦点,同时还向他们保证他们可以不费力地回到浏览。

02.补充

补充信息会在页面上或页面外引入信息,但不会更改用户的“位置”或任务。它们通常会在页面上添加或更新其他内容。

当转换将用户从一个状态移动到另一个状态时,补充动画将辅助信息带给用户。想想与页面主要内容互补的信息在视图中显示或消失的时间:警报,下拉菜单和工具提示都是进入和退出时补充动画的良好候选者。

请记住,这些动画需要尊重用户的Cone Of Vision:他们是否会直接查看光标旁边的工具提示,还是需要将他们的注意力转向平板电脑侧面的警报?

当用户将产品添加到glossier.com上的购物车时,而不是将其带到一个全新的购物车页面,该网站只是通过将其作为侧边栏(上图)弹出来更新用户的购物车内容。虽然过渡会使用户退出浏览模式,但此补充动画可让用户解除购物车并继续购物。

购物车侧边栏使用额外的补充动画来快速,巧妙地吸引用户的眼球:进度表逐渐填充以显示用户需要花多少钱才能获得免费送货。

此购物车流程具有第三个动画模式:单击时,“添加到行李”按钮获得旋转图标,从而向用户提供有关其加载状态的反馈。说到反馈......

03.反馈

反馈表示两个或多个事件之间的因果关系,通常用于将用户的交互与界面的反应联系起来。

动画可以为用户提供有关其交互的直接反馈。按下按钮,滑动手势 - 将人的动作与界面的反应联系起来。或者反面:页面上的加载微调器表示我们正在等待计算机。如果没有视觉反馈,人们就会想知道他们是否真的点击了“立即付款”按钮,或者是否真的加载了页面。

在蒙特利湾水族馆的网站上,将鼠标悬停在按钮上会使其颜色从红色变为蓝色,表明该元素具有交互性,可以对用户输入作出反应。按钮悬停是这种动画的经典示例,部分原因是为用户提供关于按钮的视觉反馈的好处是如此可衡量且对业务很重要。

设计工作室Animal的网站在页面顶部使用一条颜色条以及其徽标的动画版本,以指示页面的加载和加载状态,同时提供兴趣并加强其“狂野”品牌。

04.示威活动

演示通过展示而不是告诉来解释某些东西是如何工作或暴露其细节的。这些是我个人最喜欢使用的动画。它们既有趣又富有洞察力。

这些动画将信息放入视角,显示正在发生的事情或某些事情的运作方式。这使得演示动画成为信息图表的完美搭档。正如你所看到的,所有示范动画都做的一件事就是讲述一个故事。

“处理...”页面是一个机会,可以解释用户在等待时发生的情况。 TurboTax充分利用了这些处理页面。用户提交美国税表后,通过向他们展示他们的信息发展方向以及他们可以期待的内容来消除任何焦虑,同时加强他们的品牌友好性和可访问性。 (这也有助于动画通过视觉上引人入胜的方式分散用户的相当冗长的页面加载!)。

Coin着名地使用示范动画来向好奇的访客在他们滚动浏览网站时向他们解释他们的整合卡的价值主张 - 无需按播放和浏览视频广告或涉及说明内容的段落。这个页面是'show,do not tell'的精髓。

05.装饰品

将装饰动画误认为是演示动画并不难。但是有一个关键的区别:演示将新信息带入系统,装饰动画则不然。它们是动画食物金字塔的脂肪和糖:它们是很好的增味剂,但适度是关键。

发现纯装饰动画的最佳方式是问:“用户可以从这个动画中学到什么?这是否指导他们或向他们展示他们不会不知道的东西?“如果答案是否定的,那么你手上可能会有装饰动画。

即使他们得到了糟糕的说唱,装饰动画也可以帮助将平凡变成非凡。修正主义历史的网站明智地使用装饰性动画,将平面插图带入生活。这些动画增加了足够的兴趣,使页面上的视觉内容更加简洁,让用户专注于播客。

Polygon.com使用动画插图创建了一系列控制台评论的中心部件。这些装饰性动画可能没有添加新的信息,但它们至关重要地强化了Polygon品牌。他们还帮助每个控制台评论从竞争中脱颖而出,当时竞争对手使用相同设备的难以区分的照片。

本文摘自Rachel Nabors的“工作中的动画 - 一本书的简介”电子书,它指导您完成跨团队的网络动画,模式和沟通决策的剖析。在这里购买。

阅读更多:



翻译字数超限