送給真正的互聯網人一頓干貨早餐

【小咖導讀】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要素的不同搭配。

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

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

然后，把草圖中的動效要素編排到時間線中，以下為本文所用案例的動效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。

文章來源：阿里巴巴（中國站）用戶體驗設計部微博

更多推薦

回復“51”：目前最好的關于用戶運營文章：用戶運營的定義、演變和方法論

回復“52”：百度移動云高級美女產品經理：O2O日趨火爆，下個估值過億的上門美業將花落誰家？

回復“53”：為什么我們都來北上廣？此生若得安穩，誰愿顛沛流離！--PMcaff獻給所有奮斗的互聯網人

回復“54”：2015版App推廣全攻略：你所不知道的撕逼營銷，事件營銷和PR傳播。

回復“55”：火爆了，5000位來自百度阿里騰訊Amazon的產品經理瘋搶的課程現場。

回復“56”：微視已死，騰訊戰略放棄微視，大牛紛紛離職，PMcaff--行業內部解讀。

回復“57”：Uber產品經理首次在中國自述產品理念：我們看中的并非只是錢。

回復“58”：產品經理們是如何越過 iOS 沙盒機制的？

回復“59”：如何避免開發一款失敗的產品？

回復“60”：你可能不知道的學習的15個APP設計技巧！

原創或推薦文章請發送至郵箱：xiaoxi@pmcaff.com

pmcaff合作媒體：Chinaz

總結

以上是生活随笔為你收集整理的【干货】Sketch+Keynote双剑合璧：5步快速制作移动动效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。