在移動端中，我們能夠看到各種各樣豐富細膩的動效設計，應用于各大APP中。動效設計在產品研發過程中越來越規范和成熟。本文結合作者實戰經驗，與大家談談在制作UI動效時的經驗和技巧，希望對你有所幫助。

豐富細膩的 App 動效遍布移動端優秀應用界面中，為用戶提供了良好的動態沉浸式體驗，動效設計在產品研發過程中變得越來越成熟和規范，設計師們除了保證功能性和美觀性的前提，也要精確地掌握元素的動態交互，從而提高用戶體驗和產品的競爭力。這里結合我們團隊的實戰工作經驗，給大家進行一些簡單的經驗總結和技巧分享，希望能幫助大家在工作時制作UI動效變得更加得心應手。

一、動效的價值

動效在UI設計中具有重要的作用和價值。它可以幫助用戶更好地理解界面的功能和交互方式，提高用戶體驗和滿意度。

首先，動效可以使用戶更好地理解界面的功能。通過動效，用戶可以直觀地了解某個元素的作用和效果，比如按鈕的點擊效果、菜單的展開效果等。這種直觀的理解可以使用戶更快速地掌握界面的使用方式，提高界面的易用性。

其次，動效可以提高用戶的體驗和滿意度。通過動效的應用，可以讓用戶感受到界面的流暢性、舒適度和生動性。比如，在頁面切換時添加動畫效果，可以使用戶感覺到過渡更自然流暢；在表單輸入時添加反饋動畫，可以讓用戶更加清晰地了解輸入的結果。這些細節的處理可以提高用戶對界面的好感度和滿意度。

總之，動效在UI設計中扮演著重要的角色，它可以幫助用戶更好地理解界面的功能和交互方式，提高用戶體驗和滿意度。因此，在設計UI界面時，需要注重動效的應用，從而提高用戶的使用體驗。

二、避免動畫生硬

運動曲線可以說是一個動畫的靈魂，幫助我們創建平滑運動效果，通過控制圖層屬性，如位置，大小和透明度等，從而創建出不同的動畫效果。通過調整運動的時間、速度和曲線，以獲得最佳的動畫效果。它直接影響了我們的動畫是否流暢合理。

下圖中的案例為美事電子工卡的入場動效，通過調節運動曲線使動畫更自然。

1. 了解曲線

在移動端的動效設計中最常用的曲線有四種，分別是緩入、緩出以及緩入緩出和勻速曲線。

緩入即加速曲線，物體開始移動時速度較慢，隨著時間的推移逐漸加速。加速曲線一般被用在一些離開就不會回來的對象上，譬如我們手機系統清除掉后臺應用時的動畫效果。

緩出即減速曲線，開始時運動速度較快，隨時間推移速度逐漸減慢。物體在移動結束時速度逐漸減慢，形成減速的效果。減速曲線一般用在對象進入畫面時，比如常見的彈窗入場效果。

緩入緩出曲線。二者的結合，先加速后減速一般用在對象在畫面內的運動。譬如抽屜式菜單的出入場動畫。

除了這三種曲線，還有一種沒有速度變化的運動方式，以勻速運動。一般用在比較機械的動畫上，通常會用于一些加載或者透明度以及顏色的變化上。

在視覺動效中比如一些 H5 動畫、 KV 動畫或者動態壁紙。如果只是常見的元素，進場和出場也依然可以遵循上面的法則。進入用減速曲線，離開用加速曲線。

2. 推薦腳本

調半天效果還是很難調出自己想要的絲滑效果？在理解了曲線工作原理的前提下，我們就可以借助這款自帶多種曲線預設的 AE腳Flow進行快速的曲線調節了。我們可以借助這個腳本建立自己產品的動效曲線預設庫Library，輕松地將自己的曲線預設應用到項目中。同時也可以導出動畫曲線庫并分享給其他設計師，或者從其他動畫師導入曲線預設。希望可以幫助大家更快速地創建高質量的動畫和過渡效果。

三、保持動效一致

很多C端產品都會通過等級和勛章制度，來增強用戶的粘性。58同城的內部溝通協同產品美事也有著成就勛章系統，設計側我們對50多個勛章做了精美設計的同時，還在展示頁面增加了每個勛章的出場動效，其目的也是借助勛章增加用戶的榮譽感和儀式感。在這個背景下如何保證勛章的動效一致性我們也沉淀了一套工作方法。

1. 一致性的關鍵

保持UI設計中動畫效果的一致性，可以通過遵循以下步驟來實現：

1. 確定動畫的類型：要確定動畫的類型，是什么形式，以及它們是如何運行的。
2. 定義動畫的參數：確定動畫的參數，比如他們的時長，速度，彈性和位置。
3. 編寫動畫的腳本：編寫動畫的腳本，比如編寫動畫的函數表達式等，確定動畫的過程，比如動畫的延遲，以及動畫的參數。
4. 測試動畫：測試動畫，確保動畫的一致性，以及可以做出正確的結果。

2. 推薦腳本

這么多的動畫要做如何保證一致性？推薦大家一款關鍵幀批量復制的AE腳本Motioner ，它支持層和關鍵幀多重選擇，蒙版，父子級，表達式復制。你可以像在PS里錄制動作一樣錄制關鍵幀屬性，然后一鍵粘貼到其他動畫元素中，高效便捷的保證了動畫產出的一致性。

四、交互轉場動效

移動端交互轉場動效的作用是為了讓用戶感受到有趣的視覺體驗。動效的持續時間可以根據使用場景的不同而有所不同，研究表明，動效的最佳持續時長為200毫秒到500毫秒之間。這個數字基于人類的認知方式和信息消化速度得出。動效持續時間低于100毫秒幾乎無法被識別，而超過1秒則會讓人感到遲緩。下面案例中美事電子工卡的動效持續時間為500毫秒。

五、落地及交付

一個動效是否能夠落地實施，這里面牽扯了太多的因素。針對動效輸出的選擇正在變得越來越多，作為設計師我們要了解動效落地背后的原理才能更容易的對接和落地。目前動效輸出常用的有兩種方式：位圖方式：PNG序列幀、APNG、GIF；矢量方式：Lottie、SVG動畫。具體導出方式和每種格式的優劣在這里就不一一介紹。但是請記住一句話，山不向我走來 我便向山走去，以美事勛章項目為例，因為Lottie效果支持的局限性，我們選用了多種方式導出來實現最終的動畫落地。

六、結語

文章所用方法均為團隊內部嘗試方法，并不全面，可作為大家工作產出過程中的參考方案，本次分享就到這里。