ux和ui

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
  創建營銷視頻

Example of animating UI components with Adobe After Effects. Created by Lan使用Adobe After Effects對UI組件進行動畫處理的示例。 由Lan創建

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。

Example of what you can achieve with Flinto. Created by LanFlinto可以實現的示例。 由Lan創建

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.

謝謝閱讀！ 請在下面留下評論，隨時分享您的想法。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/how-to-choose-the-right-tool-to-prototype-your-ux-ui-designs-a2f3c425a3f5

ux和ui

總結

以上是生活随笔為你收集整理的ux和ui_如何为您的UX / UI设计选择正确的原型制作工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。