All UX/UI designers might encounter the situation of creating prototypes for wireframes or visual designs. In some cases, you may also receive the need to craft motion designs, for instance, animating icons or illustrations.

所有UX / UI设计人员都可能遇到为线框或视觉设计创建原型的情况。 在某些情况下，您可能还需要设计运动设计，例如，对图标或插图进行动画处理。

I’d like to share my experience in using different tools for achieving different design goals.

我想分享我使用不同工具实现不同设计目标的经验。

1. Adob​​e After Effects (1. Adobe After Effects)

An advanced tool for advanced visual effects

先进的视觉效果高级工具

As most designers might have known, Adobe After Effects is a super-power software for animation. I’ve been using AE for years for animating different types of designs. It’s indeed very powerful with tons of features and functions. You can literally use it to animate anything digital.

就像大多数设计师可能知道的那样， Adobe After Effects是一款用于动画的超强大软件。 多年来，我一直在使用AE对不同类型的设计进行动画处理。 它确实具有许多特性和功能，功能非常强大。 您可以从字面上使用它来制作数字动画。

At the same time, the powerfulness also means a steeper learning curve and more time-consuming than others. It not only takes time to prototype but also takes time to render your work out. If you are knowledgable and comfortable enough using AE or you’re willing to take some time to learn it, Adobe After Effects is a wonderful tool to make your animation ideas come true.

同时，强大的功能也意味着比其他人更陡峭的学习曲线和更多的时间消耗。 制作原型不仅需要时间，而且还需要花费时间来完成您的工作。 如果您使用AE知识渊博且足够舒适，或者愿意花一些时间来学习它，那么Adobe After Effects是使您的动画创意变为现实的绝佳工具。

Another thing to be noticed is that the output of AE is a video instead of a clickable prototype. This is ideal for visual presentations while it misses out the interactive and navigating part of app designs.

要注意的另一件事是，AE的输出是视频而不是可点击的原型。 当错过了应用程序设计的交互性和导航性时，这是视觉演示的理想选择。

When to choose Adobe After Effects:

何时选择Adobe After Effects：

• Animate illustrations (e.g. onboarding animations)
  动画插图(例如，入职动画)
• Create vector motions (e.g. animated icons)
  创建矢量运动(例如动画图标)
• Create marketing videos
  创建营销视频

2. Principle和Flinto (2. Principle & Flinto)

Interactive prototyping tools

交互式原型制作工具

Principle and Flinto are trending tools for crafting high-fidelity interactive prototypes. Both tools have a built-in window for real-time previewing and recording the prototype. They allow you to import design artboards from Sketch. This feature makes my life much easier while creating animated prototypes (I know you get my point:). These tools are relatively easy-to-learn and with lots of tutorials to help you quickly get started.

Principle和Flinto是制作高保真交互式原型的趋势工具。 两种工具都有一个内置窗口，用于实时预览和记录原型。 它们允许您从Sketch导入设计画板。 在创建动画原型时，此功能使我的工作变得更加轻松(我知道你的意思：)。 这些工具相对易于学习，并且具有许多教程来帮助您快速入门。

Principle vs Flinto

原理与弗林托

Principle provides timeline-based control which is missing in other prototyping tools (e.g. Flinto, Origami) but would be familiar to you if you’ve used Adobe After Effects. It has two timelines — one on the bottom of the screen for animating objects between pages, another one on the top of the screen for animating objects on the same page. These timelines give you a great visual overview and a way of control over the animated properties.

Principle提供了基于时间轴的控件 ，其他原型制作工具(例如Flinto，Origami)中缺少该控件，但是如果您使用过Adobe After Effects，您会很熟悉。 它有两个时间轴-一个位于屏幕底部，用于动画页面之间的对象，另一个位于屏幕顶部，用于动画页面中的对象。 这些时间轴为您提供了出色的视觉概览，以及一种控制动画属性的方式。

Flinto uses a transition-based way of working, which provides you a fast way of tweaking transitions between pages and gives direct feedback. For example, when you swipe to go to the next page, you can control the speed of the transition with your finger and go back and forth, which just like what you can do in other native iOS apps. The Transition Designer of Flinto allows you intuitively manage the animations between two screens by adjusting the position of the result screen, inputting values for curve effects.

Flinto使用基于过渡的工作方式 ，它为您提供了一种在页面之间调整过渡的快速方法，并提供了直接的反馈。 例如，滑动到下一页时，您可以用手指控制转换的速度并来回移动，就像在其他本机iOS应用程序中所做的一样。 Flinto的过渡设计器允许您通过调整结果屏幕的位置，输入曲线效果的值来直观地管理两个屏幕之间的动画。

When to use Principle & Flinto:

何时使用Principle＆Flinto：

• Create a high-fidelity interactive prototype of an app for, e.g., user testing, demonstrating screen transitions.
  创建应用程序的高保真交互式原型，例如，进行用户测试，演示屏幕过渡。

More specifically —

进一步来说 -

• Principle is ideal for prototyping few screens of an app with intense controls and animations, such as creating an interactive web page or onboarding screens of an app.

  Principle是用于使用密集控件和动画制作应用程序的几个屏幕原型的理想选择，例如创建交互式网页或应用程序的入门屏幕。

• Flinto works better in prototyping transition-based apps and handling a larger number of app screens — so choose Flinto if you’re prototyping an app with lots of screens and transitions.

  Flinto在基于过渡的应用程序原型制作和处理大量应用程序屏幕方面效果更好，因此，如果要对具有多个屏幕和过渡效果的应用程序制作原型，请选择Flinto。

3.视力 (3. Invision)

A click-through prototyping tool

点击型原型工具

Invision is a web-based platform focusing more on entire app flows. It lets designers upload app screens from Sketch and build a click-through prototype in no time. It’s great for sharing and presenting the designs to peer designers, developers, or stakeholders for feedback during a meeting or after the meeting (by commenting on the designs). The learning cost of creating clickable prototypes via Invision is extremely low.

Invision是一个基于Web的平台，重点关注整个应用程序流程 。 它使设计人员可以立即从Sketch上载应用程序屏幕并构建点击型原型。 非常适合在会议期间或会议结束后(通过评论设计)将设计共享并呈现给同级设计师，开发人员或利益相关者，以获取反馈。 通过Invision创建可点击的原型的学习成本非常低。

When to use Invision:

何时使用Invision：

• Test wireframes in early design stage
  在设计初期测试线框
• Share and present entire app flows
  分享和展示整个应用程序流程
• Get comments/feedback online
  在线获取评论/反馈
• Collaborate with peer designers and developers
  与同行设计师和开发人员合作

4.主题演讲 (4. Keynote)

More powerful than you thought it could be

比您想象的更强大

Sometimes you just want to include few app screens or small motions into your presentation slides, then choosing Keynote is a quick, dirty but most efficient way to achieve your goal. It’s not a tool for pixel-perfect designs but you can actually create nice motions and smooth transitions by simply adding links and using its animation tools. Check out the keynote motion graphic design by Linda Dong:

有时，您只想在演示文稿幻灯片中包含几个应用程序屏幕或小动作，然后选择Keynote是实现目标的快速，肮脏但最有效的方法。 它不是用于像素完美设计的工具，但实际上您可以通过简单地添加链接并使用其动画工具来创建漂亮的动作和平滑的过渡。 查看Linda Dong的主题运动图形设计 ：

When to use Keynote:

何时使用主题演讲：

• Embed part of the app or small motions into your presentations
  将应用程序的一部分或小动作嵌入到演示文稿中

I made a comparison of these tools:

我对这些工具进行了比较：

There is no one tool that fits all. The tool to choose depends on what you are going to achieve. You can find a lot more tools out there for UX/UI designers, but it all comes down to choosing the one that you are comfortable working with and suits the situation the best. In many cases, you can also combine multiple tools in one project for the best overall result.

没有一种工具能适合所有人。 选择的工具取决于要实现的目标。 您可以在那里找到更多面向UX / UI设计人员的工具，但这全都取决于您选择适合自己的工作方式并最适合情况的一种。 在许多情况下，您还可以在一个项目中结合使用多个工具以获得最佳的总体效果。

Thanks for reading! Feel free to share your thoughts by leaving comments below.

谢谢阅读！ 请在下面留下评论，随时分享您的想法。