AE動效如何落地?原來大廠設計師都在用這個!
2020-11-23 中華網導語
動效設計是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的神奇應用呢？別著急，同學們現在可以通過官網下載插件體驗啦！
免責聲明：市場有風險，選擇需謹慎！此文僅供參考，不作買賣依據。
責任編輯：kj005
文章投訴熱線:156 0057 2229 投訴郵箱:29132 36@qq.com相關焦點
-
AE動效如何落地 原來大廠設計師都在用這個!
動效設計是UI設計中不可或缺的一環。隨著硬體性能的發展和動效輸出方式的優化，大家對動效的認知也從最初的認為動效只是為了美觀酷炫，到逐漸認識到動效對於提升用戶體驗和產品需求的重要作用。但設計師在做動效設計的時候靈感噴湧，兢兢業業做出炫酷的效果，結果一和開發工程師對接就懵了——要麼無法實現，要麼極其複雜。 -
如何一分鐘了解AE動效設計流程?
如果AE對你來講比較陌生，或者好久沒用AE想重新拾起，可以看看這篇如何一分鐘了解AE動效設計流程？新建項目合成我們在掌握PS、AI、Sketch等任何一款軟體的時候，首先要新建一個空白文檔，那麼在AE當中新建文件就是我們所謂的新建項目合成。一個項目可以包含一個或多個合成，合成可以渲染成一個動畫。 -
不會AE沒關係,有這款插畫動效神器,輕鬆幫你搞定!
不會AE沒關係，有這款插畫動效神器，輕鬆幫你搞定動效！昨天分享了免費的插畫製作神器，今天分享一款不用AE,也能讓你的插畫添加基本的動效果，讓你的工資動起來，哈哈！優秀的設計師們，你們值得擁有！不會AE沒關係，也能做插畫動效，這麼簡這款神器用來行雲流水，簡單易懂，一分鐘學會上手，不僅解決了UI設計師插畫設計的靈感問題，還幫你輕鬆實現動效，一舉兩得，昨天的神器如果是設計師葵花寶典第一部 -
【AE教程】如何製作3D搜索圖標動效
STEP.3-製作動效 找到3D Stroke的屬性，調整線條粗細，並在Y軸旋轉屬性上K幀 3D圖標的動效完成 -
聽說AE玩得好的UI設計師,會更吃香哦!
設計師想要出來「混」，穩紮穩打的基礎技能之外，掌握一些特別的「加分項」，可是非常吃香滴~除了大家都知道的手繪技巧、C4D設計，時下還有一個越來越火熱的「鍊金術」，那就是AE動效設計！01 製作炫酷的影視動效無論國內外的「大片」、動漫還是電視劇，我們看到的那些酷炫效果，大部分都是運用AE這個軟體完成設計的。 -
為什麼動效和C4D會越來越火?
從智慧型手機誕生後，越來越多的國內公司開始關注動效設計，產品經理們已經意識到動效在產品用戶體驗中的重要性，更多的設計師們開始投身動效設計領域!出色的動效可增強用戶的使用體驗，通過有趣的動畫去引導、取悅用戶，減少用戶等待時間，更能增加產品識別度。提升產品競爭力和用戶快感。 -
想成為大廠的設計師?大內高手讓你順利過關
雖然每一個企業都有它選才用人的標準，行業的不同標準往往也有所差異。但是，企業在招聘時對人才的要求永遠不會降低，尤其是在那些設計師集中的網際網路大廠。網際網路大廠門檻高，設計師如何過關？從疫情爆發到進入後疫情時代，很多行業都不可避免地受到了衝擊，身處在各行各業的設計師們也倍感壓力山大。 -
一篇超有分量的動效設計基礎乾貨!
那什麼是動效設計？什麼時候需要用什麼樣的動效？動效越酷炫越好嗎？這裡，我會用幾篇文章分別回答這些問題。首先，我們先了解動效設計中如何用運動曲線表達動效以及緩動設計。為什麼要動效？動效是元素的位移、姿態、大小和可見度等隨時間的變化。這裡我們以位移為例來學習下動效。為什麼需要動效呢？ -
設計師如何避免「畫圖仔」命運?
Jack.P（以下簡稱JP）成為設計師之前，以為設計師只要畫好圖就好了。但是工作了2年，他發現不僅畫圖，前前後後的事都要身為「設計師」的自己來做。於是他開始試著整理設計師的工作流。「這個那個，該上傳iconfont的上傳，做切片的切片，把邏輯都寫清楚了，不然今天就一起加班到天亮。」JP好不容易把圖標交付了，發現自己還得了解測試時間，測試老哥又說話了：「這個需求啊，暫定xx日，記得那天要加班發驗收哦。」千辛萬苦，終於上線了。上線效果不好，背鍋。數據不好，背鍋。JP終於發現，需求從一開始，就跟設計師分不開。 -
騰訊設計師:從零開始幫你做出能進大廠的作品集
設計師都知道作品集的重要性，但每次想整理的時候，又總覺得好像無從下手。項目中的每一次改稿、數據反饋，用戶評價，但凡覺得有價值、有特點的地方，都要隨手記錄下來。這樣等到作品集復盤的時候就知道自己以前在項目中遇到了哪些困難，又是如何解決的，這些內容也是面試官最喜歡問的，因為這非常能體現你在真實項目環境下，解決問題的能力。 -
ae中如何給素材添加陰影效果
我們知道ae是非常強大的後期軟體，在前面我們已經講過關於ae的一些知識點。這節課我們主要來探索ae如何給素材添加陰影效果。打開ae後，新建一個自定義大小的合成。在合成內我們可以導入素材，也可以新建一些字幕。這裡我們以字幕來表現。 -
1017|八款基礎動效教學篇
簡單區分好這個後，珊珊將針對動效做以下介紹：例如搜索動效，我們會發現它的內容極其豐富，包含文字、音樂、APP、遊戲、交互、出場、Ui、點擊、等待、加載、場景、動效等等，但動效主要分為以下幾類：MG動畫（Motion Graphics -
在AE中如何製作物體沿路徑動畫
ae的強大我們不必多說，在後期合成中，ae是必不可少的軟體。有時候我們經常使用ae做一些動畫。下面我們就一起來學習ae如何沿路徑運動。路徑動畫的好處就是，可以給物體畫一個軌道，讓它自己運動，運動也比較流暢，深受廣大動畫師的喜愛。 -
UI設計師面試如何斬獲offer,拿到高薪?
甚至是有些煩躁，工作學習都聚焦不下，處於一個比較迷茫的狀態。 今天達妹就帶大家一起來了解一下，UI設計師面試應該怎麼做。 InDesign可以幫你歸類輸出設計規範文檔，AE可以做交互動效，產品展示等，這個對企業團隊來說是很難得的技能。 3、實習項目，理論實踐，更勝一籌 如果現在有兩個交互人選給公司考慮，用人單位肯定優先考慮有實習經驗的同學。 -
習慣決定命運,設計師的學習習慣該如何養成?
海報設計需要有美術的基礎，美術是設計師無論如何都繞不過去的一關。軟體技術和藝術審美，兩隻腳走路才能走得遠。有條件的家庭可以海外藝術院校學習。設計有2d，有3d，有平面，有剪輯，有動效設計，非常之多。但是設計理論卻又是貫通的。我們找準目標，定好方向，比如說喜歡做平面的就專精一門，搜集相關的信息，然後發散式的學習。前期學習千萬不要什麼都學，這個切記。平面設計涉及的很多東西，構圖色彩字體排版，各種各種東西。我們要把平面設計細分為很多方塊，逐步學習攻克它。其他設計同理。 -
「工具推薦」2020年最值得推薦的10款UI動效設計工具
動效設計在最近幾年的各種網頁設計和App設計中的表現相當搶眼。各種令人驚嘆的創意和流暢自然的動作設計迅速捕獲了用戶的視線，極大地提升了品質感和轉化率。而要製作出效果卓絕的UI動畫效果自然也需要優秀的軟體。UI動效工具開始在設計師的工作中發揮越來越大的價值。動效設計有哪些優勢？ -
AE如何製作簡單的動畫
我們知道ae是非常強大的後期效果軟體，使用ae不僅可以後期合成，還可以進行動畫製作，好多的MG動畫都是由ae製作，下面我們就一起來學習簡單的動畫製作。打開ae，我們新建一個合成後，可以直接使用鋼筆工具來畫圖層，我們可以畫出一個星狀圖形。 -
設計師如何做無障礙設計?從這五個方面出發!
網際網路設計師如何著手發起無障礙優化？信息無障礙，是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著網際網路覆蓋越來越廣，對於身體有局限的群體而言，更加迫切通過網際網路獲取信息，而這就需要網際網路產品進行信息無障礙的優化。在我國其受益人群至少包括：8500多萬殘障人士，2億多60歲以上的老年人，數量龐大。 -
如何學習動效和C4D?如何畫好app的線框圖?
現在的動效實現方式有很多，AN AE 各種3維軟體都能實現，建議大家先不要貪多，集中選擇一個從基礎開始，一步步慢慢來，反覆練習！重要的事情說三遍 反覆練習 反覆練習 反覆練習！成功之後再去逐步提高就好了！切記不要步子邁的太大！ -
愛奇藝1000平米高科技攝影棚在大廠落地
近日，全國首個「愛奇藝虛擬製作基地」落戶大廠影視小鎮，北京愛奇藝科技有限公司與影視小鎮籤署了產業合作協議，並舉行了掛牌揭幕儀式。 據了解，「愛奇藝虛擬製作基地」將以大廠影視小鎮提供的1000平方米國際標準高科技攝影棚為落地空間，綜合AI、可視化、表演捕捉、實時合成等多項前沿技術