編輯導語：用戶在使用一款產品時，都希望能有良好的使用體驗。出色的動效，可以使頁面之間聯系更加緊密，整體體驗更加流暢，減少用戶的負面情緒；同時，也可以增加產品的趣味性與品牌特色，讓用戶產生興趣並提高品牌認知度。接下來，本文作者就帶我們去瞭解動效設計。現如，今動效設計在產品中的使用已經十分普遍。這也導致動效設計由早期的「魅力型因素」逐漸成為「必要型因素」，越來越多的公司和團隊已經意識到動效在產品用戶體驗中的重要性，動效也逐漸成為UI設計師的基本能力之一。一、動效是什麼動效設計，顧名思義即動態效果的設計，用戶界面上所有運動的效果，也可以視其為界面設計與動態設計的結合。而在Material design 設計規范中，將動效設計這一章命名為「Animation」，意思是動畫，活潑的意思。好的動效設計可以幫助引導、取悅用戶，減少等待焦慮，是拉近用戶與產品之間距離的有效手段。二、動效分類動效的分類並沒有明確的界限，根據其作用大致可以分為3類：1. 功能型動效此類動效一般用於產品設計，通過動態圖形向用戶傳遞信息，其中加載/刷新和進度條應該是我們平時接觸最多也是最早的動效瞭，此類動效最開始隻是為瞭告知用戶產品的頁面狀態。隨著社會上產品數量的快速增長以及競爭日益激烈，產品的有趣和差異化顯得愈發重要，於是便看到越來越多的產品將自己的品牌因素融入動效當中，設計也越來越生動有趣。除瞭加載、刷新和進度外，功能型動效還被廣泛的運用在產品的其他各種狀態當中，如信息報錯、二維碼掃描等。雖然具體表現不同，但都是通過動態形式幫助用戶理解和使用產品。2. 交互型動效顧名思義，該類動效的核心是“交互”，其主要的作用是幫助用戶理解界面的層級邏輯關系，讓產品的使用更加符合現實生活中的認知習慣，從而降低使用成本，提升產品體驗。要註意的是此類動效不能脫離用戶的認知模型，隻是單純的炫酷對於整個產品來說是有害的。其實交互型動效是用戶在產品使用中接觸最多的一種動效，因為產品的使用是通過不同產品元素串聯而完成的，而負責元素串聯的就是交互型動效。一般可分為「單頁面交互動效」和「多頁面交互動效」。「單頁面交互動效」：就是在當前頁面發生的交互動畫，比如tab切換、左滑刪除、二級菜單展開、返回頂部等等。「多頁面交互動效」：就是不同頁面之間的交互動畫，其實就是頁面的跳轉，根據不同的場景會使用到不同的跳轉樣式，好的跳轉動畫能夠幫助用戶理解前後頁面的邏輯關系。3. 展示型動效此類動效的最大作用就是盡可能的為用戶制造視覺上的愉悅，營造活動氛圍，讓用戶覺得有趣生動，使用的場景也十分廣泛，常見的如「品牌展示」、「運營活動」、「H5營銷」等。1）品牌展示將有趣的動態圖形與品牌相結合，讓原本生硬的產品形象變得有趣生動，拉近用戶與產品之間的距離。2）運營活動動效設計同樣也可以使用在運營設計中，作為業務數據轉化的重要入口，動效可以極大的吸引用戶的註意力，從而提升業務數據。H5營銷從2014年開始，H5因其豐富的表現形式便開始逐漸走紅，每年都會有很多火遍全網的H5活動，如「網易雲音樂聽歌報告」、「支付寶集五福」、「支付寶年度賬單」、「穿越故宮來看你」等等。網易雲音樂聽歌報告支付寶五福支付寶年度賬單穿越故宮來看你三、如何設計動效1. 結合產品去設計不同的產品有屬於自己的產品調性，例如：金融產品強調的是可靠理性，而手遊類產品的重點則是炫酷有趣，二者的動效設計自然也需要貼合各自的屬性，思路設計要符合提升的產品體驗，要經過細致思考不能盲目跟風。2. 瞭解動畫的運動節奏因為自然界中運動都不是線性的勻速運動，而是按照物理規律，呈現出的曲線的變速運動，這也是物體運動的基本常識和規律。人們對於一個運動形式產生的情感反饋，大部分也來自於生活中看到的類似的運動形式。所以我們要符合物理規律，這樣才能準確的專遞我們動效設計的情感。當然可以適當根據需要誇張、精簡。3. 多看多思考我們還需要多看一些優秀的動效設計作為積累，同時也需要對優秀的動效設計進行深入思考，思考別人為什麼這麼設計，以及如何完成動畫設計的。要與自己對類似事物的想法進行對比，找差距，補不足，這是經驗技巧積累的過程。同時要學會怎麼去拆解別人復雜的動效設計，從中總結經驗，最後通過合理的編排設計出自己的動效設計作品。4. 關註流行就是要保持對於設計行業，或者說是APP動效設計領域的關註。瞭解當下新的設計手法，設計趨勢以及設計工具，不要做一個落伍者。四、動效文件格式類型常見的動效文件格式有GIF、APNG/WEBP、序列幀/精靈圖、Lottle、SVGA。1. GIFGIF 圖格式應該是設計師接觸過的最多的動態格式瞭， 因其體積小而成像相對清晰，其在各個平臺的兼容性非常好，使得它的傳播性非常強。當然gif格式也存在很明顯的缺陷：對電腦的內存和性能占用非常大（根據 GIF 的時間尺寸的等情況會有不同的程度的影響），作為設計師常有的一個經驗是在網頁上多開幾個 GIF 之後電腦風扇就開始飚起來瞭。它是一個有損的文件格式，不論是色彩還是畫面質感都會有一定程度的壓縮。對透明通道的支持非常有限，輸出結果會非常差，時常會有鋸齒或白邊的情況。以上是我們在輸出 GIF 格式的之前需要提前思考是否可以接受以上的問題。2. APNG/WEBP這些格式是基於現有的 JPEG、PNG、GIF 格式的所衍生出來的。APNG 格式在目前主流的所有瀏覽器上都可以完美支持，在移動的設備上通過一些代碼框架也可以完美支持，它相比 GIF 支持的色彩范圍更廣，更清晰，並且占用更低的內存，支持透明通道，有非常多的優勢。WEBP格式目前也基本兼容所有的主流瀏覽器，相同的效果，webp 格式要比 png 格式小出來大概一半的大小，同時它也兼容所有的安卓設備，像一些 ios 設備需要通過一定的方式才可以支持。不過，相比來說各方面的表現都是非常優秀的。3. 序列幀/精靈圖1）序列幀序列幀就是將動動效的所有畫面拆分開來，形成一系列靜態的png圖片，然後通過前端代碼來控制每張png圖片出現的間隔時間，而且實現連貫的動畫效果。序列幀是一個無損且低內存的格式，但是它隻能在客戶端環境中使用，不建議在 Web 環境中使用。原因是序列幀一般都是隨著 App 程序包一起下載下來的，但是 Web 中每次進入一個新的網頁都需要重新下載。舉個例子如果一個 60 幀的動畫就得重復向服務器請求 60 次，在這種高頻次的請求下很容易因為一個小的問題導致整個動畫無法正常播放，為瞭避免這種錯誤我們一般會這個 60 張圖合並為一個，並且通過代碼在指定時間內顯示某一個區塊，所以這裡我們引出另一種格式——精靈圖/雪碧圖。2）精靈圖（又叫雪碧圖）當我們把所有序列合並在一張圖片上往往還是不夠的，我們還需要提供給開發具體哪個時間顯示哪一部分的具體參數。我們可以直接通過 AE 插件 CSS Sprite Exporter(By Bigxixi) 直接快速的輸出開發所需的代碼和精靈圖：Lottie：Lottie 可以說是近幾年在動畫輸出方面不得不提的一個格式，它由 Airbnb 推出，並且迅速在國內外各種大小廠快速推廣開來，目前已經是一個非常普遍常用的格式。它在 AE 中的插件叫 Bodymovin，它的原理是把各種矢量元素以及位圖圖層以及他們的效果關鍵節點打包行成一個 json 格式的文行。開發人員拿到 Bodymovin 輸出的 json 格式是無法直接使用的，它需要在代碼中加入 Airbnb 提供的 Lottie 第三方庫來讀取播放，相當於 lottie 文件在我們各個端口設備上的播放器的作用。ps：由於lottie不支持ae表達式，可以用插件（Easy Bake）將表達式轉為關鍵幀，這樣問題就解決瞭；ae軟件因為漢化的原因，會導致Bodymovin插件對其中的某些屬性不支持，比如ae中如果存在顏色漸變，導出來的json文件所有的漸變會變為黑白漸變。解決的辦法有兩個：一個是使用英文版ae軟件；第二個是將屬性「漸變填充1」重命名改為「Gradient Fill1」（後面的數字需與漢化版的保持一致）。SVGA：針對 Lottie 對緩動曲線解析差帶來的性能問題和穩定性問題，我們會有第二種備選方案是 SVGA，不管是導出之後的內存占用，還是在各個端的表現穩定性都會好很多。但是它的內存占用會比 Lottie 稍高，並且支持的特性也會比 Lottie 少一些。SVGA 與 Lottie 最本質的區別在於代碼對動畫過程記錄的方式， Lottie基本上是按照我們在 ae 當中的關鍵幀及緩動的結合形式去記錄動畫；而 SVGA 則是通過記錄我們每一個圖層每一個時間上的動畫狀態，從而省去對緩動值的計算。跟序列幀的邏輯非常相似，但是因為它的素材可以復用，所以會比序列幀占用更低的內存。基於實現方式，它會比 Lottie 穩定很多，相應的，它所支持的特性也要比 Lottie 少很多。四、動效制作軟件動效制作的軟件其實非常多，這裡隻介紹一些自己接觸過的主流動效軟件：1. AEAE是時間軸動效軟件，不支持交互操作，但幾乎可以制作任何你想要的動畫效果，但操作相對復雜時間成本較高。2. PrinciplePrinciple是可交互的動效軟件，主要用於交互動效Dome制作，可以制作出較為復雜效果的交互動效，操作難度相對較低。3. OrigamiOrigami是一款以代碼思維進行動效制作的軟件，學習門檻較高，但可以實現與開發的無縫對接。4. C4DC4D主要針對三維動畫效果的制作，學習門檻較高。作者：WOWdesign，研究設計價值最大化，涉及用戶體驗、品牌體驗、空間體驗。本文由 @agoodesign 原創發佈於人人都是產品經理。未經許可，禁止轉載。題圖來自 Unsplash，基於 CC0 協議
本文出自快速备案，转载时请注明出处及相应链接。
