交互動效乾貨——想做點 UI Motion Design，如何開始？（入門推薦）

鄙人由於從事專職的交互動效設計工作兩三年（再之前還有三年影視行業經歷），積累了不少的經驗可以拿出來分享。早期學習資料比較匱乏，我自己也踩了不少坑。之前也在網路上搜看過很多文章和觀點，遺憾的是，其中不少都在我的實際工作當中被一一證偽了。現在我可以說自己已經找到了交互動效的正確打開方式。就從怎麼入門說起吧。

一、搞清楚要做的是什麼。

1. 既然是「交互動效」就要圍繞「交互」和來討論。「motion graphics」不在我們討論範圍。
2. 除了動畫製作，對交互事件的定義，對代碼腳本的運用，也是動效設計的核心。

3. 在UI動效裡面，使用GIF圖、序列幀圖片這種「motion graphics」的方法，正在被取代。以後的動效設計師更多要使用代碼腳本設計動畫效果。（或者，能導出配置文件也是可以的，如 Ae 的插件 Lottie）
4. 交互動效設計，最好可以實時交互。或者說，交互動效設計和原型設計有部分重疊。

補充一點：Lottie不是AE插件，他只是個跨平台庫，需要程序員嵌入對應的平台（android/ios/react native）。從AE導出json數據的插件是bodymovin，讓後lottie的作用是像播放器一樣「播放」json文件。這倆不是一伙人開發的。

——自評論區 西西

二、用什麼工具做。

1. 判斷一個工具是否適合「交互動效設計」，只需要看「交互事件」的支持，和「動畫效果」的支持。
2. 像 Principle 這個原型工具，是不適合動效設計的。其一，他對交互事件支持不到位；其二，這個軟體本身的交互設計非常糟糕。
3. 我現在使用的是 Ae、Framer、Processing、C4D，四個形成很好的互補。Framer 解決大部分問題，有解決不了的就用使用 Ae。Processing 用於特效探索。C4D 解決 3D 問題。

三、具備哪些能力。

1. 動畫基礎。動畫的感覺、素養。
2. 技術手段。軟體技能，代碼知識。相對於「工業設計師」，他們需要去了解材料、工藝，那麼我認為交互動效設計師需要了解代碼、感測器。
3. 工作技巧。科學的工作流程，和軟體開發同事之間的溝通，探索新穎的、合適的交互動畫並 push 到設計方案里。
4. 視野。當下潮流，前沿理念，人文因素，互動體驗。

四、入門推薦

1. 萬能的 Ae 動畫

網易雲課堂AE基礎教程 After Effects CC基礎教程 - 網易雲課堂

2. Framer 互動動畫

Design everything with code 看起來很難，但實際上手賊快。

3. HTML、CSS、JavaScript，進一步學習代碼基礎操作、交互事件

慕課網-程序員的夢工廠 去上面搜入門教程

4. C4D 3維動畫（如果你不是要做VR、MR，那麼就不是特別需要）

doyodo小莫教程 【小莫講C4D】CINEMA 4D快速入門教程（全20集）

其實大談特談軟體工具，會顯得一個人相當的初級。我們都是希望討論更多的設計理念、設計方法的。但是那樣的話就必須默認對方知道並了解某些執行手段。我們都不希望交流是無效的，文章是空洞的。很遺憾，數字動畫這個東西是很重技術手段，從它誕生在電影行業的時候就是。

============================================================

開了很久的專欄，一直沒時間寫內容，現在終於慢慢開始補充了。但一開始會偏初級的內容。面向的對象是有一定設計基礎，但完全沒有接觸過動畫的人。之後會慢慢開始討論中高級內容。未來的內容包括：

設計方法類：動畫基礎法則、互動體驗、系統動效設計、概念方案探索等等。

技術手段類：交互事件、開發工具、開發落地跟蹤、動畫腳本、代碼藝術等等。

工作技巧類：和開發同事的有效溝通、如何鼓勵和支持開發同事挑戰高難度視覺效果、推動新概念進入整體設計方案、推動設計方案落地等等。

這些是我已經寫過的 keynote 內部分享資料，暫時不方便發出來（視頻太多也是一個原因）。之後會抽時間再搞。但願有人會喜歡：）我做這件事的目的也很單純，就是求粉！哈哈哈~~

推薦閱讀：