今天這篇文章，講的又是大家感興趣的動效知識。現如今，動效對于品牌的傳達變得越來越重要，所以我想盡可能多的去搜集動效相關的資料，跟大家一起，緊跟趨勢，把這塊的能力掌握好。

之前有篇比較類似的文章，《超全面！動效設計標準與規范》只是那篇文章更偏重理論，而谷歌設計師寫的這篇文章用到的案例會更加真實具體。本文也有很多實用的觀點，相信希望大家讀完會有不少收獲。

動效可以讓界面變得更加生動和易于使用。盡管擁有很大的潛力，但動效設計可能是在設計領域中最不被人熟練掌握的技能，這可能是因為動效算是在 UI領域里的一個新成員。視覺和交互在早期的 GUI中就已經被應用，但動效只有在硬件設備都跟上來后才會比較流暢的被使用。

UI動效和傳統動畫之間的關系也很容易被混淆。傳統動畫需要去掌握 Disney的《12個動效基本原則》，那是不是意味著 UI動效同樣很復雜，或者說對于關鍵數值會拿捏不準？如果讓我來評價的話，在動效應用最廣泛的 UI領域，設計上應該是比較簡單的。

一、從哪里開始

動效主要的作用通過動態演示 UI元素的變化來引導用戶操作，動畫也有能力通過圖標，Logo，插圖為一款應用塑造性格，但不管怎樣，動畫易用性的優先級肯定是要高于增加設計創意形式。在展示你的動畫能力之前，讓我們先回到最核心的 UI動效基礎上來，去關注 UI中的導航和轉換。

二、轉換模式

當設計一個導航轉換時，簡單和統一就是2個最關鍵的點。為了實現這一點，我們選擇了2種類型的動效模式：

• 基于容器的轉換
• 沒有容器的轉換

1. 基于容器的轉換

△ 像文本，圖標和圖片這樣的元素都是被分組在容器中

如果界面中涉及到一個容器，比如按鈕、卡片或者列表，那么轉換就是基于容器的動畫。容器通常很容易根據它們的可見邊識別出來，但是要記住，它們也可以是在轉換之前不可見，就是沒有分割線的列表一樣。這種模式過程分為三個步驟來做：

先使用 Material標準的緩動動畫讓容器動起來（先快速開始，然后緩慢結束）。在下面這個例子中，容器的大小和圓角半徑發生了改變，從一個圓形按鈕變化到一個填充屏幕的矩形。

容器中的元素以適配容器寬度進行縮放，元素被固定在頂部并隱藏在容器內，這樣就在容器和內部元素之間創建了清晰的聯系。

△ 把動畫進行慢放，可以看清元素在容器內是如何隱藏和縮放

在轉換過程中消失的內容元素會隨著容器的加速而淡出，當容器減速時，新的內容元素會淡入。當元素快速移動時，通過淡入淡出元素來實現無縫的轉換效果。

△ 把動畫慢放，用來說明如何使用淡入淡出效果

把這個設計模式應用于所有容器轉換上，將會建立一致的效果。它還能明確開始和結束之間的關系，因為是用容器動畫進行引導的。為了展示這種模式的靈活性，下面列舉了5種不同的組合形式：

△ 把動畫進行慢放，以說明容器動畫是如何通過開始和結束來引導用戶視線，建立連接的

有些容器只是使用 Material動畫的標準緩動從屏幕外滑入， 它滑動的方向取決于與之關聯的組件的位置。 例如，點擊左上角的抽屜導航圖標，菜單將從左側滑入容器。

如果容器是從屏幕邊界進入，則它會淡入并放大。 動畫不是從0％的比例開始出現，而是從95％開始，以避免過度彈跳。 縮放動畫使用 Material動畫的減速規范，這意味著它以最大速度開始并輕輕地減速并停止。 當元素要退出時，容器會在沒有縮放的情況下淡出， 退出動畫設計會比進入時更微妙，以便讓用戶將注意力集中在新內容上。

△ 把動畫進行慢放，以說明容器是如何進入并進行緩動和縮放的

2. 沒有容器的過渡

有些界面并不會基于容器進行轉換，例如點擊底部導航中的圖標，將用戶帶去一個新界面。 在這些情況下，使用兩步模式：

• 開始元素以淡出的方式消失，結束元素以淡入的方式進入。
• 隨著最終元素的淡入，它也會使用 Material動畫緩動規律進行細微的放大。

△ 把動畫放慢可以說明沒有容器時是如何運用緩動和縮放的

如果在開始和結束元素之間有一個很清晰的空間和層級關系，共享動畫就可以強化這種關系。例如，在導航步驟上，開始和結束組件共享一個垂直滑動動畫，這種方式加強了在垂直方向上的信息內容。當按下步驟中的下一個按鈕時，組件元素之間共享了一個水平滑動動畫，從左向右的滑動強化了步驟進行的概念。共享動畫也是運用了谷歌 Material動畫的標準緩動。

△ 把動畫進行慢放以說明水平和垂直方向上的共享動畫

三、最佳實踐

1. 保持簡單

考慮到導航轉換的高頻率和易用性的特點，導航的切換更傾向于引導功能而不是炫酷的效果。這也并不是說動畫的形式永遠都不要個性化，只是要確保動畫是符合品牌風格的。能吸引用戶眼球的動畫通常都在一些像小圖標，logo，加載狀態或者空狀態等元素中。下面最左邊的簡單動畫可能不會在 Dribbble 上得到太多的點贊，但是它會使應用變得更好用。

△ 動畫放慢后可以看到不同動畫形式之間的區別

2. 選擇合適的持續時間和緩動形式

導航的切換是需要優先考慮功能實用性，所以需要優化持續時間，速度上要快一些，但是也不要快到讓用戶完全注意不到。持續時間是根據動畫在屏幕中所占的位置來決定的。由于導航切換通常會占據屏幕的大部分面積，所以根據經驗建議300ms會是一個不錯的時間選擇。相比之下，像開關這樣的小控件使用的時間就會很短，只需要100ms。如果一個過渡動畫你感覺太快或者太慢，建議以25ms的增量來調整它的持續時間，直到最終達到一個比較舒服的狀態。

Easing（緩動）描述了動畫的加速和減速速率，大多數導航的切換使用 Material動畫的標準緩動，這是一種非對稱類型的緩動形式。這意味著元素在開始階段以很大的加速度進行加速運動，然后再以很小的加速度去減速，目的是將用戶注意力集中在過渡結束的位置。這種類型的緩動使得動畫看起來非常自然，因為現實世界中的物體是不會立即開始或者停止運動的。如果過渡看起來很僵硬、不自然，很可能是因為錯誤的選擇了對稱性或者線性速率。

△ 把動畫進行慢放，以說明不同的緩動類型

本文中講到的運動模式和最佳實踐，目的在于建立一種實用且精致的動畫風格。這能適用于大多數的應用，但對于不同品牌來說可能需要一些更加強烈的風格去表達。要想了解更多關于個性化的動畫知識，可以去看看谷歌官方動效規范：https://material.io/design/motion/customization.html。

一旦你開始注意到諸如導航的細微動效，就是給你的應用提升亮點特色的開始。簡單的規范模式并不能完全滿足需求，動畫的巧妙創意才是最亮眼的地方。

△ 角色動畫可以讓錯誤變得不那么沮喪

原文鏈接：《Motion Design Doesn’t Have to Be Hard》??Jonas Naimark

歡迎關注譯者的微信公眾號：「?彩云譯設計」

圖片素材作者：laudio Scotto

「動效設計全面合集」

• 《超全面的 APP 動效設計必備知識總結》
• 《超全面！產品動效設計全方位科普手冊》
• 《基礎科普！最常見的四種移動端功能性動效全面總結》