2014年，Facebook推出了新聞閱讀應用Paper，諸多互動細節與炫酷動效啟動了介面設計的新時代，Google的Material Design更是將移動動效提升到了app基礎體驗環節的高度。盤點如今體驗優秀的移動app，精彩的動效層出不窮，放眼望去，聚集UI設計大神的dribbble、behance等地，出彩的動效更好的詮釋了流暢細膩的互動操作……如果說移動體驗設計師還能在傳統的互動視覺之上提升app的可用性，移動動效必定是最重要的方式之一。

Everyone who touches UI, needs to have motion skills.

互動設計師的痛點

移動動效設計聽起來門檻頗高，似乎都是動效設計師的專業範疇。 Quartz Composer+Origami、Framer.js、Adobe After Effects都是很優秀的動效設計工具，可惜入門門檻太高，要想熟練掌握需要一定的程式設計技巧或視覺設計背景，對於大多數互動設計師來說，永遠有一種“只可遠觀而不可褻玩焉”的感覺。對於非動畫或計算機專業科班出身的我，這也是困擾已久的問題。

2014年Google I/O大會上的設計工作坊中，一個普遍被提及的問題是：設計師應該如何選擇動效設計工具並將其融入到設計流程中去？得到的回答也多種多樣，有人說Adobe After Effects可以實現諸多細膩的微動效，有人提Google自己的Polymer framework可以整合全新的Material Design動效，也有人說Quartz Composer的原型動效適合創業團隊快速展示想法…簡單說來，沒有完美的答案，因為時代變化太快，不斷有新的工具湧現，幫助設計師更好的表達自己的想法。 在專案中，作為互動設計師的我常常發現，為了達到理想效果，一不留神就會在動效細節中耗費太多時間，某個構件切片不夠完美、Timing控制不夠精準或者字型不夠漂亮。此時，你很可能正在浪費時間。

另一方面，專案節奏快，互動設計師辛苦花費一天製作出來的動效，可能只是整個互動設計工作中的一小部分。開發拿到後看了或許迴應一聲“原來是那麼回事，可惜臣妾做不到啊”，這時候的再調整溝通過程，會佔用很多互動設計思考時間，很可能得不償失。

此時，選擇一款適合互動設計師的動效設計工具能夠很大程度上幫你解決以上問題，分分鐘變為動效達人。

為什麼選擇Sketch+Keynote

如今，動效製作工具市場百花爭鳴、變幻莫測，似乎每隔幾天就能聽到一款全新的動效製作工具上線。我們研究了當前能夠支援Android和iOS平臺的流行移動動效製作工具，它們各具千秋，並沒有一款完美的工具可以滿足所有要求。

作為互動設計師，在表達創意時，經常會陷入以下困境：

1.如何快速上手動效製作工具？
2.如何在短時間內實現app互動動效？
3.如何低成本高效率的完成動效溝通？

一個偶然的機會，我在Vimeo上發現了這樣一段視訊“[Keynote does Material Design][5]”，作者將Keynote使用到了神乎其技的地步，幾乎完美的模擬了Google Material Design中的所有動效。 在震驚中我打算嘗試使用Apple Keynote作為快速動效製作工具，並計劃開展相關的研究與練習。

Keynote的主要優點體現在：

1.它真的很快。在拿到相關視覺切圖資源的情況下，一個基本動效的製作可以在15分鐘內搞定。即使動效需要調整也很容易，可以很方便的進行創意表達和設計溝通。
2.它很容易上手。Keynote是絕大多數使用者體驗設計師必備的工具，你不需要花時間來熟悉它。在扁平化大行其道的今天，更適合使用Keynote作為productivity工具。
3.它不需要程式設計。即使不懂程式碼，也可以做出以假亂真的動效。

當然，Keynote也有其不足之處，比如：

1.預覽原型有些麻煩，你無法像AE那樣逐幀調整每個細節。
2.不支援分層，當元素較多時不容易管理。
3.分享不太方便，需要將影響錄製下來並轉成gif圖片，相對繁瑣。

基於“怎樣才能在無需程式設計（Object C，Swift或者Javascript）並遠離陡峭學習曲線的基礎上，迅速有效的製作媲美原生動效的原型互動動畫？”的初衷，它的以上不足對我來說都不是事兒。

另一方面，動效在製作之前，得準備好視覺元素的切圖，此時便需要一款快速繪圖工具。

說到繪圖工具，Sketch這個產品介面設計新銳自從釋出3.0以來，就逐漸成為我的主打互動設計工具，Axure這個前任基本已經被打入冷宮。 利用Keynote製作動效時，挑選Sketch作為圖形繪製工具，無疑看中了它向量繪圖精度高、匯出資源方便的特點。 在此不再贅述Sketch的優點，有關Sketch的介紹可以檢視Sketch中文網 ，或者閱讀設計師Meng To的一篇文章：https://medium.com/design-with-sketch/design-with-sketch-92608a88c103

快速動效製作5步曲

本文將以一個列表頁到詳情頁的動效作為案例來幫助描述。

1.構思創意及分解特效

開始動效創意之前，先普及一下動效的基本原理。

大部分移動動效，都可以基於以下5要素進行分解：

1.移動Move：改變元素位置；
2.縮放Scale：改變元素大小形狀；
3.旋轉Rotate：調整元素角度；
4.透明Opacity：調整元素透明度；
5.起始Timing：定義元素出現（消失）時機。

比較複雜的形變動畫，在分解足夠細的情況下，也可以看成是以上要素的組合。最著名的《迪斯尼的12條動畫原則》中提及的動畫原則，都是以上5要素的不同搭配。

該步驟中，最重要的就是將動效構思表達出來。 比如，像我這樣，先以草圖的形式將動效分解：

然後，把草圖中的動效要素編排到時間線中，以下為本文所用案例的動效Timing示意圖：

值得注意的是，最終時間線（Timing）的編排設計，並非起始階段就確認敲定，而是結合動效效果反覆除錯更改至最佳後，才確認並提交給開發作為實現依據的。

關於動效製作的思路，大家可以通過收集優秀動效作品來積累靈感，除了優秀app的實際動效體驗外，dribbble和capptivate都是不錯的動效發散聖地。

2.製作原型與動效元素切圖

思路理順之後，開始進入製作階段。此時，需要將step1中動起來的元素製作出來，Sketch就能派上用場了。

首先，開啟需要製作動效的產品頁面Sketch視覺設計稿，

將可能需要用到的獨立動效元素或者不涉及動效的元素在Sketch中合併成組，以此為基礎匯出視覺切圖。由於Keynote匯入的資源在“構件順序”面板中不支援重新命名，為了避免在設定元素動效細節時產生混淆，建議在Sketch裡面就把相關layer進行合理命名。

3.Keynote製作環境配置

在進行動效製作前，按照以下步驟對Keynote進行配置：

1.執行Keynote並開啟一個空白模板；
2.點選Keynote工具欄右上角的“文稿”設定，在幻燈片顯示設定中，勾選“開啟時自動播放”“迴圈幻燈片顯示”選項；
3.在簡報型別中，將預設的“正常”改為“自行播放”，並將延遲的過渡與構件時間調整為0；
4.根據動效的展示平臺，自定義幻燈片大小。iOS建議640×1136，Android建議720×1280；
5.確保Keynote工具欄右上角“動畫效果”設定下的“構建順序”面板已調出。

4.拖放動效相關控制元件並新增互動

最有意思也是最關鍵的一步，即怎樣使它們按照你的設想真正動起來。

首先，我們普及一下Keynote動畫功能中兩個重要的模組：

1.構件的動效 構件出現：定義元素如何出現，能夠結合移動動效5要素中的“起始”概念，展現構件的開始過程。 動作：定義元素如何變化 ，能夠結合移動動效5要素中的“縮放”、“旋轉”、“移動”、“透明”等概念，展現構件的變化過程。 構件消失：定義元素如何消失，能夠結合移動動效5要素中的“起始”概念，展現構件的結束過程。

2.頁面的轉場 神奇移動：這是Keynote動效中非常重要的功能，它提供了兩張頁面之間構件位置與大小自由過渡的效果，以一種神奇的方式自動填補兩張頁面之間相同構件的位置、透明度、大小等變化過程。 未選中任何構件時，動畫效果設定下選擇過渡效果中的“神奇移動”即可，以下是我的習慣設定：

其次，我們根據動效Timing的編排，將整個動效過程分解成不同的階段，其劃分一般是根據不同頁面狀態過渡點設定的。 一段連續的動效基本可以表達為：

頁面狀態1 – 狀態過渡 – 頁面狀態2 – 狀態過渡 – 頁面狀態3…

正如本文開始時所提及的，Keynote本身沒有分層管理的概念，正是為了避免同一個頁面的元素過多，所以將動效中的部分變化過程適當利用神奇移動作過渡處理，把一個完整的動效過程分解到幾個不同頁面進行。更確切的說，建議將各頁面中的構件動效在該頁面中處理完成，而不同頁面狀態之間的切換，既可以利用神奇移動效果進行過渡，也可以先在單獨頁面中處理完畢，再合併到前一狀態頁面中去。

例如，將列表頁面的操作反饋作為第一階段，列表圖到詳情圖的過渡變化作為第二階段，而詳情頁面的內容呈現作為第三階段。

然後，按照階段劃分將所有的視覺元素拖入Keynote，並拼接成產品介面，其中不涉及動效的部分合併成組。

適當利用Keynote的快捷鍵，能夠極大提高你的操作效率。

如上圖所示，動效第一階段即列表頁自身控制元件變化（包括觸控游標的出現和列表項點選反饋）；第二階段可以藉助神奇移動，實現兩個狀態的過渡；第三個階段則著重表現詳情頁相關內容元素的逐步呈現效果。

接下來，利用動畫效果設定選擇每個構件的動效（出現、動作、消失）。只要有耐心，Keynote自帶的動效幾乎能夠實現所有動態效果。

最後，在構件順序中對每一步動作進行編排。

需要特別留意的是，由於Keynote本身缺少視覺化的時間線展示，只能通過構件順序面板中各構件的起始順序、起始方式與延遲時間的有效組合實現。

起始方式有如下幾種選擇：

1.過渡之後：構件順序面板中第一個構件特有的起始方式，表示在該頁面起始時自動執行該效果。
2.在點按時：表明在點選後該效果才啟動。如果要做實時互動原型，可以選擇這類起始方式，通過把構件連結到某個狀態的頁面完成互動操作過程。
3.與構件X一起：需要同步啟動的效果，可以選擇該起始方式。
4.在構件X之後：選擇該起始方式後，該構件的效果在上一個效果完成之後啟動。

無論是與構件X一起，還是在構件X之後，延遲時間的設定都可以用來把控動效微妙的節奏，從而與動效Timing示意圖中編排的完美匹配。

例如，若想實現下圖不同構件逐次顯現的效果，只需要將對應的構件起始方式一併設定為同步啟動（與構件X一起），並依次為每個構件輸入不同的延遲時間即可。

就這樣，通過以上三個階段的動效編排，一個完整的由列表頁到詳情頁的過渡轉場動效就製作完畢了。

5.除錯除錯再除錯

我們來看看剛才製作的動效，儘管展現了基本的動態過程，但在細節上還有所欠缺： 比方說，我們使用神奇移動效果來處理列表圖到詳情圖的變形過渡，略顯呆板。 神奇移動只能處理線性的移動變化，無法展現曲線或弧形的構件運動軌跡，因此我們可以借用另外一個Keynote自帶動作“移動”來優化這個過程。

1.把兩個狀態的已有構件內容拷貝到同一個頁面上，併合理安排好它們的上下層順序。

2.為列表圖構件新增兩個動作：“放大”與“移動”，並確保兩者同時發生。
3.在構件順序中選中移動動作，利用控制代碼拉出弧形的移動軌跡。 

4.將列表圖變形為詳情圖的兩個動作安插到構件順序面板中的合適位置。

此時，再預覽一下整個動效效果，比剛開始完成時還是優雅不少。 其實，每一個精彩的動效都是設計師不斷修改不斷除錯的結晶，因此，開始在Keynote中預覽或播放你的作品，並不斷除錯至最佳吧。

完工之後，你可以使用Keynote的匯出功能將其儲存為.mov格式，並在Photoshop中轉錄成.gif檔案，分享給身邊的小夥伴或者資深設計師。如能結合收集的反饋再次加工，一定會讓你的作品更加出色。

結論

作移動動效是很有意思的事情，一旦有了動效創意並能夠付諸行動表達出來，設計師極容易獲得的成就感和滿足感。 想法和工具的結合能夠支撐溝通需要，成為了設計師如何看待動效設計ROI的原則。各種動效工具好比十八般兵器，選擇最合適自己的即可，核心還是對創意的表達和溝通。

Sketch+Keynote工具的結合，雖不完美，但簡單快速，幫助我在十幾分鍾內實現動效創意並提交給開發實現，所以推薦給互動設計師嘗試。

而我們，依舊在不斷努力嘗試不同動效工具，去尋找真正的perfect tool。

There will always be a new skill to learn. Never stop learning！