交互設計師如何有效地學習動效設計？

12-18

攻讀了工業設計和HCI兩個學位後，我在一個小團隊做交互設計師。最近感到團隊里對動效設計這方面有需求，我本身沒有做過這方面的內容，只能根據現有的例子語言描述給工程師。當然這樣效率很低，於是準備開始學做一些動效設計。想請教從哪裡入手會比較合適呢？求推薦軟體及學習方法。

我有美術基礎，PS AI等軟體使用熟練。但我並不做UI美術這一塊，主要專註於製作交互demo。我的目的是能和攻城獅們有效溝通，如果有什麼可以直接生成代碼或數據的神器也請推薦給我。剛入行不久太多不明白的地方了，還希望前輩們賜教:)

深夜碼字，如有問題請見諒。不來秀作品，說點乾貨的幹活，下面提到的這些我都研究過。

怎麼都是誇FORM的。。。ORIGAMI項目應用問題你們可以直接看第5個。哈哈哈

//--------2015.12.4更新---由於問題關注度有點高，這裡進行一定的修改，並添加最近出現的新工具的使用感受。/

1. AFTER EFFECTS .-上手難度 3 顆星（注意是動效角度難度）
你想在短時間內製作複雜演示效果。請使用AE,曲線/錨點等使用MOTION V2腳本進行快速調整（在曲線界面中滑鼠拖動選擇關鍵幀--&>拖動腳本上的滑塊--&>對比緩動曲線獲得你想要的曲線效果，比其他腳本好用的在於曲線你可以進行自定義，表達式也好修改--&>不會改的話學點JS咯），你熟練AE的話能很快得到比較好的效果。AE缺點就是不可交互+精準度很難控制，當然有一個點就是。。你想要什麼效果 AE都能實現。但是程序上能不能實現就難說啦。

2. Pixate, 圖層類交互原型軟體。-上手難度 2 顆星

最近被GOOGLE購買了，然後免費了（說實話GOOGLE 可以說是產品殺手，進去的產品。。。我不敢苟同樓上們的那些說法）。
優點：可交互，共享性強，有團隊討論以及回復模塊（此處有點像justinmind）【有windows版本】，對GOOGLE MATERIAL DESIGN的支持比較好，MD相關預設會越來越多哦。
缺點：圖層類軟體你們都懂得，用AE做可交互已經很煩了，更何況再加上一個交互模塊，而且沒有時間線啊。圖層一多會非常的繁雜，層級管理不是很明確。

關於和SKETCH結合，回復中網友說的很明確：如果用sketch的話，會發現Pixate和Sketch都是基於1:1下的開發尺寸來作為標準尺寸。可以使用另一種方式實現直接從sketch粘貼。在sketch里選擇要導入的pixate切片或畫板資源，在右側欄的Export下選擇對應的倍數和和格式後直接拖拽預覽圖到pixate，就不需要先導出保存再導入了。（雖然相對Framer/origami有點麻煩，不過在可接受範圍）

3. FRAMER STUDIO. -上手難度 5 顆星（對不會代碼的設計師）Framer - Prototyping Tool for Designing UI, Interaction and Animation

其實我並不想推薦，不過作為寫的起前端扛得起大旗的交互大神必用咯。
優點：你想幹什麼就能幹什麼。而且分享起來特別簡單，所以有很多案例，我們可以直接把代碼拷過來用。關於這個你們可以去FRMAER的facebook群組看看就知道啦。基於coffeescript開發的你還能導入。。嗯。。sketch、PS文件。很方便。能夠精確控制每一個圖層的屬性。畢竟人家是強大的JS，你還想怎樣。
缺點：你是視覺，你是交互，你大學/培訓班研究過JS么。如果不會，請略過。
如果你會JS而且你寫代碼的速度很快，那恭喜，這絕對好用。其實說白了就是套代碼模板。

/分享性最高的是這款了，而且代碼入門其實很快/

4.FORM. RelativeWave
節點類軟體。如果用過nuke的人，那就很熟悉咯，被GOOGLE買了。-上手難度 4 顆星

優點：節點類軟體，原型的可維護性強，支持從sketch里粘貼或導入了。GOOGLE的孩子，MD設計規範里的那些動畫預設它最新版本里包括了。而且還有好多MD相關的PATCH了。還出了IOS SDK，用來創建自定義PATCH什麼的，這塊學的其實是QC...準備跟開發快速融合.優點還包括能夠調取設備的相機等以及設備的震動控制。手機端的預覽程序可以獨立開啟並直接把FORM文件共享。
.
缺點：暫時不能在電腦上預覽。跟開發交接起來還是比較麻煩。

5.ORIGAMI+QC：Origami — Design Prototyping目前比較好用的。節點類軟體。FACEBOOK的天才們出的。-上手難度 4 顆星

優點：可導出有一定使用價值的代碼。 可維護性強。可在設備+電腦上都能預覽。現在靠譜點的就這個啦。用的人也相對多些。你可以直接從SKETCH粘帖過來。目前最新版本支持直接導入SKETCH文件。只有在使用POP ANIMATION 的PATCH時才可導出代碼哦。不過開發那邊真的能用這些代碼。關於和開發溝通這個下面再寫吧。

缺點：有一些BUG不忍直視。不能分享。有時給你的IOS工程師裝了QC也沒卵用。為什麼？因為QC絕對燒死CPU+吃內存啊。就算你把FPS調到最低，如果圖層夠多夠複雜，會把工程師電腦卡死的。XCODE都死了工程師怎麼活嘛。還有就是目前功能上缺陷比較多（比如swipe不能選擇具體方向等，可以用自定義的PATCH進行定義，但是初級人員就用不了啊），有時你需要各種綜合各種條件各種patch才能獲得一個簡單的效果。

關於ORIGAMI和開發的結合問題：（新手可能看不懂，看不懂的話先看看頂一下本帖什麼的。。。）
1、ORIGAMI只能夠導出POP animation PATCH相關的代碼(CLASSIC ANIMATION和BOUNCY ANIMATION都是不能的哦--聽說下個版本會有)，代碼裡面的位移（POSITION TRANSITION）信息都是絕對位置，所以適配上你和開發需要進一步討論解決方案。我的建議是 QC中的定位系統嚴格統一為TOP LEFT或CENTER等。這個對適配問題很重要，如果你的外部GROUP的定位用的CENTER，而裡面圖層用的各種各樣的其他參考坐標系，那麼你導出的位移信息基本沒卵用了。

2、如果有DELAY的話，請把DELAY放在POP ANIMATION PATCH的前面，如果不放在前面，代碼導出的主要屬性變化部分是空的（這應該是個BUG啊）。聽說下個版本會導出delay的數值。
現在是我把DELAY用文檔形式給開發，開發自己輸入。還有一些循環動畫也是不可導出的，這些也是以文檔形式給的（其實就是讓IOS哥哥坐在我旁邊，用我的另一個顯示給他看效果，一個顯示器看我的QC工程直接溝通了，並沒有用什麼卵文檔。如果你是大公司，流程化嘛肯定需要咯）。

3、你的ANCHOR POINT就算是TOP LEFT，圖層旋轉是不會繞他的左上角旋轉的。不過縮放是會縮放的。這個很坑啊。還有代碼導出並沒有導出ANCHOR POINT信息。
不過解決方案有的。但是都很麻煩。就是AE中的空白層類似的概念。留空切圖。。。

4、很給力的東東叫PAINTCODE. 可以直接把SKETCH粘貼的圖層轉為代碼。並且PAINTCODE的官方提供了能夠和ORIGAMI結合的PATCH，稍微研究一下（研究一兩個小時，看看PAINTCODE的那個APPLE WATCH教程，跟我要網址嗎?自己百度/谷歌去），就能夠從PAINTCODE里解決ORIGAMI的一些雞肋的問題。

6.HYPE 3 PRO.Tumult Hype 3-上手難度 3 顆星

人家是做HTML5的啦。不過，如果你不會用framer，那可以用這個，這個還有時間線，不過我喜歡從SKECTH里直接粘貼過來，然而hype不支持粘貼過來。不過做HTML界面確實很給力啊。簡直就是神器。用來做原型的人還是少數咯。不過Hype原聲支持輸齣動畫以及GIF等文件格式。緩動曲線的支持也很好。

7.FLINTO/PRINCIPLE.Principle - Animated Design-上手難度2顆星

關於這兩個為什麼一起介紹。。接觸的人都應該知道了。這兩個工具的原理/實現/操作基本都非常相似。界面跟SKETCH很像，如果是SKETCH資深用戶上手很快。能夠快速實現各種滾動/轉場/點擊反饋效果。手機/電腦端的預覽都非常的流暢。

缺點：新出的，功能還在完善階段，有一定的BUG，對複雜的邏輯運算以及一些BOUNCE/OVERSHOOT等效果的支持比較弱，跟開發對接也相對比較麻煩。不過快速做展示還是綽綽有餘的。

8.還未發布的並且值得關注的：creolabs(Creolabs: Native App Design and Development Reinvented)
從預覽視頻可看出，這款軟體能夠快速製作高保真原型，原型在IOS原生代碼下運行，對開發有一定的參考價值。

9.Silver Flows,
還未發布，不過直接能夠在SKETCH中快速製作高保真原型，該有的功能都有（有可能替代目前SKETCH自帶的雞肋MIRROR功能）。直接擁有SKETCH插件和獨立軟體界面，如果發布應該會廣泛使用。詳情可查看medium上的介紹文章
Introducing Silver : Lightweight Mobile Prototyping in Sketch 3
。

有誇FORM的，有誇AE的。作為MOTION DESINGER 還是最愛AE。

但從交互設計師的角度，關於哪個更好用，哪個淘汰，關我鳥事，哪個好用時老子用哪個。從目前看，ORIGAMI還是不錯的。不過這些軟體更新夠慢的。全都有問題的時候，只能選自己愛用的好了。

---------------完。一個字一個字打得，就這樣吧，有問題再補充。

交互的話，強烈推薦用Quartz Composer
不需要編程基礎，上手快，原型可交互，動效流暢
入門可參考下這篇文章：
次時代交互原型神器Origami檔案-CSDN.NET
通過QC設置的動畫參數可以直接提給開發，提升實現的效率

這是我從零基礎起步，花費半天時間做出來的小練習demo：
初接觸quartzcomposer，很好玩，處女作！感覺比AE更容易控制

除了QC，另外再推薦兩款快速生成原型工具：flinto 和POP
flinto是在線生成原型網站，上傳圖片，通過簡單的設置連接、過程動畫，就可以快速生成
這是我寫過的一篇flinto入門教程，你可以參考下：交互原型快速體驗工具flinto教程

pop是移動端應用，通過拍照，勾滑出熱區，設置鏈接，也可以快速生成，比較適合設計師自己做原型測試

AE也蠻多人用，但個人感覺更適合視覺去做細膩的動效，例如loading頁，反饋等等，並不適合做頁面切換過渡的交互演示，花費的時間成本較大，這是我用AE做的demo：世界盃期間推廣動效設計你可以感受下不同原型工具的差別

補充一個：Form。和QC的操作思路是非常相似的。但Form可以實時在手機上預覽、操作，並且操作界面更加人性化。Form是Google在2014年末收購的，相信也是未來的一個趨勢。目前國內的入門教程較少，我有翻譯過一篇官方教程，感興趣的同學可以參考：交互原型工具Form介紹教程翻譯

看你的需求，我一般將交互動畫製作目的分為兩大類：驗證測試 以及 溝通實現

1.驗證測試
驗證測試是用來前期針對產品的某個環節的交互實際上手進行快速驗證，用實際的上手體驗來測試交互的可行性，這個目的的話要求上手容易，敏捷快速，一般有這些工具可以用

POP 快速紙面原型驗證，可以把設計圖導入手機模擬高保真交互測試，優點極易上手，運用靈活，可在產品設計的早起快速驗證；缺點擴展性不強，偏業務流程驗證，無法實現具體的動效細節。
Framer 最近新興的交互原型製作工具，採用類似寫代碼的方式。優點擴展性強，上手比較容易（有 HTML+CSS+JS 基礎的看看範例就會了），可以完成交互細節；缺點，最近才開始使用，不敢說了解全面，但感覺代碼結構不是很科學（可能習慣了 Web 開發）。
Form 類似 QC 結構，能更好的從開發的思路理解製作交互。優點，一定程度上方便與開發對接，用開發的實現方式描述交互；缺點，學習成本略高，國內資源很少，自由度不高，採用 QC 類似的模式但不能直接導出代碼顯得很尷尬。
Pixate Studio 目前個人認為最適合做交互驗證的軟體，剛剛被 Google 收購後徹底免費了！優點，上手快，擴展性強，製作快速，可以在手機上直接操作；缺點手賤升級 El Capitan 後用不了了T-T

2.溝通實現
溝通實現就是用來和開發對接了，這個目前用到過的也就 QC+Origami 做的最好，優點，製作過程可以實時預覽，可以直接導出代碼（iOS/Android/Web）；缺點，學習曲線陡峭，前期需要花費較多的時間成本，更新緩慢，在突破一步可以直接上代碼（一些設計師用到最後直接用代碼寫了）。

另外還有一個就是用來展示說明，這種需要在短期內製作較複雜的產品交互動畫，同時只用於方案演示，一般使用AE來做，自由度高，可控性強，熟練以後做起來還是很快。至於Keynote我記得有很詳細的教程，用起來也還可以。Hype3還沒上手，沒法評價

大概就是這些，希望能對題主有所幫助。

總算有人提到Framer Studio了。
那麼我也來說些乾貨。

對，我就是專門來誇Framer的。

先上一個表格，是我在14年11月份做的一個工具比較：

（最近 Origami和Form可能已經有了幾次版本更新，不過基本沒有到能影響結論的程度，所以就不具體更新修改表格里的參數了。）
從表格裡面可以看出，除了上手難度和需要代碼知識以外，Framer應該是以絕對優勢勝出的。
AE、Flash等傳統動畫視頻類軟體沒有列入對比之中，後文會詳細說明原因。

那麼問題來了，你究竟是以什麼目的來做動效的？
想要成為一名優秀的動效設計師？還是為了設計稿的更好展示？還是只是想跟跟最近動效的風潮說我也能做動效？

1. 如果你要成為一名優秀的動效設計師：
那麼學習成本不應該是阻止你選擇Framer的理由。一個軟體的最大能力有限才是阻止你選擇的理由。
對於一個具有無限可能的工具來說，花時間學習只是成本問題，如果它能助力你成為最自由的設計師，那麼花點時間學學代碼又何妨？你的目標是星辰大海，你終將成為行業最頂尖的設計師。

2. 如果你只是為了設計稿的更好展示：
可以直接用Keynote來做動效展示，簡單，給領導看有面子。至於怎麼實現？那是攻城獅大大們要考慮的事。

3. 如果你是想跟跟最近的動效風潮，想要說「我也是一名能夠設計動效的設計師」：
請選擇AE，或者Pixate這種簡單、效果預製好的工具。

下面詳細說說幾個我仔細研究過的工具：
1. After Effects
從13年扁平化視覺風格開始，我就意識到以後的亮點可能更多的要依靠動效這件事了。所以在當時還沒有什麼資料教程的情況下，開始研究動效工具。
然後根據當時製作成本、工具成熟等原因，選擇了After Effects。
當時做的第一個動效Demo是這樣的：
Letv TV App Motion Design （伺服器在國外，有時候有莫名其妙的訪問問題，如果有條件可以打開vpn查看。）
但是遇到的問題是：很難給技術說清楚怎麼實現。在動作曲線設定好之後，技術根本不知道怎麼放在代碼里。而且其實對於多數攻城獅來說，讓他們考慮如何分層實現界面效果，是很痛苦的一件事。
當時為了這個動作曲線的事，甚至專門找了一個程序員朋友寫了一個貝塞爾曲線視覺調節工具，調出同樣的曲線，輸出曲線的數字矩陣。
但是。。還是有其他各種各樣的實現問題。
於是這個版本的開發不了了之。

2. Flash
最初考慮動效的時候，其實還考慮過Flash這個工具。
當時有幾個benefits：Action Script與Javascript的語法十分接近，技術可能容易參考；我以前給客戶做過Youtube播放器的企業播放器外殼定製，所以有一定的技術能力的基礎；Adobe系的軟體互通效果很好。
不過考慮到以下幾點之後就放棄了：

播放需要插件，很多移動設備和TV設備可能不支持。
Flash的一些獨有API和圖形渲染方式和其他平台有一定的不同，所以代碼的意義可能不大。
與AE相比，AE支持分層的設計稿導入帶來了很大的便利。

3. Origami QC
Facebook團隊在QC的基礎上做出了Origami的動效開發包，建立了常用的動作模塊。
QC的製作方式其實應該算是可視化編程，雖然不用寫代碼，但是內容的處理方式與代碼無異，同樣的邏輯思維，同樣的參數傳遞，同樣要看文檔學習和記憶一堆常用的API。
而我無法忍受可視化編程的一點是，當邏輯稍微複雜的時候，那亂成一團的線簡直不忍直視。。
整體上來說，QC可視化編程的方式並沒有有效的降低學習成本，而動效製作的成本也不低，功能還算全面和自由，但比不上能夠直接寫js的Framer。另外從與開發攻城獅的對接上，讓開發去學習QC肯定不現實，參數的輸出、層的邏輯都是要重新梳理和溝通的，所以這塊的成本也不低。

4. Form
Form的使用和可視化編程模式與QC很接近。
所以優勢劣勢也與QC很接近。
因為最近被Google收購的緣故，更新進展步伐較快，而且據說集成了很多google官方的動效效果。

5. Pixate
支持設計稿導入，動效都靠屬性選擇面板來完成，比較直觀，與傳統設計軟體界面接近。應該算是目前學習成本很小的動效軟體了。
被Google收購後從收費到免費。估計以後也會逐步集成很多好用的google官方動效。
Pixate的劣勢也比較明顯，正是因為所有動效都靠屬性面板的選擇，所以邏輯複雜程度和可控制的細節都非常有限。是一個「可以很容易的做出常見動效」的軟體。

6. Framer Studio
劣勢，需要學習一定的編程基礎。學習成本較高。
優勢：

設計稿自動導入。不用自己導出圖片然後擺位置了，直接一鍵導入設計稿，按照圖層文件夾結構做好了層的劃分和位置。省了大量時間有木有！
除了Framer官方提供的API，還能夠使用基本的HTML+CSS+Javascript來控制元素，所有的HTML5特性都被支持！你能夠控制最細微的細節。
你可以嵌入其他的Javascript框架。你可以在Framer.js基礎上開發自己的Javascript框架。例如我為團隊製作的框架，分頁設計稿一鍵導入後，一行直觀代碼即可實現點擊按鈕跳轉頁面的彈性跳轉動畫。

此句意為，首頁上的夢之聲按鈕被點擊後就彈性跳轉至直播頁面，頁面出現方向為右邊。
還有自動隱藏特定名稱的圖層用於狀態切換備用等等。

可以直接對接伺服器，你甚至可以直接用它開發簡易的H5應用。
演示不需要安裝客戶端，chrome、safari等瀏覽器能夠直接打開，分享方便易用，傳到伺服器就可以直接一個網址分享觀看了！
寫出的代碼和屬性可以直接給開發！js的很多API的編寫方式與客戶端的很像，只是函數名稱不同而已，開發可以很容易理解邏輯。動作曲線的參數也可以直接拿到。如果開發不想做，他甚至可以直接嵌入一個瀏覽器把你的代碼載入進去就可以直接運行了！
該軟體的開發團隊很靠譜！我在做框架的時候跟他們提出了很多關於scroll的功能的問題，每次都能得到快速解答，然後當他們發現自己之前的scroll實現方式確實有一些問題和不方便之後，在下一次更新中直接加入了新的 scroll component，簡直無敵好用貼心！
在全球範圍內有廣泛的支持者，蘋果發布會發布iWatch那次，演示應用中至少有3款內部是使用Framer來做動效的。很多人會把自己的代碼和素材分享出來，你能夠看到很多世界頂尖設計師的作品和實現方式。

先這些吧！
就從能力這一點來說，現在還沒有一個其他的軟體能與Framer相比。

===============================
兩個小福利：

調試動作曲線的小工具（直接看可能不知道是什麼，建議先看看Framer文檔的動畫相關部分）：
http://stakes.github.io/framerplayground/

貝塞爾曲線調整及矩陣輸出：
cubic-bezier.com

Google剛剛收購了成立不到4個月的Form:

RelativeWave

QC和AE神馬的應該會變成過去式。

動效的好處顯而易見，不過不要忘記動效是為產品服務的。
Dribbble上有很多華而不實的例子，尤其是恨不得讓每個界面元素或者控制項都能動起來，當把炫技作為目的時已經忘記了當初是為了什麼出發。

什麼情況適合使用？

具有context意義的轉場
對某一特定控制項或者功能的強調提示
控制項被摁下或觸發
等待狀態
……

用什麼工具？
懂得原理之後用什麼工具反而不重要了，只要用起來順手效率高能表達效果即可。更重要的是怎樣把動效準確的描述給工程師GG們，設計最終需要落地，成為產品的一部分。

如何準確描述動效？
參看如何把AE的動效DEMO準確表達給軟體工程師？ - 左撇子的回答，就不在這裡重複回答了。

歡迎交流討論。

《MG動畫：Flat Design教程》免費

在線觀看：1、騰訊課堂：https://ke.qq.com/course/159706#tuin=948c5d8f

2、直線網：MG動畫：flat design

百度網盤帶素材：鏈接：http://pan.baidu.com/s/1qXBRYUS 密碼：of7i

《MG圖形動畫設計》付費教程

1、不提供教程下載，需要每月重新購買

騰訊課堂：每節課程五毛錢。一個月過期一次，過期後會重新上架。

https://ke.qq.com/course/list/mg%E5%8A%A8%E7%94%BB%E5%BD%95%E6%92%AD

2：提供教程下載，工程文件等

直線網：一次性購買228元，可永久觀看。並且提供教程下載。

MG圖形動畫設計

微信公眾號：qirike8

鏈接：學後期必看教程推薦 - MG動畫 - 知乎專欄
影視後期行業分析 - MG動畫 - 知乎專欄

1.目前用的比較多的是Quartz Composer, 地址：UI中國-專業界面交互設計平台
優點：QC加上facebook的插件orgami可以創造複雜流暢的交互動畫，不用懂得代碼，可以動態交互，基於信號流，動畫參數可以直接給開發人員，增加動畫實現效率。
缺點：無法再手機上預覽，長期不更新，缺乏新鮮血液，撐不了多久可能被淘汰。
2.form 地址：RelativeWave
優點：google剛剛收購，應該會有很不錯的發展，可以在手機預覽，不可以在電腦預覽（據說下一版本會實現在電腦端預覽功能）。同樣基於信號流，可實現動態交互。
缺點：教程相對來說比QC還少，案例也少的可憐，不過會QC的話上手會很快。
3.AE 地址自行搜索
優點：實現效果比較容易，教程案例豐富，背後有adobe大樹。
缺點：基於時間流，不能實現動態交互，只可欣賞展示，對開發人員開發工作得不到效率提高。
4.noddl 地址：Install ??? Noodl
優點： tat團隊剛發布的測試版，需要安裝chrome瀏覽器，通過瀏覽器實時觀看動態交互效果展示。官方有案例教程集成在beta版本中。
缺點：由於是測試版，不穩定。教程案例較少，上手難度中。
5.其他的很多在線的工具，不過只能做簡單的類似ppt的專場效果，不太推薦。
本人最看好的是form和noodl。

時間過了不多，我特意來修改答案，本人研究了以上的交互工具發現一個問題，學習曲線陡峭，複雜交互花費時間與溝通之作成本及其不相符。遂相繼放棄。
回歸本質，我想找的就是一款快速做出腦中想法的軟體，以便於及時跟開發工程師溝通了解製作成本。經過一段時間的摸索感覺keynote和hype是非常不錯的動效軟體。我可以用keynote半小時製作出以假亂真的動效模型。另外我用了Hype之後就愛上他了，學習難度，精確調節，手機交互演示，你不得不說Hype解放了我，這裡有我寫的一個簡易教程，感興趣的可以看看哦：http://www.ui.cn/detail/47842.html
我又更新了，推薦Flinto，簡單上手。還能和sketch無縫配合，棒棒噠，30秒製作交互效果不是夢。

上來一堆推薦軟體的...

擼主的目的是能和工程師有效的溝通，直觀的動效demo當然是溝通的一種途徑，但我在項目中發現很多人（包括我自己）Duang~Duang~甩出幾個看似酷炫叼炸天的demo或者可交互原型給工程師，然後說就照著這個做...接著留開發GG們獨自在那兒神傷...

首先我認為得搞清楚交互設計師做動效的目的，不同的階段，動效的作用顯然不同。

項目評審或者提案初期，動效demo能讓其他人迅速直觀的了解到用戶流程和界面狀態，所以不管用什麼工具或者方式，能達到這個效果即可。而在項目開發或者設計交付、跟進階段，動效應該更加具體、參數化，給一個動效GIF，然後具體什麼參數、調用曲線、持續時間、開始結束狀態，什麼都不說明的交互設計師，都是流氓。當然，給一個完全無法實現或者只是看起來很酷，用起來動效簡直是累贅或者毫無意義的設計師，更是流氓。

關於怎麼學，我認為了解動效最基礎的組成才是核心，不要去想著用各種腳本插件（當你熟悉掌握之後，為了節省效率的時候再去用可以），所有的動效無非都是有一個或者多個對象，基於時間或者空間，做大小、位移、旋轉、形狀、透明度等變化而已。只是不同的軟體實現的方式不同，像AE、Principle等是基於時間軸下的不同幀狀態，做圖像式的操控；而Form、QC則是基於邏輯和方法的結構化操控。哪種方式更適合你，一試便知。

我個人現在做動效方式是：絕大部分動效用Principle完成，畢竟是可交互操作的，但事後一定要輸出對應的參數和曲線信息給工程師。如果只是產品界面的動效，Principle基本上都能實現，沒有做不到，只有想不到（個別帶複雜條件判斷的動效除外）。一些比較複雜的界面動效或者Motion Graphic類，用AE搞定。最後，如果一個動效明明可以用幾句話就能說清楚，就用說的，真的沒必要為了形式主義，去選擇更複雜的方式。

Form+1

--------
出現神器
使用Noodle Noodl
最近在試用挺不錯的

除了AE，都沒有能在windows系統安裝的嗎？沒有蘋果電腦怎麼辦？

Keynote

如果是網頁的設計話，直接強推HTML+CSS！推薦幾個很贊的網站可以下載很酷炫的HTML/CSS動畫effect。
Codrops | Useful resources and inspiration for creative minds （這個強推！）

http://css-tricks.com/css-animation-tricks/

http://www.justinaguilar.com/animations/scrolling.html

使用AE

告知用戶進度
通常只是讓用戶知道程序正在運行是不夠的，還要能夠看到載入速度和載入時長，進度條的作用得以突顯：
告知用戶進度狀況
可以成為交互等待過程中的娛樂元素，抵消的負面體驗
可以成為一個"病毒"功能，引起用戶分享的興趣，從而吸引更多的用戶。
如：滾動動效
http://980.so/4zOcET

有些用戶在看薦提到了：清晰明確動效可以清晰的表明各種數據塊中間的邏輯結構，即使在數據高度飽和的情況下也能使一切從觀感上有組織性。
確認動效完成
可以通過微交互解決這一問題。微交互通過清晰的運動路徑為用戶創建快速反饋，按鈕、切換器和相關元素會快速激活用戶視覺感知，預知操作效果。

元素不多,要求不高,比較趕的項目可以使用Principle,相對複雜的使用Framer,只是效果展示或是載入頁的話,用AE

Qc加origami,不需要代碼，做出的動效還是可交互的。

看見敖廠長出沒，來頂一下廠長，建議按照廠長的第5條來學習，form和qc是現在比較熱門的動效交互軟體，也是以後的趨勢

用Xcode也可以快速製作或簡單或複雜的交互動畫。之前，做一個電商類的APP，大約20多個頁面，然後花一下午從接觸入門到製作完成編譯成APP安裝到手機上，期間還修復了一些閃退的bug.這裡我也提一些怎麼避免bug的方法，那，我之前是因為第一次做，所以沒有提前畫切換的流程圖，所以如果你們看到這個可以先畫切換的流程圖，因為有些地方的切換邏輯如果很多都一樣的，就會產生閃退，其實這個和xcode內部編譯邏輯有些關係，嘗試幾次就可以快速理解這個邏輯了.