讲课老师

一、产品动效存在的价值

01. 我们为什么要做动效设计

1.增加体验舒适度：让用户认知过程更自然。
2.增加界面活力：第一时间吸引注意力，突出重点。
3.描述层级关系：体现元素之间的层级与空间关系。
4.提供反馈、明确意向：助力交互体验。
5.加深品牌感：加深品牌图形的印象，与用户互动产生共鸣。

02. 常见动效的分类与解析

转场类

转场类动效用于层级跳转或场景切换，除入场和离场动效外经常辅以缩放、透度旋转等平滑的效果，帮助用户理解界面间的变化和层级关系，也让界面更加真实动。避免场景的瞬间切换导致用户产生变化盲视(视觉刺激的突兀变化会阻止用户注意到新的信息)。

展示类

展示类动效用于突出产品核心功能和品牌调性，界面信息按照一定的规律呈现引导用户的视觉流向，帮助用户更好的理解产品,能够在第一眼吸引住用户。常见的如企业或产品的官网首页,app闪屏等能够对产品起到很好的宣传作用。

引导类

引导类动效通过界面中某些元素的变化，引起用户注意或引导用户进行操作，避免用户困惑,能够自然而然的聚焦用户视线，降低其他视觉元素的干扰。

反馈类

反馈类动效用于对用户的操作及时给出相应的反馈，如：悬浮、点击、拖拽等，以视觉的形式展现给用户，告知用户系统正在与用户发生交互，让用户产生一定的心理预期。

二、优秀动效重要要素

01. 设计动效的准确切入点

02. 根据产品特性定义动效风格（情感化动效）

现如今市场上的产品种类众多，常见如安全、社交、游戏、新闻、财经、效率、体育、工具、商务等等，都有自身特有的用户群体。
因此在设计动效时，除了要考虑动效的基本设计原则外，还要考虑产品本身的特性和动效带给用户的心理感受。

03. 遵循物理运动法则

缓动曲线

说到物理运动法则，不得不提到牛顿三大定律。但现实世界中存在着摩擦力、空气阻力等外力因素，物体会做加速或减速运动，人类也养成了这样的认知。因此在动效设计时，物体的运动要符合现实世界的运动规律，符合物理运动法则的动效才符合用户的感知。

最常用的缓动曲线包括缓入、缓出两种形式，缓入为加速曲线，缓出为减速曲线。考虑到速度变化对用户心理和注意力的影响，(不断减速的物体会吸引用户的注意力,不断加速的物体会失去用户的注意力)因此入场动效要先快后慢，持续吸引用户视线，出场动效要先慢后快。

04. 动效的响应时长和持续时长

响应时长：指从用户执行操作到反馈出现的间隔时长。

• 对于由用户操作直接触发的反馈，理想的响应时间应该控制在100ms(0.1s)内;
• 对于由用户操作间接触发的反馈，响应时长可允许达到1秒左右，不可超过2秒无反馈;
• 当反馈时间为2-9秒时，可使用循环的加载样式(如:常见的菊花转) ;
• 当反馈时间超过10秒时，须使用带有进度指示的加载样式(如已加载了60%,还剩30秒)。

持续时间：从动效开始到结束的时长。

• 交互微动效的持续时间不宜过长，以避免浪费用户时间，影响用户的阅读和操作效率，其持续时间一般不超过0.5秒(加载动效除外);
• 较快的动效更容 易吸引用户注意力，也更节省时间;
• 较慢的动效较少分散用户注意力，更适用于非用户直接触发的场景;
• 出场动效一般比进场动效更快。

05. 克制过分的动效设计

尽量避免夸张的动效,做有意义的事，不去做太多的修饰而干扰用户。
如右图例子在展开时，更注重的是菜单的内容，而右侧的图标切换并不是主要的元素，不需要过度强调去分散用户的注意。只需在不经意间切换,明确指示变化即可。

06. 动效需要反应产品品牌调性

每个产品都有自己的品牌调性，动效设计要符合产品的品牌调性。对产品来说，符合品牌调性的动效能够保持与其他产品的差异化，提升产品的B格，也能够在用户心中形成品牌效应。

构建品牌动效

三、怎样能让开发很好还原动效效果

从制作到上线的整个过程

PNG序列或者是GIF动图存在的问题

• 文件资源过大
• 不同机型适配不便
• GIF格式色彩位深度限制

01. LOTTIE介绍

02. 动效设计文档的输出方法

Inspector Spacetime

强烈推荐Google设计团队开发的动效标注导出插件，能够快速根据关键帧，快速列出缓动的贝塞尔曲线、位移坐标等。

英文速查

四、总结&思考

5G时代的来临，网络变得更加顺畅，用户对于产品的性能或是体验，都有着更高的期望，动效是一个很好提升产品体验的模块，希望上述内容能够让大家对动效的了解更加全面。