隨著UI設(shè)計(jì)的不斷發(fā)展，UI動(dòng)畫效果在現(xiàn)實(shí)生活中的應(yīng)用也越來(lái)越多。手機(jī)、iPad、電腦、網(wǎng)頁(yè)等設(shè)備的應(yīng)用范圍很廣，那么問(wèn)題來(lái)了，為什么UI動(dòng)畫效果的應(yīng)用越來(lái)越廣泛呢？它的優(yōu)點(diǎn)是什么？哪個(gè)軟件可以設(shè)計(jì)UI動(dòng)畫？

想學(xué)運(yùn)動(dòng)設(shè)計(jì)？不要以為只有復(fù)雜的AE才能做到。今天，優(yōu)妹推薦給朋友的14個(gè)軟件可以做出很酷的動(dòng)效設(shè)計(jì)，在功能上各有千秋，但效果也不遜色于AE（內(nèi)含大量教程）。

一、14個(gè)UI動(dòng)畫設(shè)計(jì)軟件

看到這里，你可能想知道哪個(gè)軟件可以動(dòng)畫了？

目前業(yè)界的UI動(dòng)態(tài)效果軟件相當(dāng)多，但99%只支持mac，只有1%支持，沒(méi)有mac確實(shí)是個(gè)缺陷， U姐建議好好學(xué)一學(xué)，夠了。學(xué)得太多而沒(méi)有做好其實(shí)是在浪費(fèi)時(shí)間！

1. Adob??e 之后

系統(tǒng)支持：，mac

AE的軟件我想大家應(yīng)該都知道火是亂七八糟的。如果U姐猜對(duì)了，它是目前設(shè)計(jì)師學(xué)習(xí)動(dòng)效的首選。

它的特點(diǎn)是強(qiáng)大而傲慢?；旧?，它具有所有必需的功能。UI動(dòng)畫制作其實(shí)只用到了這個(gè)軟件函數(shù)的一小部分。要知道很多美國(guó)大片都用它來(lái)后期合成制作，有PS和AI等等。我自己的軟件就更得心應(yīng)手了，很多大神都用這個(gè)軟件來(lái)展示。

但是有些效果工程師可能無(wú)法幫你實(shí)現(xiàn)，因?yàn)閷?shí)際的項(xiàng)目產(chǎn)品受到太多的限制。

2. Adob??e

系統(tǒng)支持：mac

很多人可能認(rèn)為PS只是用來(lái)畫圖和處理圖片的，并不知道PS可以制作gif。但是在AE沒(méi)有流行的時(shí)候，我們這些老UI設(shè)計(jì)師用PS做Gif，用Flash做Gif。Demo（過(guò)去我們只需要做PC桌面的動(dòng)畫）。如果我沒(méi)記錯(cuò)的話，PS從CS 6開(kāi)始就進(jìn)一步加強(qiáng)了動(dòng)態(tài)效果模塊，現(xiàn)在的版本可以實(shí)現(xiàn)很多比較復(fù)雜的動(dòng)態(tài)效果。

3. Adob??e Flash

系統(tǒng)支持：mac

Flash過(guò)去可以說(shuō)是王者，但也因?yàn)闀r(shí)代的發(fā)展，現(xiàn)在基本被淘汰了。這里就不解釋了，可以百度一下。

Adobe開(kāi)發(fā)了軟件來(lái)替代Flash，稱為：Adobe CC。為了適應(yīng)h5和css3設(shè)計(jì)的趨勢(shì)，Adobe在flash的基礎(chǔ)上增加了h5動(dòng)畫的新功能和新屬性，是flash的升級(jí)版。

4.

系統(tǒng)支持：，mac

這個(gè)軟件被大牛收購(gòu)了，但是在被收購(gòu)一年后：10月31日宣布停止更新（對(duì)用戶來(lái)說(shuō)真是一大損失）。簡(jiǎn)述其優(yōu)缺點(diǎn)：

是層類交互原型軟件。優(yōu)點(diǎn)：交互性強(qiáng)，共享性強(qiáng)，集成度比較高，在支持較好的同時(shí)，還有很多MD相關(guān)的預(yù)設(shè)。缺點(diǎn)是沒(méi)有時(shí)間線，層級(jí)管理不是很清楚，層數(shù)多了會(huì)很復(fù)雜。

5.

系統(tǒng)支持：mac

交互式動(dòng)畫原型制作工具

出品，一定是精品。

自誕生之日起，就受到交互設(shè)計(jì)師的廣泛青睞。這正是使用的開(kāi)源項(xiàng)目組件。

類似于可視化編程的模式展示，幾乎所有的操作都只需要拖拽連接，大大提高了工作效率，操作起來(lái)也非常方便快捷，因此也被網(wǎng)友稱為“動(dòng)作神器”。設(shè)計(jì)師。

如果你沒(méi)有任何代碼知識(shí)可以震驚，建議遠(yuǎn)距離觀看。

6. 炒作 3

系統(tǒng)支持：mac

Hype 3 也流行了很短的一段時(shí)間。它被稱為無(wú)代碼動(dòng)畫神器。它使用時(shí)間軸來(lái)制作像 AE 一樣的交互式動(dòng)畫。PC、手機(jī)、Pads都可以直接訪問(wèn)（網(wǎng)頁(yè)形式），也可以導(dǎo)出視頻或GIF。3.版本 0 還具有物理屬性和彈性曲線，以獲得更強(qiáng)大的動(dòng)畫效果。對(duì)于中文來(lái)說(shuō)，原生支持中文也很棒！協(xié)同效應(yīng)也很大。

7.

系統(tǒng)支持：mac

界面很相似，如果會(huì)用的話，可以快速上手。可以快速實(shí)現(xiàn)各種滾動(dòng)、過(guò)渡、點(diǎn)擊反饋效果。手機(jī)端和電腦端預(yù)覽都很流暢。現(xiàn)在好像很多人都在用。下圖是演示：

8.

系統(tǒng)支持：mac

這個(gè)軟件和上面的有點(diǎn)像，界面也差不多，配合起來(lái)也很方便。主要是兩頁(yè)過(guò)渡特效、元素切換、細(xì)節(jié)動(dòng)態(tài)效果的工具。優(yōu)點(diǎn)很明顯，效率高，質(zhì)感好，缺點(diǎn)是不能制作一整套原型。

9. 4D

系統(tǒng)支持：mac

說(shuō)到C4D還是大家的第一反應(yīng)就是3D軟件啊，對(duì)！但是，在啟動(dòng)效果方面，它也很帥。下面是網(wǎng)上一些用C4d做的demo。

C4D 教程：

10.

系統(tǒng)支持：mac

等效，幻燈片軟件。但！也許你不知道adobe做動(dòng)效的軟件，據(jù)說(shuō)蘋果的交互設(shè)計(jì)師都是用來(lái)做交互演示的。只要能熟練掌握這個(gè)軟件，目前app中的大部分動(dòng)效都可以做出來(lái)，但是相對(duì)復(fù)雜的動(dòng)效還不夠。

U姐為了省事，經(jīng)常用它做一個(gè)簡(jiǎn)單的demo給程序員看。快捷方便，你要知道時(shí)間就是金錢！

由于U姐對(duì)目前的動(dòng)畫效果軟件還不是很了解，根據(jù)她自己的理解，比較主流的動(dòng)畫制作軟件就是以上，如有錯(cuò)誤和疏漏，限于篇幅，敬請(qǐng)見(jiàn)諒， PS做一個(gè)動(dòng)態(tài)效果的簡(jiǎn)單演示，推遲到下一篇。

11. proto.io

系統(tǒng)支持：mac

Proto.io 是一個(gè)專用的移動(dòng)原型平臺(tái)——可以構(gòu)建和部署完全交互的移動(dòng)應(yīng)用原型，并且可以模擬類似的成品。它可以在大多數(shù)瀏覽器中運(yùn)行，并提供 3 個(gè)重要的接口：編輯器和播放器。

可用于管理項(xiàng)目。編輯器是一個(gè)原型設(shè)計(jì)環(huán)境，除了構(gòu)建交互之外，還包含一組用于設(shè)計(jì)和開(kāi)發(fā)原型的工具。播放器用于查看原型并與之交互，并提供工具來(lái)標(biāo)記和保留反饋。您可以直接在真實(shí)的移動(dòng)設(shè)備上測(cè)試原型。原型可以使用 iOS 或 .

12..io

系統(tǒng)支持：mac

無(wú)論是簡(jiǎn)單的交互，還是貫穿整個(gè)產(chǎn)品的開(kāi)發(fā)，都能幫助您快速創(chuàng)建實(shí)用的原型。

13.

系統(tǒng)支持：mac

是一款互動(dòng)動(dòng)畫設(shè)計(jì)軟件，可以快速導(dǎo)入圖片，模擬圖層分層，支持手勢(shì)，可以在手機(jī)或平板上預(yù)覽。

是一個(gè)開(kāi)源項(xiàng)目，一個(gè)基于 的設(shè)計(jì)者原型工具。今天的應(yīng)用程序更專注于交互設(shè)計(jì)，這可以讓你更有效率。

14.——用戶設(shè)計(jì)師的好處

系統(tǒng)支持：mac

（ Head Pie）是一款支持mac和雙平臺(tái)的交互原型制作工具（我們都知道99%的動(dòng)效設(shè)計(jì)軟件只支持mac，平臺(tái)目前只有2個(gè)，而且無(wú)疑是win用戶設(shè)計(jì)師的福利，但被谷歌收購(gòu)后2-3年沒(méi)有更新），相比、、、AE等更輕量級(jí)，集成功能更有吸引力. 調(diào)用系統(tǒng)的陀螺儀、麥克風(fēng)、指南針、3D Touch、各種智能傳感器等，絕對(duì)是用戶設(shè)計(jì)師的福利。

官網(wǎng)已經(jīng)提供了簡(jiǎn)單的介紹和教程，這里不再贅述。以后更新的文章中，我會(huì)通過(guò)自己的使用和體驗(yàn)，嘗試和介紹每一個(gè)小功能。

對(duì)于 UI/UE 設(shè)計(jì)師：

使用時(shí)無(wú)需編寫代碼，通過(guò)后者的可視化設(shè)計(jì)即可完成相應(yīng)功能的增減。比如設(shè)計(jì)一個(gè)軟件時(shí)，設(shè)計(jì)者不需要記住具體的數(shù)據(jù)，通過(guò)時(shí)間軸拖動(dòng)相應(yīng)的部分即可完成操作。完成軟件設(shè)計(jì)后，設(shè)計(jì)師可以將其導(dǎo)出到app中供開(kāi)發(fā)者直接查看。

對(duì)于移動(dòng)開(kāi)發(fā)者和應(yīng)用產(chǎn)品經(jīng)理：

您可以在“設(shè)計(jì)師版”應(yīng)用程序中直接看到設(shè)計(jì)師的功能設(shè)計(jì)、交互邏輯等，您還將獲得一份提供的具體參數(shù)數(shù)據(jù)，并根據(jù)該數(shù)據(jù)進(jìn)行開(kāi)發(fā)。這不僅降低了設(shè)計(jì)師和開(kāi)發(fā)者之間的溝通成本adobe做動(dòng)效的軟件，也為設(shè)計(jì)師提供了一個(gè)探索新交互設(shè)計(jì)的平臺(tái)。

二、UI動(dòng)畫的優(yōu)點(diǎn)

1. 展示產(chǎn)品功能

動(dòng)效設(shè)計(jì)可以展示產(chǎn)品的功能、界面、交互操作等細(xì)節(jié)，讓用戶更直觀地了解產(chǎn)品的核心特性、用途和用途。

2. 更有利于品牌建設(shè)

一個(gè)更合適的例子是最近的優(yōu)酷標(biāo)志更新：

3. 適合展示交互式原型（設(shè)計(jì)細(xì)節(jié)）

很多情況下，設(shè)計(jì)不能單靠嘴來(lái)解釋，靜態(tài)的設(shè)計(jì)圖可能讓觀者一目了然。因?yàn)楹芏鄷r(shí)候交互形式和一些動(dòng)態(tài)效果真的很難用語(yǔ)言來(lái)描述，所以有一個(gè)高保真Demo，節(jié)省了很多溝通成本。

4. 增加親和力和樂(lè)趣

有時(shí)加入動(dòng)態(tài)效果可以瞬間拉近觀者與觀者之間的距離。如果給它增添一些樂(lè)趣，“愛(ài)不釋手”這個(gè)詞一點(diǎn)也不為過(guò)。

三、總結(jié)

上面U姐說(shuō)的都是制作交互動(dòng)畫原型的工具：AE、、、Flash（已退出歷史舞臺(tái)）、Hype3、、Proto.io、、、、、.io，我給大家粗略介紹一下，如果你想學(xué)習(xí)動(dòng)效設(shè)計(jì)，可以選擇其中一個(gè)適合你的軟件，有什么問(wèn)題可以給我留言，我們下期再見(jiàn)。

（PS：下一篇是《一個(gè)APP從0到1的設(shè)計(jì)：設(shè)計(jì)規(guī)范》）