动效设计课程心得体会

随着数字时代的快速发展，动效设计已经成为用户体验设计中不可或缺的一部分。作为一名动效设计师，我深感自己在这个领域的成长和收获。本文将围绕动效设计的主题展开，分享我的所见所得：       动效设计，顾名思义就是动起来的效果，这种表现形式使得静态的页面可以更加灵活的动起来，不仅可以使得操作体验更加顺畅，也可以在某种程度上吸引、引导用户。

1、动效转场

入场元素

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

持续元素

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

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

停留元素

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

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

2、信息折叠

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

同类信息

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

容器折叠

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

触发展示

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

常见的ui动效类型

1.预合成

把做好的效果的多个图层进行预合成，能防止误删和能看得明白，也可以双击预合成进行编辑。

2、填充

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

一、明确目标

在开始动效设计之前，明确目标是至关重要的。作为设计师，我们需要了解项目的需求和目标，以便为最终用户提供最佳的体验。动效设计的主要目标是提升用户体验，让用户在使用产品或服务时感到愉悦和满足。因此，我们需要关注用户的需求和行为习惯，设计出符合用户期望的动效设计。

二、思考与判断

动效设计不仅仅是关于视觉效果，更重要的是思考和判断。在设计中，我们需要考虑用户的心理、行为习惯以及设备性能等因素。首先，我们需要了解用户的心理需求和行为习惯，以便设计出符合用户期望的动效。例如，在为移动应用设计动效时，我们需要考虑用户在使用手机时的操作习惯和浏览习惯。其次，我们需要考虑设备性能的因素。不同的设备和操作系统对于动效的支持程度不同，因此我们需要根据设备性能来设计动效，以确保其在各种设备上都能够流畅运行。

三、不同场景下应用动效设计
1. 移动端应用
在移动端应用中，动效设计可以起到引导作用，帮助用户快速了解操作流程。同时，通过丰富的动画效果和音效，可以提高产品的趣味性和吸引力。例如，在天气应用中加入天气动画效果，可以让用户更加直观地了解天气情况。
2. 网页设计
在网页设计中，动效设计可以起到美化页面和提高交互效果的作用。例如，在网页切换时加入过渡动画，可以让用户更加顺畅地浏览网页内容。
3. 增强现实（AR）
在AR应用中，动效设计可以让虚拟元素与现实场景更加融合，提高用户体验。例如，在AR游戏中加入虚拟角色的动画效果，可以让玩家更加投入游戏情节中。

小狗，草地和太阳

融球效果

音乐播放器

五、富有表现力的语言

最后，使用富有表现力的语言来吸引读者的注意力是至关重要的。在描述动效时，我们可以运用生动的词汇和形象的比喻来增强表达力。例如，“当用户点击按钮时，页面犹如翻书般流畅地切换到下一页，带给用户一种沉浸式的体验。”这样的描述能够让读者更好地理解动效设计的魅力所在。

课后时间我还在其他学习网站，学习ae软件：

学习网站
CodePen（https://codepen.io/）：CodePen 是一个在线社区，可以分享和发现前端开发的代码片段，包括动效设计。

CSS-Tricks（https://css-tricks.com/）：CSS-Tricks 提供了大量关于 CSS 和动效设计的教程和示例，适合初学者和进阶者。

Tuts+（https://tutsplus.com/）：Tuts+ 是一个综合性学习平台，提供了各种设计和开发相关的教程，其中也包括动效设计。

Awwwards（https://www.awwwards.com/）：Awwwards 是一个专注于网页设计和创意的社区，您可以在这里找到很多优秀的动效设计案例和灵感。

CSS Animation（https://cssanimation.rocks/）：CSS Animation 是一个专门关注 CSS 动画的网站，提供了大量的教程和示例。

Webflow University（https://university.webflow.com/）：Webflow University 是一个学习 Webflow 设计工具的平台，其中也包括了一些关于动效设计的教程。

Dribbble（https://dribbble.com/）：Dribbble 是一个设计师社区，您可以在这里找到很多设计师分享的动效设计作品，从中获取灵感和学习。

  综上所述，动效设计是一门需要思考和判断的艺术。在设计中，我们要明确目标、考虑各种因素并使用具体的例子来支持自己的观点。通过富有表现力的语言描述动效作品时不仅能够让读者感受到设计师的独特创意与思考角度同时也能够引发他们对产品的期待与满足感。作为动效设计师我们要不断学习和提升自己的技能以更好地满足用户的需求并创造出更加出色的动效作品。