谷歌設計團隊發布了一款動效神器,讓 UI 和動效無縫打通! - 特级毛片www,色综合天天综合网,国产成人综合亚洲 - UISDC

谷歌設計團隊發布了一款動效神器,讓 UI 和動效無縫打通!

2019/07/22 28830評論 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 + 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 能夠幫你更快地推進動效設計,擁有更加順暢的設計流程。

儒墨堂大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址︰http://www.rumotanartist.com/google-design-aeux

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 儒墨堂專訪 儒墨堂大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規範 用戶體驗設計 海報設計 平面設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

儒墨堂啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!特级毛片www,色综合天天综合网,国产成人综合亚洲是極具人氣的設計師平台
2012年成立至今,一直專注于設計師的學習成長交流

特级毛片www|色综合天天综合网|国产成人综合亚洲

打開微信,掃碼分享
學設計 特级毛片www,色综合天天综合网,国产成人综合亚洲 在這里