交互动画设计

交互动画设计的基 本章知识点 交互设计与交互动画 础知识 交互动画实现法则 不同领域中的交互动画 信息时代的特征之一是各种各样的基于软件的产品包围着 交互动画展示 我们的生活和工作。这种状况导致很多没有接受过专业知识学 After Effects 基础知识 习的人员也想面对各种各样的交互产品 , 并对其进行了解与学 After Effects 与交互动画设计 习。那么什么是交互设计呢？交互设计又被称为互动设计，英 文名称为 Interaction Design, 缩写 XD。同时交互设计是定义 和设计人造系统的行为的设计领域。 　

　1.1　　交互设计与交互动画 随着人们逐渐依赖于互联网，越来越多的人使用手机、平板等移动设备访问互联网。这些设备便 成为让互联网与人进行交互的媒介，于是手机系统的人机交互体验就变得越来越重要。本章首先对交 互设计及交互式动画的基础进行了解，从而为后面的交互动画设计和制作打下良好的基础。 1.1.1　交互设计概述 什么是交互设计？交互设计定义了两个或多个互动的个体之间交流的结构和内容，使之相互配合， 共同达成某种目的。这些个体指的是人及其使用的产品和接受的服务。交互设计努力去创造和建立的 是人与产品及服务之间的有意义的关系。 从设计师的角度来说，通过交互设计可以让产品更加易用，可以让用户在使用产品的时候更加愉 悦，满足用户的目标和用户的期望。交互设计师通过了解“人”本身的心理和行为特点，结合自己的 灵感，设计出各种有效的交互方式。 交互设计来源于生活且高于生活。交互设计应该智能化，能够帮助人们分析、思考和简化。

现如今想把页面动画片保证最让人印像刻骨铭心以至于震撼早已是很艰难的事儿。如今的动画片适用于主要表现在显示屏间的互交，表明怎么使用这一手机应用程序或简易以便引导客户的集中注意力，在各种各样探寻有关动画片的稿子的全过程中，我发现了基本上全部的稿子都局限性在叙述某一应用实例，或是详细介绍动画片的基本要素。 我都还没见到一切一段文字主要关心怎么让页面互交变得越来越清楚，叙述地更具备理论性

1.动画的时长和速度 Duration and speed of the animation
当各个元素改变他们的状态以及位置时，动画的时长应当足够慢以确保用户们能注意到这些变化的可能性，但同时也要足够快以避免等待。


在动画中使用适当的时长。既不要让它太快，也不要慢得让人打哈欠许多研究发现最佳的界面动画速度应当介于200至500毫秒(ms)。这些指数是基于特定的人类大脑属性的。任何少于100毫秒的动画都属于猝发性的，并且丝毫都不会被注意到。而任何长于一秒的动画都会产生延迟的感觉，因此会让用户感到无聊。


应该在交互中使用的动画时长
在移动设备设计中，Material Design准则建议把动画时长限制在200-300毫秒。在平板设计中时长应该增加30% - 大约介于400-450毫秒之间。原因很简单：屏幕尺寸越大，物体移动改变位置所需时间越长。在可穿戴设备界面设计中，时长应该相应缩短30% - 大约介于150-200毫秒之间，因为屏幕越小移动距离越短。


移动设备尺寸影响动画时长


网页动画则需要被区别对待。由于我们已经对在浏览器中打开即时加载的网页习以为常，同时我们希望迅速切换网页的状态。所以，网页切换的时长应该比移动设备少两倍 - 介于150-200毫秒。否则，用户会不可避免地认为电脑卡顿或者网络连接出现故障。


但是，以下情况有所例外。如果你是要给你的网站创建一个装饰性的动画，或为了把用户注意力吸引到特定的元素上的时候，动画应该有所延长。






大尺寸屏幕电脑 = 慢速动画！没门！


你需要记住无论什么设备，动画时长不仅应该由移动距离决定，也应该由物体尺寸决定。元素越小且变动越小的动画，应该移动地更快。相应地，含有大且复杂元素的动画持续得略长些看起来会更舒适。


在具有相同尺寸的移动物体中，最先停下的物体所经过的距离最短。


相比于大尺寸的物体，小物体移动反而较慢，因为它们会产生较大的位移。






动画时长根据物体尺寸和移动距离不同而变化


根据物理学定律，当物体发生形变时，形变的能量会被均匀分散到物体中。所以，最好还是尽量排除使用反弹的效果，只在特定案例中使用为好。






避免使用反弹效果以避免注意力分散


物体运动应该是清晰敏锐的，所以不要使用动态模糊（是的，After Effects的用户们，现在不是时候）。即使是在现代移动设备上也很难显现出效果，而且这种特效也根本不是用于界面动画的。






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


列表项（新闻卡，电子邮件列表等）逐个元素出现时，之间应该有个短暂的延迟。每个新元素的显现都应该持续20-25毫秒之间。元素出现速度比这更慢的话可能会惹恼用户。






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


2.淡入淡出 Easing
淡入淡出效果让物体的移动更自然。这是动画设计基本准则中的一条，在迪士尼动画师 Ollie Johnston and Frank Thomas所著的Illusion of Life: Disney Animation中也有所描述。为了让动画看上去不机械生硬，应该给物体移动适当增速或减速 - 像实际生活中一切有生命的物体一样。






相对于线性移动，淡入淡出效果让动画更自然


2.1 线性移动 Linear motion
不受任何物理力影响的物体会做线性移动，也就是说，移动速度恒定。也正因为如此，人眼看上去会十分不自然。


所有制作动画的应用程序都使用动画曲线，我会尝试说明应该如何阅读并理解这些曲线。曲线显示物体的位置（y轴）在相同的时间间隔（x轴）内如何变化。在现在这种情况下，运动是线性的，所以物体在相同时间内移动相同距离。






线性移动曲线


例如，线性移可以在改变物体颜色和透明度的时候被应用。一般来说，当物体位置没有发生变化的时候，我们可以使用线性移动。


2.2 淡入或增速曲线 Ease-in o r  acceleration curve
我们可以从曲线上看到，物体在开始时移动缓慢，并且速度逐渐增加。这意味着物体正以特定的加速度进行移动。




增速曲线


这条曲线应该被用于当物体全速飞离屏幕的情况，比如系统通知或者就是界面中的卡片一类。但是需要注意这种类型的曲线仅仅适用于当物体永远离开屏幕，即我们再也不需要把它们召回或退回的情况。




卡片抛出屏幕的增速曲线


动画曲线可以用来表达恰当的情感语义。在以下例子中，我们可以看到所有物体的移动距离和时长全都相同，但即便曲线中的细微变化也可能会影响动画产生的情感语义。


当然，通过调整曲线，你也可以尽可能逼真地模拟出现实世界中的物体移动。




相同时长和距离，但是不同情绪


2.3 淡出或减速曲线 Ease-out o r  deceleration curve
和淡入曲线相反，物体快速移动了很长的距离然后慢慢减速，直至完全停止。




减速曲线


这种类型的曲线应该被用于元素开始出现在屏幕上的情况 - 全速飞入屏幕，逐渐减速直至完全停止。这种曲线也适用于来自屏幕外的不同的卡片或物体出现在屏幕上的情况。




正确出现的减速曲线


2.4 淡入淡出或标准曲线 Ease-in-out o r  standard curve
这种曲线使得物体在开始获得速度，然后慢慢速度归零。这种类型的运动被广泛应用到界面动画中。任何时候你犹豫在动画中使用何种动效，使用这种标准曲线就对了。




标准曲线


根据Material Design准则，使用对称的曲线可以让运动更加自然和真实。曲线的末端必须被着重强调而不是开端，也就是说增速的时长要短于减速的时长。这样，用户将会更加关注元素最终的移动，从而关注其最新的状态。




试比较对称和非对称的标准曲线


淡入淡出常被用于物体从屏幕一端移向另一端的情况。这时，动画应避免引起用户的注视或过强的影响效果。


卡片在屏幕上的移动和相应的对称曲线
这种类型的移动应该被用于当元素从屏幕消失，但用户可以随时把它退回到前一状态的情况，诸如导航边栏等。




导航边栏从屏幕隐去以及标准曲线


从这些例子中可以总结出许多初学者忽视的基本规则 - 开始动画不等于结束动画。还是以导航边栏为例 - 它随着减速曲线出现，但随着标准曲线消失。另外，根据Google Material Design, 物体出现的时间应该较长以便吸引更多注意力。




边栏的出现和隐藏通过相应的减速和标准曲线来实现


三次方贝塞尔函数(function cubic-bezier)通常被用来描述这种曲线。之所以被称为三次方是应为它是基于四个端点。第一个端点在坐标0;0（左下方），最后一个端点在坐标1;1（右上方）都已经在表中被界定。


基于我们仅仅需要描述表中的两点，它们由贝塞尔函数的四个参数决定：前两个是x和y轴的第一个值，后两个是x和y轴的第二个值。


为了简化你的工作，我建议设定曲线的时候使用easings.net和cubic-bezier.com网站。第一个网站包含了一系列常用的曲线和参数，可以直接拷贝到你的建模工具中。第二个资源可以让你尝试不同的曲线参数，并且可以直观地看到物体是怎样移动的。




不同类型的曲线，和相应的贝塞尔函数的参数


3.界面动画的编排
就像芭蕾舞编排一样，主旨就是将用户注意力流畅地从一个状态引导过渡到另一个状态。


主要有两种类型的编排 - 均等和从属交互


3.1 均等交互
均等交互的意思是所有物体的出现遵循一个特定的准则。


在此情况下，所有卡片的出现可以被看作是将用户注意力自上至下单项引导的过程。如果我们不遵循这个规律，用户的注意力就会被分散；而如果所有元素全都一起出现，也会看起来很糟。




用户注意力应该被流畅地引导至同一方向


至于表格视图，会有一些复杂。在这里应当将用户的注视点按对角线的方向引导，因此一个接一个地展示元素就不太好了。逐个显示元素会使动画过长，并且用户的注视点将呈锯齿状，这是错误的。




按对角线方向出现的表格视图卡片


3.2 从属交互
从属交互的意思是我们以一中心物体吸引用户注意，并且其它所有物体都从属于它。这种类型的动画可以带来秩序感，并引起对主要内容的关注。


在其他情况下，用户很难了解到要跟从哪个物体，才会让他的注意力不至于分散。因此，如果你有若干元素想要添加动画，你需要清晰地安排出它们动作的顺序，并且尽可能减少同一时间出现对象的数量。


只做中心物体的动画并让其他物体从属于他这种做法很可取。否则，用户将不知道去跟随哪个物体
根据 Material Design，当移动的物体不成比例地改变大小时，它们应该沿弧线而不是直线移动。这会让移动更加自然。“不成比例”是指物体长和高的增减变化是不对称进行的，即遵照不同的速度（例如，方形卡片变成长方形）。




一个物体不成比例地改变了尺寸，它的运动轨迹应该沿一条弧线


沿着直线运动的情况应该被用作当物体成比例地改变尺寸时。由于这种运动的应用更容易，不成比例的弧形运动准则常常被忽视。看这些应用程序的实际案例，你就会发现线性移动占绝大多数。




按比例变换尺寸的情况通过沿着一条直线实现


沿着曲线运动可以通过两种方式实现：第一个叫垂直移出(Vertical out) - 物体一开始水平地运动，然后以垂直运动结束；第二种叫水平移出(Horizontal out) - 物体一开始垂直地运动，然后以水平运动结束。


物体沿曲线移动的轨迹必须与界面滑动的主轴重合。例如，在下面一幅图片中我们可以上下滑动屏幕，相应地，卡片沿垂直移出(Vertical out)的方式展开 - 先向右后向下。反向运动按相反的方式完成- 卡片先垂直向上，然后按水平运动结束。


卡片展开或折叠的方向应当与界面轴重合如果移动物体的轨迹相交，则它们不能相互交叠移动。物体应该通过增加或减少它们自己的速度去给另一个物体的运动让出足够空间。另一个选择是 - 它们可以把另一个物体推走。为什么会这样？因为我们假设界面中所有物体处在同一平面中。在移动中，物体不应该互相穿透移动，而应为其它物体的移动让出空间
另一种情况，移动的物体可以向上越过其它物体。但要再次强调，不能有穿过其它物体的叠加或移动。为什么？因为我们相信界面中的元素遵循物理学定律，而在真实世界中没有固体能穿过其它物体。