学习动效设计课程心得体会

既然我们的课程要学习动效设计，那么它所存在的价值是什么呢

一、动效的价值

动效在UI设计中具有重要的作用和价值。它可以帮助用户更好地理解界面的功能和交互方式，提高用户体验和满意度。

首先，动效可以使用户更好地理解界面的功能。通过动效，用户可以直观地了解某个元素的作用和效果，比如按钮的点击效果、菜单的展开效果等。这种直观的理解可以使用户更快速地掌握界面的使用方式，提高界面的易用性。

其次，动效可以提高用户的体验和满意度。通过动效的应用，可以让用户感受到界面的流畅性、舒适度和生动性。比如，在页面切换时添加动画效果，可以使用户感觉到过渡更自然流畅；在表单输入时添加反馈动画，可以让用户更加清晰地了解输入的结果。这些细节的处理可以提高用户对界面的好感度和满意度。

总之，动效在UI设计中扮演着重要的角色，它可以帮助用户更好地理解界面的功能和交互方式，提高用户体验和满意度。因此，在设计UI界面时，需要注重动效的应用，从而提高用户的使用体验。

二、避免动画生硬

运动曲线可以说是一个动画的灵魂，帮助我们创建平滑运动效果，通过控制图层属性，如位置，大小和透明度等，从而创建出不同的动画效果。通过调整运动的时间、速度和曲线，以获得最佳的动画效果。它直接影响了我们的动画是否流畅合理。

缓动/非线性动画带来无比自然的体验，如今这是我们非常熟悉的一种效果。缓动效果应用于各种几乎所有动效中，即与其余的动画原则有大量重叠应用，此处不举例赘述。

当新元素进入或旧元素退出时，通过一定的次序强调层级与重要性。即使没有层级之别，也可以通过错落的动效来防止重复元素显得单调通过运动的联系展示控件和控制对象的关系，常见于各种滑块的交互中。继承动画/随动将多个运动的物体联系起来。这使得设计师得以向用户传达对象之间的关系，控件与结果的关系等等逻辑。在不同的交互状态切换时展示顺滑的形变，在大部分情形下，形变应当是简洁的，不需要展现弹性，黏软特性等过多的维度。优秀的过渡动画使得原本割裂的界面状态变为无缝的，这更符合用户的期待，便于用户思维上的跟进。；

数字与数字之间的过渡按照递增或递减顺序平滑变化，可以强调变化这一事实，数字变化前与变化后具有联系，这暗示着这是同一个元素在发生变化。而如果数字的变化不按照数字的递增递减顺序平滑变化，而是直接改变，则暗示着变化前后的是两个不同的，相互独立的元素。

遮罩为人所熟知，在UI动画中，遮罩可以限制显示内容的范围和形状，通过这些从而将同一个内容转变为不同的元素，在界面上承担起不同的作用。很多时候一个内容起到什么作用、作为什么元素正是由其所处的位置和边界决定的，好的遮罩动画正是利用了这一原理。

叠加动画使元素之间具有遮盖层级的立体动画效果。在UI动画中，单独的元素设计正在趋于扁平，而元素间的关系应当理解为拥有立体的层级。通过层级之间的遮盖与叠加，设计师可以最大化利用空间，将一些二级操作放在另一些界面下方，保持界面简洁的同时也可以提供清晰的操作逻辑。

克隆的本质是让新元素的诞生源自于旧元素。当新的元素产生时，通过从界面上原有的元素上分离出新的形状来达到自然而不突兀的效果。分离出的新元素和旧元素之间将存在某种逻辑联系，比如展开，扩展等。通过克隆动画，交互界面上发生的事件被清晰地叙述了出来。

虚化动画通常表现为模糊化的蒙层，蒙层可以暂时遮住一部分界面，从而凸显主要的元素。这是一种比直接切换页面更“弱”的逻辑，被覆盖了模糊蒙层的部分并没有被切换而消失，而是与当前页面保持着一定的联系，从而使过渡更加自然。

例如在手机应用界面打开文件夹，并不需要彻底改变界面内容这种强逻辑，而应使用更为弱的切换方式——模糊化其他元素。文件夹中的内容和桌面内容并非完全独立的两个页面，而是同属于用户访问应用的界面，在展示文件夹内容时，仍应与其他桌面应用保持一定的联系。

视差运动让设计更加完整丰富，在主要的运动内容之外增添了更完整的其他元素的运动。

例如在切换页面时，不但将新页面切入，同时也让旧页面做退出的视差运动，进一步将被覆盖的页面向后推离，强化了切换这一概念。

翻转是使交互元素本身具有丰富的三维特性的动画，具有维度的动画使得交互叙事非常真实且有趣，但在当今的设计趋势来看比较容易增加用户的视觉负担，一般在特殊的场景下使用。

常见的三维动画，通常表现为折叠与铰接等效果。

缩放也是十分常见的动画，对象的缩放可以理解为单纯的改变对象的大小，也可以理解为观察者镜头的移动，利用好这两点不同的，可以实现优秀的交互体验设计。

例如，利用缩放效果（时间数字），产生观察者镜头移动的错觉，使得应用界面看上去是在锁屏界面的“上方”明确了层级间关系。

以下是课程学习的作业：

CSDN

动效设计这门课也让我更加体会到设计的乐趣。