舒舟：2014年Facebook推出新聞閱讀應用Paper，諸多交互細節與炫酷動效啟動界面設計新時代，Google Material Design更將移動動效提升至App基礎體驗高度。盤點體驗優秀移動App，精彩動效層出不窮；Dribbble、Behance等大神聚集地，出彩動效更好詮釋流暢細膩交互操作……若說移動體驗設計師能在傳統交互視覺之上提升App可用性，移動動效必是最重要方式之一。

Everyone who touches UI, needs to have motion skills.

交互設計師痛點：動效工具門檻太高

移動動效設計聽起來門檻頗高，似屬動效設計師專業範疇。Quartz Composer+Origami、Framer.js、Adobe After Effects皆優秀，可惜入門門檻高，需編程技巧或視覺設計背景，對大多數交互設計師「只可遠觀不可褻玩」。對非動畫/計算機科班出身的我，困擾已久。

2014 Google I/O設計工作坊普遍提及：設計師該如何選擇動效工具並融入設計流程？回答多樣：AE實現微動效、Google Polymer框架整合Material Design動效、Quartz Composer適合創業團隊快速展示想法……簡單說無完美答案，因時代變化太快，新工具不斷湧現。項目中常發現：為達理想效果，一不留神在動效細節耗費太多時間——切片不夠完美、Timing控制不精準、字體不夠漂亮。此時很可能在浪費時間。

另一方面項目節奏快，交互設計師花一天做出的動效，可能只是整個工作一小部分。開發拿到回應「原來如此，可惜臣妾做不到」，再調整溝通佔用大量思考時間，得不償失。選擇適合交互設計師的動效工具能大幅解決上述問題，分分鐘變身動效達人。

為什麼選擇Sketch + Keynote？

動效工具市場百花爭鳴、變幻莫測，無完美工具滿足所有需求。研究當前支持Android/iOS主流工具，各具千秋：

交互設計師表達創意常陷困境：如何快速上手？如何短時間實現App交互動效？如何低成本高效率完成動效溝通？

偶然在Vimeo發現視頻「Keynote does Material Design」，作者將Keynote用到神乎其技地步，幾乎完美模擬Google Material Design所有動效。震驚中嘗試用Apple Keynote作快速動效制作工具，並開展研究練習。

Keynote主要優點

1. 真的很快：拿到視覺切圖資源情況下，基本動效15分鐘搞定。調整也容易，方便創意表達與設計溝通。
2. 極易上手：絕大多數用戶體驗設計師必備工具，無需花時間熟悉。扁平化大行其道今天，更適合作productivity工具。
3. 無需編程：不懂代碼也能做出以假亂真動效。

當然Keynote有不足：預覽原型麻煩（無法像AE逐幀調整細節）、不支持分層（元素多時難管理）、分享不便（需錄製轉GIF相對繁瑣）。但基於「無需編程、遠離陡峭學習曲線、迅速有效制作媲美原生動效原型」初衷，以上不足對我非事兒。

動效制作前需準備視覺元素切圖，此時需快速繪圖工具。Sketch自3.0發布以來逐漸成主力交互設計工具，Axure前任基本打入冷宮。選Sketch作圖形繪製工具，看中矢量繪圖精度高、導出資源方便。相關介紹可查《UI設計師新寵！聊聊SKETCH那些方便好用的貼心功能》。

快速動效制作五部曲

以列表頁到詳情頁動效為案例：

1. 構思創意與分解動效

普及動效基本原理。大部分移動動效可基於5要素分解：

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

複雜形變動畫在分解足夠細情況下，也可視為以上要素組合。迪斯尼12條動畫原則皆是以上5要素不同搭配。

此步驟最重要：將動效構思表達出來。如我先以草圖形式分解動效：

再將草圖動效要素編排到時間線，以下為案例動效Timing示意圖：

注意：最終時間線編排非起始階段確認敲定，而是結合動效效果反覆調試至最佳後，才確認提交給開發作為實現依據。靈感積累可通過收集優秀動效作品，Dribbble和Capptivate不錯發散聖地。

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

思路理順進入制作。需將Step 1中動起來元素制作出來，Sketch派上用場：

1. 打開需制作動效產品頁面Sketch視覺設計稿
2. 將可能用到的獨立動效元素或不涉及動效元素在Sketch中合並成組，以此為基礎導出視覺切圖
3. 因Keynote導入資源在「構件順序」面板不支持重命名，建議Sketch裡就把相關layer合理命名

3. Keynote制作環境配置

1. 運行Keynote打開空白模板
2. 點擊工具欄右上角「文稿」設定，幻燈片顯示勾選「打開時自動播放」「循環幻燈片顯示」
3. 演示文稿類型將默認「正常」改為「自行播放」，延遲過渡與構件時間調為0
4. 根據展示平台自定義幻燈片大小：iOS建議640×1136，Android建議720×1280
5. 確保工具欄右上角「動畫效果」設定下「構建順序」面板已調出

4. 拖放動效相關控件並添加互動

最有意思也最關鍵一步：怎樣使它們按設想真正動起來。普及Keynote動畫功能兩重要模塊：

• 構件動效
  • 構件出現：定義元素如何出現，結合「起始」概念展現開始過程
  • 動作：定義元素如何變化，結合「縮放」「旋轉」「移動」「透明」等概念展現變化過程
  • 構件消失：定義元素如何消失，結合「起始」概念