动效设计并不难--谷歌动效设计师

作者:Jonas Naimark  google动效设计师

原文地址:https://medium.com/google-design/motion-design-doesnt-have-to-be-hard-33089196e6c2

最近开始研究一些国外的设计类文章,希望和大家一起分享,由于英文水平有限,所以如果有不合适的地方还请大神留言提点,谢谢

 

动效设计可以使界面更具有表现力且易于使用,尽管动效具有如此大的潜力,但这应该是所有设计学科中最不被了解的,这主要是由于动效设计是UI设计系统中最新的成员.视觉和交互设计可追溯到早期的GUI,但动效需要等现代的硬件设备可以流畅的渲染动画.UI动效和传统动效的区别变得更加混乱.传统的动效设计需要熟练掌握迪士尼的《12个基本原则》,这是否意味着UI动效也同样复杂?人们经常告诉我说设计动效很复杂,在选择正确的数值时总是不确定.我认为,对于UI来说非常重要的动效,其设计应该是简单的.

从哪里开始?

动效的主要工作是通过建立UI元素之间的关系来帮助用户操作应用程序,动效也可以通过动态图标,logo以及图形来增强品牌形象;但是,可用性应该高于表现力.在展现你的动画技巧之前,让我们先设计一个强大的动效基础,关注导航和动效过渡.

转场过渡

导航的转场切换动效,关键是要简单和一致性.为此,我们将从以下两种动效转场中选择.

1.基于容器的转场

2.没有容器的转场

      

△类似文本\图标和图片这些元素都在容器中被编组

当界面中设计到按钮\卡片或者清单这样的容器结构,那动效就是基于容器的转场.基于容器可见的边缘,这些容器通常很容易被识别.但请记住,在转场开始前,容器的边缘也是不可见的,就像没有分割线的列表.这种模式分为三个步骤:

1.使用Material's 缓动标准来设计容器的动效(即先快速开始,然后缓慢结束).在这里案例中,容器从一个圆形按钮变大,然后填充整个屏幕.

2.改变元素的尺寸来适应容易的宽度,容器内元素置于容器上层,并在容器范围内.这样可在容器和界面元素之间建立一个清晰的关系.   

    

△放慢动画来观察元素是如何被缩放和隐藏于容器之中

3.在转场期间,元素会随着容器的加速而淡出,减速而淡入.当界面元素快速移动时,通过淡入淡出来实现无缝的转场效果.

         

△放慢动画来观察元素是如何通过淡入淡出来转场的

将这种模式应用于所有涉及到容器的转场,来建立统一的风格.一旦各元素之间通过动效容器建立了联系,那他们之间的转场关系将会更加清晰.为了展示这种模式的灵活性,这里我们将此应用于5中不同的结构中:

            △放慢动画来观察组合的进入和退出是如何通过容器来建立联系的

一些容器只是简单的使用了Material's的标准滑入屏幕,滑入屏幕的方向是根据组件所在位置决定的.例如,点击左上方的抽屉导航图标,界面将会从左侧滑入屏幕.

           

如果容器从屏幕内部出现,那么它会淡入并放大.这种不是从0%大小开始,而是从95%开始变化,以此避免变化过渡.动效的变动复合Material规范的减速规律,这意味着

以最快的速度开始,最后缓慢结束.退出时,容器简单淡出,不会进行大小变化.进入的时候需要将注意力集中在新内容上,而退出动效需要进入弱化.

             

△放慢动画来观察容器是如何在进入场景时进行渐入和缩放的

没有容器的转场

有些组件没有一个基于转场动效的容器,例如点击底部导航的图标,用户进入一个新的界面,在这种情况下,会有两个步骤:

1.第一个界面淡出,新的界面淡入.

2.当最终界面进入的时候,根据Material的规则,界面也会有细微的变大.再者,尺寸的变大可以让用户注意到新的内容.

             

△放慢动画来观察没有容器的图形在退出和放大的时候是如何转变的

如果开始和结束的组件都有一个清晰的空间和层次关系,那运用同样的动效便可加强这种关系.例如导航组件,在开始和结束的时候都使用垂直方向上的滑动动效.这就加强了他们在垂直方向上的关系.当点击下一步按钮后,页面组件从左到右的动效变化则增强了他们在水平方向上的关系.共享动效也会使用Metrial的动效标准.

             

△放慢动画来来展示在垂直和水平方向的共享动效

最佳实例

简单

考虑到导航切换的频繁和可用性,比起美观,应该优先考虑功能性.这不是说就不需要将导航的动效设计的有趣且个性,而是应该符合产品的品牌形象.吸引眼球的动效通常是一些小图标\logo\加载动效或者是空状态,这些简单的例子也许没有能够像dribbble上的炫酷吸引眼球,但它却能够让app变得更好用.

             

△放慢动画来来展示不同风格的动效

选择合适的持续时间和缓动形式

导航的切换的持续时间需要通过加快速度来优化其功能性,但太快的话,用户容易迷失方向.持续的时间应该根据动效出现的所占屏幕大小来决定,通常导航的切换都是整个屏幕变化,因此建议300ms是最优的选择.相反,像开关那样的小组件则是100ms的持续时间,如果感觉过快或者过慢,以25ms为调整单位来增加或减少,慢慢找到平衡.

缓动展示了动效加速和减速的速率,大多数的动效都使用了Material的非对称缓动标准,这意味着元素快速加速然后缓慢减速,以此让用户的注意力停留在转换的最后.这种类型的缓动非常自然,因为自然界中物体也不会立即开始或停止运动.如果转换看起来机械或不自然,那可能是错误的选择了对称或者直线型缓动.

             

△放慢动画来来展示不同的缓动形式

文章中概述的模式和最佳实例都是为了建立一个实用的微动效.这适用于大多数的App,但有的品牌可能会需要更加强力的表达风格.要想了解更多不同风格的动效，可以去看看谷歌官方动效规范：https://material.io/design/motion/customization.html

一旦开始注意到导航的切换,为你的应用增加特色的挑战才算刚刚开始.简单的图形是不够的,动效的巧妙设计才是真正的亮点.

             

△角色动画可以运用到令人绝望的错误页面

下图为授权截图