谷歌设计团队发布了一款动效神器,让 UI 和动效无缝打通! - 优设网 - UISDC

谷歌设计团队发布了一款动效神器,让 UI 和动效无缝打通!

2019/07/22 30742评论 12

编者按: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 最新的功能。除此之外它还有这些特色:

  • 创建复杂画板的制作速度提升了93%
  • 支持符号嵌套和文本的符号嵌套。可以更高效地定位 symbol masters。
  • 通过绘制原生的AE渐变以及减少冗余图像,减少图像输出。
  • 通过位置控制、跟踪、引导、大小写覆盖、旋转、翻转等功能的加入,极大地提升对于文本图层的精度控制。
  • 能够像 AE Precomps(再合成) 那样来自动创建群组。即使你不实用 AEUX 导入器,也可以通过单击来执行再合成相关的操作。
  • 包含了其他的新功能,比如嵌套布尔、图层和群组蒙板、形状模糊、路径和参数形状等选项。

戳这里下载 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 能够帮你更快地推进动效设计,拥有更加顺畅的设计流程。

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/google-design-aeux

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里