2014年，F(xiàn)acebook推出了新聞閱讀應(yīng)用Paper，諸多交互細(xì)節(jié)與炫酷動效啟動了界面設(shè)計的新時代，Google的Material Design更是將移動動效提升到了app基礎(chǔ)體驗(yàn)環(huán)節(jié)的高度。盤點(diǎn)如今體驗(yàn)優(yōu)秀的移動app，精彩的動效層出不窮，放眼望去，聚集UI設(shè)計大神的dribbble、behance等地，出彩的動效更好的詮釋了流暢細(xì)膩的交互操作……如果說移動體驗(yàn)設(shè)計師還能在傳統(tǒng)的交互視覺之上提升app的可用性，移動動效必定是最重要的方式之一。

Everyone who touches UI, needs to have motion skills.

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

2014年Google I/O大會上的設(shè)計工作坊中，一個普遍被提及的問題是：設(shè)計師應(yīng)該如何選擇動效設(shè)計工具并將其融入到設(shè)計流程中去？得到的回答也多種多樣，有人說Adobe After Effects可以實(shí)現(xiàn)諸多細(xì)膩的微動效，有人提Google自己的Polymer framework可以整合全新的Material Design動效，也有人說Quartz Composer的原型動效適合創(chuàng)業(yè)團(tuán)隊(duì)快速展示想法…簡單說來，沒有完美的答案，因?yàn)闀r代變化太快，不斷有新的工具涌現(xiàn)，幫助設(shè)計師更好的表達(dá)自己的想法。 在項(xiàng)目中，作為交互設(shè)計師的我常常發(fā)現(xiàn)，為了達(dá)到理想效果，一不留神就會在動效細(xì)節(jié)中耗費(fèi)太多時間，某個構(gòu)件切片不夠完美、Timing控制不夠精準(zhǔn)或者字體不夠漂亮。此時，你很可能正在浪費(fèi)時間。

另一方面，項(xiàng)目節(jié)奏快，交互設(shè)計師辛苦花費(fèi)一天制作出來的動效，可能只是整個交互設(shè)計工作中的一小部分。開發(fā)拿到后看了或許回應(yīng)一聲“原來是那么回事，可惜臣妾做不到啊”，這時候的再調(diào)整溝通過程，會占用很多交互設(shè)計思考時間，很可能得不償失。

此時，選擇一款適合交互設(shè)計師的動效設(shè)計工具能夠很大程度上幫你解決以上問題，分分鐘變?yōu)閯有н_(dá)人。

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

作為交互設(shè)計師，在表達(dá)創(chuàng)意時，經(jīng)常會陷入以下困境：

1.如何快速上手動效制作工具？

2.如何在短時間內(nèi)實(shí)現(xiàn)app交互動效？

3.如何低成本高效率的完成動效溝通？

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

Keynote的主要優(yōu)點(diǎn)體現(xiàn)在：

1.它真的很快。在拿到相關(guān)視覺切圖資源的情況下，一個基本動效的制作可以在15分鐘內(nèi)搞定。即使動效需要調(diào)整也很容易，可以很方便的進(jìn)行創(chuàng)意表達(dá)和設(shè)計溝通。

2.它很容易上手。Keynote是絕大多數(shù)用戶體驗(yàn)設(shè)計師必備的工具，你不需要花時間來熟悉它。在扁平化大行其道的今天，更適合使用Keynote作為productivity工具。

3.它不需要編程。即使不懂代碼，也可以做出以假亂真的動效。

當(dāng)然，Keynote也有其不足之處，比如：

1.預(yù)覽原型有些麻煩，你無法像AE那樣逐幀調(diào)整每個細(xì)節(jié)。

2.不支持分層，當(dāng)元素較多時不容易管理。

3.分享不太方便，需要將影響錄制下來并轉(zhuǎn)成gif圖片，相對繁瑣。

基于“怎樣才能在無需編程（Object C，Swift或者Javascript）并遠(yuǎn)離陡峭學(xué)習(xí)曲線的基礎(chǔ)上，迅速有效的制作媲美原生動效的原型交互動畫？”的初衷，它的以上不足對我來說都不是事兒。

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

說到繪圖工具，Sketch這個產(chǎn)品界面設(shè)計新銳自從發(fā)布3.0以來，就逐漸成為我的主打交互設(shè)計工具，Axure這個前任基本已經(jīng)被打入冷宮。 利用Keynote制作動效時，挑選Sketch作為圖形繪制工具，無疑看中了它矢量繪圖精度高、導(dǎo)出資源方便的特點(diǎn)。 在此不再贅述Sketch的優(yōu)點(diǎn)，有關(guān)Sketch的介紹可以查看Sketch中文網(wǎng)?，或者閱讀設(shè)計師Meng To的一篇文章：https://medium.com/design-with-sketch/design-with-sketch-92608a88c103

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

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

大部分移動動效，都可以基于以下5要素進(jìn)行分解：

1.移動Move：改變元素位置；

2.縮放Scale：改變元素大小形狀；

3.旋轉(zhuǎn)Rotate：調(diào)整元素角度；

4.透明Opacity：調(diào)整元素透明度；

5.起始Timing：定義元素出現(xiàn)（消失）時機(jī)。

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

拓展閱讀：?http://www.smashingmagazine.com/2012/10/30/motion-and-animation-a-new-mobile-ux-design-material/

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

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

值得注意的是，最終時間線（Timing）的編排設(shè)計，并非起始階段就確認(rèn)敲定，而是結(jié)合動效效果反復(fù)調(diào)試更改至最佳后，才確認(rèn)并提交給開發(fā)作為實(shí)現(xiàn)依據(jù)的。

關(guān)于動效制作的思路，大家可以通過收集優(yōu)秀動效作品來積累靈感，除了優(yōu)秀app的實(shí)際動效體驗(yàn)外，dribbble和capptivate都是不錯的動效發(fā)散圣地。

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

首先，打開需要制作動效的產(chǎn)品頁面Sketch視覺設(shè)計稿，

將可能需要用到的獨(dú)立動效元素或者不涉及動效的元素在Sketch中合并成組，以此為基礎(chǔ)導(dǎo)出視覺切圖。由于Keynote導(dǎo)入的資源在“構(gòu)件順序”面板中不支持重命名，為了避免在設(shè)置元素動效細(xì)節(jié)時產(chǎn)生混淆，建議在Sketch里面就把相關(guān)layer進(jìn)行合理命名。

在進(jìn)行動效制作前，按照以下步驟對Keynote進(jìn)行配置：

1.運(yùn)行Keynote并打開一個空白模板；

2.點(diǎn)擊Keynote工具欄右上角的“文稿”設(shè)定，在幻燈片顯示設(shè)置中，勾選“打開時自動播放”“循環(huán)幻燈片顯示”選項(xiàng)；

3.在演示文稿類型中，將默認(rèn)的“正?！备臑椤白孕胁シ拧保⒀舆t的過渡與構(gòu)件時間調(diào)整為0；

4.根據(jù)動效的展示平臺，自定義幻燈片大小。iOS建議640×1136，Android建議720×1280；

5.確保Keynote工具欄右上角“動畫效果”設(shè)定下的“構(gòu)建順序”面板已調(diào)出。

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

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

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

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

其次，我們根據(jù)動效Timing的編排，將整個動效過程分解成不同的階段，其劃分一般是根據(jù)不同頁面狀態(tài)過渡點(diǎn)設(shè)定的。 一段連續(xù)的動效基本可以表達(dá)為：

頁面狀態(tài)1 – 狀態(tài)過渡 – 頁面狀態(tài)2 – 狀態(tài)過渡 – 頁面狀態(tài)3…

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

例如，將列表頁面的操作反饋?zhàn)鳛榈谝浑A段，列表圖到詳情圖的過渡變化作為第二階段，而詳情頁面的內(nèi)容呈現(xiàn)作為第三階段。

然后，按照階段劃分將所有的視覺元素拖入Keynote，并拼接成產(chǎn)品界面，其中不涉及動效的部分合并成組。

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

如上圖所示，動效第一階段即列表頁自身控件變化（包括觸控光標(biāo)的出現(xiàn)和列表項(xiàng)點(diǎn)擊反饋）；第二階段可以借助神奇移動，實(shí)現(xiàn)兩個狀態(tài)的過渡；第三個階段則著重表現(xiàn)詳情頁相關(guān)內(nèi)容元素的逐步呈現(xiàn)效果。

接下來，利用動畫效果設(shè)定選擇每個構(gòu)件的動效（出現(xiàn)、動作、消失）。只要有耐心，Keynote自帶的動效幾乎能夠?qū)崿F(xiàn)所有動態(tài)效果。

最后，在構(gòu)件順序中對每一步動作進(jìn)行編排。

需要特別留意的是，由于Keynote本身缺少可視化的時間線展示，只能通過構(gòu)件順序面板中各構(gòu)件的起始順序、起始方式與延遲時間的有效組合實(shí)現(xiàn)。

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

1.過渡之后：構(gòu)件順序面板中第一個構(gòu)件特有的起始方式，表示在該頁面起始時自動運(yùn)行該效果。

2.在點(diǎn)按時：表明在點(diǎn)擊后該效果才啟動。如果要做實(shí)時交互原型，可以選擇這類起始方式，通過把構(gòu)件鏈接到某個狀態(tài)的頁面完成交互操作過程。

3.與構(gòu)件X一起：需要同步啟動的效果，可以選擇該起始方式。

4.在構(gòu)件X之后：選擇該起始方式后，該構(gòu)件的效果在上一個效果完成之后啟動。

無論是與構(gòu)件X一起，還是在構(gòu)件X之后，延遲時間的設(shè)置都可以用來把控動效微妙的節(jié)奏，從而與動效Timing示意圖中編排的完美匹配。

例如，若想實(shí)現(xiàn)下圖不同構(gòu)件逐次顯現(xiàn)的效果，只需要將對應(yīng)的構(gòu)件起始方式一并設(shè)置為同步啟動（與構(gòu)件X一起），并依次為每個構(gòu)件輸入不同的延遲時間即可。

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

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

1.把兩個狀態(tài)的已有構(gòu)件內(nèi)容拷貝到同一個頁面上，并合理安排好它們的上下層順序。

2.為列表圖構(gòu)件添加兩個動作：“放大”與“移動”，并確保兩者同時發(fā)生。

3.在構(gòu)件順序中選中移動動作，利用句柄拉出弧形的移動軌跡。

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

此時，再預(yù)覽一下整個動效效果，比剛開始完成時還是優(yōu)雅不少。 其實(shí)，每一個精彩的動效都是設(shè)計師不斷修改不斷調(diào)試的結(jié)晶，因此，開始在Keynote中預(yù)覽或播放你的作品，并不斷調(diào)試至最佳吧。

完工之后，你可以使用Keynote的導(dǎo)出功能將其保存為.mov格式，并在Photoshop中轉(zhuǎn)錄成.gif文件，分享給身邊的小伙伴或者資深設(shè)計師。如能結(jié)合收集的反饋再次加工，一定會讓你的作品更加出色。

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

Sketch+Keynote工具的結(jié)合，雖不完美，但簡單快速，幫助我在十幾分鐘內(nèi)實(shí)現(xiàn)動效創(chuàng)意并提交給開發(fā)實(shí)現(xiàn)，所以推薦給交互設(shè)計師嘗試。

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

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

作者：舒舟

來源：阿里巴巴UED