动效设计学习心得体会

动效设计学习心得体会

1. 课程介绍
2. 课程内容
3. 学习方法
4. 课程作业分享

课程介绍

在Material design 设计规范中，将动效设计这一章命名为「Animation」，意思是动画、活泼的意思。 动效设计，顾名思义即动态效果的设计，用户界面上所有运动的效果，也可以视其为界面设计与动态设计的结合。 好的动效设计可以帮助引导、取悦用户，减少等待焦虑，是拉近用户与产品之间距离的有效手段。 动效设计课程是一门专注于动画效果和动态视觉设计的课程，通过学习这门课程，学生可以掌握动效设计的原理、技巧和工具。

课程内容

在产品设计中构成界面的三大元素：「形状、颜色和动效」，其中动效最能够第一时间吸引用户的注意力，传统的用户静态界面设计，受限于时间的关系，很难阐述表达用户想要的某个点，但动效设计不仅可以表达页面的时间关系，还可以叙述因果关系

• 动效设计的意义
• 动效的种类
• 动效设计思维的建设
• 以产品思维看动效设计

动效设计的意义

为什么要做动效设计，当然是能够为产品带来价值才会去投入资源去做，那么带来的价值是什么？在大多数的认知里，动效能吸引用户的注意，那么自然能为产品带来点击或跳转等价值，但这仅仅是动效赋能产品价值中的其中一种。

其中很多因素是互动或者呈因果关系的，比如引导用户操作可以减少用户对产品的认知成本，提升产品易用性也变相提升了用户和产品的互动性，为产品注入活力也会让用户减少部分不可避免的不适感等等，两者是相辅相成的。

举个简单的例子，POP 弹窗的设计大家都不会陌生，POP 弹窗的出现往往目的是为了引导用户点击跳转至新的模块，最终目标都是引导用户去点击弹窗上的行动点；上图示意的静态弹窗往往是市面上大部分弹窗的出现方式，很明显的对比下动态弹窗和行动点让人的点击欲望更强烈，固然结果自然是动态的点击率比静态的要好。

动效的种类

动效的种类大致可以分为四种：转场类、展示类、引导类和反馈类。很多产品设计中我们最常见的往往是以这四类动效或衍伸的动效为主，下面给大家介绍不同种类动效的样式和意义

转场类

转场类动效用于页面层级的跳转或场景切换,帮助用户理解界面间的变化和层级关系，也让界面更加真实生动；避免页面场景的瞬间切换导致用户产生变化盲视（视觉刺激的突兀变化会阻止用户注意到新的信息）；简单来说就是在产品页面切换中让用户有一个心理预期，看到哪些东西变了，新增了哪些东西要注意的，而且整体切换看上去非常的丝滑舒适；经常用到的手法以缩放、透明度、旋转等平滑的效果为主，来搭建层级与层级间的关系和切换。

展示类

展示类动效更多的如字面意思——常规场景用作展示，其目的是能够在第一时间吸引到用户的视觉，突出产品核心功能和特点，引导用户的视觉流向，去帮助用户更好的理解产品；主要在产品的KV版头、网页以及品牌传播等场景中出现。

引导类

引导类动效底层逻辑为通过界面中某些元素的变化，拉开与不同的元素的视差，引导用户进行下一步操作，能够自然而然的聚焦用户视线，降低其他视觉元素的干扰，目的是帮助业务达成某个模块的KPI，或者引导用户相关的操作，产品中常见的就是新手引导、Toast提示等。

反馈类

反馈类动效是在用户进行行为后及时给出相应的反馈，更多偏向于用户体验侧；底层逻辑是以视觉表现的形式传达给用户当前时下的操作反馈，给予用户一定的心理预期。

动效设计思维的建设

我们在产品设计中接手动效之前，除去明确的业务目标，（譬如业务明确某个模块进行动效制作：“我就要这个按钮动一动来提升CTR！”等此类情况）作为一名设计师应该建立一套完整的动效设计思维。

以产品思维看动效设计

以上建立了自己完善的动效设计思维，但仅仅是基于执行层面上的，只满足于产出很好的动效方案，但是作为一名设计师是远远不够的，我们应该带着产品思维去看待动效设计；产品思维涵盖面很广，涵盖了全局的思考性以及方方面面，所以动效设计要真正意义上的对产品产生价值，还是需要依附产品思维去做设计。

学习方法

动态效果意味着充满生命和兴奋，为静态事物增添生命。然而，在软件方面，动态效果不仅是为了获得乐趣，也是为了解决问题。

1.开始观察

培养活力。如果你看不到东西在移动，你就不能使用它们。当你使用你最喜欢的应用程序时，开始观察屏幕上东西的移动。再看一遍，找出你为什么喜欢它，然后尝试找到细节。观察所有变化-形状、大小、位置和颜色。无论是小是大，都要努力找出运动在整个合成中的作用。

2.动效不仅仅是一层涂料

动态效果揭示了更深层次的含义。作为一个创造者，你必须从一开始就有意识地考虑动态效果。如果您正处于设计阶段，请动画原型以增加时间维度。如果您正处于开发阶段，请将代码分为模块化组件，以便轻松处理UI中移动内容。

认真思考创作的动画个性会给它一个角色，帮助你对尝试构建的作品有更深的了解。

3.思考在哪里引入产品的运动？

当用户与元素互动或用户必须等待时，可以将运动引入产品的一些简单位置。

4.MotionUX的类型

您可以将产品中的运动分类为“过渡”(内容更改/用户移动到另一个屏幕)，“微交互”（例如Twitter的“赞”按钮)、图形动画(例如，踏板车在Zomato的“订购”应用程序的启动屏幕上跳转)。

5.通过动效提供空间信息

如果UI如果元素从屏幕右侧输入，用户将在心理上组织元素在右侧。例如，如果在屏幕左上角放置菜单按钮，菜单必须从左侧进行动画处理。检查您的动画是否正确地传达信息，请向人们展示并听他们说什么。这是避免任何可能混淆的最简单的方法。

6.开始理解持续时间、时序曲线、动画路径、初始和最终值等

从技术上讲，这些参数构成了动画片段。和他们一起玩，掌握这些控件。一旦控制了这些，就能产生出色的动态效果。

7.永远不要让人过程中间等待

不要放慢过程中间的节奏，让他们等待动画完成。如果他们真的必须等待，那就用有意义的动画让他们快乐。永远记住用动态效果来解决问题，这就是动画加载程序存在的原因。

让动画保持微妙，与产品的故事情节保持一致，从而创造愉悦的体验。

8.使用工具

Lottie，AdobeAnimateCC，AfterEffects，Sketch2AE，Framer，Origami，AnimaticApp，figma一些用于动效设计的工具。找到它们。figma相关技巧可以参考：https://js.design/special/figma/

我建议先用笔和纸开始你的想法。完成此操作后，继续使用任何数字软件。对于本文中的动画，我在这里AnimaticApp手绘帧被绘制在上面。动画有助于使事物简单而集中。

9.捕获并保存你发现的有趣的东西

保存你发现的有趣的东西。一遍又一遍地看着它们，放慢它们，了解元素是如何运动的。通过复制学习。Mac充满乐趣GIF动画。你也可以GIF保存在盘球上。

课程作业分享