動效設計在最近幾年的各種網頁設計和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軟體：huke88.com/route/ae.ht…
2. Origami
Origami Studio是Facebook團隊建立的免費UI動畫工具。設計師可以直接從UI元件庫中拖放不同的元件來快速建立互動和動畫。但這需要使用者以開發人員的思維出發，才能做出優秀的動畫和設計。
價格：免費
系統：Mac
優點：
-強大的動畫和互動效果。
-完全免費。
-GitHub上的開源軟體。
缺點：
-僅支援Mac系統。
-滑鼠驅動的互動。使用者無法直接進行測試。
-較高的學習成本。
-需要一定的編碼知識。
使用者評價：
“非常強大的動畫和互動工具。”
視訊教程：
B站網友自制的Origami視訊教程：www.bilibili.com/video/av497…
3. Flinto
Flinto是一款輕巧而全面的原型製作和UI動畫工具。設計師為應用程式和Web建立互動式和動畫原型。提供了動畫工具，供設計人員快速建立基於過渡的動畫。在移動裝置和PC上都能流暢預覽。
價格：免費試用，專業版 - $99/使用者/年
系統：Mac
優點：
- 與Sketch和Figma整合。
- 3D轉換。
- 內建手勢：點選、雙擊、長按、滑動等。
缺點：
- 僅支援Mac系統。
- 不支援Photoshop匯入。
- 沒有時間軸，無法建立更復雜的效果。
使用者評價：
“它讓動畫變得更加有趣，更加快捷。”
“一款模擬動畫效果非常出色的軟體。”
視訊教程：
也是由B站網友提供的配有中文字幕的Flinto速成系列教程：www.bilibili.com/video/av158…
4. Framer
Framer是基於JavaScript的開源軟體，主要用於互動式動效設計。它可以快速匯入Photoshop和Sketch設計稿，實時預覽，並製作複雜的互動式原型或動效。
價格：個人-每月$ 15，小型團隊-每月$ 99
系統：Mac
優點：
- 支援匯入Sketch和Photoshop檔案。
- Framer X商店提供大量的設計資源。
- 可使用編碼知識進行創意設計（對具備程式設計知識的設計師友好）。
缺點：
- 僅支援Mac系統。
- 需要編碼知識（對初學者不友好）。
- 沒有標註工具，不支援直接交付標註資訊給開發人員。
- 匯入的Sketch檔案與點陣圖圖層不匹配。
- 與主流工具缺乏協作性，導致大量重複工作。
使用者評價：
“互動細節和動畫的好產品！”
視訊教程：
原創中文教程【Framer教程/互動動效/原型設計】：www.bilibili.com/video/av320…
5. iDoc
Mockplus iDoc是面向設計人員和開發人員的線上協作工具。除了為互動式原型提供豐富的動畫效果之外，設計人員還可以從PS，Adobe XD和Sketch中上傳原型和視覺設計，通過對應的工具外掛自動生成標註、切圖資訊，方便交付。
價格：個人版免費，團隊-$39/月，Team Pro-$129/月
系統：Mac, Windows
優點：
- 支援Adobe XD，Sketch, Axure和Photoshop外掛。
- 多種UI動畫效果。
- 可以在平臺內完成包括動效設定，原型設計和設計交付的完整工作流程。
- 易於使用。
缺點：
- Adobe XD，Sketch, Axure和Photoshop上設定的動畫無法直接匯入iDoc。
- 在iPhone X上的預覽效果需要提升。
使用者評價：
“我感覺還不錯。但是需要更多的使用者友好性和簡便性，我認為UI設計上面還可以更簡潔一些。”
視訊教程：
摹客iDoc平臺支援完整的設計流程，無論是智慧標註、一鍵切圖、多樣批註、互動原型、全貌畫板，還是團隊管理，從產品、設計到開發一個文件，你都可以無縫操作。
6. Motion UI
Motion UI是基於Sass的CSS過渡和動效設計庫。 這是一個非常強大的UI動畫工具，為CSS檔案提供20多種過渡和動畫效果。並且，如果是開源的CSS檔案，你還可以通過Motion UI構建自己的動效。
價格：免費
系統：Win, Mac
優點：
- 支援系列動畫效果。
- 使用者可以自定義7個維度的動畫。
- 開源工具。
- 提供了程式碼教程。
缺點：
- 不支援在IE瀏覽器中執行Motion UI。
- 需要編碼知識。
視訊教程：
中文視訊很少，所以這裡就放了Youtube上面的英文視訊 - Motion UI入門視訊：
7. Hype 4
Hype 4是Mac上的HTML5動畫製作軟體，不需要Flash外掛和程式碼即可製作H5動畫。它具有所見即所得的功能。與AE一樣，可以使用時間軸為不同的場景製作互動式動畫。
價格：標準版-$ 49.9，專業版-$ 99.99
系統：Mac
優點：
- 支援將檔案匯出為視訊和GIF。
- 可以使用時間軸通過新增或播放某一個元素來建立動畫
- 可以從動作中捕獲動畫以建立關鍵幀。
- 無需編碼。
- 支援中文。
缺點：
- 僅支援Mac系統。
- 缺少對Adobe Acrobat的支援。
- 需要匯出網站程式碼以編輯某些元素。
使用者評價：
“迄今為止最好用的UI動效工具！”
視訊教程：
通過這個教程，你可以學習到如何通過Hype 4在iPad上製作HTML5動畫。
8. Lottie
Lottie是由Airbnb建立的開源動效庫，支援Android，iOS和React Native。它支援演示從Adobe After Effects匯出的JSON檔案，並可以快速實現動畫效果。
價格：免費
系統：Web
優點：
- Github上有免費資源。
- 包括各種動畫，例如基本線條，基於字元的動畫和動態Logo動畫。
- JSON檔案可以通過網路載入。
- 支援捕捉常用動畫。
缺點：
- 不支援表示式或效果選單中的任何效果。
- 不支援圖層效果，例如陰影、顏色疊加或觸屏效果。
使用者評價：
“它最大的優點是提供了一套完整的跨平臺的動畫實現工作流。”
視訊教程：
通過此視訊，你可以學習如何用最少的Lottie程式碼在android中建立漂亮的動畫。
9. Keynote
Keynote大家一定都不陌生，它是Apple為Mac平臺開發的簡報設計工具。對於大多數人來說，它只是一款在Mac上使用的幻燈片演示軟體。但是對於設計師來說，它也是很棒的UI動畫工具。例如，Apple團隊也將其用於互動式設計和演示。因此，如果你對這款軟體比較熟悉，也可以在Keynote上建立常見的動畫。
價格：免費
系統：Mac
優點：
- 包含PowerPoint中的大多數動畫。
- 動畫質量甚至比PowerPoint更好。
-與iCloud相容。
缺點：
- 僅支援Mac系統。
- 本地檔案的匯入過程很慢。
- 無法顯示動畫的時間軸。
使用者評價：
“在過場和動畫這方面, Keynote 的確相較於同時期的 PowerPoint 過渡得更流暢。”
視訊教程：
B站網友教你如何利用Keynote，三步完成動畫效果製作：
10. Flow
Flow是功能強大的UI動畫工具，你可以使用它為iOS和HTML專案建立互動式過渡和佈局程式碼。作為一款生產型工具，它不僅可以建立具有強大時間軸的精美動畫，還可以匯出動畫程式碼。
價格：免費試用-30天，專業版-$15/月或$150/年
系統：Mac
優點：
- 強大的時間軸可讓你準確地編輯和設定動畫。
- 支援匯出程式碼。
- 簡化的介面有助於編輯關鍵幀。
缺點：
- 僅支援Mac系統。
- 只能匯入Sketch檔案。
使用者評價：
“關於Flow的最好的一點是它支援輸出的清晰的JS程式碼，從而易於閱讀和編輯。”
教程：
Flow官網提供了詳細教程，教使用者如何使用Flow製作Sketch檔案的動畫以及匯出程式碼和切圖。
結語：
動畫和其他啟發性元素的共同作用使當今的設計更具創造力和多樣化。有了UI動效工具的加持，網頁設計和App設計不再單調，同時變得更加生動和具有趣味性。你也可以試試使用小摹給大家介紹的以上10款優秀的UI動畫工具來打造時尚和現代設計。
相關閱讀：
福利：
為了幫助各位UI小夥伴更好地開展工作，今天小摹為大家贈送協作設計平臺摹客iDoc的工具高階版體驗~
摹客iDoc，設計效率提升200%：支援Sketch、Photoshop、Adobe XD設計稿，解放雙手，輕鬆交付！
福利領取方式：目前在www.mockplus.cn/get-idoc輸入zhihud 就能獲得團隊版試用喲~