google 插件_「插件」AEUX - 来自 Google 的 UX 动效设计插件

AEUX 是一款来自 Google 的动效设计插件，致力于降低动效设计的操作门槛，使其得以成为日常 UX 设计工作的一部分。

阅读相关

• 插件官网：https://aeux.io
• 插件下载：https://aeux.io/#install
• 插件支持：AE、Sketch、Figma
• 原文地址：Medium
• 原文作者：Adam Plouff - Skethc2AE、AEUX 作者，Google 动效设计工具开发者

官宣视频

https://www.zhihu.com/video/1137838600354897920

---

动效可以在页面切换中起到很强的提示效果，让用户知道从哪里来，到哪里去，从而获得更好的导航体验。但是把动效设计结合到 UX 设计工作流中，并不是一件简单的事。

追溯到2016年，那时简直是动效设计最暗无天日的时候。当时出现了很多的动效设计规范，但是并没有切实有效的工具。直到 Lottie 出现，我们才能真的在设备上渲染动画。在 AE 中重现设计稿意味着要在 AI 里重新画一遍，再进行 AI 和 AE 的数据导入。这一切需要很复杂的导入和重复处理过程。然而设计稿的调整和修改没有止境，每一次调整就意味着要重新进行一次 AI 调整，AE 导入等一些列愚蠢的过程。

为了减少这些没用的环节，2016年中期 AEUX 作者开始在 Google 内部开发一个叫做 Sketch2AE 的插件。这是第一个用来在不同应用中传递图层信息的插件，是同类插件的开山始祖。但这并不只是一个文件导入器，而是希望设计师能专注于创造。在2017年，Sketch2AE 公开发布，帮助动效设计师参与 UX 设计流程，以及视觉设计师能够在 AE 中工作。下图为当年的 Sketch2AE 传输过程。

从那以后，UX 动效逐渐成熟。许多设计团队思考 UX 应该包含通过时间带来的体验。动效设计师和视觉设计师配合，通过多次迭代，可以创造出一个大不相同的解决方案上。从 Sketch2AE 放出来以后，出现了很多类似的工具，动效设计师对工具间数据传输的需求也在不断增加。所以 Sketch2AE 的作者开发了一个更健壮的动效设计工具 AEUX，用来在 AE 中进行 UX 动效设计。下图是 Material Design 中 AE 操作指南。

欢迎来到 AEUX

新工具的目标之一是支持更多的设计工具，增加团队协作时的灵活性。AE 对自家的 AI 和 XD 数据导入支持非常到位。但是有了 AEUX，你可以从 Sketch 或 Figma 导入图层数据，并且支持最新的 Sketch 功能，另外：

• 读取复杂画板时的速度提升了93%；
• 支持文字图层和嵌套 Symbol 的复写；
• 减少了冗余图形的绘制；
• 文字图层的各个属性还原度提升；
• 图层组可以转成 AE Precomped，也可以一键解除。

AEUX 和 Figma

虽然 Sketch 还是很流行，许多 UI 设计师也开始使用 Figma。有了 AEUX，团队间协作时可以无视设计工具的不同，都能导入 AE。

Figma 的核心特色就是在线协作，所以在导出图层数据时需要通过一个接入了 Figma API 的网页应用。现在，Figma 插件在设计环境还无法使用，意味着图层数据的导入/导出需要通过一个更传统的方式。针对一个在线设计应用，数据安全也是需要着重考量的。

在完成 AEUX 导出应用的验证后，你被要求输入 Figma 文件路径。这个应用会收集文件内所有的画板信息。每一个画板可以独自下载，每一个需要的图片会被处理和压缩后放到新的 AEUX.json 文件中。把 AEUX.json 文件拖放到 AE 的 AEUX 面板中，就会完成图层的创建。

Note：AEUX 不会追踪用户数据，不会查看和储存你的设计。它就是一个瞎眼机器人，只负责在你电脑上的浏览器中，把你的设计稿转换成 AEUX.json 文件。需要你调用分享功能它才有读取设计稿数据的权限。

吸取的教训

打磨一个工具基于你如何思考其他设计师工作上的痛点。有时你最好的意愿并不真的有价值，或者被人有你没料到的更好解决方案。我在创作 Sketch2AE 时学到了很多，进步很大。最重要的是限制心智模型切换的次数。如果某人尝试着设计，就让他设计，而不是逼迫他读手册，学习理解那些难懂的概念。

移除复制/粘贴

图层数据转换会在屏幕后面悄悄进行，这样可以避免困惑。虽然并不是瞬间完成，但是在你从 Sketch 切换到 AE 的时间里，面板上已经更新了你需要操作的新图层。整个转换过程的简化使你可以更专注于设计。

及时的反馈

在之前的版本中，导出成功后才有通知，而 Sketch 下面的弹出消息很容易被忽略。所以你需要等待，并猜测插件是否运行成功（这真的是一个糟糕的设计体验）。

Sketch 中浮动的 AEUX 操作面板提供了一个地方来通知你插件的运行结果。同样在 AE 中。AEUX 面板会显示解析的进度，以及通知 AE 不能绘制的元素。

对于未来

UX 动效设计正在发展，大家还在试错的过程中。希望 AEUX 帮你更好更开心的参与 UX 动效设计。

---

一点私心

欢迎来我的网站看看，也欢迎加微信（heiheilaugh）交流。

胡思 - UX 知识库​www.whose.design