logo
AEUX
往 AE 导入设计稿

AEUX - 往 AE 导入设计稿

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

阅读相关

  • 原文地址:Medium

  • 原文作者:Adam Plouff - Skethc2AE、AEUX 作者,Google 动效设计工具开发者


动效可以在页面切换中起到很强的提示效果,让用户知道从哪里来,到哪里去,从而获得更好的导航体验。但是把动效设计结合到 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 动效设计。