header_v1.7.40

關于動效落地,我們可以做的更多

32天前發布

原創文章 / 多領域 / 教程
Jadon7 原創,如需商業用途或轉載請與Jadon7聯系,謝謝配合。

歷時兩個月斷斷續續終于整理完了這篇文章,希望能對大家工作中遇到的一些問題有所幫助(多圖慎點)
最近求職中,有意向可以聯系

快乐飞艇官方网址:概要

快乐飞艇怎么计划 www.oiyxbf.tw

針對動效輸出的選擇正在變得越來越多,然而作為設計師我們僅僅只是對動效輸出的選擇有所了解往往產出的結果還是會不盡如人意。了解動效落地背后的原理,可以幫助我們在設計的前期階段就了解應該如何去做設計才能更容易的對接和落地。

 


隨著技術革新,用戶對于產品細節的感知度和挑剔程度正在日益劇增,越來越多的產品都在嘗試通過不同的手段來打造產品的差異化,而動效設計作為近年來大火的設計趨勢之一也被越來越多的產品所青睞。動效對于一個優秀的產品也在日漸從“錦上添花”的地位慢慢變成“必不可少”的構成元素。但是當我們去觀察身邊很多的線上產品對于動效落地把控的時候發現現實結果往往并不盡如人意,很多優秀的概念、在想法階段到最終落地幾乎被打磨的體無完膚。我們以往的經驗告訴我們可以通過簡單的方式輸出我們的設計作品并且加以跟進就可以使線上的結果達到很高的完成度,但是當我們面臨動效輸出的時候會發現,輸出的選擇在日漸變多,但是輸出的結果還是很難達到理想的狀態。


目前市面上針對動效的輸出與落地主要還是圍繞著基礎的幾種輸出方式,輸出方式的選擇就困擾著很多的設計師,而作為設計師我們要做的不僅是了解在什么情境下應該選擇什么樣的輸出方式,更應該了解這些流程化的輸出方式的原理以及圍繞這些原理我們可以在整個產品的設計流程中可以做到的更多的事情。




產品中的動效分類


在了解動效落地方式的選擇之前,我們需要明白的第一件事是互聯網產品當中的動效分類與一般意義上的動效有很大的區別。廣義的我們把 UI 動效分為三類:



一、情感化動效


情感化動效偏向于感性的層面,主要目的是增加我們產品的氣質和傳達情緒,增加產品的魅力值,在一些小的細節上我們加入一些情感化的元素也可以以彩蛋的形式給用戶驚喜。比較常見的有 app 中的 loading 動畫,點贊動畫等。





二、交互動效


產品流程、交互行為的串聯,不論可實際操作的交互原型還是純做 demo 展示的動效過場都可以算作交互動效設計,交互動效最基礎的的形態就是原型流程圖的串聯交互稿。交互動效又可以細分為轉場動效和微交互,分別應用于頁面銜接和基礎組件的交互反饋。前者可以傳達給用戶產品的層次結構和空間關系,后者可以使用戶減少操作成本。




三、復合型動效


復合型動效不局限于感性層面的情緒傳達,也不局限于交互行為的串聯,往往真實場景當中更多的也是這一類動效,在與開發人員對接階段也更容易存在各種各樣的不穩定因素,對于設計師而言也存在更多層面的挑戰性。





影響輸出方式的因素


影響輸出方式的因素


情感化動效一般情況下會受到三個方面的屬性影響他的輸出選擇,分別是尺寸、時間、動畫復雜度:




一、動畫尺寸


動畫尺寸越大=占用系統空間越大=占用的系統性能也越大,但是這個等式僅僅成立于我們常見的一些所見即所得的格式上,例如gif/視頻/webp/apng 等。


類似這樣的一些格式,是我們的設備所能接受的最簡單最直白的格式。他去產出一個動畫的邏輯一般都是不同的靜態圖像的堆棧通過給定的次序和時間逐個播放。這里邊的每一個靜態構成圖尺寸越大,整個動畫的占用內存相應的也就越大。但是我們的產品包的容量始終有限,不能允許太大內存的動效存在。



另一方面,大尺寸的靜態圖在預覽過程中也需要耗費更多的設備計算,舉一個很簡答的例子,當我們在電腦上預覽一張 800*600 的圖和一張 2400*1800 的圖電腦打開它所需要的時間是不同的,相應的,動畫格式多個大尺寸靜態圖做預覽時耗費的系統性能是成倍數增長的。



二、動畫時長


影響原因與尺寸的影響原因類似,當圖片堆棧的時間變長時,堆棧當中的圖片數量也會增加,動畫的占用內存相應的也就變得更大。所以,當我們的動畫時間過長時也不適合使用這些所見即所得的格式類型。


需要注意的一點是,動畫的時長對性能的影響會相對的小很多


三、動畫復雜度


動畫復雜度對在以上提到的輸出格式當中不存在任何問題,更多的是在一些近幾年比較時髦的輸出工具上出現問題。對于復雜動畫,我們要盡可能選擇去輸出所見即所得的格式。當選擇了其他的格式時也要盡可能的減少動畫的復雜度,保留重點,去掉冗雜的細節





情感化動效輸出選擇


一般情況下我們會根據動效的類型把輸出方式分為兩類:


· 所所見即所得格式

· 所見非所得格式


所謂「所見即所得」就是輸出我們最常見的一些輸出之后即可預覽的格式,比如 GI比 圖/視頻這種的格或,也是我們很多的動效輸出最基礎的格式:



GIF 圖格式


GIF 圖格式可謂是作為設計師接觸過的最多的動態格式了,GIF格式自 1987 年由 CompuServe 公司引入后,因其體積小而成像相對清晰,特別適合于初期慢速的互聯網,而從此大受歡迎。因為時代背景使得他有非常強的兼容性,基本上可以再目前大多數的智能設備上直接預覽。不論動效落地還是在各個平臺上的兼容性也都是非常優秀的的,尤其在一些設計平臺上,也是大家最多的選擇用來做一些概念展示的格式之一。也因為他在不同平臺設備之間的兼之間,他的傳播性也是非常強的。


當然除了他自身所帶的這么多優點之外,GIF 格式也因為他的應用年代技術限制的原因會有很多其他的缺陷,前面提到的很多優點往往也是因為誕生早給他自身帶來的福利,他會有很多不可逆的問題,首先第一點是對電腦的內存和性能占用非常大(根據 GIF 的時間尺寸的等情況會有不同的程度的影響),作為設計師常有的一個經驗是在網頁上多開幾個 GIF 之后電腦風扇就開始飚起來了。第二點是他是一個有損的文件格式,不論是色彩還是畫面質感都會有一定程度的壓縮。第三點是對透明通道的支持非常有限,輸出結果會非常差,時?;嵊芯獬莼虬妝叩那榭?。以上是我們在輸出 GIF 格式的之前需要提前思考是否可以接受以上的問題。



另外輸出 GIF 圖的過程也經常困擾著很多的設計師,我也為此錄制了一篇關于 GIF 輸出的經驗分享



常規的 GIF 輸出(After effects)會有三種選擇:


第一種:首先 AE 輸出視頻格式,然后分通過 PS 輸出 GIF 格式。這種方式是目前市面上最常見的輸出方式,內存占用一般,輸出質量一般。





第二種:在原有的基礎上做部分優化,首先AE 輸出序列幀格式,然后通過 PS 選擇針對圖片的優化方式輸出。這是目前為止所有輸出方式中內存最小失真最低的方式。內存占用低,輸出質量高。但是存在問題是無法輸出 500fps 以上的動畫(PhotoShop限制 自身限制)。




第三種:直接通過GIF Brewery3輸出。內存占用一般,輸出質量低。一般針對前兩種方式無法輸出時選擇, 優點是比較穩定,基本不會出現任何問題。





下圖為不同輸出方式輸出結果對比:



另外還有第四種選擇是通過 AE 插件 GIFGUN 直接導出,GIFGUN 插件是一個非常方便操作簡單的插件,但是這里不推薦使用的原因是 GIFGUN 有一個限制是只能輸出低的 30FPS 的動畫,很多時候輸出的結果會存在掉幀的情況




EZGIF 壓縮 GIF 圖


當我們輸出圖 GIF 圖內存無法達到理想大小時可以使用 https://ezgif.com 來壓縮。




視頻格式


視頻格式在大多數的產品上也都可以直接兼容,相比 GIF 格式他的內存在一些派生出的制式下可以更小,我們的智能設備也可以再更小的系統性能下讀取視頻格式。他的問題是對透明通道的支持很差,并且他也是一種有損的輸出格式。所以在動畫輸出時我們也會盡可能的減少對視頻格式的使用。



壓縮視頻格式——Handbrake 


我們可以通過 Handbrake 通過 軟件來直接壓縮視頻格式,可以保證我們在輸出視頻格式時以最低的內存占用來呈現





APNG/WEBP


前面提到的兩種格式是我們所接觸最古老也最不容易出錯的兩種格式,但是隨著技術進步這些格式很顯然已經無法滿足我們現在的動效。針對情感化動效我們也衍生出了很多新的格式,像 APNG、WEBP 之類的格式。這些格式是基于我們現有的像 JPEG、PNG、GIF 格式的所衍生出來的。


APNG 格式是 Mozilla 代碼社區出來的一個格式,是對 png 位圖格式的動畫擴展,但是目前還沒有得到 png 格式官方的認可,他在目前主流的所有瀏覽器上都可以完美支持,在移動的設備上通過一些代碼框架也可以完美支持,他相比 GIF 支持的色彩范圍更廣,更清晰,并且占用更低的內存,支持透明通道,有非常多的優勢。