中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：隨著市場上出現了越來越多的APP，用戶對APP的要求也在不斷提高。這就要求APP在各項設計上都要符合用戶的需求，提升體驗感。由此，動態設計的重要性也大大提升，本文作者針對APP的動效設計，從目標到落地進行了詳細的分析，快來一起思考學習吧。

隨著移動互聯網的普及和技術的發展進步，用戶使用到越來越多，體驗也越來越優秀的產品，對于產品的感知變的更加深入，挑剔程度也在變得更加嚴格。

越來越多的產品都在努力提升自己的產品體驗，嘗試通過不同的方式來打造產品的差異化，動效設計在這一過程中開始扮演越來越重要的角色。尤其是擬物設計逐漸被摒棄之后，動效作為模擬物理世界運動規律的一種形式，讓冰冷的屏幕更接近真實世界的觸感。

動效設計作為一種設計師必備的技能，越來越被重視。

接下來通過動效設計的分類、目標、原則、落地實現這幾個方便來系統性跟大家聊聊，并結合工作中的一些真實項目，讓大家了解動效的原理以及我們圍繞動效在產品的整個生命周期中可以做哪些事情。

一、動效設計的分類

互聯網產品的動效，從整體上來說可分為兩種：交互動效和MG動畫（圖形動畫）。如果繼續細分，還可以按場景和功能分為轉場動效、導航動效、加載動效、展示動效、引導動效、反饋動效。

1. 轉場動效

轉場動效是一類比較常見的動效，讓頁面之間有更順暢的跳轉連接，同時也可以更好的體現頁面之間的層級關系，讓用戶更容易理解頁面結構，給用戶更好的使用體驗。

比如下面這個登錄的動效，點擊登錄按鈕時，底部背景的斜線一邊變直一邊向上運動且伴隨顏色變化；同時具體登錄信息通過不透明度動畫出現，同一輛車在兩個場景之間運動，車用戶會清晰地感知到這兩個場景之間的強關聯，過渡也很自然。

2. 導航動效

導航動效也是見的比較多的一類，Path是最早開始嘗試這種創新的交互形式的，把不同的功能收納在“+”中，點擊“+”這些圖標會旋轉著彈出，提高操作效率的同時又可以給用戶帶來操作的愉悅感，設計者的用心用戶還是能夠充分感受到的。

隨著底部菜單欄中被加入更多的功能，現在這種形式被用的越來越少了，但他仍然還是有很大的使用空間和借鑒意義。

（此圖片來源于網絡）

3. 加載動效

由于網絡等原因在數據傳輸過程中無法即時加載完成時，會出現等待時長，加載動效的意義在于緩解用戶等待的負面焦慮情緒，提升產品的使用體驗。

4. 展示動效

展示動效作為純展示出現的機會不是很多，通過展示表達信息，不承擔引導和交互行為，比如天氣情感化動效展示。

5. 引導動效

引導動效的意義在于引導用戶行為，把流量引導目標場景，從而提升目標場景的點擊量，比如常見的金剛區圖標加上MG動畫以后，引導用戶點擊。

6. 反饋動效

尼爾森十大可用性原則的第一條是狀態可見原則，應該讓用戶時刻清楚當前發生了什么事情，也就是快速的讓用戶了解自己處于何種狀態，需要在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。

（此圖片來源于網絡）

二、動效設計的原則

動效設計作為設計手段之一，有靜態頁面無法做到的優勢，存在的意義必然是為了提升體驗；而過多過于復雜的動效設計就顯得不合時宜，非但達不到預期目標，還會降低用戶體驗，拉低產品品牌印象。

所以在動效的使用時要克制，避免讓頁面的重心產生偏差，把用戶引到不必要的地方，或者產生過度設計，徒增用戶使用負擔。

基于過往的項目經驗總結了動效設計的四個基本原則：必要性、簡潔性、物理性、趣味性。

1. 必要性

在考慮動效時往往會不自覺地想加入盡可能多的動效設計，有時甚至單個頁面塞進去多處動效，這也不是不可以但需要注意的是單個頁面肯定會有自己的權重重心，動效不應讓頁面的功能重心產生偏差。

單位時間內產生的固定流量在頁面內分配的時候，流向一部分的多了，流向其他部分就會減少。

給大家分享之前的項目做過的一次動效，當時考慮給通知做一個動效，引導用戶關注從而提升通知的打開率。其實通知的內容權重在當前頁面中并不大，沒有必要給他做很強的內容引導，讓用戶點進去通知里面之后并沒有很強的業務屬性。

這就是沒有站在全局的角度思考，沒有遵守必要性原則。

2. 簡潔性

不只是動效設計，一切設計的準則都包含簡潔性，好的動效方案一定不是復雜難懂需要用戶花心思去思考的。而動效的簡潔還需要考慮更多層面，時間的長度、動作的復雜性、視覺的重心、開發的成本。

3. 符合物理運動規律

人對事物的觀察和理解都是基于物理世界的規律，當虛擬界面元素的運動特性越能夠模擬物理世界的運動規律。

比如慣性、重力加速等，就會越符合人在真實物理世界形成的心智模型，讓虛擬的屏幕與真實世界交匯，往往會更好的幫助用戶預判和理解頁面的邏輯。

4. 趣味性

趣味性動效的意義在于培養用戶的正向情感，比如愉悅、放松、認可，避免用戶產生反向情感，比如憤怒、否定、失望，越強烈的正向情感越有利于幫助產品培養用戶的忠誠度，對一些使用過程的負面情緒更加包容。

比如下面這個服務評價頁面，當乘客體驗不友好給出差評時，用憨厚可愛的動效形象給予乘客情緒上的緩沖。

司機頭條項目中的雙擊點贊情感化動效。

三、動效設計的目標

在做動效之前先要搞清楚目標，為什么要做動效設計？從動效角度來說的產品目標是什么？

動效設計的目標可分為業務目標和體驗目標兩個方向，如上圖所列。比如對產品來說，很多場景做動效設計是為了引導用戶操作。同樣是服務評價的動效，我們從其他角度去聊一下設計出發點及目標。

首汽約車在對司機服務態度收集評價時，會有評價動效，以提升用戶的評價意愿。當用戶點擊好評時，下方的“去星級評價”會出現動效，引導用戶操作，以提升星級評價的點擊率；而好評的評價率對于司機的接單而言，又是很重要的推動因素。

看似微小的細節，也會正向影響到整個服務流程。

四、產品開發的什么階段開始動效設計？

動效設計是不是應該等交互UI都定好了，再來看哪里可以加得進去動效進行豐富和點綴，這是很多初接觸同學對于動效的認知。

實際上這也是可行的，但這只是對于一些基礎性動效而言，比如常見的金剛區圖標加上MG動畫以后，引導用戶關注，提升某個業務場景的點擊量，或者點贊動畫這一類。

但如果想動過交互動效來做更深層次的業務提升，在考慮動效的時候，就需要把流程前置了，至少在原型設計階段甚至業務目標確定之初就應該考慮有沒有可能通過創新的交互形式來幫助達成目標。

接下來通過一個具體的項目案例來加以說明。

我們在短視頻應用瀏覽視頻時往往會遇到這種情況，作者通過系列視頻介紹一部電影或其他內容，當我們看完當前視頻想接著看該系列的下一條時，左滑進入該作者的個人中心，發現作者的作品總量竟然有數百條之多，這時候想找到剛剛看到的那條視頻是非常困難的。

挖掘到了用戶需求然后確定產品目標為縮短此場景的用戶路徑，就開始思考可能的交互策略，下面這個交互方案便從這個場景切入：

用戶從視頻廣場信息流左滑時直接進入作者的作品列表信息流頁面，而且從當前瀏覽的那條視頻開始，可上下滑動繼續瀏覽作者的其他視頻，再繼續左滑即可進入作者個人中心。

這樣只需一步操作，即可從視頻廣場直接繼續瀏覽作者其他視頻。

優秀的交互動效要能夠做到對業務和體驗同時產生價值，這需要考驗設計師的全局思維，站在全局的角度洞察事物的全貌，體系化的連接事物的核心要素，不斷的構建自己的認知格局。

不再只是從單一角度思考問題、想辦法、做決策，找到價值的源頭，設定行為目標，掌握專業技能，最終呈現結果。

五、動效設計的落地

具體的落地實現方式，基本分為代碼實現、GIF、序列幀、JSON、WEBP、APNG、MP4，下面來依次說下這幾種方式的優缺點和需要注意的地方。

1. 代碼實現

大部分交互動效還是需要開發老哥哥們通過代碼實現的，想要完全實現設計稿的效果，就需要對每一個分解行為進行標注——主要從運用對象、運動對象的變化屬性、貝塞爾曲線數值、運動時間、變化屬性的描述五部分來分解標注。

就像下面這個動效設計，看似簡單的兩步——點擊展開和點擊收起，需要清晰的標注出每一個元素的運動屬性以及時間。

AE插件Flow可導出貝塞爾曲線數值，貝塞爾曲線數值就是兩個坐標值，分別代表運動速率曲線的兩個手柄的坐標，通過這兩個坐標便能夠控制曲線的任意形狀。

2. GIF與序列幀

GIF與序列幀也是比較常用的動效導出方式，但也有各自的局限性。

GIF支持的顏色最多只有256種，而且對透明通道支持不友好，在輸出透明背景的動圖時會出現鋸齒邊沿，由于這種特性它只適用于色彩較少的動圖，如果是色彩較多的大型圖片它的表現力就有限了。

序列幀相對GIF來說很好的解決了顏色的支持數量太少和對透明通道支持不好的缺點，序列幀就是一張張的png圖片所以他支持顏色達千萬種，缺點就是文件較大更耗內存，小型動圖時可以選擇這種方式。

3. WEBP與APNG

當動圖色彩豐富且需要透明背景格式而序列幀文件又比較大時，GIF和序列幀就都不是合適的輸出方式了，這時可以選擇用WEBP或APNG格式。

WEBP是Google在2010年收購了On2 Technologies推出，經過幾個版本迭代，目前已經比較穩定，所有主流的瀏覽器都可以支持，在移動應用上對安卓支持比較好，iOS應用通過一些代碼框架也可以完美支持。

WEBP支持的顏色與png相當，并且完美的支持動圖的透明通道且內存占用比GIF更低。

APNG是Mozilla 代碼社區推出，基于PNG的位圖動畫格式，擴展方法類似網頁的GIF 89a，第一幀是標準的單幅圖像，動畫不被支持時也可以正常顯示第一幀畫面。

目前已經比較穩定，所有主流的瀏覽器都可以支持，支持的顏色與png相當，也可以完美的支持動圖的透明通道且內存占用比GIF更低。

給大家介紹一個導出APNG和WEBP的常用軟件isparta，沒有操作學習成本，直接可上手。

4. JSON

Lottie，是 Airbnb 開發的一款能夠為原生應用添加動畫效果的開源工具。Lottie 目前提供了 iOS、Android 和 React Native 版本，能夠實時渲染After Effects動畫特效。

Lottie 在不需要對代碼進行重寫的情況下讓工程師更加方便的創建更豐富的動畫效果，Lottie還有一個可選的緩存機制，對那些頻繁使用的東西能夠更快加載，目標就是幫助開發者和設計師能夠更輕松的為應用創建動畫。

Lottie依賴于AE的Bodymovin插件，Bodymovin可以把各種矢量元素以及位圖動畫導出一個json格式的文本，開發工程師拿到json文件后就可以用Lottie來解析讀取。

下面以工作中的一個具體的項目來闡述下json的使用經驗。

（由于圖片大小限制，已對效果做加速播放處理）

Bodymovin并不能支持所有AE的動畫屬性（常見的基本都支持），不支持漸變導出（位圖中包含漸變完全沒影響，比如這個項目案例的漸變就只是位圖），如果你的動畫有形狀動畫且形狀填充了漸變，那就沒辦法用json了，他導出的漸變是黑白而非彩色的。

下圖是Bodymovin導出時設置的勾選注意事項，設置后指定文件夾渲染導出即可。

在輸出json的時候，不一定是要有個固定的規則，具體要怎么樣輸出都可以通過跟開發商量看他們認知到了怎樣的實現方式。

這個登錄的項目也是前后導出了不同形式的json，最先是每一段動作導出一個json，一共四段，開發嘗試之后實現比較麻煩，覺得還是需要輸出一整個連貫的動作，且動作之間不必做任何時間停留。他們可以對json監控，在動畫暫停處加入交互動作，最終形成一套完整的交互行為。

json有個很大的優點——如果動畫是整屏他可以適配屏幕大小。

5. MP4

有些時長較長的大型動畫用以上幾種方式都不合適，就需要用視頻格式了，視頻也是被廣泛兼容的格式，再經過壓縮后文件也不至于過大，視頻也是一種有損的輸出格式且對透明通道的支持不好，一般不選用此格式。

AE直接導出的視頻文件非常大，給大家推薦一個視頻壓縮的軟件Total Video Converter，非常好用提供了很多輸出格式，一般選常用的MP4格式。

最后我們要根據動效的特點，來決定具體要用哪一種輸出方式。在選擇輸出方式時，往往方法不是唯一的，具體用哪種方法可以跟配合的開發老哥哥們協同商定，大家形成統一習慣時，輸出就會很默契和高效了。

下圖對這幾種輸出方式的優缺點做下對比：

一個小小的動效，我們也要從全局角度出發，找到價值的源頭，呈現完美的解決方案。當然動效設計的意義遠非如此，本篇文章的表述也只是從一些局限性角度，更多動效的價值和意義期待和大家一起探索。

希望這篇簡短的文章，能夠對屏幕前正在探索設計奧秘的你有些許幫助～

本文由 @三毛 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議