UI動效製作工具盤點!你知道幾個?

數藝社 發佈 2020-02-02T14:36:33+00:00

二維/原型類動畫工具1.Animate CCAnimate CC由原Adobe Flash Professional CC更名得來, 它的前身便是為人熟知的Flash。


提起UI,必不可少的就會想到動效,動效設計作為UI設計當中必不可少的一環,已經由最初的美觀酷炫發展到提升用戶體驗和產品需求的重要作用。


而最近幾年,甚至有大批為了動效製作量身打造的工具(軟體)湧現,統統打著「便捷、易學、高效」的標籤,為了不讓大家踩雷,數藝君特地給大家盤點了一波。


二維/原型類動畫工具


1. Animate CC


Animate CC由原Adobe Flash Professional CC更名得來, 它的前身便是為人熟知的Flash。2015年12月2日,Adobe宣布Flash Professional更名為Animate CC,同時在支持Flash SWF文件的基礎上,加入了對HTML5的支持。2016年1月,針對 Animate CC發布的新版本正式更名為Adobe Animate CC,縮寫為An,如圖所示。

Adobe Animate CC


主要用途:製作多媒體動畫。

優勢:Adobe系常用產品,有一定的用戶基礎,新的版本能較好地兼容HTML5等網頁格式。

劣勢:除非具有較好的ActionScrip編寫能力,一般情況下能實現的視覺效果只能以二維平面基礎類型的為主。一直以來,我個人總覺得用它來做動效或者原型動畫有點「殺雞焉用牛刀」的感覺,如果想做一些比較複雜的動畫效果,且設計師自身對軟體掌握得較好,可以嘗試一下。


2. Flinto


Flinto for Mac(暫無Windows版本)是一款輕量、高效的綜合性交互原型設計工具,可以使用它創建任何原型。從最簡單的頁面跳轉到令人印象深刻的精美轉場動效,無須任何代碼,也沒有複雜的時間軸,Flinto的可操作性幾乎是所有原型工具中最為簡單和快捷的,如圖所示。

Flinto for Mac


主要用途:製作動態可交互原型。

優勢:體量小,並且安裝好專門的Sketch插件之後,可實現與Sketch的無縫結合;iPhone端有專門的App可供下載,且支持手機實時預覽原型方案,同時可以在手機上執行交互演示。

劣勢:僅限於Mac設備使用;不可實現相對複雜的交互效果;對於其他設計領域的實際運用支持度不高。


3. Principle


Principle是一款小巧輕便的交互製作軟體,在介面樣式上和Sketch相似,比較容易上手。由於其可以直接導入Sketch當前的畫布內容,因此配合Sketch使用會非常方便,如圖所示。

Principle


主要用途:製作動態可交互原型。

優勢:容易上手,並且和Sketch的整合度較高,支持App下載效果預覽。

劣勢:僅限於Mac設備;不可實現相對複雜的交互效果製作。


4. Tumult Hype


Tumult Hype是一款HTML5動畫開發工具,可以創建豐富的網頁交互動畫,支持層、時間軸等編輯方式,並支持導出HTML5、CSS3、JavaScript等網頁格式文件,在ios或Android平台上表現流暢,如圖 所示。其特點是可以在網頁上做出悅目的動畫效果,且配備有中文版,但是對於複雜效果製作與演練的支持度較低,畢竟只是針對HTML的一個非常好用的動畫工具。

Hype3 讓你無須代碼就可以完成簡單的頁面動畫效果


主要用途:製作動態可交互原型。

優勢:使用者無須編程基礎也可以做動效;對於網頁和HTML5的支持度比較好,可直接生成HTML5格式的文件。

劣勢:只支持Mac設備使用,沒有整合性較好的軟體和工具協同體系。所以協同起來會有些麻煩,圖層的導入能力不如上述兩個工具。Hype3自己的圖形繪畫形狀很少,只有3個形狀,而且不能對曲線進行編輯(這個還是比較麻煩的),而且不直接支持Sketch或者Photoshop使用,只能從別的軟體中導出圖片之後手動導入才行。


原型是UI設計中必不可少的一個環節,越來越多的公司對於原型的輸出已經不再像過去一樣只需要設計者提供一堆靜態的交互圖片即可,特別是在向上司匯報工作的時候,大多數設計師都傾向於採用動態的可交互原型形式進行交互演練。


同時這裡要注意,雖然以上描述的幾個工具比較容易上手,但是對於稍複雜一點的交互效果的製作,它們也就只能望而卻步了。


3D類動畫工具


1. Autodesk 3ds Max


Autodesk 3ds Max(全稱是Autodesk 3D Studio Max)是一款Discreet公司開發的(後Discreet被 Autodesk公司合併)基於PC系統的三維動畫渲染和製作軟體,如圖所示。

Autodesk 3ds Max


由於Mac上缺少Framework系統組件,因此該軟體不支持Mac系統使用。Autodesk 3ds Max在模型、燈光、材質、渲染、角色動畫和3D視效方面表現非常棒。從5.0版本時代我便開始接觸3ds Max,也目睹了它的成長曆程。


隨著6.0版本的推出,其先後整合了Partical flow(強大的粒子流系統)和Reactor(動力學插件)以及Character Studio(角色綁定插件)。對於3ds Max而言,其在使用上還有一個天然的優勢,即該軟體是三維數字藝術領域插件兼容維度中最廣的一個,且幾乎所有的渲染、動畫和特效腳本都有專門針對3ds Max的插件可供使用,並且許多插件現在仍在持續更新中。


3ds Max覆蓋了包括航天科技、房地產、數字化娛樂、遊戲、醫療、旅遊以及工業數字化設計等諸多領域。同時獨有的MAXScript可執行腳本也讓3ds Max如虎添翼,也使其成為當之無愧的3D數字解決方案翹楚。3ds Max也使得許多公司或工作室通過使用它而變得名聲大噪。


2. Autodesk Maya


Autodesk Maya是一個讓所有CGer(計算機圖形圖像設計師)都肅然起敬的軟體。當然,了解它的行業變遷的設計師,也知道它的另外一個名字——Alias Power Animation。Maya自從1993年誕生起,就註定了肩負著不平凡的「使命」。包括PIXAR( 皮克斯,Pixar Animation Studios)、ILM( 工業光魔,Industrial Light and Magic)等在內的眾多數字多媒體製作公司都是Maya的忠實用戶與合作夥伴,如圖所示。

Autodesk Maya


應該說Maya是為數字娛樂而生的,相對3ds Max的全能性能來說,Maya對於數字電影的聚焦和專注程度是朝著極致的方向去的,特別是強大的角色動畫模塊和特效模塊。幾乎所有令人瞠目結舌的視覺效果都能通過Maya專屬的MEL語言腳本來實現。


3. MAXON Cinema 4D


MAXON Cinema 4D由德國Maxon Computer公司開發而成,其前身是1989年發布在一款名為Amiga的早期個人計算機作業系統上的軟體,最早時期Cinema 4D的別名叫作FastRay,當時還沒有所謂的圖形介面。1993年,FastRay更名為Cinema 4D 1.0,仍然在Amiga上發布。


如今,Cinema 4D以極高的運算速度和強大的渲染插件備受廣大設計師的青睞,很多模塊的功能在同類軟體中代表著科技進步的成果,並且在用其描繪的各類電影中表現突出,隨著技術越來越成熟,Cinema 4D也被越來越多的電影公司所重視。


Cinema 4D的應用領域相當廣泛,在廣告、電影以及工業設計等方面都有出色的表現,如圖所示。例如,在影片《阿凡達》中花鴉三維影動研究室的中國工作人員使用Cinema 4D製作了部分場景,在該片中Cinema 4D有如此優秀的表現,是很值得欣慰的一件事情。

MAXON Cinema 4D


Cinema 4D稱得上是三維數字影像領域的「常青樹」,也成為許多一流藝術家和電影公司進行場景製作的首選軟體,目前技術比較成熟。


當然,除了以上3款目前業內比較常用的3D類動畫軟體以外,還有許多其他類似的軟體可嘗試使用,這裡不再過多描述,如圖所示。


After Effects


1. 高協作性


無論是針對Photoshop上的位圖、鋼筆路徑和內置的矢量圖形,或者是lllustrator中的純矢量元素層,又或者是Animate CC、Premiere等,其都擁有而且根據「層級」的基本工作原理所延展開來的「Adobe 家族」的產品。


After Effects 的高協同性能是大多數動畫軟體無法比擬的,且絕大部分的快捷鍵都是通用的,如此一來用戶也就不需要再額外記憶更多的快捷鍵。Adobe家族的強大數字藝術解決方案群如圖所示。

Adobe 家族的強大數字藝術解決方案群


2. 效果插件的霸主平台


無論是哪一款後期合成的第三方插件,想要在影視後期動畫行業被廣泛使用,首先要考慮的就是是否為After Effects平台研發專門的效果插件。現在市面上適用於After Effects的插件有上百款,而且這個數字還在持續地增加。


試想,如果沒有這麼大的用戶量,大家為什麼非要選擇為After Effects研發專門的效果插件呢?對於用戶來說,插件多了,軟體實現效果的成本和難度也就大大降低了,這自然是一件令人愉悅的事情,也是大家選擇該軟體的原因之一,如圖所示。

關於After Effects的插件說明


好萊塢視效大片中有許多特效鏡頭都是使用After Effects和其插件來完成的。且最重要的是,原來一直被當作話柄的「網絡弱關聯性」(由於早期After Effects輸出的視頻體量過大,不適合於網絡流媒體播放對於體量和網速的要求,所以前幾年After Effects製作的視頻基本上與網際網路動效無黏性),也會因為這類輔助插件的產生而終結。

關鍵字: