如今丰富细腻的 App 效遍布移端优秀应界面中，为户供了良好的态沉浸式体验，效设计在产研发过程中越来越被认可和重视。
通文，你将轻松到关动效设计的一必备识：
- 究竟为么要设计效？它的意义和值是么？
- App 动效形式种样，何将它们区分和归类？
- 优秀的动效有哪些实用性的指导则供参考？
- 动效软件纷繁众多，如何挑选出最合适那款？（文末附有下载链接）
一、动效设计的必要性
1. 升户体验
设计师若只追求静态像素的美呈现，而忽略态过程的合表达，会导致户在视觉上觉察元素的连续变，进而很难对旧状态的更替有清晰的感知。
迪士尼动画大师乃特克说一句：动画的一切皆在时间点和空间幅度。
通过「间点」和「空间幅度」的计为用户建立运动的可度，即视觉上的真实，当用户识这个动作是理的，才能更加清晰愉悦地使用产品。
2. 增添产品气质
未添加动效的产品，带给人一种死气沉沉的感，所有内容平铺直叙、毫无生机，即使界面设计的很美观，也缺乏一种灵动细腻的气质。
如果把产品比作成美，那界面视觉就是美的颜值，交互动效就是美的肢体语言。理的动效能将更立体、更有关性的息传递出去，提高产品的「表达能力」，增加亲和力和趣味性，也利于品牌的建立。
3. 创造设计师优势
- 降低沟通本：设师通过制作高保真动效 Demo 展示设思创意，提高设提案交接率，降低了设师与发的沟通本，提高了动效的还原度，体专业性。
- 打核心竞争：在 UI 设计行已经趋于饱和，并且产设计流程逐渐实现体系和模的今天，设计师如果只会利组件重复性地「拼凑」页面而无更多的值产，被替代的可性将会增大。在日工作之余，若要为公司和团队输更多的值，效设计是交互/视觉设计师的必备技与核心竞争之一。
二、动效设计的类型
界面动效种类纷繁多，根据 App 动效的作用，可以大体为如下6个类型：
1. 转过渡
人脑灰质会对动事物（如：移动、形变、色变等）保持敏。在界面中加入一些滑舒适的过渡效果，不仅能让界面显得生动，更能帮助用户理解界面前后变化的逻辑关系。
2. 级展示
现空间里，物存在近大远小原则，运动则近快远慢。当界面中的元素存在不同级时，恰当的动效以帮助用户理清前位置关系，以动效来现整个系统的空间感。
3. 空间扩展
在移端界面设计中，由于有限的屏幕空间难承载大量的信息容，可通过折叠、翻转、缩放等形式拓展附容的存储空间，渐进展示的方式来减轻户的认知负担。
4. 聚焦关注
聚焦关注通过元素的动作变化，提醒用户关注特点的内信息。这种提醒方式不仅可以降低视觉元素的扰，使界面清爽简洁，还能用户使用过程中，轻盈自然吸引用户注意力。
5. 内容呈现
界内容元素按照定秩序规律逐级呈现，引导用户视觉焦走，帮助用户更好地感知页布局、层级结构和内容，时也能让个流程更加丰富流畅，增添了界活力。
6. 操作反馈
无论是点击、长按、拖拽、滑动等交互行为，都应该得系统的即反馈，将其以视觉或动效的方式展现，帮助用户了解当前系统对交互过程的响应情况，为用户带来安全。
三、动效设计的原则
是一位在年时间内为四个国家和上百个顶尖机构提供咨询服务的动效设计师，总结出来的用动效设计原则，为提升产品验与用提供帮助。
1. 缓缓出
时效件生时，元素的动应显得自，与用户预期相符。
2. 偏移与延迟
入的界面元素或场景时，可于表达元素之间的系。
3. 父子关系
当界面元素较多时，可以利用时空差异创造出可以感知到的父子继承关系。
4. 形变
用连贯状态描绘表元素功能改变。
5. 值变
当素的值发生变化，用续动的方式表达前后之间的关。
6. 遮罩
果一个界面元素的不同的展示方式对应不同的功能，么让展示方式的变化程具有连续。
7. 覆盖
堆叠元素的相对位置来描述它们的扁平空间系。
8. 复制
当新的元素从已元素复制出时，用连贯的方式描述其关联关系。
9. 景深
允许用户瞥到主要元素或场景。
10. 视差
当用户滚动界面，在面创造出空间层次。
11. 翻转
通具有空间架构的描述方式来表现新元素的产生与离场。
12. 滑变焦
连续的空间描述来引导界面元素和空间。
四、动效软件的选择
动效设软件纷繁众多，不同软件的侧重点也各不相同，设师可以根据项目的时间、精细度、面向对象条件选择合的软件。下面我列举出市面常见的动效软件以及各自的优缺点，供选择参考。
1. After Effects
AE 这款软件知度很高，学过设的应该都知道，它的优点就强，可以实超高精度的动效，一般 UI 动效制作只用到了 AE 很小的一部分功能。缺点门槛高，手较困难，不能实时交互动效。
2. Hype
Hype 号称代码动效神，像 AE 样使用时轴来设动画。动画效在 PC、Mobile、Pad 端都可以接预览，也可以导出视频或者 GIF。3.0版有物理特性和弹性曲线，可以实现更强大动画效。
3. Principle
Principle 功能大，界面和 Sketch 类似，被誉为 Sketch 的最佳拍档。它主要是做少量页面间的过渡转、素动画等细节动效。优点显，上快、效率高、质好，缺点就是不易做整套交互流程。
4. Flinto
Flinto 界面跟 Sketch 也非常相似，能够快速现各种滚动、转场、点击反馈等效果，适合模拟个页面、场复的互流程，学习成低。缺点是复的动效难以现，价略贵且试用期短。
5. Framer
Framer 是一个基于 Javas cript 的原工具，快速导入 Photoshop、Sketch 中的图像并模拟图层分层，支持手势，画精细，可在手机或平中预览效果。缺点是需要有一定的编程基础，上手难较。
6. ProtoPie
ProtoPie 一款交互原型设具，支持 Mac Windows 平台，加轻级，集的功能吸引人，可以调用 iPhone 系统的陀螺仪、麦克风、罗盘、3D Touch，多种智能传感器，绝对 Windows 用户设师的福利。
小结
- 动效设计以提升用户验、增添产品气质，并为设计师创造优势。
- 6种作用的动效类型：转过渡、层展示、空间扩展、聚焦关注、内容呈现、操作反馈。
- 12个实用性动效原则 ：缓入缓出、偏移与延迟、父子关系、形变、值变、遮罩、覆盖、复制、景深、视、翻转、滑动变焦。
- 根据项目时间、精细度、面向对象条件，选择合的具制作动效。
最后，已为大家理好了各个软件官下载链接，请收下。
软件下载地址：
After Effects 官下载地址
Hype 官方下载址
Principle 官方载地址
Flinto 官方下载地址
Framer 官方下载地址
ProtoPie 官下载地址
欢迎关注作者的微信公众：「彭彭设笔记」
浙公网安备33011002017549号