編者按：Google 設(shè)計(jì)團(tuán)隊(duì)為了更好地推進(jìn) UI 和動(dòng)效設(shè)計(jì)，自己開(kāi)發(fā)過(guò)不少新的工具，打通 Sketch2AE 是其中之一，如今的 AEUX 也是為了相似的目的而存在的一個(gè)全新升級(jí)的動(dòng)效工具~

動(dòng)效在設(shè)計(jì)當(dāng)中的重要性是毋庸置疑的，它可以提供背景信息，可以指引用戶進(jìn)行交互和操作，提供有效的導(dǎo)航線索。但是，想要將一個(gè)全新的領(lǐng)域和信息整合到既定的、已有的 UX 設(shè)計(jì)流程當(dāng)中來(lái)，并不總是那么容易。

在 Lottie 這樣的動(dòng)效渲染工具誕生之前，哪怕是距離現(xiàn)在很近的 2016 年，現(xiàn)在來(lái)看感覺(jué)依然像是一個(gè)UX動(dòng)效的黑暗時(shí)代，即便那個(gè)時(shí)候已經(jīng)有很多新的設(shè)計(jì)模式。為 AE 準(zhǔn)備視覺(jué)素材通常意味著要用 AI 來(lái)先制作相應(yīng)的素材，經(jīng)過(guò)復(fù)雜的導(dǎo)入和轉(zhuǎn)換，經(jīng)過(guò)大量不可避免的重設(shè)計(jì)、調(diào)整，這種不可預(yù)期的情況太多了，以至于設(shè)計(jì)師經(jīng)常因此超出 Deadline 。

為了盡可能地消除動(dòng)效制作過(guò)程中可能存在的無(wú)用的步驟，我在 2016 年中期開(kāi)始在 Google 內(nèi)部構(gòu)建一個(gè)名為 Sketch2AE 的內(nèi)部工具，它本質(zhì)上是第一個(gè)在不同應(yīng)用中間傳輸圖層信息的工具。但是它并不僅僅是一個(gè)文件導(dǎo)入器，它還是一個(gè)將時(shí)間重新還給動(dòng)效設(shè)計(jì)師的工具。2017 年，它對(duì)外公開(kāi)發(fā)布，并且?guī)椭撕芏嘣O(shè)計(jì)師進(jìn)行 UX 的動(dòng)效設(shè)計(jì)，以及借助 AE 進(jìn)行視覺(jué)設(shè)計(jì)的設(shè)計(jì)師。

Sketch2AE 中復(fù)古的圖層傳輸過(guò)程

其實(shí)從 Sketch2AE 那個(gè)時(shí)候開(kāi)始，UX動(dòng)效設(shè)計(jì)領(lǐng)域已經(jīng)逐漸開(kāi)始成熟了。現(xiàn)在，許多設(shè)計(jì)團(tuán)隊(duì)在設(shè)計(jì)的時(shí)候，已經(jīng)開(kāi)始思考，信息是隨著時(shí)間推進(jìn)，體驗(yàn)上有哪些改變。自從 Sketch2AE 誕生以來(lái)，動(dòng)效設(shè)計(jì)師大多和視覺(jué)設(shè)計(jì)師一同協(xié)作，在不斷迭代過(guò)程中，尋找成功的解決方案，而這也不斷推進(jìn)著工具的發(fā)展，新的工具當(dāng)中會(huì)逐漸集成設(shè)計(jì)師所需要的功能。

現(xiàn)在，我非常高興能夠同大家分享 AEUX 這款工具。這是一個(gè)更加強(qiáng)大的設(shè)計(jì)系統(tǒng)，用來(lái)在 After Effect 中進(jìn)行 UX 動(dòng)效設(shè)計(jì)。

Guide to Material Motion in After Effects

歡迎使用 AEUX

新系統(tǒng)的目標(biāo)之一是支持更多主流應(yīng)用，方便在團(tuán)隊(duì)內(nèi)各個(gè)成員之間的協(xié)作的靈活性。如今在 Adobe 的生態(tài)系統(tǒng)中，XD 和 AI 已經(jīng)可以很好地進(jìn)行數(shù)據(jù)上的共享和交換，但是在生態(tài)之外數(shù)據(jù)的共通性就沒(méi)那么好了。但是，如果借助 AEUX，你可以從 Sketch 和 Figma 來(lái)導(dǎo)入圖層，并且支持 Sketch 最新的功能。除此之外它還有這些特色：

• 創(chuàng)建復(fù)雜畫(huà)板的制作速度提升了93%
• 支持符號(hào)嵌套和文本的符號(hào)嵌套。可以更高效地定位 symbol masters。
• 通過(guò)繪制原生的AE漸變以及減少冗余圖像，減少圖像輸出。
• 通過(guò)位置控制、跟蹤、引導(dǎo)、大小寫(xiě)覆蓋、旋轉(zhuǎn)、翻轉(zhuǎn)等功能的加入，極大地提升對(duì)于文本圖層的精度控制。
• 能夠像 AE Precomps（再合成） 那樣來(lái)自動(dòng)創(chuàng)建群組。即使你不實(shí)用 AEUX 導(dǎo)入器，也可以通過(guò)單擊來(lái)執(zhí)行再合成相關(guān)的操作。
• 包含了其他的新功能，比如嵌套布爾、圖層和群組蒙板、形狀模糊、路徑和參數(shù)形狀等選項(xiàng)。

戳這里下載 AEUX

AEUX + Figma

雖然如今 Sketch 已經(jīng)被廣泛地運(yùn)用，但是越來(lái)越多的視覺(jué)設(shè)計(jì)師開(kāi)始使用 Figma了。AEUX 旨在幫助更多的團(tuán)隊(duì)進(jìn)行無(wú)縫地合作。

Figma 的核心功能是在線協(xié)作，因此導(dǎo)入圖層數(shù)據(jù)是通過(guò)一個(gè)接入 Figma API 的 web 應(yīng)用來(lái)完成。截至目前，F(xiàn)igma 的插件還無(wú)法在設(shè)計(jì)環(huán)境中運(yùn)行，這意味著圖層的導(dǎo)入導(dǎo)出還是只能以更為傳統(tǒng)的方式來(lái)進(jìn)行。使用在線運(yùn)行的程序，最大的問(wèn)題始終是關(guān)于安全性的因素。

在驗(yàn)證過(guò) AEUX 的導(dǎo)出 APP 之后，系統(tǒng)會(huì)要求你輸入 Figma 的文檔 url，這個(gè) APP 會(huì)隨即搜集好每一幀（畫(huà)板）中所有的數(shù)據(jù)，每一幀都可以單獨(dú)下載。任何所需要的圖片也將被處理和壓縮，將新的 AEUX.json 文件拖放到到 AE 中的 AEUX 面板中，然后圖層就會(huì)構(gòu)建起來(lái)。

注意：AEUX 應(yīng)用不會(huì)跟蹤用戶數(shù)據(jù)，也不會(huì)以任何方式來(lái)查看或者存儲(chǔ)你的設(shè)計(jì)。它會(huì)在本地幫你將瀏覽器中的設(shè)計(jì)轉(zhuǎn)換為 AEUX JSON 的格式。文件數(shù)據(jù)的訪問(wèn)權(quán)限是歸數(shù)據(jù)的所有者所擁有。

我所學(xué)到的經(jīng)驗(yàn)

基于自己對(duì)于其他設(shè)計(jì)師的工作方式的想象，來(lái)構(gòu)建一款設(shè)計(jì)工具可能是很困難的事情。有時(shí)候，你的意圖和想法可能并不具備真正的價(jià)值，又或者你精心考慮的設(shè)計(jì)路徑并沒(méi)有別人所勾畫(huà)的好。實(shí)際上，我在構(gòu)建 Sketch2AE 過(guò)程中所學(xué)到的東西，比開(kāi)發(fā) Overlord （一款商業(yè)插件）過(guò)程中學(xué)的更多。

我在這些項(xiàng)目中所獲得的最重要的教訓(xùn)，是要限制心智模型切換的數(shù)量。如果有人想要試圖設(shè)計(jì)，就讓他們?cè)O(shè)計(jì)下去，而不是強(qiáng)迫他們?nèi)ラ喿x使用手冊(cè)和教程。

遠(yuǎn)離復(fù)雜的復(fù)制/粘貼模式

和以前的機(jī)制不同，現(xiàn)在在新工具中，我們選擇使用后臺(tái)傳輸圖層數(shù)據(jù)，以避免混淆。它們并不是完全實(shí)時(shí)的，但是當(dāng)你從 Sketch 切換到 AE 的時(shí)候，圖層面板會(huì)顯示準(zhǔn)備構(gòu)建新的圖層，這種機(jī)制簡(jiǎn)化了傳輸過(guò)程，讓你更加專注于設(shè)計(jì)本身。

更優(yōu)的交互性

對(duì)我來(lái)說(shuō)，整個(gè)設(shè)計(jì)過(guò)程中最令我印象深刻的地方，也是最為費(fèi)神的地方，就是試圖找到哪些東西是有用的，哪些是無(wú)效的。這和文件導(dǎo)入本身是截然不同的，通常文件導(dǎo)入的時(shí)候如果出了差錯(cuò)，就必須重新導(dǎo)入全部?jī)?nèi)容。但是 Overlord 的核心理念非常不同，用戶在需要的時(shí)候才傳輸必要的數(shù)據(jù)和內(nèi)容。我希望這種理念能夠成為 AEUX 的核心理念，讓用戶徹底遠(yuǎn)離復(fù)雜菜單和插件面板之類的東西，讓用戶能夠享用和預(yù)期中 AE 相匹配的體驗(yàn)。

告知用戶正在發(fā)生的事情

在之前的版本中，數(shù)據(jù)的同步和導(dǎo)出僅僅是在完成之后推送通知，并且是在 Sketch 的窗口底部顯示，很容易錯(cuò)過(guò)。這導(dǎo)致很多用戶在導(dǎo)入數(shù)據(jù)的過(guò)程中，需要一直盯著，害怕錯(cuò)過(guò)信息。（這個(gè)設(shè)計(jì)確實(shí)非常糟糕，對(duì)此我很抱歉）

現(xiàn)在在 Sketch 中新的懸浮面板為導(dǎo)入通知提供了專門(mén)的位置，并且這種設(shè)計(jì)也都延續(xù)到 AE 當(dāng)中。從內(nèi)容更新、進(jìn)度條顯示到無(wú)法繪制元素的提醒，一應(yīng)俱全，都會(huì)清晰地說(shuō)明和呈現(xiàn)。

繼續(xù)向前進(jìn)發(fā)

UX 動(dòng)效設(shè)計(jì)正在不斷發(fā)展，我們?nèi)栽谠噲D尋找更合理的設(shè)計(jì)，確定哪些方法和技術(shù)是有效的、哪些是無(wú)效的，確定如何找到最好的設(shè)計(jì)方法。我希望我們所創(chuàng)造的 AEUX 能夠幫你更快地推進(jìn)動(dòng)效設(shè)計(jì)，擁有更加順暢的設(shè)計(jì)流程。