超全面的UI设计动效的基本规则总结

来源:
橘子
时间:
2019-07-03 11:23:05
阅读:
7428


 

现如今,优秀的界面动画很能让人产生深刻印象,甚至是带来惊喜。它一方面表达了界面之间的交互过程,解释说明如何使用应用,另一方面也能正确引导用户的注意力。在浏览关于动效的文章时,我发现几乎所有的文章都只描述了特定的案例或者关于动画的一般事实,但是我还没有遇到过任何一篇文章能够清晰的描述所有关于界面动画的使用规范。在这篇文章中我不会写任何新的知识,我只是想把所有的主要原则和规范做一个收集归纳,这样就能便于其他设计师进行快速决策了。接下来从三个方向总结动效表达形式。

 

一、动效时间节奏

二、动效模式

三、动效案例分类

 

 

一、动效时间节奏

 

1:动画的速度和持续时间

当界面元素改变他们的状态和位置时,动画的持续时间应该以用户能注意到又不用等待为标准。合适的动画时长,既不要太快也不至于慢到让用户打哈欠。

 

大量的研究发现在界面中最优的时间是200-500ms。这个数字是根据人类大脑的特殊性得出来的。任何小于100ms的动画是人类很难感知到的,而其他大于1秒的动画又会让用户觉得有些延迟,不够流畅。

动画的持续时间是使得界面流畅的关键

 

在手机上,谷歌设计规范同样建议动画的持续时间在200-300ms为宜。在平板电脑上,这个时间会稍微长30%,大约在400-450ms。原因很简单,在更大的屏幕上,元素变化的位置路径会更长。基于此,在可穿戴设备中,持续时间又要缩短30%了,大约在150-200ms,因为小屏幕上元素变化的位置路径会更短。设备的大小会影响动画的持续时间。

 

在网页上又会是另外一种方式。由于我们习惯于在浏览器中快速打开网页,所以我们也希望在不同的状态之间能够快速切换。所以,在网页上的动画应该要比在手机上持续时间少2倍多,在150-200ms之间。一旦超过这个时间区间,用户就会觉得网页是不流畅的,或者觉得是不是网络有了问题。但是,如果你是在页面中创建一些装饰性的动画或者目的是为了吸引用户的注意力,此时就应该抛弃这些规范,时间你可以做的更长一些。

大界面中的动画就一定是慢的吗?并不一定。还需要记住的一点就是,无论在什么平台,动画的持续时间不仅跟它的移动距离有关,还跟它本身的大小有关系。小的元素或者变化不大的动画应该要移动的更快,而大的元素或者复杂的元素持续时间稍长一些看起来会更好。

 

在大小相同的对象中,移动距离最短的物体应该最先停止。小的对象与大的对象相比较,小对象移动速度显得更慢,因为会产生更大的偏移量。动画的持续时间取决于物体的大小和移动的距离。

 

 

当对象发生碰撞时,根据物理原则,碰撞的能量必须在碰撞对象之间平均分布。而如果在界面中只能看到碰撞体的一部分回弹,往往会显得不够自然。因此,最好避免回弹效果,只在一些特殊情况下才用到它。避免使用弹跳效果,因为它会分散注意力。

 

 

物体的运动轨迹应该是清晰锐利的,所以尽量不要使用动态模糊(在AE中做动画效果除外)。即使是在现在最新的设备上也很难重现这些效果,不能把这种动态模糊的动画效果应用到界面中。动画中尽量不要使用动态模糊。

 

 

列表项的出现应该只允许有一个短暂的延迟。每一个新列表项的出现间隔应该在20-25ms之间。元素出现太慢的话,会让用户感到很不爽。列表项出现的动画应该在20-25ms之间。

 

 

 

2:缓动

 

缓动可以让物体运动的更加自然。这是动画的基本原理之一,在 Ollie Johnston 和 Frank Thomas所写的《 The Illusion of Life: Disney Animation》书中有详细的解释。为了让动画看起来不会觉得太过机械,物体的运动应该会同时伴有一些加速度,就像现实世界中的运动一样,不会有绝对匀速的运动形式。

缓动的物体会比较线性运动的物体看起来更加自然

 

 

3:线性运动

 

不受任何物理因素影响的运动叫做匀速运动,这种动画在用户眼中看来是非常的机械和不真实的。

所有的APP动画都会用到动画曲线。我将试着去解释如何阅读它们并说明它们的含义。下面的例子中,运动就是匀速的,可以看到对象在相同的时间间隔中移动了相同的位置。

线性动画在什么时候会用到?举个例子,对象仅改变它的颜色和透明度的时候会用到。一般来说,当一个对象不改变它的位置而只是改变状态时,可以尝试用线性动画来改变状态。

 

4:缓入或者说加速曲线

我们可以在曲线上看到,在相同时间内,位置的变化会越来越大。这就说明一个物体是在进行加速运动。

 

 

这种曲线一般应用在对象移出界面时,这些可能是系统通知,也可能只是界面中的卡片设计。但是记住,这种动画曲线只是会用在物体移出界面时,而反过来就不适用了。

 

 

动画曲线有助于表达正确的情绪。在下面的例子中,物体动画的持续时间和位移大小都是相同的,但你会发现即使是曲线上一些微小的变化也会让你看动画的感受不同。

当然,通过改变曲线,可以让物体的运动显得更加真实自然。

相同的持续时间和相同的位移变化,但是会有不同的感受

 

 

5:缓出或者说减速曲线

与缓入恰恰相反,物体的运动在开始时位移变化很大,但是后面会越来越小直到最后完全停止。

减速曲线

 

 

这种类型的运动曲线通常是用在物体进入界面中时——快速进入屏幕然后再慢慢停下来,在不同卡片或对象从屏幕外进入界面时可以应用上。

减速曲线在此时会让动画显得更加自然

 

 

 

6:缓入缓出或者说标准曲线

这种曲线使物体有加速和减速的过程。这种类型的动画在界面中是最常用的,当你还在迟疑该用怎样的动画曲线时,选择标准曲线准没错。

标准曲线

 

 

根据谷歌规范,建议最好是用一些非对称曲线来使得物体运动的更加自然真实。动画的结尾会比动画的开头更加需要去强调,这样的结果是加速时间要小于减速时间。在这个情况下,动画能够引导用户更加关注元素的结束部分,以至于关注到其新的状态。

注意观察对称与非对称曲线的区别

 

 

缓入缓出动画常被用在界面中对象从一个位置移动到另一个位置时。在这种情况下,动画的目的是为了不让人有过多不必要的关注。

卡片的非对称曲线运动

 

 

同样的情况还适用于,元素在界面中消失后用户还能随时显示,抽屉导航就是这样的例子。

抽屉导航的收起过程就是应用到了标准曲线

 

 

从很多例子中可以看出许多初学者都忽略了一个基本的规则——开始动画不等同于结束动画,应该分别去设置,比如在抽屉导航动效中——打开是一个减速动画但关闭时却是一个标准曲线动画。另外,根据谷歌设计规范,物体出现的动画持续时间应该略长,以吸引用户更多的注意力。

侧边栏的动画是配合减速曲线和标准曲线一起来实现的。有一个立方贝塞尔函数常用来描述这种速度曲线。之所以叫立方是因为它是基于2个点来的。第一个点在坐标轴中是(0,0)(左下),最后一个点是(1,1)(右上)。

基于此,我们只需要描述图上的两个点,这是由贝塞尔函数的四个参数给出的:前两个是第一个点的坐标x和y,后两个是第二个点的坐标x和y。

 

为了便于实际工作,我建议使用2个工具网站来操作

https://easings.net/

http://cubic-bezier.com

第一个包含一些最常使用的曲线列表,可以直接将其复制到原型工具中去。

第二个是可以给你自己自定义动画的曲线,并能实时查看效果。

 

 

不同类型的动画曲线以及他们不同的参数

 

 

7:动画在界面中的编排

就像芭蕾舞编排一样,主要思想是从一个状态到另一个状态的过渡引导用户注意力方向。

一般会有2种编排形式——同级动画和从属动画。

 

 

同级动画

同级动画意味着所有对象的外观都服从一个特定的规则。

在这种情况下,所有卡片都按一个相同的流程出现,引导用户注意力在一个方向上,即从上到下。如果我们不按照这个顺序,用户的注意力就会分散,如果所有元素同时出现也会很糟糕。

用户的注意力应被引导在一个方向上

 

 

至于表格视图,就会略微有些复杂。这种情况下,用户往往是以对角线为焦点去看界面的,所以逐个出现的形式也比较糟糕。另外,逐个出现的动画在时间上也会过长,而且把用户的注意力引导成锯齿状,这是很不友好的。

按对角线出现的表格视图动画

 

 

从属动画

从属动画是指有一个核心运动的元素,它吸引用户所有的注意力,其他元素也都跟随它的运动。这种类型的动画会显得更有秩序感,让用户更多的去关注到内容本身。

而在其他情况下,用户是很难知道他到底要去看哪个元素,注意力很容易被分散。如果要设置多个动画元素,一定要清楚的知道他的动画顺序,并尽可能的将其他动画元素弱化。

只赋予一个中心对象生命是值得的,而所有其他的对象都服从于它。否则,用户就不知道到底应该注意哪个元素。

 

 

根据谷歌规范,当运动物体的大小不成比例地改变时,它们应该沿着弧线而不是直线运动。这有助于使动画更自然。所谓“不成比例”,是指物体的高度和宽度的增加/减少是不对称地进行的,即以不同的速度变化(例如,一个正方形变成一个矩形)。

物体的运动如果不成比例,那应该按弧线变化。

 

 

当对象按比例改变其大小时,则此时直线运动的形式会更好。由于这种运动形式做起来容易得多,弧线轨迹运动的规律就往往被忽视。在现在很多应用中,我们都能找到这种例子。

等比的物体运动轨迹应该使用直线

 

 

曲线轨迹运动也会有两种实现方式:第一种是开始水平移动,然后以垂直运动结束;第二种是开始垂直移动,然后以水平运动结束。

 

物体沿曲线移动的路径必须与滚动界面的方向重合。例如,在下面的例子中,我们可以上下滚动界面,相应地,卡片以垂直的方式展开更合适——先向右,然后向下。

展开/折叠卡片的方向应与界面的轴线重合

 

如果物体的运动路径彼此相交,它们就应该不能穿过对方。物体应该通过减慢或加速自身的速度为另一个物体的运动留下足够的空间。另一种方式——只是推开其他物体。为什么要这么做?因为我们假设界面中的所有对象都位于一个平面上。(译者注:对于这一点我不是很认同,为了更加真实么?)

在运动过程中,物体不应该互相穿透,而是为另一个物体的运动留下空间。

 

 

在另一种情况下,移动的物体可以通过抬高于其他物体,而不会以溶解或通过其他物体的形式来移动。为什么?因为我们相信界面上元素的行为应该要符合物理定律,在现实世界中没有任何实体能够做到直接穿透对方。

 

如果我们总结上述所有的规律和原则,可以得出界面动画应该要反映物质世界的运动,例如我们都知道的,摩擦,加速等等。模仿现实世界的行为我们可以创建一个优秀的动画,满足用户的心理预期。一个优秀的动画,应该是不会那么刻意,也不会分散用户对目标的注意力。如果是的话,就需要优化它,或者干脆把动画去掉。核心标准是动画不应该降低用户执行任务的效率。但是不要忘记,用户对动画的好坏感受,是感性大于理性的。所以,最好是把做出来的动画给用户进行评鉴,然后再不断优化它。

 

 

 

 

二、动效模式

 

1.缩放

通过对目标对象的突出显示来吸引和引导用户的视线。

适合场景:当你设计的元素期望用户点击。例如在你的页面中新推出了活动或者是优惠项目,这个效果可以加强用户点击的欲望。

 

 

2.旋转

当一个特定对象需要被突出显示,旋转动画可以引人注目。最常见的就是我们在iOS上删除应用时,应用图标都会通过这种动画来提示用户。

适合场景:当选中的元素需要进行二次确认操作,这个动效能反馈被选中。例如删除安装的应用。

 

 

3.着色

通过用颜色的区分来突出显示的对象,一般用于点击或是选中的状态。

适合场景:如果在选项中可以进行多选,这个动效就特别适用。例如选择关注的明星,人物等。

 

 

4.褪色

周围对象的颜色变淡来突出显示的目标对象。此效果在点击图片放大时用的较多。

适合场景:如果在选中这个元素时将产生过渡,例如在一些选中图片进行放大过渡时,这个动效会更加适合。

 

 

 

5.模糊

周围对象模糊来突出显示的目标对象,iOS中的3D touch就是使用的这个效果。

适合场景:当多维度的交互产生时,不同的操作产生不同的结果,用动效反馈会更加合适,模糊背景突出选中状态可以是长按的交互操作,iOS中的3D touch就是使用的这个效果。

 

 

6.变暗

用周围元素的变暗来凸显目标对象,多用于弹窗的出现。

适合场景:选中一个元素,背景变暗类似于浮动效果,多用于选中的元素还要进行下一步操作,例如弹窗和输入框的弹出。

 

 

7.翻转

用翻转目标对象来显示选中对象。我们玩一些翻牌小游戏的时候经常会出现这样的效果。

适合场景:点击某个元素之后需要强烈反馈的。例如我们做一些趣味小游戏时,选中之后加上翻转效果会让用户产生期待感。平时慎用,这个动效会产生延缓等待的感觉。

 

 

8.发光凸显

通过对光影的变化来凸显目标效果。地图目标显示经常会使用这样的效果。

适合场景:使用发光效果来增加点击引导,例如一些重要按钮或者新增的功能模块,通过发光来引导用户点击。

 

 

9.改变深度

目标移到其他对象之前,来突出移动的目标的结果,用户看起来像是改变了深度。多用于列表的移动。

适合场景:两个或者多个对象进行切换时。例如一些影片或是图片的切换,表示同一层级下的不同选项。

 

 

10.放大

目标对象在用户交互的时候放大,如果对象没有被激活应该回到原来的大小。通过放大目标来显示哪个对象在活跃并且正在交互中。多用于一些tab的切换。

适合场景:多个元素进行切换选择时。例如tab切换、图标切换。

 

 

 

三、动效案例分类

 

1.滑动

信息列表会跟随着用户的交互手势而动,然后卡片到相应的位置上,保持整齐感,它属于指向型动画,物体的滑动取决于用户是用那种手势滑动的。它的作用就是通过指向型转场,有效帮助用户清理页面层级的排列情况。

适合场景:当你设计的元素需要导航以列表方式呈现的时候可以使用滑动效果。例如一些明星的选择,款式的选择,适合用这样的方式呈现。

 

 

2.扩大

页面中的卡片会从缩略图转化为全屏视图(一般这个卡片的中心点也会跟随移动到屏幕的中央)。反向动效就是卡片从全屏视图转换为缩略图。它的优点是能清楚的告诉用户点击的地方被放大了。

适合场景:当你设计的元素是需要和用户进行单一交互的时候。例如点开图片查看详情,让转场过渡更自然。

 

 

3.最小化

页面元素点击之后缩小,然后移动到屏幕上相应的位置,相反的动效就是扩大,从缩略图重新变为全屏。这样做的好处是能够清楚的告诉用户,最小化的元素可以在哪里被找到,如果没有动效引导,可能用户需要花时间去寻找。

适合场景:当用户想要最小化某个元素的时候。例如搜索、添加快捷按钮的点击事件,符合从哪来到哪去的原理。

 

 

4.切换对象

当前页面移动到后面,新的页面移动到前面,这样能够清楚解释页面之间是进行切换的,不会显得转换的太突兀和莫名其妙。

适合场景:当用户在元素之间切换。滑动效果相对来说比较单一和常见,使用动效切换可以让用户产生眼前一亮的效果,例如一些商品款式的切换,就可以使用这样的效果。

 

 

5.展开推叠

堆叠在一起的元素被展开。能够清楚的告诉用户每个元素的排列情况,从哪里来到哪里去,也显得更加有趣。

适合场景:当用户打开一堆功能选项的时候。例如一个功能里面隐藏了好几个二级功能时,就可以使用这样的效果,利于用户引导。

 

 

6.翻页

当用户实施滑动手势的时候,出现像现实生活中翻页一般的效果。真正动效转场也能够清晰的展现列表层级的信息架构,并且模仿现实生活中的动效更加富有情感。

适合场景:当用户进行一些翻页操作时。例如看小说,读长篇文章,使用这样的效果会更贴近现实生活,引起用户共鸣。

 

 

7.添加到列表

新的元素加入到原有的列表中,旧的元素被推开而不是替换,从而有现实中腾出位置的感觉,这种转场效果能够清楚的展现列表重新排列的过程,让用户知道新旧信息的位置,不会产生迷惑。

适合场景:当用户需要进行新操作时。有一些页面呈现的是将新的事件替换掉旧的,而使用这样的动效可以让用户更清晰的知道自己做了什么,例如点赞,打赏。

 

 

8.导航标签转换

根据内容的转换,按钮相应的在视觉上做出改变,而标题是随着内容移动而改变的,这样能够清晰的展示标签和内容之间的从属关系,让用户能够清晰理解页面之间的架构。

适合场景:同一层级页面之间的切换。例如切换导航,或者进度流程。使用动效可以让用户更了解架构,是标签而不是按钮的感觉。

 

 

9.融合

元素会根据用户的点击交互而分离或者是结合,用户可以感受到元素与元素之间的关联,比起直接切换,显然用融合动画更加有趣。

适合场景:当用户操作一个功能点时可能会处罚其他功能。例如运动app开始健身或者跑步的时候,点击开始后会出现暂定或是结束。

 

 

10.滚动

根据用户的手势进行滚动操作,非常使用与列表信息的查看。这个交互方式是我们用的最频繁的,仙子我们也可以加入一些动效使这个交互更加的有趣和丰富。

适合场景:当用户垂直或者水平移动页面时。例如列表,图片,很多场景下都可以使用,也因此过于平凡,可以加一些动效让页面活起来。

 

 

11.平移

当一张图片在我们有限的屏幕里没有办法看完的时候,会使用这样的效果。除了放大效果,这样的平移还可以加上动效配合一些功能使用。

适合场景:移动大于界面的的页面。例如地图,可以配合其他功能滚动产生平移效果。

 

 

12.保存指示器

用户一旦进行保存、下载某个物体,物体会复制一份,同时缩小、移动到保存指示器中。这样可以提示用户下载或者是收藏的内容在哪里可以找到,能够告诉用户对象已经被添加。

适合场景:当用户添加书签、下载、保存,加入等行为的时候使用。

 

 

 



转载请注明:优波设计


扫描二维码可分享给好友