大廠出品!動態設計最全交付指南

語言: CN / TW / HK

本文將從動態的交付檔案、成像原理,以及如何高效的與開發團隊溝通等角度來分析動態設計交付,旨在幫助與我們遇到類似問題的團隊提供合適的解決方案。

前言

開始閱讀之前,我想讓大家先思考兩個問題:你平時接觸的動態設計需求多嗎?碰到動態設計,你都是怎麼跟開發團隊進行溝通的?帶著這兩個問題,我們開始今天的主題討論。

首先在目前的體驗設計中動態交付的方式主要包含檔案式交付、引數式交付兩種。檔案交付主要是指通過提供動態格式檔案的方式來達到預期效果,對於開發者來說,只需要針對性的相容動態檔案的格式及庫就可以獲得該格式的顯示效果,根據不同需求還可以簡單的控制動態的播放、入場、退場等基礎操作;引數交付主要是對動態運動的文字表述,開發可以根據圖文化的表述對動態進行程式碼還原。

動態設計的交付方式

就起點設計團隊來說,在長期的專案迭代中,我們幾乎測試了所有的主流動態圖片格式。因此針對不同的格式有一些測評和看法,可以跟大家交流,這些格式有 GIF、WebP、APNG、Lottie、VAP、PAG,我們將結合實際情況,對這些格式做些簡單的科普和效能比對。

1. GIF

GIF 對於網際網路來說是一個傳播率極高的古董級動態格式,它誕生於 1987 年,即使是最後一個版本也是在 1989 年了,在各大網站上瀏覽的動態廣告、以及與生活息息相關的動態表情包幾乎都是 GIF 格式。GIF 在我們使用的所有格式中是壓縮效果是最差的,還因為是採用了 8 位色壓縮,只能處理 256 種顏色,所以也是所有格式中顯示效果最差的。

即便如此,GIF 還是存在一些優點的,它較為廣闊的傳播性讓其在各種環境下都有比較不錯的相容性,它的使用效能也是相對穩定的,同時相容 Android、iOS、Web,並且可實現迴圈以及首尾幀控制。

在起點讀書中 GIF 的應用主要集中的 UGC 內容上,例如官方表情包、頭像掛件展示等場景均有使用過 GIF 作為主要格式。

點娘表情包

2. WebP

WebP 相對上面的 GIF 要年輕很多,它是谷歌在 2010 年釋出,支援庫是在 2018 年 4 月釋出,我們也是在第一時間在產品中試用了該格式,並獲得了不錯的體驗,截止目前,已有 95.77% 的瀏覽器支援該格式。

WebP 目前支援有損和無失真壓縮以及動畫和 alpha 透明度的影象格式(基於 VP8 視訊格式)。WebP 通常比 JPEG、PNG 和 GIF 具有更好的壓縮率,並且旨在取代它們。WebP 同時相容 Android、iOS、Web,並且可實現迴圈以及首尾幀控制。通過千元機實機測試,WebP 也兼具了較高的穩定性,是比較不錯的通用動態格式選擇。

為了讓使用者獲得更好的視覺感官體驗,因此在起點讀書中例如掛件、動態卡牌的格式選擇上,WebP 是絕佳的通用解決方案。

起點頭像掛件

起點動態卡牌

3. APNG

APNG 相對於 WebP 要早出生幾年,是基於 PNG 格式擴充套件的一種動畫格式,所以它保留了向下相容 PNG 的特性,因此當解碼器不支援 APNG 時,會預設展示第一幀影象;APNG 擁有 24 點陣圖像和 8 位透明性,相比 GIF 擁有更高的顯示效果。

目前關於 APNG、WebP、GIF 的測評對比較多,GIF 自不必多說,它早已成了各大主流動態格式測評的計量單位,我們這裡只談 APNG、WebP,從壓縮率上來說,APNG 優於 WebP;從相容性上來說 WebP 的相容性明顯高於 APNG,谷歌從 Chrome 59 開始才支援 APNG,而 WebP 是谷歌的親兒子,相容性自不必說,目前安卓相容無壓力,iOS 中部分版本存在相容問題,但考慮到 iOS 的高版本覆蓋率,因此起點在動態格式上選擇了 WebP。

4. Lottie

Lottie 是 Airbnb 開源的一個面向 iOS、Android、RN 的動畫庫,能分析 AE 匯出的動畫 json 檔案,客戶端通過引入 Lottie 的支援庫來解析 json 檔案,通過此方法原生 App 就可以像使用靜態素材一樣來實現出動畫效果。

要使用 Lottie 需要先通過 bodymovin (AE 外掛)將 AE 動畫工程檔案轉換為 json 格式的描述檔案。Lottie 負責解析動畫的資料,包括動畫大小,動畫時長,幀率,用到的圖片,字型,圖層等等資訊,最終精準地渲染出動畫。

Lottie 支援向量(MG)動畫,並最終效果通過解析渲染完成,因此具有比較高的相容性,並且可以在極小的檔案大小下,實現極佳的畫質效果,同時相容 Android、iOS、Web,是目前網際網路產品中比較通用的解決方案;並且可以通過解析檔案實現迴圈、首尾幀固定、圖層顏色修改等操作。

雖然 Lottie 很強大,但因為其實時渲染的特點,因此對記憶體和裝置效能在碰到複雜檔案消耗巨大,加上其在動態效果上的支援比較侷限,所以 Lottie 僅能解決一些簡單到中等的動畫問題,對於例如直播間特效、打賞類動畫來說,Lottie 則會顯得力不從心。

5. VAP

VAP(Video Animation Player)是企鵝電競開發,用於播放酷炫動畫的實現方案,它可以播放帶有 Alpha 通道的視訊。是一種擬 WebP、APNG 的動畫解決方案,與之相比具有壓縮率高(素材更小)、硬體解碼速度快的優點,比 Lottie 能實現更復雜的動畫效果(比如粒子特效);並且 VAP 可以將自定義的屬性合併到動畫中。

VAP 簡單點理解就是將 MP4 (H264) 檔案的透明通道與原動畫一起匯出,然後通過解析合成形成透明動畫的顯示效果。這種方案佔用記憶體小,效能高,檔案體積小,支援效果全,是比較理想的特性動畫解決方案。

起點卡牌

6. PAG

PAG 是騰訊自主研發的一個開源專案,它同時支援「向量預合成」匯出和「BMP 預合成」匯出兩種方式。

向量預合成匯出無法支援所有的 AE 特性,但相對來說還是比 Lottie 支援的格式要多的多,在理想情況下使用向量預合成可以獲得更好的效能和更小的動畫檔案。

BMP 預合成匯出模式支援所有 AE 特效,設計師只需要關注視覺效果本身即可,相應的會對裝置效能產生一定消耗。BMP 預合成目前支援視訊序列幀和點陣圖序列幀兩種匯出的儲存格式,它對點陣圖做了簡單的幀間壓縮,可比傳統的 PNG 序列檔案小 50%。視訊儲存格式幀基於 H264 幀間壓縮並補充了透明通道(類似 VAP 的解決方案),相比點陣圖儲存格式只有 10% ~ 25% 左右的檔案大小。

而且在目前的版本迭代中,PAG 還同時支援了「向量預合成」和「BMP 預合成」混合匯出,可以在檔案匯出效果、效能、體量上做到更優秀的表現。不過雖然 PAG 在效果和壓縮上表現優越,但是在遇到大型動畫或複雜特效後對裝置效能的壓力還是巨大的,而且目前僅支援 iOS、Android,Web 支援正在開發中。此時 VAP 可以作為 PAG 的平替。

起點票賞

目前在起點讀書內的各類打賞投票場景,為了更好的展示效果,動效格式都會優先考慮 PAG。

動態檔案成像原理

1. 透明通道序列幀

簡單來說就是 PNG 序列,但是也有比較高階的表現方法,就是通過幀間壓縮來進行圖片壓縮,可以做到比普通的 PNG 整列更小的體積。

2. 視訊+透明通道

上面也提到了,是將 mp4 視訊與相應的 alpha 通道視訊疊加後,就可以將原視訊表現得帶有透明效果。

3. 向量動畫

形成動畫的物體、動作及時間都是通過程式碼來完成,也因為是純程式碼動畫,因此可以做到體量極小,效能也是極佳的。

4. 圖片「渲染」動畫

指通過 json 格式的描述檔案,將指定圖片賦予運動、時長、動作,最終通過解析渲染出描述中的動畫效果的形式。

5. 視訊幀混合向量

指將「視訊+透明通道」與「向量動畫」混合匯出的動畫表現形式,既保證了視訊的全特效效果,又保留了向量動畫的最佳顯示效果,並且沒有增加動畫檔案體積。

通過上面的一系列介紹,可以瞭解到我們在做動態檔案交付時,需要綜合考慮的因素就較多了,例如不同平臺的特性、低版本相容問題、動態庫的適配性等。

格式的選擇不是一成不變了,為了讓使用者可以獲得更好的互動體驗,可以針對性地對不同端的動態格式進行變換。

起點在漫長的迭代週期中,在不同版本時期引入過不同的動態檔案格式,綜合各項效能,目前選用了 PAG 作為我們的客戶端主要使用格式,並且在 PAG 的開發過程中,我們也始終與其研發團隊保持一定的溝通,幫助我們解決了不少技術難題,就目前來說 PAG 依然是強有力的動態交付解決方案。

關於引數交付

引數交付的核心在於溝通,而如何正確有效的與開發人員進行溝通就顯得至關重要,我們通過下圖可以看到一個典型案例。

正確的闡述動態設計的關鍵資訊才是有效交流,才能讓開發更精準的還原你所要的效果。但現實往往是我們會碰到大量複雜動畫,此時用語言來描述動畫會顯得特別疲軟複雜,而如何將這些複雜語言進行圖形化的傳達,讓表達更清晰,就顯得至關重要。因此我們綜合日常的一些工作經驗,建立了圖形分段式動態標註法,讓動態一目瞭然。

動態標註的本質就是將時間(時間節點)、地點(位置)、人物(物品)、通過「動作」進行呈現就是標註的基本結構了,當然也可以通過此方法來衍生出一些特需標註法。例如在一個複雜的動態設計需求中,涉及到的動畫較多,有位移軟轉場動畫、手勢操作響應、操作反饋動畫、隨機動畫等。

為了讓開發實現的效果達到設計預期,使用了圖形化標註法,將時間軸、動作、曲線、運動軌跡等進行呈現。關於標註的詳情資訊,就不再進行詳細文字描述了,感興趣的可以通過大圖進行詳細瞭解。

看到這裡我想有些朋友會產生一些疑惑,為什麼都 2022 年了,你還在做動態標註?目前行業中不是有很多動態輸出的解決方案嗎?Principle、ProtoPie、Origami、Cocos Creator 等等,這些不乏比較高效的解決方案,同時筆者也在設計中或多或少的使用過相關的軟體來作為高效解決方案,但如果你想系統性的學習動態圖形和動畫設計那麼 After Effects 是首選,強大的功能,能盡情實現你的動畫創意。

至於筆者會傾向為動態設計輸出標註,有幾點我覺得至關重要,一是強化在設計過程中對動態理論的掌握;二是對動態設計進行整理歸檔,方便為全域性動態做統一形成規範;三是在開發過程中可以精準定位問題,並提高還原率,實際專案證明,有標註的動態還原在第一次交付走查時可達到 60%~80%的還原率。

結語

遇到動態設計需求時,在符合條件(例如實時反饋、聚焦動畫、轉場動畫等)的情況下引數交付是最優的;而有些場景(例如重視覺效果呈現、複雜互動動畫、動態展示等)優先使用檔案交付。

建議的解決方案排序是 PAG>VAP>Lottie>WebP/APNG…,例如在 iOS 平臺,所有的 PAG 檔案播放都有比較不錯的體驗,因此我們更建議使用 PAG 交付,而在 Android 端 WebP 的穩定性更好,因此在 Android 更建議使用 WebP,當然在 Web 端依然可以使用 Lottie、WebP 作為平替。

無論多簡單的動態在需要開發實現時候,都建議進行標註落地,有效的標註可以減少不必要的溝通以及非必要的後期走查反覆。

關於製作工具,筆者無特殊偏好,常規的動態設計軟體都會去接觸,如果需要給到一些建議的有條件或想系統性學習動態的可以優先學習 AE,在 B 站上有很多教程,上手需要一點難度,但一勞永逸;如果只想學習並使用UI 互動類動態,那麼 Principle、ProtoPie 是不二選擇,甚至 Figma 本身也是不錯的解決方案;如果成為全棧設計師是你的夢想,那麼 Origami 或許可以為你開啟一扇門;如果你想在特效及 3D 動畫上有所建樹,那麼我優先推薦 Blender 作為你的主力工具。

最後送大家一首勸學(內卷)詩:三更燈火五更雞,正是男兒讀書時,黑髮不知勤學早,白首方悔讀書遲。

參考資料

歡迎關注作者的微信公眾號:「閱文體驗設計YUX」