為你揭秘 Google的動效設(shè)計師是怎么制作 UI 動效的

我在上一篇文章《動效設(shè)計沒那么難！讓谷歌動效設(shè)計師帶你入門》當(dāng)中，已經(jīng)通過實際的案例，分享了動效設(shè)計并不難的原因。我們著力推動 Material Design ，我也希望設(shè)計師能夠更好地使用我所熟悉和喜愛的 Material 動效原理，來設(shè)計出更好的產(chǎn)品。為了更好地設(shè)計動效，我們團隊使用 Adobe After Effect 作為設(shè)計動效的主要工具。因此，在我今天的文章當(dāng)中，我會分享我們自己的工作流程、技巧和設(shè)計的方法。

先下載我的 AE 文檔

下載我所準(zhǔn)備的這個基本的 Sticker Sheet 文檔，你就能夠看到我是如何使用簡化后的工作流來完成項目的（下面是概述）。它包含一組 Material 組件，基準(zhǔn) UI 組件和導(dǎo)航轉(zhuǎn)場動畫。

戳這里下載?? 提取碼：cyw5

將素材導(dǎo)入到 AE

首先，我們需要制作動效的相關(guān)素材。我們團隊中絕大多數(shù)的視覺設(shè)計師都喜歡使用 Sketch 來設(shè)計 UI，而這款 UI 設(shè)計工具默認是不支持 AE 的。值得慶幸的是，Adam Plouff 制作了一款聯(lián)通兩款工具的插件，戳這里獲取。借助這款插件，我可以將我們的 Material 組件從 Sketch 導(dǎo)入到 AE 當(dāng)中。這些素材，你可以在我之前所提供的 Sticker sheet 組件文件夾中找到。

創(chuàng)建 UI

有了庫中的這些基礎(chǔ)組件之后，你可以通過拖拽快速構(gòu)建 UI ，并且將它們整合進新的 AE comp 當(dāng)中去。

下面的案例就是將 Sketch UI組件直接拖拽到一個 AE comp 當(dāng)中。

自定義組件

這些基準(zhǔn)組件為你提供了良好的基礎(chǔ)，現(xiàn)在你可以拿它們來創(chuàng)建各種 UI。這是 AE 中主屬性（Master Properties）這一功能最令人側(cè)目的地方。這一經(jīng)常被忽略的功能，其實可以快速創(chuàng)建出高度可復(fù)用的單個組件素材，創(chuàng)建好了之后就無需來回復(fù)制原始的素材了。它在功能上，非常接近 Sketch 中的符號（Symbols）的使用方式。舉個例子，APP 的底部菜單欄是最常見的UI組件，它經(jīng)常會隨著 APP 的變化而出現(xiàn)圖標(biāo)、色彩、陰影上的變化?？紤]到這一點，我直接將這三個屬性添加為主屬性。

△ 使用主屬性快速調(diào)整組件的示例

通過向每個組件添加主屬性，我就能將 UI 界面快速地轉(zhuǎn)化為成組的動畫。同樣的，你也可以在 Baseline UIs 文件夾中找到這些素材。

使用主屬性自定義組件，來創(chuàng)建 UI 動效合集。

動畫轉(zhuǎn)場過渡

現(xiàn)在，我們已經(jīng)建立了創(chuàng)建 UI 動畫的一個基本的工作流了，接下來我們就可以制作動畫效果了。在 Navigation Transitions（導(dǎo)航轉(zhuǎn)場過渡） 這個文件夾當(dāng)中，有詳細的范例，演示了如何在 AE 中使用 Material Design 的運動模式。如果你對于這種運動模式感興趣，可以詳細閱讀一下前一篇文章《動效設(shè)計沒那么難！讓谷歌動效設(shè)計師帶你入門》。

△ 使用Material 運動模式所制作的導(dǎo)航轉(zhuǎn)場過渡效果

在剛剛開始的時候，所有的屬性都是沒有緩動動畫的。然后，父合成組通過時間重新映射和設(shè)置關(guān)鍵幀的持續(xù)時長來實現(xiàn)緩動的效果。這個時候可以非常輕松快速地調(diào)整緩動和持續(xù)時長，因為為了控制整個轉(zhuǎn)場過渡的效果，只需要映射兩次關(guān)鍵幀就夠了。而這也是將緩動曲線應(yīng)用到所有元素的動畫當(dāng)中的一種簡單的方法。這樣一來，所有的運動的元素都會具有相似一致的運動規(guī)律。離開界面的元素隨著加速曲線離開 UI 界面，而進入界面的元素則隨著曲線減緩而進入 UI 界面。你可以在「Complex choreography」（復(fù)雜的動畫編排）這一節(jié)當(dāng)中閱讀更多的相關(guān)內(nèi)容。

這種方法可以應(yīng)用于幾乎所有符合 Material 運動規(guī)律的過渡動效，創(chuàng)造一致的視覺體驗。當(dāng)然，這套方法是沒法處理更加復(fù)雜或者高度風(fēng)格化的動畫效果和流程的，但是這種情況并不常見。

AE 是一個非常靈活的工具，因此我們也很難說某個動畫效果的制作流程是絕對正確的，但是目前來說，我們借助這套流程可以非常高效地制作動畫效果。每個設(shè)計師都有著獨特而高效的動畫制作方法，我希望我的方法能夠幫你成為一名效率更高的動效設(shè)計師。