編者按：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 能夠幫你更快地推進動效設計，擁有更加順暢的設計流程。