header_v1.7.40

超赞!这里有动效设计方法归纳和总结

354天前发布

原创文章 / 平面 / 书籍
数艺社 原创,如需商业用途或转载请与数艺社联系,谢谢配合。

动效设计,在这个注重微交互的移动互联网时代里愈发显现出它的重要性。真正的动效设计,是一种有关时间轴的逻辑艺术,是一种有关质感的美学艺术,更是一种有关界面与操作的体验艺术。从“动效”到动效,设计师需要做的或许还有很多。

    随着智能手机、平板电脑的快速普及,越来越多的企业意识到建立自己的APP应用和移动网站的重要性,也有越来越多的设计师开始转战移动平台,这就关系到了移动应用的产品设计。产品设计其实是一个由抽象的概念到具体形象化的处理过程。本书通过需求、产品、界面、图标、动效、情感这6大块的内容,全面的解析了移动应用的产品设计。

    本书分为6章,第1章分析了用户的需求,从展开需求评估到信息的架构组织来进行阐述,也就是真正意义上的发现需求;第2章剖析了产品设计,其中包含草图的绘制、原型的设计以及交互设计,这几大方面都是为了用户体验而生;第3章剖析了产品的界面设计,其中包括UI设计的原则、界面模式以及UI设计的基本规范;第4章讲解了图标设计,其中包括图标设计的原则以及图标的案例示范;第5章讲解了动效设计,其中包括动效设计的重要性以及如何实现动画效果;第6章讲解了产品的情感化设计,包括情感化设计的意义以及它在UI设计中的运用。

    本书适合从事产品经理、App设计、交互设计、用户体验、平面设计且准备转入产品设计的人士,以及产品设计相关学生或者设计爱好者阅读。


ec8e597e9d53a8012156038b5e0c.jpg    动效设计,在这个注重微交互(Microinteraction)的移动互联网时代里愈发显现出它的重要性。在Flash盛极一时的若干年前,如果能在页面中恰当地植入酷炫别致的动画效果,这一产品的传播效果恐怕会事半功倍,因为无论在任何时候,我们的目光对动态内容的聚焦总要比静态文本来得更容易,尤其在当前有更好的硬件能对此加以支撑的情况之下。流畅与适配的动效设计,虽然总以细节形式加以呈现,但它们却对产品的“优质性”提供了莫大的帮助。若是仅仅将动效视作“动的效果”,必然会对产品的用户体验与视觉传达构成潜在的隐患。真正的动效设计,是一种有关时间轴的逻辑艺术,是一种有关质感的美学艺术,更是一种有关界面与操作的体验艺术。从“动效”到动效,设计师需要做的或许还有很多。



    今天我们就对几种常用的动效设计方法进行归纳和总结。


一、真实世界的物体

    动效是指界面元素基于时间维度在虚拟空间中呈现出的动态效果,既能张显功能性,亦能提升产品操作的趣味性和愉悦感。客观上而言,我们通过设计组织的界面元素是二维的、静态的平面图形。因而,若要对平面物体的运动状态展开设计,不能仅仅考虑简单的位移、缩放或旋转等基本物理属性,我们需要具备一定的空间知觉,即人类认识外界物体空间特性的能力。

   例如,物体的形状、重量、远近、深度和方向等。作用到移动设计中,动效设计便要求设计师在二维空间(屏幕)中产生相应的三维想象。如同我们看到的早期二维动画片那样,动画形象都以基于点、线、面关系的客观二维物质形态存在,但通过设计师对这些动画形象在时间与空间维度上合理的表现重组,我们才能看到一个个鲜活、形象的动画角色。

    在UI设计中的动效亦是如此。UI中的视觉元素客观地存在于由长度和宽度构成的二维空间里,但我们需要让用户感受到这是一个立体的虚拟空间,此时二维空间中三维空间的存在载体就是“形式”,这种形式需要我们把UI视觉元素与背景加以区隔,让其以自身的独立形式出现,这样所表达的空间便能较为容易地得到理解了。


• 阻尼动画与运动惯性

    在现实生活中,物体的运动状态表现会受到各式复杂因素的共同影响。诸如外界阻力、(内部)惯性等,都是三维空间物理属性中较为常见的影响因素。由于运动元素被假设具有一定的质量,被放置在一个虚拟的空间中,所以在运动过程中,受到惯性的影响,其必然将发生一定程度的“形变”。如果运动元素在空间中设定与某一介质接触,如地面、空气等,那么在运动过程中的运动速度也会随即发生变化,即产生非匀速运动。非匀速运动的表现形式有很多,并且在不同状态下带给用户的感受也截然不同。

aa31597e9de5a801215603360477.jpg这些曲线表现了时间与速度之间的函数关系。通过对这些动画函数的了解及合理运用,我们可以设计出更为自然、逼真的动效



• 阻尼动画

   运动元素在非匀速运动过程中所遵循的基本原理便是阻尼振动,主要来自于物体与不同的空间介质接触所带来的摩擦阻尼。摩擦阻尼,主要指由于摩擦阻力(包括介质黏滞阻力)的存在,使得振动系统的能量得到减损。通常情况下,阻尼振动表现为3种基本情况:临界阻尼、过阻尼、欠阻尼。


(1)临界阻尼

    临界阻尼是一种理想的运动状态,运动元素在移开平衡位置并释放后,能很快回到平衡位置并停下来。这一过程最易于令人接受并产生舒适感。

fff3597e9e4e0000002129490045.jpg



(2)过阻尼

    过阻尼通常表现为由于阻尼过大,进而在一定程度上阻碍物体的运动。运动元素在离开平衡位置后,便以一个非常慢的速度回到平衡位置并停下来。这种状态下会产生犹如被胶水黏住的效果,所以在设计“黏性动画”时经常会运用过阻尼状态。

c614597e9e7900000021294daf51.jpg



(3)欠阻尼

    欠阻尼一般指由于阻尼不够而形成的振动效果。随着时间的变化,振动的幅度也会逐渐减小,最后完全停下来。这种状态在动效中一般运用在具有“弹性”的缓冲动画中,也称作“果冻效果”。

0e69597e9eac00000021292464e5.jpg


• 运动模糊

    在现实世界中,由于人眼的视觉暂留特性与移动环境的共同作用,当人们注视着一个正在运动的物体时,其成像往往是模糊的。光对视网膜所产生的视觉在光停止作用后,仍保留一段短暂的时间。物体在快速运动时,当人眼所看到的先前的影像消失后,人眼仍能继续保留其0.1~0.4秒左右的图像,此时,之后的图像已经“抢先一步”进入你的视野,由此便实现了静态画面的动态表现,就好像我们小时候玩过的跑马灯那样。

    我们都知道,摄像机在拍摄画面时是以每秒24帧的速度进行工作的,它所拍摄下的每一帧内已经包含了1/24秒以内的所有视觉信息,包括物体的位移。如果在看录像时按下暂停键,我们所得到的并不一定是一幅清晰的静止画面,而更可能是一幅模糊的画面,这便是每秒容纳众多帧数的实际效果。因此,在移动产品的动效设计中,由于手机屏幕和性能的限制,每一帧都会是明确的静止画面,甚至在某些情况下为保证动画播放流畅,还会适当减少每秒的帧数。所以当运动元素大幅度地改变自己的位移时,由于人眼的视觉暂留特性,屏幕中就会同时出现多个运动元素。

    此时,在动效设计中添加运动模糊效果不仅能增强快速移动场景的真实感,同时也使得动效表达更为流畅。

    通常情况下,运动模糊效果的实现方法有很多。最简单的方法就是动效软件(如AE)提供的运动模糊功能,它可以帮助我们达到一个较为逼真的运动模糊效果。除此之外,还可以将当前帧与前一帧图片混合在一起来达到运动模糊的效果。

小球在从右往左的运动过程中,由于人眼的视觉暂留特性,会同时出现多个小球


给小球添加运动模糊效果后,不仅增强了小球快速移动的真实感,同时也使得动效表达更为流畅




二、夸张

  在动效设计中,我们有时还会运用“夸张现实”的手法来传达界面元素之间的关系。通过这一表现手法,能够突出某些细节以此强调某组关系,能更为清晰地呈现出设计师想要传达的信息,让用户更易于理解。此外,夸张的表现方式也会使用户界面更为有趣、更吸引人。


• 融球动效9aa3597e9f5b0000002129e1be77.jpg    融球动效是趣味性极强,表现元素内容关系也十分明显的一种表现形式。一般运用于元素内容之间存在多种包含关系的功能展示,并结合夸张的融化流体效果让展示过程更加有趣和夺目。


46a8597ea02000000021292cb3b2.jpg常见融球动效的表现形式


1a76597ea036000000212931a4c7.jpg融球动效也可以用于表现两个关联紧密的界面元素之间的切换



• 出现与消失

5661597ea05500000021291a9869.jpg

   除了移动以外,用户界面中元素的出现和消失也经常会采用夸张的表现手法,强调了元素的“来龙去脉”,有助于用户清晰地理解“发生”了什么。


5e29597ea07ea8012156035c19db.jpg图中列表展开出现的方式运用了夸张的表现手法



三、预备动作

   预备动作一般指在动画开始之前,为用户提供适当的提示,令用户能够对接下来要发生的操作形成一个心理预判。预备动作能有效地帮助用户理解页面之间的关系,避免因突然跳转的界面导致用户产生跳脱感。

    下图是菜单横向切换的一个动画效果。我们可以发现,在用户向左滑动的过程中,当前选中状态的蓝色圆形背景随着用户滑动的距离发生了一系列的变化。在用户产生向左滑动倾向的时候,蓝色圆形背景的形状就发生了向右运动的拉伸形变。这样很好地为菜单切换这一过程做好了预备,同时也告诉用户界面中左右滑动的操作与底部菜单之间的切换相对应。

470f597ea190a80121560384cf76.jpg图中菜单横向切换的动画效果运用了预备动作的表现手法



四、弧形运动

    弧形运动相对于直线运动而言,表现的是一种不规则的动画效果。在界面中,弧形动画会更为活泼与生动,比简单的直线运动更富有动效魅力。

396d597ea1bba801215603e9af27.jpgMac OS X中最小化窗口使用了弧形运动效果,显得更加活泼



五、第二动作

    在现实世界中,当主物体发生运动时,与其关联的物体也会发生相应的跟随运动,我们也称其为“第二动作”。第二动作的目的主要是为了强化主动作的作用,突出主动作想要表达的功能意图。

87ba597ea1dba801215603814287.jpg

    iOS系统中对于图标的编辑就采用第二动作的表现手法。当我们拖动一个图标改变其位置时,其他图标也会做出相关的连锁反应。

a890597ea1fca801215603eecc99.jpgiOS系统中图标编辑的第二动作的表现手法


   在很多菜单切换动效中,选中的icon会根据用户操作行为演示主动作,未选中的icon根据主动作做相应的配合。图中选中的icon变大,未选中的icon跟随选中的icon的动作缩小其间距,突出和强调“选中”这一操作的表现力度。

dc2e597ea22900000021299eeedf.jpg

菜单切换动效


▶ 新书推荐

4b39597ea2d7a801215603f1971d.jpg

28

    文章信息

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功