动效设计心得

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

  如今，动效在UI场景中的运用已经非常普遍,带给用户的体验升级也是很直观的。好的动效,不仅可以让用户在使用产品时更加的舒服,同时也增加了产品的品质感。作为UI设计师,学习动效不仅让我们增加新的技能,加强自身竞争力。同时让我们在基础设计上、工作沟通对接上等都有所提高。

  伴随着移动互联技术的高速发展，动效设计已悄然成为一个面向未来、新兴高效的设计方向。After Effects 作为动效设计领域最受欢迎的设计软件之一，可以高效、精确地创建多种引人注目的动态效果和视觉特效。

主要用途：制作预设的效果和动画

特点：学习首选，强大牛逼，基本上要的功能都有。

推荐理由：Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件，适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室，属于层类型后期合成软件。

UI动效制作其实只是用到了这个软件很小的一部分功能而已，要知道很多美国大片都是通过它来进行后期合成制作的，学习UI设计，配合PS和AI等自家软件来说，更是得心应手。

 而动效的种类大致可以分为四种：转场类、展示类、引导类和反馈类。

1.转场类

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

2.展示类

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

3.引导类

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

4.展示类

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

5.反馈类

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

课上实操

动效设计的主要目的是：

1.建立用户与屏幕内虚拟世界的认知连续性，提供符合用户认知习惯的操作体验。
2.清晰地传达内容元素之间的逻辑和层级关系。
3.提供当前的状态反馈，加强用户对操作行为的感知。
4.辅助视觉元素更好地传达产品品牌理念。
5.动效设计可以分为两大类：功能型和交互型。功能型动效主要用于产品设计，通过动态图形向用户传递信息，如加载、刷新和进度条。交互型动效则帮助用户理解界面的层级逻辑关系，使产品的使用更加符合现实生活中的认知习惯。

  作为产品设计师最重要的能力是洞察本质和全局思考的能力，通过阐述如何用动效去解决问题，最终想要表达作为一名设计师，应该时刻保持对事物的思考和观察，培养自己的硬性思维，才能在自身成长的道路上不断超越自己！

运营设计心得-CSDN博客