UI产品中的动效

.

• 知识目标：

1、了解产品中的动效分类。

2、了解企业产品中动效的作用。

.

• 能力目标：

1、能够分类不同的动效效果。

2、能够通过网络寻找相关动效素材并进行分类。

.

• 课程重难点：

1、重点：按钮动效制作，影片剪辑动效制作。

2、难点：按钮控制影片剪辑动效制作。

.

• 课程概况、教学主要内容：

概念理解：随着技术革新，用户对于产品细节的感知度和挑剔程度正在日益剧增，越来越多的产品都在尝试通过不同的手段来打造产品的差异化，而动效设计作为近年来大火的设计趋势之一也被越来越多的产品所青睐。动效对于一个优秀的产品也在日渐从 “锦上添花” 的地位慢慢变成 “必不可少” 的构成元素。但是当我们去观察身边很多的线上产品对于动效落地把控的时候发现现实结果往往并不尽如人意，很多优秀的概念、在想法阶段到最终落地几乎被打磨的体无完肤。我们以往的经验告诉我们可以通过简单的方式输出我们的设计作品并且加以跟进就可以使线上的结果达到很高的完成度，但是当我们面临动效输出的时候会发现，输出的选择在日渐变多，但是输出的结果还是很难达到理想的状态。

目前市面上针对动效的输出与落地主要还是围绕着基础的几种输出方式，输出方式的选择就困扰着很多的设计师，而作为设计师我们要做的不仅是了解在什么情境下应该选择什么样的输出方式，更应该了解这些流程化的输出方式的原理以及围绕这些原理我们可以在整个产品的设计流程中可以做到的更多的事情。

.

产品中的动效分类

在了解动效落地方式的选择之前，我们需要明白的第一件事是互联网产品当中的动效分类与一般意义上的动效有很大的区别。广义的我们把 UI 动效分为三类：
一、情感化动效
情感化动效偏向于感性的层面，主要目的是增加我们产品的气质和传达情绪，增加产品的魅力值，在一些小的细节上我们加入一些情感化的元素也可以以彩蛋的形式给用户惊喜。比较常见的有 app 中的 loading 动画，点赞动画等。

二、交互动效
产品流程、交互行为的串联，不论可实际操作的交互原型还是纯做 demo 展示的动效过场都可以算作交互动效设计，交互动效最基础的的形态就是原型流程图的串联交互稿。交互动效又可以细分为转场动效和微交互，分别应用于页面衔接和基础组件的交互反馈。前者可以传达给用户产品的层次结构和空间关系，后者可以使用户减少操作成本。

三、复合型动效
复合型动效不局限于感性层面的情绪传达，也不局限于交互行为的串联，往往真实场景当中更多的也是这一类动效，在与开发人员对接阶段也更容易存在各种各样的不稳定因素，对于设计师而言也存在更多层面的挑战性。