新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

編者按:想學習動效設計?別以為只有復雜的AE 可以做。今天推薦的這10個軟件都可以做出酷炫的動效設計,功能上各有優勢,但效果絲毫不輸AE喲(內附大量教程)。

隨著技術的不斷發展,動效越來越多的被應用于實際的項目中。手機、網頁等等媒介都在大范圍應用,那么問題就來了,為什么動效越來越吃香?它有哪些優勢呢?

首先要說明一點的是,動效之所以越來越吃香不是最近才流行的,而完完全全就是因為過去硬件設備承受不住啊, 過去要是在手機里搞個動效,那你手機就等著卡出翔,要知道過去的內存和CPU 都是多么多么的Low.....現在呢?動不動就是4G內存和八核CPU了......

再說這個強調個性的年代,一成不變的設計是很難讓消費者買單的。

動效的優勢

1. 展示產品功能

動效設計可以展示產品的功能、界面、交互操作等細節,讓用戶更直觀的了解一款產品的核心特征、用途、使用方法等細節。

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

2. 更有利于品牌建設

比較恰當的例子如最近優酷更新了Logo:

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

3. 利于展示交互原型(設計細節)

很多時候設計不能光靠嘴去解釋你的想法,靜態的設計圖設計出來后也不見得能讓觀者一目了然。因為很多時候交互形式和一些動效真的很難用嘴來形容,所以才會有高保真Demo,這樣就節約了很多溝通成本。

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

4. 增加親和力和趣味性

有時候加個動效,能立馬拉進與觀者的距離,要是再加些趣味性在里面,用”愛不釋手“這詞也毫不夸張。

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

動效設計軟件有哪些?

看到這里可能你最想要知道的肯定哪些軟件可以做動效?

目前市面上確實蠻多的,筆者建議學好一個,夠用就好。學多而不精其實就是浪費時間!

1. Adobe After Effects

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

AE這個軟件我想都該知道,火得一塌糊涂,如果筆者沒猜錯的話,它目前屬于設計師學動效的首選。

它的特點就是強大且牛逼。基本上要的功能都有,UI動效制作其實只是用到了這個軟件很小的一部分功能而已,要知道很多美國大片都是通過它來進行后期合成制作的, 配合PS和AI等自家軟件,更是得心應手,Dribbble 上炒雞多的大神都是用這個軟件在show。

但是有些效果工程師不見得能夠幫你實現出來, 因為實際的項目產品受太多的制約。

AE 教程推薦:

  1. 《快速入門!一份給新手的AE圖層菜單修煉手冊》
  2. 《完全停不下來!10個好用到令人震驚的AE插件(附視頻演示)》
  3. 《一份實用簡單好上手的AE表達式江湖文檔》

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

2. Adobe Photoshop

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

可能很多人都認為PS 只用來作圖和處理圖像的,并不知道PS 可以做gif,然而當AE沒有火起來的時候,我們這些老UI 設計師們都是用PS 做Gif,用Flash 做Demo(過去我們只需要做PC桌面的動效)。如果我沒記錯的話,PS從CS 6之后開始進一步加強了動效的模塊,現在的版本能夠實現很多相對復雜的動效。

筆者喜歡用PS 來制作簡單的表情動畫,逐幀動畫用得居多(如下圖的表情)。

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

3. Adobe Flash

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

Flash可以說是過去的王者,也是由于時代的發展原因,現在基本被淘汰了,這里不多做解釋,具體可以百度。

4. Pixate

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

這個軟件被大牛Google 收購了,然而它Google收購一年后:Pixate Studio宣布卻于10月31號被停止更新了,凄凄慘慘戚戚。簡單說下它的優缺點:

Pixate是圖層類交互原型軟件。優點:可交互,共享性強,和Sketch結合相對高,同時對Google Material Design的支持比較好,有許多MD相關預設。Pixate的缺點是沒有時間線,層級管理不是很明確,圖層一多就會非常的繁雜。

Pixate 具體介紹及教程:

  1. 《WINDOW黨福利!這才是適合設計師的免費動效神器PIXATE》
  2. 《WINDOWS設計師也可以用!免費動效神器PIXATE初級教程(一)》
  3. 《PIXATE中級教程!解析MATERIAL DESIGN中交互動畫效果之FAB》

5. Origami

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

這個軟件可以用一句話來形容:超強大的高難度原型工具。

要是沒點代碼知識做壓驚,,建議遠處觀望就好。

6. Hype 3

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

Hype 3也算是火了一小段時間的,號稱無代碼動效神器,像AE一樣使用時間軸就做可互動的動畫。PC、手機、Pad端都可以直接訪問(以web的形式),也可以導出視頻或者GIF。3.0版還有物理特性和彈性曲線,可以發揮更強大的動畫效果。對中國人來講,它原生支持中文這一點也非常棒!配合sketch效果也是杠杠的。

Hype 3教程:

  1. 《無代碼做動效神器Hype3入門教程》
  2. 《教你用HYPE3做APP原型的基礎過場(附神器)》
  3. 《教你用HYPE無代碼制作PATH扇形菜單動畫》

7. Flinto

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

界面跟Sketch很像,如果會用sketch那么上手很快。能夠快速實現各種滾動、轉場、點擊反饋效果。手機和電腦端的預覽都非常的流暢。貌似現在用的人不少,下圖是demo:

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

8.Principle

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

這個軟件的和上面的flinto有點類似,界面和sketch類似,同時配合sketch也是非常方便。它主要是做2個頁面間過渡專場特效,元素切換,細節動效的工具。優點很明顯,效率高,質感好,缺點就是不能做整套原型。

9.CINEMA 4D

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

說到C4D或者大家第一反應是它是三維軟件啊,沒錯!但是它做起動效來也是帥破天際的,,下面是網絡上用C4d做的一些demo。

C4D 教程:《教你用C4D+PS繪制炫酷的2017特效字體海報》

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程) 新人手冊!動效設計幾乎都是這10個軟件做的(內附教程) 新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

10. keynote

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

keynote相當于windows的powerpoint,是個幻燈片軟件。但是!或許你并不知道,據說蘋果的交互設計師都是用keynote做交互演示的。只要能夠熟練掌握這個軟件,目前App里的絕大多數動效都是可以做出來的,但是相對復雜一點的動效實現起來就有點不夠。

筆者經常為了省事直接都是用它做個簡單demo給程序猿看的。快捷方便,要知道時間就是金錢啊!

下面兩個圖就是用它實現噠,

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

好啦,由于筆者也并不是全部了解目前市面上的動效軟件,按自己的理解相對主流的動效制作軟件就是上面這些,錯漏地方還請見諒,由于篇幅有限,PS 制作動效簡單演示推后到下一篇吧,

歡迎關注作者的微信公眾號:折騰先生

新人手冊!動效設計幾乎都是這10個軟件做的(內附教程)

「折騰先生的教程合集」

  1. 《PS教程!手把手教你繪制萌萌噠的小鳥卡通形象》
  2. 《PS教程!手把手教你制作沖擊力超強的美漫風格海報》
  3. 《省時高效!7個資深設計師常用的PS實用技巧》

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量180萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 260
點贊 14

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。