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設(shè)計(jì)人員都可能遇到為線框或視覺設(shè)計(jì)創(chuàng)建原型的情況。 在某些情況下，您可能還需要設(shè)計(jì)運(yùn)動(dòng)設(shè)計(jì)，例如，對圖標(biāo)或插圖進(jìn)行動(dòng)畫處理。

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

我想分享我使用不同工具實(shí)現(xiàn)不同設(shè)計(jì)目標(biāo)的經(jīng)驗(yàn)。

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

An advanced tool for advanced visual effects

先進(jìn)的視覺效果高級工具

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.

就像大多數(shù)設(shè)計(jì)師可能知道的那樣， Adobe After Effects是一款用于動(dòng)畫的超強(qiáng)大軟件。 多年來，我一直在使用AE對不同類型的設(shè)計(jì)進(jìn)行動(dòng)畫處理。 它確實(shí)具有許多特性和功能，功能非常強(qiáng)大。 您可以從字面上使用它來制作數(shù)字動(dòng)畫。

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.

同時(shí)，強(qiáng)大的功能也意味著比其他人更陡峭的學(xué)習(xí)曲線和更多的時(shí)間消耗。 制作原型不僅需要時(shí)間，而且還需要花費(fèi)時(shí)間來完成您的工作。 如果您使用AE知識淵博且足夠舒適，或者愿意花一些時(shí)間來學(xué)習(xí)它，那么Adobe After Effects是使您的動(dòng)畫創(chuàng)意變?yōu)楝F(xiàn)實(shí)的絕佳工具。

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的輸出是視頻而不是可點(diǎn)擊的原型。 當(dāng)錯(cuò)過了應(yīng)用程序設(shè)計(jì)的交互性和導(dǎo)航性時(shí)，這是視覺演示的理想選擇。

When to choose Adobe After Effects:

何時(shí)選擇Adobe After Effects：

• Animate illustrations (e.g. onboarding animations)
  動(dòng)畫插圖(例如，入職動(dòng)畫)
• Create vector motions (e.g. animated icons)
  創(chuàng)建矢量運(yùn)動(dòng)(例如動(dòng)畫圖標(biāo))
• Create marketing videos
  創(chuàng)建營銷視頻

Example of animating UI components with Adobe After Effects. Created by Lan使用Adobe After Effects對UI組件進(jìn)行動(dòng)畫處理的示例。 由Lan創(chuàng)建

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是制作高保真交互式原型的趨勢工具。 兩種工具都有一個(gè)內(nèi)置窗口，用于實(shí)時(shí)預(yù)覽和記錄原型。 它們允許您從Sketch導(dǎo)入設(shè)計(jì)畫板。 在創(chuàng)建動(dòng)畫原型時(shí)，此功能使我的工作變得更加輕松(我知道你的意思：)。 這些工具相對易于學(xué)習(xí)，并且具有許多教程來幫助您快速入門。

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提供了基于時(shí)間軸的控件 ，其他原型制作工具(例如Flinto，Origami)中缺少該控件，但是如果您使用過Adobe After Effects，您會(huì)很熟悉。 它有兩個(gè)時(shí)間軸-一個(gè)位于屏幕底部，用于動(dòng)畫頁面之間的對象，另一個(gè)位于屏幕頂部，用于動(dòng)畫頁面中的對象。 這些時(shí)間軸為您提供了出色的視覺概覽，以及一種控制動(dòng)畫屬性的方式。

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使用基于過渡的工作方式 ，它為您提供了一種在頁面之間調(diào)整過渡的快速方法，并提供了直接的反饋。 例如，滑動(dòng)到下一頁時(shí)，您可以用手指控制轉(zhuǎn)換的速度并來回移動(dòng)，就像在其他本機(jī)iOS應(yīng)用程序中所做的一樣。 Flinto的過渡設(shè)計(jì)器允許您通過調(diào)整結(jié)果屏幕的位置，輸入曲線效果的值來直觀地管理兩個(gè)屏幕之間的動(dòng)畫。

When to use Principle & Flinto:

何時(shí)使用Principle＆Flinto：

• Create a high-fidelity interactive prototype of an app for, e.g., user testing, demonstrating screen transitions.
  創(chuàng)建應(yīng)用程序的高保真交互式原型，例如，進(jìn)行用戶測試，演示屏幕過渡。

More specifically —

進(jìn)一步來說 -

• 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是用于使用密集控件和動(dòng)畫制作應(yīng)用程序的幾個(gè)屏幕原型的理想選擇，例如創(chuàng)建交互式網(wǎng)頁或應(yīng)用程序的入門屏幕。

• 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在基于過渡的應(yīng)用程序原型制作和處理大量應(yīng)用程序屏幕方面效果更好，因此，如果要對具有多個(gè)屏幕和過渡效果的應(yīng)用程序制作原型，請選擇Flinto。

Example of what you can achieve with Flinto. Created by LanFlinto可以實(shí)現(xiàn)的示例。 由Lan創(chuàng)建

3.視力 (3. Invision)

A click-through prototyping tool

點(diǎn)擊型原型工具

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是一個(gè)基于Web的平臺(tái)，重點(diǎn)關(guān)注整個(gè)應(yīng)用程序流程 。 它使設(shè)計(jì)人員可以立即從Sketch上載應(yīng)用程序屏幕并構(gòu)建點(diǎn)擊型原型。 非常適合在會(huì)議期間或會(huì)議結(jié)束后(通過評論設(shè)計(jì))將設(shè)計(jì)共享并呈現(xiàn)給同級設(shè)計(jì)師，開發(fā)人員或利益相關(guān)者，以獲取反饋。 通過Invision創(chuàng)建可點(diǎn)擊的原型的學(xué)習(xí)成本非常低。

When to use Invision:

何時(shí)使用Invision：

• Test wireframes in early design stage
  在設(shè)計(jì)初期測試線框
• Share and present entire app flows
  分享和展示整個(gè)應(yīng)用程序流程
• Get comments/feedback online
  在線獲取評論/反饋
• Collaborate with peer designers and developers
  與同行設(shè)計(jì)師和開發(fā)人員合作

4.主題演講 (4. Keynote)

More powerful than you thought it could be

比您想象的更強(qiáng)大

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:

有時(shí)，您只想在演示文稿幻燈片中包含幾個(gè)應(yīng)用程序屏幕或小動(dòng)作，然后選擇Keynote是實(shí)現(xiàn)目標(biāo)的快速，骯臟但最有效的方法。 它不是用于像素完美設(shè)計(jì)的工具，但實(shí)際上您可以通過簡單地添加鏈接并使用其動(dòng)畫工具來創(chuàng)建漂亮的動(dòng)作和平滑的過渡。 查看Linda Dong的主題運(yùn)動(dòng)圖形設(shè)計(jì) ：

When to use Keynote:

何時(shí)使用主題演講：

• Embed part of the app or small motions into your presentations
  將應(yīng)用程序的一部分或小動(dòng)作嵌入到演示文稿中

I made a comparison of these tools:

我對這些工具進(jìn)行了比較：

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.

沒有一種工具能適合所有人。 選擇的工具取決于要實(shí)現(xiàn)的目標(biāo)。 您可以在那里找到更多面向UX / UI設(shè)計(jì)人員的工具，但這全都取決于您選擇適合自己的工作方式并最適合情況的一種。 在許多情況下，您還可以在一個(gè)項(xiàng)目中結(jié)合使用多個(gè)工具以獲得最佳的總體效果。

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

謝謝閱讀！ 請?jiān)谙旅媪粝略u論，隨時(shí)分享您的想法。

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)，這是一個(gè)巴西組織，致力于通過采取行動(dòng)，賦權(quán)和知識共享的舉措來促進(jìn)科技行業(yè)中的黑人女性平等。 對系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計(jì)社區(qū)。

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

ux和ui

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。