2020年最值得推薦的10款UI動效設計工具

• 2020 年 3 月 11 日
• 筆記

動效設計在最近幾年的各種網頁設計和App設計中的表現相當搶眼。各種令人驚嘆的創意和流暢自然的動作設計迅速捕獲了用戶的視線，極大地提升了品質感和轉化率。而要製作出效果卓絕的UI動畫效果自然也需要優秀的軟件。UI動效工具開始在設計師的工作中發揮越來越大的價值。

動效設計有哪些優勢？

• 節省屏幕空間
• 提升產品可用性
• 為產品增加創造性和趣味性
• 便捷互動
• 可同時執行多項任務
• 向用戶提供清晰的反饋
• 吸引用戶注意力

那麼秉着為廣大設計師朋友「謀福利」的想法，摹客的小夥伴給大家整理了業內比較流行的10款UI動效工具，供大家參考、學習。

1. Adobe After Effects

After Effects絕對是功能最強大的UI動畫工具之一，也是視覺、UI設計師心目中的行業標準。無論是驚艷轉場效果，還是極具創意的動作設計，所有這些以及更多其他的功能都可以通過After Effects實現。此外，它不僅在動畫方面表現出色，而且在電影、電視、視頻和網絡的動態圖形和視覺效果的合成方面也很出色。

價格：30天免費試用，專業版 – $31.49/月

系統：Windows，Mac

優點：

– 強大的功能，能盡情實現你的動畫創意。

– 與其他Adobe工具無縫協作：Adobe Portfolio，Adobe Fonts和Adobe Spark等。

– 配合插件支持動畫數據導出。

– 豐富的素材和學習資源。

缺點：

– 功能過多導致學習曲線比較陡峭。

– 對計算機的處理性能，存儲空間都有較高要求。

– 高分辨率預覽的渲染速度比較慢。

用戶評價：

「如果你想成為一名優秀的設計師，After Effects就是首選！」

「動態圖形和動畫設計的理想工具。」

教程資源：

零基礎學習After Effects軟件：https://huke88.com/route/ae.html

2. Origami

Origami Studio是Facebook團隊創建的免費UI動畫工具。設計師可以直接從UI組件庫中拖放不同的組件來快速創建交互和動畫。但這需要用戶以開發人員的思維出發，才能做出優秀的動畫和設計。

價格：免費

系統：Mac

優點：

-強大的動畫和交互效果。

-完全免費。

-GitHub上的開源軟件。

缺點：

-僅支持Mac系統。

-鼠標驅動的交互。用戶無法直接進行測試。

-較高的學習成本。

-需要一定的編碼知識。

用戶評價：

「非常強大的動畫和交互工具。」

視頻教程：

B站網友自製的Origami視頻教程：https://www.bilibili.com/video/av49717108/

3. Flinto

Flinto是一款輕巧而全面的原型製作和UI動畫工具。設計師為應用程序和Web創建交互式和動畫原型。提供了動畫工具，供設計人員快速創建基於過渡的動畫。在移動設備和PC上都能流暢預覽。

價格：免費試用，專業版 – $99/用戶/年

系統：Mac

優點：

– 與Sketch和Figma集成。

– 3D轉換。

– 內置手勢：點擊、雙擊、長按、滑動等。

缺點：

– 僅支持Mac系統。

– 不支持Photoshop導入。

– 沒有時間軸，無法創建更複雜的效果。

用戶評價：

「它讓動畫變得更加有趣，更加快捷。」

「一款模擬動畫效果非常出色的軟件。」

視頻教程： 

也是由B站網友提供的配有中文字幕的Flinto速成系列教程：https://www.bilibili.com/video/av15814287/

4. Framer

Framer是基於JavaScript的開源軟件，主要用於交互式動效設計。它可以快速導入Photoshop和Sketch設計稿，實時預覽，並製作複雜的交互式原型或動效。 

價格：個人-每月$ 15，小型團隊-每月$ 99

系統：Mac

優點：

– 支持導入Sketch和Photoshop文件。

– Framer X商店提供大量的設計資源。

– 可使用編碼知識進行創意設計（對具備編程知識的設計師友好）。

缺點：

– 僅支持Mac系統。

– 需要編碼知識（對初學者不友好）。

– 沒有標註工具，不支持直接交付標註信息給開發人員。

– 導入的Sketch文件與位圖圖層不匹配。

– 與主流工具缺乏協作性，導致大量重複工作。

用戶評價：

「互動細節和動畫的好產品！」

視頻教程：

原創中文教程【Framer教程/交互動效/原型設計】：https://www.bilibili.com/video/av32089752/

5. 摹客iDoc

摹客 iDoc是面向設計人員和開發人員的在線協作工具。除了為交互式原型提供豐富的動畫效果之外，設計人員還可以從PS，Adobe XD和Sketch中上傳原型和視覺設計，通過對應的工具插件自動生成標註、切圖信息，方便交付。

價格：個人版免費

系統：Mac, Windows

優點：

– 支持Adobe XD，Sketch, Axure和Photoshop插件。

– 多種UI動畫效果。

– 可以在平台內完成包括動效設置，原型設計和設計交付的完整工作流程。

– 易於使用。

缺點：

– Adobe XD，Sketch, Axure和Photoshop上設置的動畫無法直接導入iDoc。

– 在iPhone X上的預覽效果需要提升。

用戶評價：

「我感覺還不錯。但是需要更多的用戶友好性和簡便性，我認為UI設計上面還可以更簡潔一些。」

視頻教程：

摹客iDoc平台支持完整的設計流程，無論是智能標註、一鍵切圖、多樣批註、交互原型、全貌畫板，還是團隊管理，從產品、設計到開發一個文檔，你都可以無縫操作。

https://help.mockplus.cn/p/200

6. Motion UI

Motion UI是基於Sass的CSS過渡和動效設計庫。 這是一個非常強大的UI動畫工具，為CSS文件提供20多種過渡和動畫效果。並且，如果是開源的CSS文件，你還可以通過Motion UI構建自己的動效。

價格：免費

系統：Win, Mac 

優點：

– 支持系列動畫效果。

– 用戶可以自定義7個維度的動畫。

– 開源工具。

– 提供了代碼教程。

缺點：

– 不支持在IE瀏覽器中運行Motion UI。

– 需要編碼知識。

視頻教程：

中文視頻很少，所以這裡就放了Youtube上面的英文視頻 – Motion UI入門視頻：

https://www.youtube.com/watch?v=8QMMndMZOCE

7. Hype 4

Hype 4是Mac上的HTML5動畫製作軟件，不需要Flash插件和代碼即可製作H5動畫。它具有所見即所得的功能。與AE一樣，可以使用時間軸為不同的場景製作交互式動畫。

價格：標準版-$ 49.9，專業版-$ 99.99

系統：Mac

優點：

– 支持將文件導出為視頻和GIF。

– 可以使用時間軸通過添加或播放某一個元素來創建動畫

– 可以從動作中捕獲動畫以創建關鍵幀。

– 無需編碼。

– 支持中文。

缺點：

– 僅支持Mac系統。

– 缺少對Adobe Acrobat的支持。

– 需要導出網站代碼以編輯某些元素。

用戶評價：

「迄今為止最好用的UI動效工具！」

視頻教程：

通過這個教程，你可以學習到如何通過Hype 4在iPad上製作HTML5動畫。

https://www.youtube.com/watch?v=GAYW8Ke5hs

8. Lottie

Lottie是由Airbnb創建的開源動效庫，支持Android，iOS和React Native。它支持演示從Adobe After Effects導出的JSON文件，並可以快速實現動畫效果。

價格：免費

系統：Web

優點：

– Github上有免費資源。

– 包括各種動畫，例如基本線條，基於字符的動畫和動態Logo動畫。

– JSON文件可以通過網絡加載。

– 支持捕捉常用動畫。

缺點：

– 不支持表達式或效果菜單中的任何效果。

– 不支持圖層效果，例如陰影、顏色疊加或觸屏效果。

用戶評價：

「它最大的優點是提供了一套完整的跨平台的動畫實現工作流。」

視頻教程：

通過此視頻，你可以學習如何用最少的Lottie代碼在android中創建漂亮的動畫。

https://www.youtube.com/watch?v=fSD2wa81evA

9. Keynote

Keynote大家一定都不陌生，它是Apple為Mac平台開發的演示文稿設計工具。對於大多數人來說，它只是一款在Mac上使用的幻燈片演示軟件。但是對於設計師來說，它也是很棒的UI動畫工具。例如，Apple團隊也將其用於交互式設計和演示。因此，如果你對這款軟件比較熟悉，也可以在Keynote上創建常見的動畫。

價格：免費

系統：Mac

優點：

– 包含PowerPoint中的大多數動畫。

– 動畫質量甚至比PowerPoint更好。

 -與iCloud兼容。

缺點：

– 僅支持Mac系統。

– 本地文件的導入過程很慢。

– 無法顯示動畫的時間軸。

用戶評價：

「在過場和動畫這方面, Keynote 的確相較於同時期的 PowerPoint 過渡得更流暢。」

視頻教程：

B站網友教你如何利用Keynote，三步完成動畫效果製作：

https://www.bilibili.com/video/av30393793/

10. Flow

Flow是功能強大的UI動畫工具，你可以使用它為iOS和HTML項目創建交互式過渡和布局代碼。作為一款生產型工具，它不僅可以創建具有強大時間軸的精美動畫，還可以導齣動畫代碼。

價格：免費試用-30天，專業版-$15/月或$150/年

系統：Mac

優點：

– 強大的時間軸可讓你準確地編輯和設置動畫。

– 支持導出代碼。

– 簡化的界面有助於編輯關鍵幀。

缺點：

– 僅支持Mac系統。

– 只能導入Sketch文件。

用戶評價：

「關於Flow的最好的一點是它支持輸出的清晰的JS代碼，從而易於閱讀和編輯。」

教程：

Flow官網提供了詳細教程，教用戶如何使用Flow製作Sketch文件的動畫以及導出代碼和切圖。

https://createwithflow.com/tutorials/

結語：

動畫和其他啟發性元素的共同作用使當今的設計更具創造力和多樣化。有了UI動效工具的加持，網頁設計和App設計不再單調，同時變得更加生動和具有趣味性。你也可以試試使用小摹給大家介紹的以上10款優秀的UI動畫工具來打造時尚和現代設計。