谷歌APP動效設計師經驗分享
APP動效雖然看上去簡單，但是做起來並不容易，今天分享的是，谷歌APP動效設計師經驗，也許可以給您帶來一些提升，希望對您有用！
做好動效設計並不難 Motion Design Doesn’t Have to Be Hard
動效可以讓介面變得更加生動和易於使用。儘管擁有很大的潛力，但動效設計可能是在設計領域中最不被人熟練掌握的技能，這可能是因為動效算是在UI領域裡的一個新成員。視覺和互動在早起的GUI中就已經被應用，但動效只有在硬體裝置都跟上來後才會比較流暢的被使用。
UI動效和傳統動畫之間的關係也很容易被混淆。傳統動畫需要去掌握Disney的12個動效基本原則，那是不是意味著UI動效同樣很複雜，或者說對於關鍵數值會拿捏不準？如果讓我來評價的話，在動效應用最廣泛的UI領域，設計上應該是比較簡單的。
從哪裡開始
動效主要的作用通過動態演示UI元素的變化來引導使用者操作，動畫也有能力通過圖示，Logo，插圖為一款應用塑造性格，但不管怎樣，動畫易用性的優先順序肯定是要高於增加設計創意形式。在展示你的動畫能力之前，讓我們先回到最核心的UI動效基礎上來，去關注UI中的導航和轉換。
轉換模式
當設計一個導航轉換時， 簡單和統一就是2個最關鍵的點 。為了實現這一點，我們選擇了2種類型的動效模式：
-
基於容器的轉換
-
沒有容器的轉換
基於容器的轉換
像文字，圖示和圖片這樣的元素都是被分組在容器中
如果介面中涉及到一個容器，比如按鈕、卡片或者列表，那麼轉換就是基於容器的動畫。容器通常很容易根據它們的可見邊識別出來，但是要記住，它們也可以是在轉換之前不可見，就是沒有分割線的列表一樣。這種模式過程分為三個步驟來做：
1.先使用Material標準的緩動動畫讓容器動起來（先快速開始，然後緩慢結束）。在下面這個例子中，容器的大小和圓角半徑發生了改變，從一個圓形按鈕變化到一個填充螢幕的矩形。
2. 容器中的元素以適配容器寬度進行縮放，元素被固定在頂部並隱藏在容器內，這樣就在容器和內部元素之間建立了清晰的聯絡。
把動畫進行慢放，可以看清元素在容器內是如何隱藏和縮放。
3. 在轉換過程中消失的內容元素會隨著容器的加速而淡出，當容器減速時，新的內容元素會淡入。當元素快速移動時，通過淡入淡出元素來實現無縫的轉換效果。
把動畫慢放，用來說明如何使用淡入淡出效果
把這個設計模式應用於所有容器轉換上，將會建立一致的效果。它還能明確開始和結束之間的關係，因為是用容器動畫進行引導的。為了展示這種模式的靈活性，下面列舉了5種不同的組合形式：
把動畫進行慢放，以說明容器動畫是如何通過開始和結束來引導使用者視線，建立連線的
有些容器只是使用Material動畫的標準緩動從螢幕外滑入， 它滑動的方向取決於與之關聯的元件的位置。 例如，點選左上角的抽屜導航圖示，選單將從左側滑入容器。
如果容器是從螢幕邊界進入，則它會淡入並放大。 動畫不是從0％的比例開始出現，而是從95％開始，以避免過度彈跳。 縮放動畫使用 Material動畫的減速規範，這意味著它以最大速度開始並輕輕地減速並停止。 當元素要退出時，容器會在沒有縮放的情況下淡出， 退出動畫設計會比進入時更微妙，以便讓使用者將注意力集中在新內容上。
把動畫進行慢放，以說明容器是如何進入並進行緩動和縮放的
沒有容器的過渡
有些介面並不會基於容器進行轉換，例如點選底部導航中的圖示，將使用者帶去一個新介面。 在這些情況下，使用兩步模式：
-
開始元素以淡出的方式消失，結束元素以淡入的方式進入
-
隨著最終元素的淡入，它也會使用Material動畫緩動規律進行細微的放大。
把動畫放慢可以說明沒有容器時是如何運用緩動和縮放的
如果在開始和結束元素之間有一個很清晰的空間和層級關係，共享動畫就可以強化這種關係。例如，在導航步驟上，開始和結束元件共享一個垂直滑動動畫，這種方式加強了在垂直方向上的資訊內容。當按下步驟中的下一個按鈕時，元件元素之間共享了一個水平滑動動畫，從左向右的滑動強化了步驟進行的概念。共享動畫也是運用了谷歌Material動畫的標準緩動。
把動畫進行慢放以說明水平和垂直方向上的共享動畫
最佳實踐
保持簡單
考慮到導航轉換的高頻率和易用性的特點，導航的切換更傾向於引導功能而不是炫酷的效果。這也並不是說動畫的形式永遠都不要個性化，只是要確保動畫是符合品牌風格的。 能吸引使用者眼球的動畫通常都在一些像小圖示，logo，載入狀態或者空狀態等元素中。下面最左邊的簡單動畫可能不會在Dribbble上得到太多的點贊，但是它會使應用變得更好用。
動畫放慢後可以看到不同動畫形式之間的區別
選擇合適的持續時間和緩動形式
導航的切換是需要優先考慮功能實用性，所以需要優化持續時間，速度上要快一些，但是也不要快到讓使用者完全注意不到。持續時間是根據動畫在螢幕中所佔的位置來決定的。由於導航切換通常會佔據螢幕的大部分面積，所以根據經驗建議300ms會是一個不錯的時間選擇。相比之下，像開關這樣的小控制元件使用的時間就會很短，只需要100ms。 如果一個過渡動畫你感覺太快或者太慢，建議以25ms的增量來調整它的持續時間，直到最終達到一個比較舒服的狀態。
Easing(緩動)描述了動畫的加速和減速速率，大多數導航的切換使用Material動畫的標準緩動，這是一種非對稱型別的緩動形式。這意味著元素在開始階段以很大的加速度進行加速運動，然後再以很小的加速度去減速，目的是將使用者注意力集中在過渡結束的位置。這種型別的緩動使得動畫看起來非常自然，因為現實世界中的物體是不會立即開始或者停止運動的。如果過渡看起來很僵硬、不自然，很可能是因為錯誤的選擇了對稱性或者線性速率。
把動畫進行慢放，以說明不同的緩動型別
本文中講到的運動模式和最佳實踐，目的在於建立一種實用且精緻的動畫風格。這能適用於大多數的應用，但對於不同品牌來說可能需要一些更加強烈的風格去表達。要想了解更多關於個性化的動畫知識，可以去看看谷歌官方動效規範 https://material.io/design/motion/customization.html
一旦你開始注意到諸如導航的細微動效，就是你開始給你的應用提升亮點特色的開始。 簡單的規範模式並不能完全滿足需求，動畫的巧妙創意才是最亮眼的地方。
角色動畫可以讓錯誤變得不那麼沮喪
如果你想了解更多關於東西方面的知識，可以去閱讀我們官方的動效規範。https://material.io/design/motion/understanding-motion.html#principles