产品交互系列:通过动画效果引发用户情感共鸣

产品交互系列:通过动画效果引发用户情感共鸣插图

动画效果通常被认为是可以改善用户体验的东西,但是总体上不会有太多价值上的提升。因此,就像是化妆的最后一步涂口红那样,才会在产品设计过程的最后阶段考虑增加动画效果。

但是,如果我们重新考虑实现动画的方式并将其作为设计的基础会怎么样呢?在本文中,将介绍何时以及如何通过动画效果引发用户情感共鸣。

旁注:就本文而言,我不使用“喜悦”一词来描述动画。在情感环境中,“喜悦”是一个不太恰当的词,原因是相同的动画效果可以使一部分用户感到喜悦,但也会惹恼另一部分用户。

用动画讲故事

每个经历都是一种叙述。所有的移动应用或网站,都有一些特定的信息要传达给用户或访客。

每个设计师都是讲故事的人

可以遵循许多不同的方式来讲故事,但是有些方式比其他方式更有效。俗话说的好“一图胜千言”。使用动画,可以增强图片的效果。动画效果不仅可以帮助设计师更有效地传达信息,还可以使整个故事更具吸引力。当设计师将这一原理应用于设计时,会创造出真正令人难忘的体验。

使用动画描述复杂的概念

当设计师向用户或访客传递非常复杂的信息时,使用动画获得的效果是非常棒的。这非常简单:

显示,而非讲述

让我们看看这个概念在“强调回收的重要性的网站”,这个特定案例中的运用。设计师使用动画来显示人们应该如何处理垃圾,而不是告诉访客正确进行垃圾分类的重要性。

产品交互系列:通过动画效果引发用户情感共鸣插图图片来源: Leo Natsume

用动画叙述

叙述是事件的线性进展,这些事件在整个用户体验中都联系在一起。设计师创建叙述的最简单方法是使用视差效果。当用户向下滚动或跨页面滚动时,UI 设计中的视差效果会形成 3D 滚动效果。

视差效果有明确的功能目的:因其形成的视觉连续性,能够帮助用户或访问者了解他们当前体验的明确位置。

产品交互系列:通过动画效果引发用户情感共鸣插图(1)使用视察效果形成的是连续性,图片来源:Zak Steele-Eklund

重新思考基本的移动交互

在动画的帮助下,可以进行基本的交互并使它们焕然一新。动画效果对移动应用尤其重要:动画效果让用户忘记了他们那只是在轻敲玻璃,而让他们感到自己正在与屏幕上的真实元素进行交互。

难忘的首次登录体验

动画可以帮助用户查看动作的效果。第一次体验时,这个效果特别好。

从下面的例子可以看到动画效果如何将用户引导到下一个界面——界面切换从而传达出层次结构。

产品交互系列:通过动画效果引发用户情感共鸣插图(2)图片来源:Jakub Antalik

用 Readme.io 这个应用举例,它是动画如何使首次登录受益的另一个很好的例子。该应用在登录期间使用猫头鹰吉祥物。当用户输入密码时,猫头鹰遮住了眼睛。第一次看到该动画效果时,会感觉这十分有趣。

产品交互系列:通过动画效果引发用户情感共鸣插图(3)当用户输入密码时,猫头鹰遮住了眼睛

有趣的滚动效果

动画可以考虑对象的物理属性。在接下来的举例中,滚动屏幕的同时,通过考虑到液体的状态从而增强交互的物理感。

产品交互系列:通过动画效果引发用户情感共鸣插图(4)图片来源:Sergey Valiukh

丰富与数据的互动

当设计师使用有趣的动画效果时,即便是诸如数据可视化之类的众所周知的概念也变得有趣而出乎意料。

产品交互系列:通过动画效果引发用户情感共鸣插图(5)图片来源:Ramotion

使反馈变得更加自然

动画可以很好地提供反馈,让用户知道正在发生或已经发生的事情。通过将微妙的动画效果使用到设计中,可以使用户感到自己正在与具有个性的事物进行交互。

产品交互系列:通过动画效果引发用户情感共鸣插图(6)图片来源:Daryl Ginn

结论

当人们与电子产品互动时,他们更欣赏具有人性化的产品提供的价值。设计师需要告别静态用户界面,并创建更加生动有趣的界面,从而更好的引发用户的情感共鸣。

 

原味地址:http://babich.biz/animation-emotions/