UI动效设计工具有那些推荐？设计达人

网页、UI设计中的动效和视频短片的动画是不一样的，UI中的动效设计没有动画那么复杂，需要的是效率以及实用性，比如有的动效只是交互设计师用来展示交互效果，其实功能相当简单，如果用动画制作软件，就会过于复杂。所以我们应当选择适合在UI动效设计工具。

动效设计有哪些优势？

1.AdobeAfterEffects

AfterEffects绝对是功能最强大的UI动画工具之一，也是视觉、UI设计师心目中的行业标准。无论是惊艳转场效果，还是极具创意的动作设计，所有这些以及更多其他的功能都可以通过AfterEffects实现。此外，它不仅在动画方面表现出色，而且在电影、电视、视频和网络的动态图形和视觉效果的合成方面也很出色。

系统：Windows，Mac

优点：

缺点：

“如果你想成为一名优秀的设计师，AfterEffects就是首选！”

“动态图形和动画设计的理想工具。”

2.Origami

OrigamiStudio是Facebook团队创建的免费UI动画工具。设计师可以直接从UI组件库中拖放不同的组件来快速创建交互和动画。但这需要用户以开发人员的思维出发，才能做出优秀的动画和设计。

价格：免费

系统：Mac

“非常强大的动画和交互工具。”

3.Flinto

Flinto是一款轻巧而全面的原型制作和UI动画工具。设计师为应用程序和Web创建交互式和动画原型。提供了动画工具，供设计人员快速创建基于过渡的动画。在移动设备和PC上都能流畅预览。

“它让动画变得更加有趣，更加快捷。”

“一款模拟动画效果非常出色的软件。”

4.Framer

Framer是基于JavaScript的开源软件，主要用于交互式动效设计。它可以快速导入Photoshop和Sketch设计稿，实时预览，并制作复杂的交互式原型或动效。

价格：个人-每月$15，小型团队-每月$99

“互动细节和动画的好产品！”

5.MotionUI

MotionUI是基于Sass的CSS过渡和动效设计库。这是一个非常强大的UI动画工具，为CSS文件提供20多种过渡和动画效果。并且，如果是开源的CSS文件，你还可以通过MotionUI构建自己的动效。

系统：Win,Mac

-不支持在IE浏览器中运行MotionUI。

-需要编码知识。

6.Hype4

价格：标准版-$49.9，专业版-$99.99

“迄今为止最好用的UI动效工具！”

7.Lottie

Lottie是由Airbnb创建的开源动效库，支持Android，iOS和ReactNative。它支持演示从AdobeAfterEffects导出的JSON文件，并可以快速实现动画效果。

系统：Web

“它最大的优点是提供了一套完整的跨平台的动画实现工作流。”

8.Keynote

Keynote大家一定都不陌生，它是Apple为Mac平台开发的演示文稿设计工具。对于大多数人来说，它只是一款在Mac上使用的幻灯片演示软件。但是对于设计师来说，它也是很棒的UI动画工具。例如，Apple团队也将其用于交互式设计和演示。因此，如果你对这款软件比较熟悉，也可以在Keynote上创建常见的动画。

“在过场和动画这方面,Keynote的确相较于同时期的PowerPoint过渡得更流畅。”

9.Flow

价格：免费试用-30天，专业版-$15/月或$150/年

“关于Flow的最好的一点是它支持输出的清晰的JS代码，从而易于阅读和编辑。”

结语：

动画和其他启发性元素的共同作用使当今的设计更具创造力和多样化，有了UI动效工具的加持，网页设计和App设计不再单调，同时变得更加生动和具有趣味性。