16 Prototyping Tools & How Each Can Be Used

Everyone is asking: "Which prototyping tool is the best?" That’s the wrong question.

每人都在問："哪個原型工具是最好的？" 這是個錯誤的問題。

The correct question is: "Which prototyping tool is the best for my current objective?"

正確的問法是："為達(dá)成我現(xiàn)有目標(biāo)，哪個原型工具是最好的？"

Spoiler alert: everyone should be skilled in multiple prototyping tools. One is not enough. More on that later.

劇透警告：每人都應(yīng)該掌握多種原型工具。一個是不夠的。稍后再談。

Ask These 4 Questions When Starting a Prototype

當(dāng)開始一個原型前，先問這4個問題：

Prototyping is an intimate part of the Design Thinking process. It’s the necessary part of the design process where we get the chance to prove out our crazy ideas. And when the prototype is finished, we test it. We validate and challenge our assumptions. We adjust our designs when new information arises.

原型是設(shè)計思考過程中一個緊密的部分。它是設(shè)計過程中必須的部分，讓我們有機(jī)會證明瘋狂的想法，當(dāng)原型被完成的時候，我們測試它。我們挑戰(zhàn)和驗證我們的假想，并當(dāng)新信息出現(xiàn)的時候我們調(diào)整我們的設(shè)計。

But how do we know which tool to use? How far should we go with the prototype? Here are 4 questions you should be asking whenever you approach a prototype:

但是，我們怎么知道使用哪個工具？原型應(yīng)該做的多細(xì)致？這里有四個問題，每當(dāng)你想做原型的時候應(yīng)該被問到：

Are you building for mobile, tablet, or desktop?

How high fidelity does your prototype need to be?

How fast do you need to go?

How much of the experience do you need to show?

你做這個是為手機(jī)，平板，還是電腦？

你的原型需要怎樣的保真度？

你需要多快做完？

你需要展示多少體驗？

The correct prototyping tool depends on the experience you need to create (Credit:Vignette Interactive)

正確的原型工具的選擇，取決于你需要創(chuàng)作的體驗。

5 Scenarios and The Right Prototyping Tools for Each

五個場景下，正確的原型工具選擇

To illustrate my point, I’m going to give you a few use cases?—?and tell you which prototyping tool is best for each. We’ll use the questions I outlined above to create the context for each scenario.

為說明我的觀點(diǎn)，我將給你一些案例——并且告訴你哪個原型工具是最適合每一個案例的。我們將用到上面我提到的問題, 來為每一個場景創(chuàng)造前后關(guān)系。

Scenario #1?—?Low Fidelity, Quick Mobile App

場景一 低保真，快速的手機(jī)應(yīng)用

Building for mobile

Low Fidelity

Need to go fast!

Need to link screens together and show how they flow

為手機(jī)創(chuàng)作的

低保真的

需要快速產(chǎn)出的

需要把界面串起來，展現(xiàn)他們是如何聯(lián)動的。

Showing the flow of an app (Credit:New Signature)

展示了一個應(yīng)用的操作流

There are a ton of great tools available for this scenario. The best tools to use for this scenario are tools that can show case the flow of a whole app experience in a low fidelity way in a short amount of time. Great for tools our four objectives include:

在這個場景下，有很多的不錯的工具可以用。為這個場景使用最好的是那些——能夠低保真的短時間的展示整個應(yīng)用的操作流的軟件。完成我們四個目標(biāo)的偉大工具包括：

Invision

Marvel

Craft(by Invision, Plugin for Sketch)

Adobe XD

Flinto

Principle

Origami

UX Pin

Pixate

Scenario #2 —Low Fidelity Desktop Website or Web App

場景二  低保真的電腦問站或軟件

Building for the desktop browser (website)

Fidelity can be low

Need to go fast!

Need to link screens together and show how they flow

為電腦瀏覽器而做（網(wǎng)站）

可能是低保真的

需要快速產(chǎn)出的

需要把頁面串起來，且展示如何聯(lián)動的。

Showing the flow of a website (Credit:Jeremy Wells)

展示一個網(wǎng)站的操作流（歸功于：Jeremy Wells）

Tools are more a little more scarce for the desktop experience, as many prototyping tools tend to focus on mobile. Great tools for our four objectives include:

桌面體驗的工具不是很多，當(dāng)很多原型工具傾向于集中到移動端。為四個目標(biāo)的好工具包括：

Invision

Marvel

Flinto

Principle

Adobe XD

Keynote

UX Pin

Scenario #3?—?A Responsive Experience

場景三：一種響應(yīng)式體驗

Building a responsive website (mobile, tablet, desktop breakpoints)

創(chuàng)建一個響應(yīng)式網(wǎng)站（移動端，平板，桌面斷點(diǎn)）

Fidelity of the responsiveness needs to be fairly high

I don’t have a crazy deadline, but would like to be efficient

Need to link screens together and show how they flow, and show how the responsive experience breaks down

響應(yīng)性對保真度需要相當(dāng)高

我每一很瘋狂的最后期限，但是想要高效的

需要把界面串起來，展示他們?nèi)绾温?lián)動，并且展示如何作到的響應(yīng)性。

Showing the responsiveness of a website (Credit: Web Ascender)

展示一個響應(yīng)式網(wǎng)站（歸功于：Web Ascender）

Quick?—?a brief disclaimer: whenever a client asks me to demo "responsiveness"?—?I tend to try to reframe the conversation. Why must we prototype responsiveness? What’s the real goal? Can we show each modality separately? Prototyping responsiveness effectively can be very difficult without just going ahead and coding the front-end.

快速——簡潔的免責(zé)聲明：每當(dāng)客戶要求我做一個"響應(yīng)性"演示——我傾向于努力重塑對話。為何我們要原型可響應(yīng)性？真正目的是什么？我們可以分開展示每個模態(tài)嗎？沒有繼續(xù)進(jìn)行或前端的編碼，響應(yīng)性的原型設(shè)計是相當(dāng)困難的。

That being said, sometimes it’s necessary. So great tools for our four objectives include:

話雖如此，有時它是很有必要的。所以為了很好的實(shí)現(xiàn)四個目標(biāo)的工具包括：

Raw HTML/CSS/JS (true responsiveness)

Axure (static breakpoints)

UXPin (static breakpoints)

Scenario #4?—?A Specific Feature

場景四：一個特定的功能

Building a specific animation for a mobile app

Need a really high fidelity

I don’t have a crazy deadline, but would like to be efficient.

Need to show movement, element animation, and timing well?—?I’m not concerned about flow between pages

為移動端應(yīng)用，創(chuàng)建一個特定的動效

需要高保真效果

沒有限定期限，但是希望高效

需要展示運(yùn)動，元素動銷，和時間線——我不介意界面間的流動效果

Showing a specific feature animation using Principle (Credit:Anna Gerasymenko)

展示一個特定的功能動效，應(yīng)用的是Principle(歸功于:Anna Gerasymenko)

Prototyping a single animation can be a lot of fun, and I find that users find a ton of value in these little nuances,even when they don’t notice the animation happening.The overall experience will feel more pleasant and fluid when you take the time to "smooth the corners."

制作一個單獨(dú)的動畫很有趣，并且我發(fā)現(xiàn)，在這些細(xì)微差別中用戶發(fā)覺很多的價值，甚至他們沒有注意到動效發(fā)生。當(dāng)你花更多的時間來"打磨棱角"，整體經(jīng)驗會感覺更加愉悅且順暢。

Principle (fastest way to fake it)

Adobe After Effects

Raw HTML/CSS/JS

Flinto

Origami

Phonegap

Xcode

Framer

Scenario #5— High Fidelity Experience (Mobile or Desktop)

場景五：高保真體驗（移動端或桌面端）

Building for mobile and/or desktop

Must be as High Fidelity as possible

I have time to spend on this task

Need to show the flow of screens together while also showing high fidelity animations of screen elements and features

為移動端或桌面斷創(chuàng)建

一定要盡可能高保真

有時間做這個項目

需要展示屏幕間的流轉(zhuǎn)，同時也要展示高保真的屏幕元素和功能的動效

Showing high fidelity mobile flows that could just be real (Credit:Think Mobiles)

展示高保真移動端的流轉(zhuǎn)（來自于：Think Mobiles）

Sometimes your prototype needs to be really high fidelity while also showing an entire flow within the app. This is a pretty time intensive task, sometimes so time intensive that I may ask, "Why aren’t we just building this for real?"

有時你的原型需要很高保真，同事也展示應(yīng)用整體的流程。這個一個很花時間的項目，有時我會反問這種花時間的項目。"我們?yōu)槭裁床恢苯幼鰝€真的？"

If you need to build a high fidelity prototype that has interesting and unique animations and allows users to navigate between pages, creating a really authentic experience?—?then here are some great tools you can use.

如果你需要創(chuàng)建一個有意思，有獨(dú)特動效，用戶可以頁面間操作的，且有真切的體驗的，高保真原型——那么這里有一些很棒的工具你可以用。

Mobile

Proto.io

Principle

Flinto

Origami

PhoneGap

Framer

Xcode

Desktop

Raw HTML/CSS/JS

Principle

Flinto

Framer

Xcode

Don’t Commit to Just One Prototyping Tool

不要只囚禁在同一款原型工具

There are so many prototyping tools on the market. And this article by no means is meant to be an exhaustive list of prototyping tools. Instead, it is intended to just focus on a few of the most popular tools.

市場上有很多的原型工具。本文并不意味著是一個詳盡的原型工具列表。它想只聚焦于一些流行的工具而已。

The point is, instead of focusing on the tool, focus on the goals you have for the prototype. What do you need to communicate? What do you need to show? What do you need to test? What modalities must you build for? What fidelity is needed? How fast?

重點(diǎn)是，把重點(diǎn)放在你的原型目標(biāo)上，而不是聚焦在工具上。你需要傳達(dá)什么？你需要展示什么？你需要測試什么？你必須要做到什么樣的模態(tài)？需要什么樣的保真度？多快？

When you focus on the goals motivating the prototype in the first place, the tool to use will become apparent.

當(dāng)你聚焦在為達(dá)成目標(biāo)而做原型的時候，所要使用的工具會自動出現(xiàn)。

Ultimately, everyone should have experience with a wide breadth of prototyping tools. You need to be ready to use the right one when the need arises.

最終，人人都應(yīng)該有寬泛的原型工具使用經(jīng)歷。當(dāng)需要出現(xiàn)時，你要能夠使用最適合的那個。

In the end, prototyping is just about communicating something.

Whenever you approach prototyping, I’d encourage you to focus less on the act of prototyping and focus more on the reason why you’re doing it. What are you trying to achieve?

最后，原型只是關(guān)于溝通什么事情。

每當(dāng)你接觸原型制作，我建議你少些關(guān)注原型行為，而是多些聚焦在你為什么做這件事的原因上。你想要實(shí)現(xiàn)什么？

Often times I find myself prototyping a really high fidelity experience just for the sake of prototyping, instead of focusing on prototyping just the things that are needed to communicate and test the overall concept.

經(jīng)常，我發(fā)現(xiàn)我自己實(shí)現(xiàn)一個高保真體驗的原型只是為了原型本身，而不是聚焦在原型需要溝通和驗證整體創(chuàng)意的事情上。

Beware of prototyping just for the sake of prototyping! Prototypes exist for the sake of proving a concept, communicating an idea, or testing an approach. Everything else is wasted time.

需要提防 做原型只是為了原型本身這種情況！原型的存在是為了驗證一個創(chuàng)意，交流一個想法，或者測試一個方法。其他的只是在浪費(fèi)時間。