超干貨｜動態(tài)設(shè)計最全交付指南
▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū) 三分設(shè)｜連接知識，助力全球 1 億設(shè)計師成長 轉(zhuǎn)自：閱文體驗設(shè)計YUX 編輯：章欣怡 共 5132 字 18 圖 預(yù)計閱讀 13 分鐘
本文將從動態(tài)的交付文件、成像原理，以及如何高效的與開發(fā)團隊溝通等角度來分析動態(tài)設(shè)計交付，旨在幫助與我們遇到類似問題的團隊提供合適的解決方案。
本文將從動態(tài)的交付文件、成像原理，以及如何高效的與開發(fā)團隊溝通等角度來分析動態(tài)設(shè)計交付，旨在幫助與我們遇到類似問題的團隊提供合適的解決方案。
Background
前言
開始閱讀之前，我想讓大家先思考兩個問題：你平時接觸的動態(tài)設(shè)計需求多嗎？碰到動態(tài)設(shè)計，你都是怎么跟開發(fā)團隊進行溝通的？帶著這兩個問題，我們開始今天的主題討論。
首先在目前的體驗設(shè)計中動態(tài)交付的方式主要包含 文件式交付、參數(shù)式交付 兩種。文件交付主要是指通過提供動態(tài)格式文件的方式來達到預(yù)期效果，對于開發(fā)者來說，只需要針對性的兼容動態(tài)文件的格式及庫就可以獲得該格式的顯示效果，根據(jù)不同需求還可以簡單的控制動態(tài)的播放、入場、退場等基礎(chǔ)操作；參數(shù)交付主要是對動態(tài)運動的文字表述，開發(fā)可以根據(jù)圖文化的表述對動態(tài)進行代碼還原。
Part 1
動態(tài)設(shè)計的交付方式
就起點設(shè)計團隊來說，在長期的項目迭代中，我們幾乎測試了所有的主流動態(tài)圖片格式。因此針對不同的格式有一些測評和看法，可以跟大家交流，這些格式有 GIF、WebP、APNG、Lottie、VAP、PAG，我們將結(jié)合實際情況，對這些格式做些簡單的科普和性能比對。
GIF
GIF 對于互聯(lián)網(wǎng)來說是一個傳播率極高的古董級動態(tài)格式，它誕生于 1987 年，即使是最后一個版本也是在 1989 年了，在各大網(wǎng)站上瀏覽的動態(tài)廣告、以及與生活息息相關(guān)的動態(tài)表情包幾乎都是 GIF 格式。GIF 在我們使用的所有格式中是壓縮效果是最差的，還因為是采用了 8 位色壓縮，只能處理 256 種顏色，所以也是所有格式中顯示效果最差的。
即便如此，GIF 還是存在一些優(yōu)點的，它較為廣闊的傳播性讓其在各種環(huán)境下都有比較不錯的兼容性，它的使用性能也是相對穩(wěn)定的，同時兼容 Android、iOS、Web，并且可實現(xiàn)循環(huán)以及首尾幀控制。
在起點讀書中 GIF 的應(yīng)用主要集中的 UGC 內(nèi)容上，例如官方表情包、頭像掛件展示等場景均有使用過 GIF 作為主要格式。
點娘表情包
WebP
WebP 相對上面的 GIF 要年輕很多，它是谷歌在 2010 年發(fā)布，支持庫是在 2018 年 4 月發(fā)布，我們也是在第一時間在產(chǎn)品中試用了該格式，并獲得了不錯的體驗，截止目前，已有 95.77% 的瀏覽器支持該格式。
WebP 目前支持有損和無損壓縮以及動畫和 alpha 透明度的圖像格式（基于 VP8 視頻格式）。WebP 通常比 JPEG、PNG 和 GIF 具有更好的壓縮率，并且旨在取代它們。WebP 同時兼容 Android、iOS、Web，并且可實現(xiàn)循環(huán)以及首尾幀控制。通過千元機實機測試，WebP 也兼具了較高的穩(wěn)定性，是比較不錯的通用動態(tài)格式選擇。
為了讓用戶獲得更好的視覺感官體驗，因此在起點讀書中例如掛件、動態(tài)卡牌的格式選擇上，WebP 是絕佳的通用解決方案。
起點頭像掛件
起點動態(tài)卡牌
APNG
APNG 相對于 WebP 要早出生幾年，是基于 PNG 格式擴展的一種動畫格式，所以它保留了向下兼容 PNG 的特性，因此當解碼器不支持 APNG 時，會默認展示第一幀圖像；APNG 擁有 24 位圖像和 8 位透明性，相比 GIF 擁有更高的顯示效果。
目前關(guān)于 APNG、WebP、GIF 的測評對比較多，GIF 自不必多說，它早已成了各大主流動態(tài)格式測評的計量單位，我們這里只談 APNG、WebP，從壓縮率上來說，APNG 優(yōu)于 WebP；從兼容性上來說 WebP 的兼容性明顯高于 APNG，谷歌從 Chrome 59 開始才支持 APNG ，而 WebP 是谷歌的親兒子，兼容性自不必說，目前安卓兼容無壓力，iOS 中部分版本存在兼容問題，但考慮到 iOS 的高版本覆蓋率，因此起點在動態(tài)格式上選擇了 WebP。
Lottie
Lottie 是 Airbnb 開源的一個面向 iOS、Android、RN 的動畫庫，能分析 AE 導(dǎo)出的動畫 json 文件，客戶端通過引入 Lottie 的支持庫來解析 json 文件，通過此方法原生 App 就可以像使用靜態(tài)素材一樣來實現(xiàn)出動畫效果。
要使用 Lottie 需要先通過 bodymovin （AE插件）將 AE 動畫工程文件轉(zhuǎn)換為 json 格式的描述文件。Lottie 負責解析動畫的數(shù)據(jù)，包括動畫大小，動畫時長，幀率，用到的圖片，字體，圖層等等信息，最終精準地渲染出動畫。
Lottie 支持矢量（MG）動畫，并最終效果通過解析渲染完成，因此具有比較高的兼容性，并且可以在極小的文件大小下，實現(xiàn)極佳的畫質(zhì)效果，同時兼容 Android、iOS、Web，是目前互聯(lián)網(wǎng)產(chǎn)品中比較通用的解決方案；并且可以通過解析文件實現(xiàn)循環(huán)、首尾幀固定、圖層顏色修改等操作。
雖然 Lottie 很強大，但因為其實時渲染的特點，因此對內(nèi)存和設(shè)備性能在碰到復(fù)雜文件消耗巨大，加上其在動態(tài)效果上的支持比較局限，所以 Lottie 僅能解決一些簡單到中等的動畫問題，對于例如直播間特效、打賞類動畫來說，Lottie 則會顯得力不從心。
VAP
VAP（Video Animation Player）是企鵝電競開發(fā)，用于播放酷炫動畫的實現(xiàn)方案，它可以播放帶有 Alpha 通道的視頻。是一種擬 WebP、APNG 的動畫解決方案，與之相比具有壓縮率高（素材更?。?、硬件解碼速度快的優(yōu)點，比 Lottie 能實現(xiàn)更復(fù)雜的動畫效果（比如粒子特效）；并且 VAP 可以將自定義的屬性合并到動畫中。
VAP 簡單點理解就是將 MP4 (H264) 文件的透明通道與原動畫一起導(dǎo)出，然后通過解析合成形成透明動畫的顯示效果。這種方案占用內(nèi)存小，性能高，文件體積小，支持效果全，是比較理想的特性動畫解決方案。
起點卡牌
PAG
PAG 是騰訊自主研發(fā)的一個開源項目，它同時支持「矢量預(yù)合成」導(dǎo)出和「BMP 預(yù)合成」導(dǎo)出兩種方式。
矢量預(yù)合成導(dǎo)出無法支持所有的 AE 特性，但相對來說還是比 Lottie 支持的格式要多的多，在理想情況下使用矢量預(yù)合成可以獲得更好的性能和更小的動畫文件。
BMP 預(yù)合成導(dǎo)出模式支持所有 AE 特效，設(shè)計師只需要關(guān)注視覺效果本身即可，相應(yīng)的會對設(shè)備性能產(chǎn)生一定消耗。BMP 預(yù)合成目前支持視頻序列幀和位圖序列幀兩種導(dǎo)出的存儲格式，它對位圖做了簡單的幀間壓縮，可比傳統(tǒng)的 PNG 序列文件小 50%。視頻存儲格式幀基于 H264 幀間壓縮并補充了透明通道（類似 VAP 的解決方案），相比位圖存儲格式只有 10% ~ 25% 左右的文件大小。
而且在目前的版本迭代中，PAG 還同時支持了「矢量預(yù)合成」和「BMP 預(yù)合成」混合導(dǎo)出，可以在文件導(dǎo)出效果、性能、體量上做到更優(yōu)秀的表現(xiàn)。不過雖然 PAG 在效果和壓縮上表現(xiàn)優(yōu)越，但是在遇到大型動畫或復(fù)雜特效后對設(shè)備性能的壓力還是巨大的，而且目前僅支持 iOS、Android，Web 支持正在開發(fā)中。此時 VAP 可以作為 PAG 的平替。
起點票賞
目前在起點讀書內(nèi)的各類打賞投票場景，為了更好的展示效果，動效格式都會優(yōu)先考慮 PAG。
Part 2
動態(tài)文件成像原理
透明通道序列幀
簡單來說就是 PNG 序列，但是也有比較高級的表現(xiàn)方法，就是通過幀間壓縮來進行圖片壓縮，可以做到比普通的 PNG 整列更小的體積。
視頻+透明通道
上面也提到了，是將 mp4 視頻與相應(yīng)的 alpha 通道視頻疊加后，就可以將原視頻表現(xiàn)地帶有透明效果。
矢量動畫
形成動畫的物體、動作及時間都是通過代碼來完成，也因為是純代碼動畫，因此可以做到體量極小，性能也是極佳的。
圖片「渲染」動畫
指通過 json 格式的描述文件，將指定圖片賦予運動、時長、動作，最終通過解析渲染出描述中的動畫效果的形式。
視頻幀混合矢量
指將「視頻+透明通道」與「矢量動畫」混合導(dǎo)出的動畫表現(xiàn)形式，即保證了視頻的全特效效果，又讓保留了矢量動畫的最佳顯示效果，并且沒有增加動畫文件體積。
通過上面的一系列介紹，可以了解到我們在做動態(tài)文件交付時，需要綜合考慮的因素就較多了，例如不同平臺的特性、低版本兼容問題、動態(tài)庫的適配性等。
格式的選擇不是一成不變了，為了讓用戶可以獲得更好的互動體驗，可以針對性地對不同端的動態(tài)格式進行變換。
起點在漫長的迭代周期中，在不同版本時期引入過不同的動態(tài)文件格式，綜合各項性能，目前選用了 PAG 作為我們的客戶端主要使用格式，并且在 PAG 的開發(fā)過程中，我們也始終與其研發(fā)團隊保持一定的溝通，幫助我們解決了不少技術(shù)難題，就目前來說 PAG 依然是強有力的動態(tài)交付解決方案。
Part 3
關(guān)于參數(shù)交付
參數(shù)交付的核心在于溝通，而如何正確有效的與開發(fā)人員進行溝通就顯得至關(guān)重要，我們通過下圖可以看到一個典型案例。
正確的闡述動態(tài)設(shè)計的關(guān)鍵信息才是有效交流，才能讓開發(fā)更精準的還原你所要的效果。但現(xiàn)實往往是我們會碰到大量復(fù)雜動畫，此時用語言來描述動畫會顯得特別疲軟復(fù)雜，而如何將這些復(fù)雜語言進行圖形化的傳達，讓表達更清晰，就顯得至關(guān)重要。因此我們綜合日常的一些工作經(jīng)驗，建立了圖形分段式動態(tài)標注法，讓動態(tài)一目了然。
動態(tài)標注的本質(zhì)就是將時間（時間節(jié)點）、地點（位置）、人物（物品）、通過「動作」進行呈現(xiàn)就是標注的基本結(jié)構(gòu)了，當然也可以通過此方法來衍生出一些特需標注法。例如在一個復(fù)雜的動態(tài)設(shè)計需求中，涉及到的動畫較多，有位移軟轉(zhuǎn)場動畫、手勢操作響應(yīng)、操作反饋動畫、隨機動畫等。
為了讓開發(fā)實現(xiàn)的效果達到設(shè)計預(yù)期，使用了圖形化標注法，將時間軸、動作、曲線、運動軌跡等進行呈現(xiàn)。關(guān)于標注的詳情信息，就不再進行詳細文字描述了，感興趣的可以通過大圖進行詳細了解。
看到這里我想有些朋友會產(chǎn)生一些疑惑，為什么都 2022 年了，你還在做動態(tài)標注？目前行業(yè)中不是有很多動態(tài)輸出的解決方案嗎？Principle、ProtoPie、Origami、Cocos Creator 等等，這些不乏比較高效的解決方案，同時筆者也在設(shè)計中或多或少的使用過相關(guān)的軟件來作為高效解決方案，但如果你想系統(tǒng)性的學(xué)習(xí)動態(tài)圖形和動畫設(shè)計那么 After Effects 是首選，強大的功能，能盡情實現(xiàn)你的動畫創(chuàng)意。
至于筆者會傾向為動態(tài)設(shè)計輸出標注，有幾點我覺得至關(guān)重要，一是強化在設(shè)計過程中對動態(tài)理論的掌握；二是對動態(tài)設(shè)計進行整理歸檔，方便為全局動態(tài)做統(tǒng)一形成規(guī)范；三是在開發(fā)過程中可以精準定位問題，并提高還原率，實際項目證明，有標注的動態(tài)還原在第一次交付走查時可達到 60%~80% 的還原率。
The End
結(jié)語
遇到動態(tài)設(shè)計需求時，在符合條件（例如實時反饋、聚焦動畫、轉(zhuǎn)場動畫等）的情況下參數(shù)交付是最優(yōu)的；而有些場景（例如重視覺效果呈現(xiàn)、復(fù)雜交互動畫、動態(tài)展示等）優(yōu)先使用文件交付。
建議的解決方案排序是 PAG＞VAP＞Lottie＞W(wǎng)ebP/APNG...，例如在 iOS 平臺，所有的 PAG 文件播放都有比較不錯的體驗，因此我們更建議使用 PAG 交付，而在 Android 端 WebP 的穩(wěn)定性更好，因此在 Android 更建議使用 WebP，當然在 Web 端依然可以使用 Lottie、WebP 作為平替。
無論多簡單的動態(tài)在需要開發(fā)實現(xiàn)時候，都建議進行標注落地，有效的標注可以減少不必要的溝通以及非必要的后期走查反復(fù)。
關(guān)于制作工具，筆者無特殊偏好，常規(guī)的動態(tài)設(shè)計軟件都會去接觸，如果需要給到一些建議的有條件或想系統(tǒng)性學(xué)習(xí)動態(tài)的可以優(yōu)先學(xué)習(xí) AE，在 B 站上有很多教程，上手需要一點難度，但一勞永逸；如果只想學(xué)習(xí)并使用 UI 交互類動態(tài)，那么 Principle、ProtoPie 是不二選擇，甚至 Figma 本身也是不錯的解決方案；如果成為全棧設(shè)計師是你的夢想，那么 Origami 或許可以為你打開一扇門；如果你想在特效及 3D 動畫上有所建樹，那么我優(yōu)先推薦 Blender 作為你的主力工具。
最后送大家一首勸學(xué)（內(nèi)卷）詩：三更燈火五更雞，正是男兒讀書時，黑發(fā)不知勤學(xué)早，白首方悔讀書遲。
— The end —
以下三分設(shè)文章，你可能也感興趣
▽
?? 原創(chuàng)文章精選??
告別加班！使用設(shè)計系統(tǒng)方法更快地構(gòu)建產(chǎn)品
如何評估設(shè)計質(zhì)量，提升設(shè)計技能
制定 “小目標”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維
35+ 的 Windows 系統(tǒng)到底有什么了不起？
導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計 —— Lightship
?? 我們一起聊設(shè)計 ???♂?
高質(zhì)量，學(xué)設(shè)計行交流微信群
期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長
PS：歡迎大家關(guān)注三分設(shè)，每天早上9點，準時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標了公眾號三分設(shè)的粉絲）
點亮『在看』，百萬年薪↓↓