🤪如何让动效脱颖而出😆 表现手法/情感连接/动效心理等等

　　因为动效是互动的载体，人是参与互动的主体，人的心智模式决定了，这个人在互动前的预期值。计算机发明之前，人们就使用过各种样式的按钮，了解其使用方法和互动会产生的结果：有的按钮像跷跷板，按下上方部分下方部分翘起，“咔”一下，室内的灯也亮了；有的按钮按下后就会立即复原，按下便可以让遥控车向前移动一步；这两种按钮形式也被借鉴到了我们的手机里。我们不需要额外学习就能掌握用法。

　　通过合理的动效。让虚拟界面模拟物理世界的规律，例如惯性、视差等等，可以让这个虚拟的世界与物理世界产生交集。用户会把自己对物理世界的认知映射到对产品的认知上。

 

========== 连接生产和情感 ==========

　　在动效呈现方式多样化的情况下，动效的作用究竟是什么呢？这次我想把焦点放在连接情感上。

　　动效是将现实中没有的感情表现视觉化的一种艺术手段，如果知道了如何与感情联系起来的话，动效表现就会用户再进一步拉近距离。

1.简易版（放大）

　　放大动效几乎可以在任何地方使用。

　　这个动画可以适当地突出，也可以引导视线，所以在UI动画中经常使用。

　　但是，它几乎没有与感情相关的内容，只是一种提供信息的动画。

　　为了制作与感情相关的动效，需要添加效果或稍微改变展现方式。

2.简单版

缩小的动画因为画面大适合中央显示。

另外，因为一开始就用大图标，所以可以强制引导视线。可以和全画面保持一致的协调性。

我们可以通过加入模糊表现来增加深度表现。

比起与感情的关联，对信息的视线引导作用更大。

情绪_和平

1.简单（淡入）

这并不是什么引人注目的举动，而是不经意间出现的举动，是不容易被注意到的表现。

比起显示主图标，在显示副信息时更容易使用。

在展示主要信息之后，将次要信息的文本淡化，这样就不会从主要内容中夺去视线，能够顺畅地显示信息。

情绪_悲伤

1.燥波

从细小的尘埃中出现的图标，这种表现可以使人心情平静，根据颜色的不同也可以使人感到悲伤。

通常用于表达世界观，或是无法过关时的表现。

情绪_焦虑

1.失真

在淡入中加入了畸变和模糊，做出了视野飘忽不定的表现。

展现世界观的场合是在缓慢的水中表现，与世界观无关的场合是在恐怖和无法通关的时候表现。

不聚焦的表现慢慢地出现会煽动不安。

情绪_未知

1.闪烁

在弹出的瞬间翻转图标的颜色，加深印象。

人的眼睛在看到强光后，作为光的残像的补色会烙印在眼皮底下，所以在弹出图标的瞬间就表现出来了。

情绪_惊喜

1.毛刺

这是一种很适合展现数字化的表现方式，在网络系统和动态视觉表现中经常可以看到。

2.点亮

在没有任何预备动作的情况下突然弹出图标，给人以惊喜。

点亮后给人留下强烈的印象，同时就像在夜晚突然打开灯给人一种强烈的印象。

情绪_兴奋/愤怒

1.震惊

　　因为连续闪烁强烈对比的明暗，是非常醒目的表现。

　　在动效中，不仅是图标，在整个画面中使用的情况也很多，但是频繁地展示会造成压力，会给观看者造成很大的负担，所以使用场所有限。

情绪_兴趣

1.冲击波

这是想要引人注目、引起兴趣时使用的表现形式，在放大动画的基础上添加了效果。

因为能够以简单、少的信息量吸引用户，所以可以在各种场合使用。

情绪_期待

1.倒数

呈现出来的是知道出现时机的演出，在概要走完一圈的时候知道会发生什么事。可以提高观看者的心理预期。

情绪_期望

1.闪现

2.冲击

为了吸引视线，可以在导入时加入有动态的表演，让人对之后会发生什么事产生期待和警戒。

由于给予用户期待感的情况较多，如果放置不符合期待感的图标，这种不平衡反而会给人压力。

情绪_快乐

1.焰火

2.发光的

用漂亮的效果使图标周围变得热闹，表现出高兴的样子。

烟花是最容易理解的让人高兴的表现，发光是稍微沉稳的时尚/华丽的印象庆祝。

情绪_摇头丸

1.闪光

成为最高层次的喜悦。

为了让背景热闹起来，同时让中央的图标看起来更华丽，在得到惊喜奖励反馈的时候经常被使用。

概括

除了这次提到的动效以外，种类还有很多，通过动效的组合，能够更加强烈地诉诸感情。

========== 关于UI的详细移动 ==========

　　缓动指的是物体在物理规则下，渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然，这是运动的基本原则之一。对于缓动，迪士尼的两位关键性的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著作《The Illusion of Life: Disney Animation》中有过非常详尽的描述。

　　为了不让动效看起来机械或者人工痕迹太明显，元素的运动应该有渐进加速和渐进减速的特征，就像物理世界当中其他的物体这样。

　　在调动效时，有一种叫做缓动的东西。缓动可以减慢运动速度并创建您想要突出的运动或自然运动。这种缓动不仅适用于 UI 动画，还适用于角色运动、特效等，它是一个重要的元素。

有无缓动

1.无缓动

由于它以恒定速度移动，因此当窗口达到其最大尺寸时，它的突然停止会给人一种强烈的印象。

2.有缓动

起初是剧烈膨胀后，在达到最大值之前逐渐减缓，给人一种柔和的印象。

3.预备操作

预备动作是事物开始动作时的第一前置个动作。

例如：

　　在打字的时候，把手指抬起再放下。

　　在起跳的时候，先蹲下蓄力再跳起。

这个抬起的动作和下蹲动作都是预备动作。

像这样，采取与想要行动相反的行动，就是预备动作。

将这个动作加入到UI中，可以让用户看到更自然的动作。

那么，UI中什么是预备动作呢？我们来看一下关闭弹出框的时候。

关闭时，加入完全相反的扩大的膨胀运动成为预备动作。

现在，按钮触发时的预备动作是什么？

当按左上按钮时，它可以通过将其缩小来显示为弹出窗口的预备动作。

4.过冲

当 UI 移动时，还有一种称为过冲的移动。是在面板加速超过目标点后返回目标点。

在有速度的状态下，人由于惯性，动作不会突然停止，而是会为了停止而过渡，然后再返回。

这种情况在人的动作中比较常见，所以将其套用在UI的动作上，就会显得很自然。

5.插入缓入缓出

速度快的在目标点附近慢慢地停下来。

这和汽车的刹车很像，也能表现出自然的动作。

通过曲线可以看到，物体开始时候的初速度比较低，运动缓慢，随后速度逐渐增加，这意味着物体在加速运动。

速曲线可以适用于多种不同的 UI控件和元素，包括从屏幕外进入屏幕内的的卡片、条目等。

6.弹跳

　　扩大后的最大到达点就是目标点，然后反复缩小扩大，最终到达目标点。

　　模拟球撞击地面后弹起，最终停留在目标点上。

　　动效的运动规律要符合物理规律，当元素运动到边界，发生碰撞的时候，碰撞的「能量」最终是要均匀分摊下来的，而弹跳的特效在多数情况下是不适合的，仅在特殊情况下适合使用。

 

　　避免使用弹跳特效，它会分散用户的注意力。

========== 动效的持续时长和速度 ==========

　　UI 动效的感觉可能看起来都一样，但实际上在应用程序中的效果都有有细微的差别。这篇文章将解释窗口中菜单动效的进入和退出的差异。

　　当元素的位置和状态发生改变的时候，动效的速度应该足够慢，维持足够长的时间，让用户能够注意到变化，但是同时，又不能慢到需要用户去等待。

　　动效时长应该控制在200~300毫秒之间，在平板电脑上，这个时长应该延长大概30%，也就是说，时长应该在400~450毫秒之间。原因很简单，屏幕尺寸越大，元素在发生位移的时候，跨越的距离越长，速度一定的情况下，时长自然越长。相应的，在可穿戴设备的小屏幕上，这个时长应该缩短30%，在150~200毫秒之间。

动效的持续时长和速度

1.速度根据大小变化

    

这三个动画在按下按钮后显示小、中、大窗口，但动画速度根据面板大小而变化。

较小的移动速度较快，较大的移动较慢以使动画看起来更自然。

下图显示了如果这种运动被逆转会是什么样子。

　　逆转之后的小窗的动作看起来很慢，感觉有点呆板。大窗口快速移动，给眼睛带来很大压力，似乎令人震惊和紧迫。

　　流畅舒适的动画自然会让人感觉更接近现实生活中的动作，因此可以通过缓慢移动大事物和快速移动小事物来得到更自然得体验，这样不会显得很违和。

　　如果还想尽快完成动画以减少用户的等待时间，可以尝试从中途开始播放。

　　动画从头到尾不需要全部展示，即使将开头剪到一定程度，也会在大脑中自动补帧完成，给你自然无不适的体验，所以推荐这个方法。

　　从头播放整个动画的缺点是动画长，用户视线太强。

2.结束动画的速度

　　进入动画让用户知道此操作是可以关闭的。

　　用户在看到此面板并且执行关闭事件之后，仍然记得自己需要继续做什么很重要。所以没有必要让结束动画过于突出，所以最好缩短动画时间 快速完成，这样可以方便用户可以在不分心的情况下直接进入到下一个内容或场景。

　　将出现的面板从右侧进入通常是正确的，但是当用户的关闭面板时，它的缺点是将注意力吸引到右侧。

　　作为这种情况下的补救措施，我认为将最后的动画制作得极短并且反方向退出可能会让人不舒服，而当场将其擦除是一种选择。相比上一种方案用户视觉中心仍然暂留在原地。

　　所以根据您希望用户在关闭后查看的位置调整动画非常重要！

总结

- 播放动画时根据窗口大小调整时间和速度。

- 结束动画时间短，不会分散用户的注意力。

- 用户在关闭后查看的位置 调整动画非常重要。

========== 不该做的 UI 动画==========

　　当制作 UI 动效时，大家可能都知道如何处理移动。让动效看起来很酷，但是如果移动太多怎么办，应该移动多远，弹性？

　　当进行一系列联想时，往往会迷失用户体验的真实感受。

　　酷炫很加分，但是目标方向错了，再努力也没有意义。

　　绝大多数情况下，只需要让动效简单就可以，不必考虑复杂。

　　注意在画面中不要移动太多，因为大多数没有注意到的动画会比注意到更舒适。

1.错误的视线引导

　　我想让主按钮“START”在这个屏幕上突出，但右上角的按钮很明显。眼睛往右上方的原因是视线移动到了最后一个移动部分，所以视线被不必要地引导到了右上方。

　　此外，对比度和移动量的变化比主按钮更大，因此会很明显。

2.不必要地等待

　　视线转到最后一步，但是由于延长了最后一个动画以试图将视线引导到主按钮，因此用户正在等待动画。

　　由于立即按下按钮来到达下一个场景很重要，即使优先移动了其他按钮想以使主按钮突出，用户在某些特定情况下也想快速按下它，所以动画需要短而快，因为用户希望能自由操控。

3.动作太多，优先级不明确

　　有时动效做多了，导致用户不知道哪个按钮很重要。

　　当加入很多动画时，往往容易发生这种情况，如果所有东西都在画面上移动，用户就无法确定优先级，而且往往会忽视其潜在目的。

　　我们修改动效优先级的话，这样用户就不会迷失在按下哪个按钮上。

4.图层顺序和移动不自然

- 因为动效是为了引导视线而加入的，所以放在了图层后面与想要突出的按钮动效起到了相反的作用。

- 下半场速度变快时突然停止的动作看起来不自然，很突兀。而且在质量方面，看起来像还没有完成。

5.错误滑动

如图所示中央的内容看起来是可以滑动的动画，在实际项目中是不行的，这样的动效有可能会让用户产生误解。

6.喧宾夺主

真正想突出什么？如何防止用户迷路？实际上应该是为了用户方便操作优先。

有必要再次确认是否确定了优先顺序。

7.大量的眼球运动（均等交互）

　　当它从左上角呈阶梯运动时，视线不知不觉地呈锯齿状移动，用户会感到疲倦。

　　在这个实例当中，所有的卡片都遵循着一个方向来引导用户的注意力，自上到下地次第加载。相反，没有按照这样清晰的规则来加载，用户的注意力会被分散，元素的外观排布也会显得比较糟糕。

　　至于表格式的布局，它相对就复杂一点。在这里，用户的视线流向应该是清晰的对角线方向，因此，逐个区块次第出现是一个糟糕的设计。这样的逐个显示，一方面耗时太长，另一方面会让用户觉得元素的加载方式是锯齿状的，这种方式并不合理。

例如，如果您想从左上角开始动画，您可以通过移动视线使其流向右下角来减少眼睛的移动。

概括

　　均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。

　　所要做的就是展示您想要突出的部分。

　　屏幕上布满了移动面板和按钮等动作，想要吸引人注意的东西只要简单地展示就可以了。

　　随着其他操作的进行，屏幕上的元素数量可能会增加，展示物体的数量可能会增加，应该考虑需要将用户的视线引导到哪里，考虑优先级。适当做一些减法。

　　总之让我们保持简单，不要做太多！

========== 结语 ==========

　　当然，即使是遵循这么多规律，动效的设计依然是一门艺术，而非单纯的科学，多做测试多摸索总是有必要的。

　　如果动效按照正确的方式来设计，它应该是不显著，且不会分散用户注意力的。如果不是这样，那么你需要让动效更微妙一点，实在不行甚至需要将它移除。动效不应该成为影响用户操控界面的障碍，或者转移注意力的存在。

　　总结了这么多动效运动的规则和原则，从某种意义上还是延续自我们对于物理世界的认知，摩擦力和加速度在虚拟界面中以另外的方式续存着。模仿现实世界的界面让我们对于界面的秩序有更清晰的认知，允许我们更轻松的了解和访问界面的内容。