动画动效设计师是什么专业
想从事动画动效设计师相关的工作，一般可选择视觉传达设计、动画设计、数字媒体技术、动画制作技术、交互设计、艺术设计、工业设计等专业。目前直接培养动效设计师的专业比较少，更多的从业者会通过长时间自学以及报班的方式系统学习专业知识。
动画动效设计师一般需要用到Adobe After Effects（AE）、Adobe Photoshop（PS）、Adobe Flash、Pixate、Origami、Hype 3、Flinto、Principle、CINEMA 4D、Keynote、Proto.io、Atomic.io、Framer、Protopie等软件。其中，AE目前属于设计师学动效的首选。它的特点是功能齐全，UI动效制作只是用到了这个软件很小的一部分功能而已，配合PS和AI等软件，更是得心应手。
动效设计作为能够极大丰富我们的视觉体验的一门设计，在当下是非常盛行的，学习起来并不难，主要在于能够细心专研，就可以学会，关键在于动手！
什么是功能性的动效
功能性动效，指的是在UI设计中作为功能的一部分被采用的小动效，有着非常明确和合理的目的。
- 为了减轻认知的负担。
- 防止发生变化时看漏。
- 在空间关系中确立良好的层级关系。
- 以用户为中心的设计方法，直观的用户界面，响应性，人性化等等都是必须的。功能性动效，将有助于你实现这些目标。
也可以这样思考：当一个动效不符合一个功能性的目的，那么这个动效多存在可能会让用户觉得困惑或者恼怒。下面是我目前收集的这一系列的动效。我希望你会在你的设计中对你有所帮助。
那么什么是指向性动效？它是指能够有效的描述物体之间的逻辑关系，同时通过视觉效果，可视化的描述用户操作时候当前的状态，用户可以很清晰的感受到物体与物体之间的位置或者层级关系。
指向型动效的分类
1.滑动
信息列表会跟随着用户的交互手势而动，然后卡片到相应的位置上，保持整齐感，它属于指向型动画，物体的滑动取决于用户是用那种手势滑动的。它的作用就是通过指向型转场，有效帮助用户清理页面层级的排列情况。
2.扩大
页面中的卡片会从缩略图转化为全屏视图（一般这个卡片的中心点也会跟随移动到屏幕的中央）。反向动效就是卡片从全屏视图转换为缩略图。它的优点是能清楚的告诉用户点击的地方被放大了。
3.最小化
页面元素点击之后缩小，然后移动到屏幕上相应的位置，相反的动效就是扩大，从缩略图重新变为全屏。这样做的好处是能够清楚的告诉用户，最小化的元素可以在哪里被找到，如果没有动效引导，可能用户需要花时间去寻找。
4.切换对象
当前页面移动到后面，新的页面移动到前面，这样能够清楚解释页面之间是进行切换的，不会显得转换的太突兀和莫名其妙。
5.展开推叠
堆叠在一起的元素被展开。能够清楚的告诉用户每个元素的排列情况，从哪里来到哪里去，也显得更加有趣。
6.翻页
当用户实施滑动手势的时候，出现像现实生活中翻页一般的效果。真正动效转场也能够清晰的展现列表层级的信息架构，并且模仿现实生活中的动效更加富有情感。
7.添加到列表
新的元素加入到原有的列表中，旧的元素被推开而不是替换，从而有现实中腾出位置的感觉，这种转场效果能够清楚的展现列表重新排列的过程，让用户知道新旧信息的位置，不会产生迷惑。
8.导航标签转换
根据内容的转换，按钮相应的在视觉上做出改变，而标题是随着内容移动而改变的，这样能够清晰的展示标签和内容之间的从属关系，让用户能够清晰理解页面之间的架构。
9.融合
元素会根据用户的点击交互而分离或者是结合，用户可以感受到元素与元素之间的关联，比起直接切换，显然用融合动画更加有趣。
10.滚动
根据用户的手势进行滚动操作，非常使用与列表信息的查看。这个交互方式是我们用的最频繁的，仙子我们也可以加入一些动效使这个交互更加的有趣和丰富。
11.平移
当一张图片在我们有限的屏幕里没有办法看完的时候，会使用这样的效果。除了放大效果，这样的平移还可以加上动效配合一些功能使用。
12.保存指示器
用户一旦进行保存、下载某个物体，物体会复制一份，同时缩小、移动到保存指示器中。这样可以提示用户下载或者是收藏的内容在哪里可以找到，能够告诉用户对象已经被添加。
适合场景
1.滑动效果
适合场景：当你设计的元素需要导航以列表方式呈现的时候可以使用滑动效果。例如一些明星的选择，款式的选择，适合用这样的方式呈现。
2.弹出效果
适合场景：当你设计的元素是需要和用户进行单一交互的时候。例如点开图片查看详情，让转场过渡更自然。
3.最小化
适合场景：当用户想要最小化某个元素的时候。例如搜索、添加快捷按钮的点击事件，符合从哪来到哪去的原理。
4.切换对象
适合场景：当用户在元素之间切换。滑动效果相对来说比较单一和常见，使用动效切换可以让用户产生眼前一亮的效果，例如一些商品款式的切换，就可以使用这样的效果。
5.展开推叠
适合场景：当用户打开一堆功能选项的时候。例如一个功能里面隐藏了好几个二级功能时，就可以使用这样的效果，利于用户引导。
6.翻页效果
适合场景：当用户进行一些翻页操作时。例如看小说，读长篇文章，使用这样的效果会更贴近现实生活，引起用户共鸣。
7.添加到列表
适合场景：当用户需要进行新操作时。有一些页面呈现的是将新的事件替换掉旧的，而使用这样的动效可以让用户更清晰的知道自己做了什么，例如点赞，打赏。
8.导航标签转换
适合场景：同一层级页面之间的切换。例如切换导航，或者进度流程。使用动效可以让用户更了解架构，是标签而不是按钮的感觉。
9.融合效果
适合场景：当用户操作一个功能点时可能会处罚其他功能。例如运动app开始健身或者跑步的时候，点击开始后会出现暂定或是结束。
10.滚动
适合场景：当用户垂直或者水平移动页面时。例如列表，图片，很多场景下都可以使用，也因此过于平凡，可以加一些动效让页面活起来。
11.平移
适合场景：移动大于界面的的页面。例如地图，可以配合其他功能滚动产生平移效果。
12.保存指示器
适合场景：当用户添加书签、下载、保存，加入等行为的时候使用。
各种各样的设计趋势层出不穷，这一点足见设计师们的探索之心。漂亮的视觉，舒适的体验，流畅的动效，自然的声音，如今的UI设计的要求真的是越来越高。为了更好的设计，世界范围内的设计师都会不遗余力地前进和发现。
最后再强调一下，AE到底有多重要呢？它除了可以更加生动的展示产品的功能、界面、交互操作等细节，让设计细节更生动的体现出来。而且还能增加设计的亲和力和趣味性。
编者按：Google 设计团队为了更好地推进 UI 和动效设计，自己开发过不少新的工具，打通 Sketch2AE 是其中之一，如今的 AEUX 也是为了相似的目的而存在的一个全新升级的动效工具~
动效在设计当中的重要性是毋庸置疑的，它可以提供背景信息，可以指引用户进行交互和操作，提供有效的导航线索。但是，想要将一个全新的领域和信息整合到既定的、已有的 UX 设计流程当中来，并不总是那么容易。
在 Lottie 这样的动效渲染工具诞生之前，哪怕是距离现在很近的 2016 年，现在来看感觉依然像是一个UX动效的黑暗时代，即便那个时候已经有很多新的设计模式。为 AE 准备视觉素材通常意味着要用 AI 来先制作相应的素材，经过复杂的导入和转换，经过大量不可避免的重设计、调整，这种不可预期的情况太多了，以至于设计师经常因此超出 Deadline 。
为了尽可能地消除动效制作过程中可能存在的无用的步骤，我在 2016 年中期开始在 Google 内部构建一个名为 Sketch2AE 的内部工具，它本质上是第一个在不同应用中间传输图层信息的工具。但是它并不仅仅是一个文件导入器，它还是一个将时间重新还给动效设计师的工具。2017 年，它对外公开发布，并且帮助了很多设计师进行 UX 的动效设计，以及借助 AE 进行视觉设计的设计师。
Sketch2AE 中复古的图层传输过程
其实从 Sketch2AE 那个时候开始，UX动效设计领域已经逐渐开始成熟了。现在，许多设计团队在设计的时候，已经开始思考，信息是随着时间推进，体验上有哪些改变。自从 Sketch2AE 诞生以来，动效设计师大多和视觉设计师一同协作，在不断迭代过程中，寻找成功的解决方案，而这也不断推进着工具的发展，新的工具当中会逐渐集成设计师所需要的功能。
现在，我非常高兴能够同大家分享 AEUX 这款工具。这是一个更加强大的设计系统，用来在 After Effect 中进行 UX 动效设计。
Guide to Material Motion in After Effects
欢迎使用 AEUX
新系统的目标之一是支持更多主流应用，方便在团队内各个成员之间的协作的灵活性。如今在 Adobe 的生态系统中，XD 和 AI 已经可以很好地进行数据上的共享和交换，但是在生态之外数据的共通性就没那么好了。但是，如果借助 AEUX，你可以从 Sketch 和 Figma 来导入图层，并且支持 Sketch 最新的功能。除此之外它还有这些特色：
戳这里下载 AEUX
AEUX + Figma
虽然如今 Sketch 已经被广泛地运用，但是越来越多的视觉设计师开始使用 Figma了。AEUX 旨在帮助更多的团队进行无缝地合作。
Figma 的核心功能是在线协作，因此导入图层数据是通过一个接入 Figma API 的 web 应用来完成。截至目前，Figma 的插件还无法在设计环境中运行，这意味着图层的导入导出还是只能以更为传统的方式来进行。使用在线运行的程序，最大的问题始终是关于安全性的因素。
在验证过 AEUX 的导出 APP 之后，系统会要求你输入 Figma 的文档 url，这个 APP 会随即搜集好每一帧（画板）中所有的数据，每一帧都可以单独下载。任何所需要的图片也将被处理和压缩，将新的 AEUX.json 文件拖放到到 AE 中的 AEUX 面板中，然后图层就会构建起来。
注意：AEUX 应用不会跟踪用户数据，也不会以任何方式来查看或者存储你的设计。它会在本地帮你将浏览器中的设计转换为 AEUX JSON 的格式。文件数据的访问权限是归数据的所有者所拥有。
我所学到的经验
基于自己对于其他设计师的工作方式的想象，来构建一款设计工具可能是很困难的事情。有时候，你的意图和想法可能并不具备真正的价值，又或者你精心考虑的设计路径并没有别人所勾画的好。实际上，我在构建 Sketch2AE 过程中所学到的东西，比开发 Overlord （一款商业插件）过程中学的更多。
我在这些项目中所获得的最重要的教训，是要限制心智模型切换的数量。如果有人想要试图设计，就让他们设计下去，而不是强迫他们去阅读使用手册和教程。
远离复杂的复制/粘贴模式
和以前的机制不同，现在在新工具中，我们选择使用后台传输图层数据，以避免混淆。它们并不是完全实时的，但是当你从 Sketch 切换到 AE 的时候，图层面板会显示准备构建新的图层，这种机制简化了传输过程，让你更加专注于设计本身。
更优的交互性
对我来说，整个设计过程中最令我印象深刻的地方，也是最为费神的地方，就是试图找到哪些东西是有用的，哪些是无效的。这和文件导入本身是截然不同的，通常文件导入的时候如果出了差错，就必须重新导入全部内容。但是 Overlord 的核心理念非常不同，用户在需要的时候才传输必要的数据和内容。我希望这种理念能够成为 AEUX 的核心理念，让用户彻底远离复杂菜单和插件面板之类的东西，让用户能够享用和预期中 AE 相匹配的体验。
告知用户正在发生的事情
在之前的版本中，数据的同步和导出仅仅是在完成之后推送通知，并且是在 Sketch 的窗口底部显示，很容易错过。这导致很多用户在导入数据的过程中，需要一直盯着，害怕错过信息。（这个设计确实非常糟糕，对此我很抱歉）
现在在 Sketch 中新的悬浮面板为导入通知提供了专门的位置，并且这种设计也都延续到 AE 当中。从内容更新、进度条显示到无法绘制元素的提醒，一应俱全，都会清晰地说明和呈现。
继续向前进发
UX 动效设计正在不断发展，我们仍在试图寻找更合理的设计，确定哪些方法和技术是有效的、哪些是无效的，确定如何找到最好的设计方法。我希望我们所创造的 AEUX 能够帮你更快地推进动效设计，拥有更加顺畅的设计流程。
