所有的動效設計幾乎都是這14個軟體做出來的（附C4D教程）
來自專欄 UI、UE設計那些事兒
隨著UI設計的不斷發展，UI動效越來越多的被應用於實際的生活中。手機、iPad、電腦、網頁等各設備都在大範圍應用，那麼問題就來了，為什麼UI動效越來越被廣泛應用？它有哪些優勢呢？有哪些軟體是可以設計UI動效的？
想學習動效設計？別以為只有複雜的AE 可以做。今天U妹給各位小夥伴推薦的這14個軟體都可以做出酷炫的動效設計，功能上各有優勢，但效果絲毫不輸AE喲（內附大量教程）。
一、14款UI動效設計軟體
看到這裡可能你最想要知道的肯定哪些軟體可以做動效？
目前行業里的UI動效軟體確實挺多的，但是99%的都只支持Mac，只有1%支持windows，沒有Mac確實是一個硬傷，U妹建議學好一個，夠用就好。學多而不精其實就是浪費時間！
1. Adobe After Effects
系統支持：Windows、Mac
AE這個軟體我想大家都該知道，火得一塌糊塗，如果U妹沒猜錯的話，它目前屬於設計師學動效的首選。
它的特點就是強大且牛逼。基本上要的功能都有，UI動效製作其實只是用到了這個軟體很小的一部分功能而已，要知道很多美國大片都是通過它來進行後期合成製作的， 配合PS和AI等自家軟體，更是得心應手，Dribbble 、Behance上很多的大神都是用這個軟體在show。
但是有些效果工程師不見得能夠幫你實現出來， 因為實際的項目產品受太多的制約。
2. Adobe Photoshop
系統支持：Windows Mac
可能很多人都認為PS 只用來作圖和處理圖像的，並不知道PS 可以做gif，然而當AE沒有火起來的時候，我們這些老UI 設計師們都是用PS 做Gif，用Flash 做Demo（過去我們只需要做PC桌面的動效）。如果我沒記錯的話，PS從CS 6之後開始進一步加強了動效的模塊，現在的版本能夠實現很多相對複雜的動效。
3. Adobe Flash
系統支持：Windows Mac
Flash可以說是過去的王者，也是由於時代的發展原因，現在基本被淘汰了，這裡不多做解釋，具體可以百度。
而Adobe開發出取代Flash的軟體叫做：Adobe Animate CC ，是Adobe為了適應h5和css3設計的趨勢，在flash的基礎上添加了h5動畫的新功能和新屬性，是flash的升級版。
4. Pixate
系統支持：Windows、Mac
這個軟體被大牛Google 收購了，然而它Google收購一年後：Pixate Studio宣布卻於10月31號被停止更新了（真是windows用戶的一大損失）。簡單說下它的優缺點：
Pixate是圖層類交互原型軟體。優點：可交互，共享性強，和Sketch結合相對高，同時對Google Material Design的支持比較好，有許多MD相關預設。Pixate的缺點是沒有時間線，層級管理不是很明確，圖層一多就會非常的繁雜。
5. Origami
系統支持：Mac
交互動畫原型設計工具
Facebook出品，必屬精品。
自Origami Studio出世以來，就廣受交互設計師青睞。這正是在於Origami Studio採用的Facebook的開源項目組件。
類似可視化編程的模式展示，所有操作幾乎只需要拖動連接即可，極大提高了工作的效率，操作起來也十分方便快速，因此也被設計師成為「動效神器」。
要是沒點代碼知識做壓驚，建議遠處觀望就好。
6. Hype 3
系統支持：Mac
Hype 3也算是火了一小段時間的，號稱無代碼動效神器，像AE一樣使用時間軸就做可互動的動畫。PC、手機、Pad端都可以直接訪問（以web的形式），也可以導出視頻或者GIF。3.0版還有物理特性和彈性曲線，可以發揮更強大的動畫效果。對中國人來講，它原生支持中文這一點也非常棒！配合sketch效果也是杠杠的。
7. Flinto
系統支持：Mac
界面跟Sketch很像，如果會用sketch那麼上手很快。能夠快速實現各種滾動、轉場、點擊反饋效果。手機和電腦端的預覽都非常的流暢。貌似現在用的人不少，下圖是demo：
8.Principle
系統支持：Mac
這個軟體的和上面的flinto有點類似，界面和sketch類似，同時配合sketch也是非常方便。它主要是做2個頁面間過渡專場特效，元素切換，細節動效的工具。優點很明顯，效率高，質感好，缺點就是不能做整套原型。
9.CINEMA 4D
系統支持：Windows Mac
說到C4D或者大家第一反應是它是三維軟體啊，沒錯！但是它做起動效來也是帥破天際的，下面是網路上用C4d做的一些demo。
C4D 教程：《純乾貨：C4D完全自學寶典》
10. keynote
系統支持：Mac
keynote相當於windows的powerpoint，是個幻燈片軟體。但是！或許你並不知道，據說蘋果的交互設計師都是用keynote做交互演示的。只要能夠熟練掌握這個軟體，目前App里的絕大多數動效都是可以做出來的，但是相對複雜一點的動效實現起來就有點不夠。
U妹經常為了省事直接都是用它做個簡單demo給程序猿看的。快捷方便，要知道時間就是金錢啊！
由於U妹也並不是全部了解目前市面上的動效軟體，按自己的理解相對主流的動效製作軟體就是上面這些，錯漏地方還請見諒，由於篇幅有限，PS 製作動效簡單演示推後到下一篇吧，
11. http://proto.io
系統支持：Mac
http://Proto.io是一個專用的手機原型開發平台——可以構建和部署全互動式的移動程序的原型，並且可以模擬出相似的成品。它可以運行在大多數的瀏覽器中，並提供了3個重要的介面：dashboard、編輯器以及播放器。
dashboard可以用來管理項目。編輯器是構建原型的環境，由一組設計和開發原型的工具組成，另外還可以構建交互。播放器用來觀看原型，並與原型進行交互，並提供了相關工具來標註和保留反饋信息。你可以直接在真實的移動設備上對原型進行測試。並且可以使用iOS或Android上的瀏覽器以全屏模式運行原型。
12. http://Atomic.io
系統支持：Mac
無論是在簡單的交互上，或是貫穿在整個產品的研發中，Atomic 都可以幫助你快速創建切實的原型。
13. Framer
系統支持：Mac
Framer是一個設計可交互動效的軟體，可快速導入Photoshop、Sketch中的圖像並模擬圖層分層，支持手勢，可在手機或平板中預覽。
Framer是一個開源項目，一個基於Javas cript的原型工具，專為設計師打造。現在的應用更注重交互設計，它可以讓你效率更高。
14. protopie——windows用戶設計師的福利
系統支持：Windows Mac
Protopie（菠蘿頭派）是一款交互原型設計工具，支持Mac和windows雙平台（我們都知道99%的動效設計軟體都只支持Mac，windows平台目前只有2款，pixate和protopie無疑是win用戶設計師的福利，但pixate被谷歌收購後2-3年再也沒更新了），與principle、orgami、AE等相比，它更加輕量級，集成的功能更吸引人，可以調用iphone系統的陀螺儀、麥克風、羅盤、3D Touch， 多種智能感測器等等，這絕對是windows用戶設計師的福利。
官方網站 http://www.protopie.cn 裡面已經提供簡單的介紹和教程，在這裡不進行贅述，在之後更新的文章中會通過我自己的使用和體驗對其中的各個小功能進行嘗試和介紹。
你也可點擊下方卡片，查看查看詳情
ProtoPie交互動效原型設計工具中文版 軟體激活碼+學習教程各位小夥伴們也可自行搜索關注U妹的淘寶店鋪：U妹設計鋪
對於UI/UE設計師來說：
在 ProtoPie 上使用時不需要編寫代碼，通過後者可視化的設計即可完成相應功能的增減。比如，在一款軟體設計時，設計師無需記住具體的數據, 通過時間軸拖動相應版塊就能完成操作。在完成軟體設計後，設計師可以將其導出到 ProtoPie 的應用中供開發者直接查看。
對於移動開發者和APP產品經理來說：
可以直接在「設計師版」的應用中看到設計師的功能設計、交互邏輯等，還會獲得一份由 ProtoPie 提供的具體參數數據，並按照這份數據進行開發。如此一來不僅減少了設計師和開發者的溝通成本，也為設計師探索新的交互設計提供了平台。
二、UI動效的優勢
1. 展示產品功能
動效設計可以展示產品的功能、界面、交互操作等細節，讓用戶更直觀的了解一款產品的核心特徵、用途、使用方法等細節。
2. 更有利於品牌建設
比較恰當的例子如最近優酷更新了Logo：
3. 利於展示交互原型（設計細節）
很多時候設計不能光靠嘴去解釋你的想法，靜態的設計圖設計出來後也不見得能讓觀者一目了然。因為很多時候交互形式和一些動效真的很難用嘴來形容，所以才會有高保真Demo，這樣就節約了很多溝通成本。
4. 增加親和力和趣味性
有時候加個動效，能立馬拉進與觀者的距離，要是再加些趣味性在裡面，用」愛不釋手「這詞也毫不誇張。
三、總結
以上U妹說的這些都是做交互動效原型的工具：AE，Principle、Keynote，Flash（已經退出了歷史舞台），Hype3，Flinto，http://Proto.io，Pixate，Origami，Framer，protopie，http://Atomic.io，粗略的給大家介紹了一下，如果你想學習動效設計，在具體了解這些軟體的情況下，選擇其中一個適合自己的就好，有任何疑問大家都可以給我留言，我們下期再見。
（PS：下期文章是《一款APP從0到1設計之：Android設計規範篇》）
推薦閱讀：