AE動效如何落地?原來大廠設計師都在用這個!

2020-12-25 和訊

導語

動效設計是UI設計中不可或缺的一環。隨著硬體性能的發展和動效輸出方式的優化,大家對動效的認知也從最初的認為動效只是為了美觀酷炫,到逐漸認識到動效對於提升用戶體驗和產品需求的重要作用。

但設計師在做動效設計的時候靈感噴湧,兢兢業業做出炫酷的效果,結果一和開發工程師對接就懵了——要麼無法實現,要麼極其複雜。特別是AE裡有很多複雜動效,使用純代碼還原起來非常困難,導致最後設計師只能不斷簡化效果以達到跟開發成本的平衡。

一、傳統AE設計難點及解決方案

傳統的AE設計,總結下來有以下三個核心痛點:

? 研發成本高:每個動效都需要研發通過代碼來還原,單獨排期的特效以及手工配置還原的過程,包括後續復用及改動都需要大量的研發人力持續投入。

? 生產周期長:設計師和研發人員需要反覆確認效果還原度。這樣很難跟上運營節奏,容易錯過時事熱點。

? 視覺動效弱:AE裡有很多複雜動效,使用純代碼還原成本高、維護難度大,設計師只能簡化特效來推進實現開發。

就這些問題,騰訊PCG發布器中臺主導研發了一款動畫開發「神器」—PAG。為設計師提供 AE 導出插件和桌面預覽工具,支持 AE 一切特效。

PAG作為一套完整的動畫工作流,誕生之初就是為了降低或消除動畫相關的研發成本,打通設計師創作到素材交付上線的極速流程,不斷輸出運行時可編輯的高質量動畫內容。

PAG提供從AE導出插件,到桌面預覽工具,再到iOS和Android端的渲染SDK。AE設計師運用PAG實現批量化製作動畫素材,再通過導出PAG插件,到桌面預覽工具進行微量調整,從而提高了動畫的製作效率以及精度。

二、PAG亮點介紹

PAG 方案有完善的工具鏈支持,AE插件支持混合導出能力,無論是表達式、粒子動畫還是 3D插件,只要 AE做的出,PAG 都可以導出。另外導出相同的動畫內容,PAG動畫文件的體積會顯著小於其他方案,並且在解碼速度和渲染性能上都更高。

以下為幾點核心優勢:

1、動畫文件小:首先任何素材文件都是越小越好。在素材下發的使用場景裡,更小的文件能夠節省用戶的下載流量和時長。而如果內置到App裡的,這時候包體大小就直接影響增長拉新的數據了,所以動畫壓縮率非常關鍵。PAG在同樣動畫內容導出方面比其他方案平均可以小50%。

並且由於採用了二進位的數據結構,能單文件集成所有相關動畫資源,讓設計師交付素材時候只需發送一個文件,不在需再要外掛圖片音頻等資源,這樣能夠提高工作流文件傳遞的效率。

2、全AE特性支持:

①完整還原AE渲染系統:針對AE很多複雜動效,使用純代碼還原起來非常困難。設計師只能不斷簡化效果以達到跟開發成本的平衡,導致最終上線的視覺效果都是打過折扣的,不達設計預期。而PAG的SDK已經完全還原了AE整個動畫的渲染系統,能夠支持所有AE特性,設計師可以充分利用AE動畫的原子能力,組合出無限的視覺動效,不用因為代碼還原成本的問題而打折扣。

②支持矢量和序列幀的混合導出:PAG除了在矢量導出上比同類型方案支持更加完善外,還創新性地實現了矢量和序列幀的混合導出能力,設計計可以主動標記哪些圖層使用序列幀導出,例如不需要編輯並且有複雜的動效,而需要編輯的圖層繼續用簡單的矢量方式導出。從而實現支持所有的AE特性又能保持運行時的編輯性。

3、 完善便捷的編輯工具,支持實時預覽以及性能可視化:往往AE設計師跟研發聯調非常費勁,例如設計圖需要給到研發同學上架素材才能看到最終效果,效果反覆確認耗時久;或者不知道如何優化性能,一直改都無法滿足開發需求,需要不斷與研發同學溝通。

但如果通過PAG的自助工具,就能做到所見即所得地生產動畫內容。首先,桌面預覽工具確保了在所有端上渲染效果的一致性,設計師無需把素材提交上線就能看到最終準確的動畫效果。

其次PAG 的導出插件內置了40多種自動優化和提醒的策略,這樣可以在導出的環節就幫助設計師進行性能把關。並且還在預覽工具裡提供性能可視化面板,能夠直觀地看到每個素材量化的性能指標,並配套說明了各種指標的優化方向。

讓設計師可以獨立完成動畫內容交付,高效輔助設計師製作出性能和效果俱佳的動畫內容,避免來回返工。

三、總結

作為騰訊PCG發布器中臺下三大組件之一,PAG已經在騰訊微視,手機QQ,王者榮耀等數十款產品中落地使用。包含微信在內的多個團隊,也都積極參與該項目的協同共建,齊心協力,不斷打磨這款動畫開發利器。相信隨著PAG的不斷迭代,將持續為動畫設計師及開發工程師們技術賦能,實現更多天馬行空的動畫效果,助力動畫產業進一步發展。

說了這麼多關於PAG的介紹,大家是不是迫不及待地想體驗一把PAG的神奇應用呢?別著急,同學們現在可以通過官網下載插件體驗啦!

(責任編輯:李顯傑 )

相關焦點

  • 動效不知如何落地?看完這個就明白了
    三分設|連接知識,幫助全球 1 億設計師成長本文共1895 字,預計閱讀 5 分鐘,記得點擊上面的藍字關注我們喲!一直有很多朋友會問一些關於移動端實現動效的方法,平時也會給大家做一些解答,但是可能沒有那麼系統性,這次抽點時間總結歸納下這方面的內容,跟大家分享下我日常設計中是如何完成動畫實現的。設計輸出的方式大概可以分為位圖和矢量兩種,與常規的圖片輸出並無太大的差異。位圖方式:PNG 序列幀、APNG、GIF;矢量方式:Lottie、SVG 動畫。
  • 動效落地可能最好的幾個方案,分享給你!
    前言 相信打開這篇文章的你,多多少少都接觸過動效設計,但不知落地方案你知多少,本期就分享幾個業內設計大佬們常用,但還捨不得告訴人,超級好用的落地方案!當在AE設計好的動畫後一般是導出視頻或序列幀,再用PS導出GIF圖,這裡推薦導出序列幀再用ps導出GIF圖的方案,這樣動圖相對質量更高內存也更小一些。還有一種比較快捷的方式就是用AE插件gifGun,一鍵導出GIF圖,內存相對較小,質量次於序列幀導出的方式,如果只是導出效果觀看,可以用這種快捷的方式,如果要落實到產品上,最好能夠用序列幀輸出更高品質的GIF。
  • 平面設計師師和動畫/UI設計的距離中間就隔一個「AE」
    還有這個!不知道請取關!那麼咱們看到打牌的會不會耳目一新,非常有衝擊力,原本就優秀的品牌設計更加是多了一份潮流和未來感。努力提升自己的動效水平。當然路途是遙遠,羅馬不可以一日建成。推薦幾本好書大家可以參考《UI設計》《AE從菜鳥到精通》等,當然小編我還是不會忘記「盜用」自家公司設計師小夥伴的作品上傳哦,請叫我雷鋒。
  • vlog視頻必備 1000套AE文字動效效果大放送
    裡面總共有1000套字體動效,解壓後,打開ae工程文件,裡面有單獨的小文件,獨自打開便可修改文字等,來給自己的視頻加入一些文字的動畫效果模板參數模板大小及注意事項【版本要求】建議使用AECC或者以上版本【插件要求】該AE模板不需要任何第三方插件【模板尺寸】1920*1080【時間長度】單獨一個基本
  • 不會AE沒關係,有這款插畫動效神器,輕鬆幫你搞定
    不會AE沒關係,有這款插畫動效神器,輕鬆幫你搞定動效!優秀的設計師們,你們值得擁有!這款神器用來行雲流水,簡單易懂,一分鐘學會上手,不僅解決了UI設計師插畫設計的靈感問題,還幫你輕鬆實現動效,一舉兩得,昨天的神器如果是設計師葵花寶典第一部,那今天分享的就是葵花寶典中的必殺技!閒話少說,我們上硬菜。
  • 重磅 | UXD全棧設計師課程招生「大廠設計師帶你飛 拿不到offer全額退款」
    ;職場輔導:大廠HR/資深獵頭輔導你如何撰寫簡歷,如何避免面試過程中各種你不知道的坑,幫你打開面試的黑盒;大廠設計用人部門面試官為你答疑解惑,告訴你如何打造一份合格的設計作品集。,3年+大廠工作經驗;小萍老師:原網易考拉高級互動設計師,4年+大廠工作經驗;小U老師:原58同城高級視覺設計師,4年+大廠工作經驗;雖然從成本上來說這個成本相當高,但是服務好學員才是硬道理。
  • 如何做好作品集,大廠設計師經驗分享
    下一篇文章,我可能會寫點設計師職業發展相關的思考,也請大家保持關注吧。 設計師都知道作品集的重要性,但每次想整理的時候,又總覺得好像無從下手。項目中的每一次改稿、數據反饋,用戶評價,但凡覺得有價值、有特點的地方,都要隨手記錄下來。這樣等到作品集復盤的時候就知道自己以前在項目中遇到了哪些困難,又是如何解決的,這些內容也是面試官最喜歡問的,因為這非常能體現你在真實項目環境下,解決問題的能力。
  • 如何系統學習AE-MG動畫呢?
    MG動畫設計的前景如何?MG動畫設計師在這幾年很多公司已經有專門的這類崗位需求;工資待遇一線城市平均在8k-10k左右;二三線城市平均在6-8k左右;四線城市的這類崗位需求目前多數還和傳統的flash動畫、視頻製作重合在一起;崗位需求在一二線城市比較明顯,而且分工也很明確,崗位需求也比較大,待遇也不錯。
  • 一篇超有分量的動效設計基礎乾貨!
    那什麼是動效設計?什麼時候需要用什麼樣的動效?動效越酷炫越好嗎?這裡,我會用幾篇文章分別回答這些問題。首先,我們先了解動效設計中如何用運動曲線表達動效以及緩動設計。為什麼要動效?動效是元素的位移、姿態、大小和可見度等隨時間的變化。這裡我們以位移為例來學習下動效。為什麼需要動效呢?
  • 如何用最短時間成為與高薪崗位無縫對接的專業設計師?
    阿里面向市場招收全鏈路設計師,引發了業內很多討論,甚至有人預言說很多傳統設計崗位的設計師會被逐步替代。近幾年,從事設計的同學,或者在設計圈從事其他設計崗位的同學,都能明顯感受到:普通的專項設計師越來越難找工作了。
  • AE學習動效設計表達式,你應該從這5個開始
    從來沒有用過AE的表達式?這5個AE表達式對你來說是一個很好的開始,它會讓你的工作流程更加高效。
  • 普通UI如何進階大廠UX?專業技能和思維意識缺一不可
    最近發現有很多童鞋關心如何從UI進階到UX又或者最新流行的產品設計的問題。那麼我以一個非科班出身的UI到大廠資深UX的經歷,不帶黑話的用4k字作文給大家描述一下這兩者之間如何無縫進階。其實這也不是一個絕對值,雖然大廠的人力財力資源相對豐富,對於設計師的要求更注重全鏈路與業務思維,但大廠的業務線繁雜,並不是所有業務線都有成熟的UED團隊負責。所以在一些大廠也仍然會在邊緣業務線或者新孵化的小項目組出現大量的純UI向定位,通常去了這樣業務線的同學就會發現每日仍然還是沉浸在各種畫圖中無法自拔,甚至連做系統搭建和項目沉澱的時間都沒有。
  • 【設計譯文】UX設計之動效終極指南
    原文地址:https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9以下是文章翻譯:如今,我們很難通過界面動效給人留下深刻的印象或者帶來驚喜。它展示了屏幕之間的交互,解釋了如何使用該應用程式,或者只是簡單地吸引用戶的注意。
  • 你們要的AE自學課程來啦!
    學完AE的前景如何?影視後期工資待遇如何?MG動畫設計師工資之外的收入做為一名設計師,多多少少都會做一些外單;MG動畫這類的外單,相對於其他視頻製作,應該是比較多的,而且門檻也比較低,通常一兩個人都能搞定;單價平均在100-200每秒;這個要根據項目需求以及你能力水平來定;所以如果你能夠在業內有人脈、影響力;能夠有穩定的業務量,作為自由職業或者出來創業是極其有幫助的。
  • 設計師如何避免「畫圖仔」命運?
    Jack.P(以下簡稱JP)成為設計師之前,以為設計師只要畫好圖就好了。但是工作了2年,他發現不僅畫圖,前前後後的事都要身為「設計師」的自己來做。於是他開始試著整理設計師的工作流。「這個那個,該上傳iconfont的上傳,做切片的切片,把邏輯都寫清楚了,不然今天就一起加班到天亮。」JP好不容易把圖標交付了,發現自己還得了解測試時間,測試老哥又說話了:「這個需求啊,暫定xx日,記得那天要加班發驗收哦。」千辛萬苦,終於上線了。上線效果不好,背鍋。數據不好,背鍋。JP終於發現,需求從一開始,就跟設計師分不開。
  • ID工業設計師如何拿到華為等心儀大廠offer?
    看到很多人在問,我是工業設計專業即將畢業的學生,怎樣才能拿到大廠offer?今天就以華為的校招ID設計師為例,在此跟大家分享交流一下,應屆生或者實習生工業設計專業,去華為或者上汽類似的通訊或汽車行業,其實發展前景是非常好的。
  • 騰訊設計師:從零開始幫你做出能進大廠的作品集
    設計師都知道作品集的重要性,但每次想整理的時候,又總覺得好像無從下手。項目中的每一次改稿、數據反饋,用戶評價,但凡覺得有價值、有特點的地方,都要隨手記錄下來。這樣等到作品集復盤的時候就知道自己以前在項目中遇到了哪些困難,又是如何解決的,這些內容也是面試官最喜歡問的,因為這非常能體現你在真實項目環境下,解決問題的能力。
  • UXD全棧設計師課程 | 招生簡章
    *24小時貼心輔導,你有問題,儘管問,回答到你學會為止;職場輔導:大廠HR/資深獵頭輔導你如何撰寫簡歷,如何避免面試過程中各種你不知道的坑,幫你打開面試的黑盒;大廠設計用人部門面試官為你答疑解惑,告訴你如何打造一份合格的設計作品集。
  • 1017|八款基礎動效教學篇
    簡單區分好這個後,珊珊將針對動效做以下介紹:例如搜索動效,我們會發現它的內容極其豐富,包含文字、音樂、APP、遊戲、交互、出場、Ui、點擊、等待、加載、場景、動效等等,但動效主要分為以下幾類:MG動畫(Motion Graphics
  • AE軟體中到底有哪些令人震驚的AE插件呢?
    大多數情況下,我都是通過Particular和form的配合來完成粒子效果的。form還有一個驚人的地方就是聲音映射,這可是個不得了的功能啊,灰常好玩,很多設計師就是拿form來做聲音可視化的。3.AE節點型三維粒子插件 Stardust v0.9.2 Win/Mac CC2014-CC2017