动效设计学习心得

       动效设计，顾名思义就是动起来的效果，这种表现形式使得静态的页面可以更加灵活的动起来，不仅可以使得操作体验更加顺畅，也可以在某种程度上吸引、引导用户。

1、动效转场

入场元素

        用户操作进入新页面后，通常会比较关注入场元素，像一些金融产品、数据图表的UI设计，都会采用短暂的动态效果，强化元素的展示效果，进一步吸引用户关注数据与内容。

持续元素

        在很多优秀的设计网站上，我们可以发现大多数交互动效都是对持续元素进行特殊处理，他们不仅可以让动效更加特别，还可以提高产品的流畅度。

       例如，前后页面的内容关系比较大，因此操作后可以采用持续效果，进一步引导用户的视线，提高视觉体验，强化交互流畅感。

停留元素

       在整个动效编排中，除了关注入场和持续元素之外，停留元素也是非常值得关注且可以深入打磨的内容。

        例如，在整个搜索体验的UI设计链路中，我们可以发现搜索框提示文字、输入的单词等等均在进行了停留处理，确保在页面切换时，减少用户的视觉跳转，可以有效提供用户的专注度，打造更加轻松的体验。

2、信息折叠

        产品设计中都希望在足够的空间内可以展示更多的信息，但这样往往会带来信息过载的问题，因此我们需要在UI设计的过程中对信息展示进行区分，利用行动触发结合动效的形式，辅助信息布局更合理。

同类信息

       比如vivo全新的原子随身听，利用现实生活中音乐播放器的样式，将同类app进行收纳，体现了在较小的空间布局下如何展示更多的内容。

容器折叠

        与此同时也会发现很多产品中利用容器来承载信息，典型的案例就是FAB按钮，用户操作后再利用动效的形式进行反馈，其实和上面的相差不大，只不过他属于不同信息共用同一区域。

触发展示

        网页端有一个不同于移动端的交互，那就是hover，因此我们可以利用这种交互方式，去处理信息的重要层级，然后根据用户的操作再进行详细露出，很大程度上优化了信息空间展示。

3、交互流程

       随着产品体量越来越大，功能繁多的同时，页面结构也变得十分复杂，为了确保用户体验过程中，更清楚页面层级，以及操作后的流程，所以我们可以通过动效合理安排交互流程，助力用户的舒适体验。

操作预知

       利用动效的形式，提升用户在交互流程中的操作预知，例如下图的分类图表，充分的体现内容的含义，进一步强化用户操作前的预知性。

交互反馈

      在一些结构复杂的页面中，我们可以通过合理安排交互动效，转场方式、状态反馈等等一系列的UI设计，有效的对界面层级路径梳理。

       在UI设计当中，一个好的动效设计可以提升UI界面与用户的交互体验，让枯燥的界面生动起来，甚至能带给用户一种“砰然心动”的感觉。

　　合理的动效可以帮助引导、取悦用户，减少等待时间，更能增加产品识别度。换个角度来说，如果现在APP没有动效，你肯定会感觉少了点什么，比如最简单的加载动画得有吧。动效的重要性在于将交互、视觉过渡处理的更加细腻，而且能够承载更多的信息，比如iOS动效、MD动效等。

        优秀的UI动效设计在提升产品体验、用户粘性等方面的重要作用不言而喻，动效设计现在可是越来越吃香了，在企业招聘当中，会动效设计是绝对占有优势的。

常见的ui动效类型

1、旋转

        旋转动效是我们在操作界面过程中比较常见的动效类型，主要是切换过程中图标或其元素的角度旋转，是针对具体图标做出的巧妙设计。很多APP图标设计中都是有你了旋转的效果来模拟失误晃动的感觉，让用户觉得亲近、自然.

2、填充

        填充的主要内容就是填充图标颜色，这种效果适用于选中过渡到面型的图标样式，课室是局部的色块填充，也可以填充到整体，切换的过程中都可以做到自然淋漓。若只有线性图标的样式，图标就会比较偏薄，展示的效果就没有那么理想。

        

3、形状变化

       形状变化动效具比较强的趣味性，需要针对图标形状元素订制的一种，自由度呢比较高。对设计师而已有更多的扩散空间，可以自由发挥，制作出更多有趣的效果。比如说：VX的消息图标，每次双击都可以切换不同不同的表情包，给用户留下深刻的印象。

4、缩放

       缩放动效比较适合新手设计师，相对比较简单、稳重、包容性比较好，既有动兴又不会太复杂。应用比较广泛，适合大多数的产品，比较保守不容易出错，对于视觉引导和明确反馈是绝对够用的了。

动效设计学习心得-CSDN博客

zaxw0616_-CSDN博客