快速原型制造

by Anant Jain

通过Anant Jain

快速原型初学者指南 (A Beginner’s Guide to Rapid Prototyping)

您需要在7分钟(或更短的时间内)内完成快速原型制作的所有知识 (Everything you need to know about rapid prototyping in 7 minutes (or less))

The process of going from an idea to a product is a messy one. Learning how to prototype your idea, getting feedback, and iterating on it is the most critical skill anyone aspiring to build their own products should have. This is also one of the most significant parts of a UX Designer’s job.

从构思到产品的过程是一个混乱的过程。学习如何为您的想法制作原型，获取反馈并对其进行迭代，是任何有志于打造自己的产品的人都应具备的最关键的技能。这也是UX设计器工作中最重要的部分之一。

Prototypes come in many forms, from a rough sketch on paper to an interactive simulation that looks like the final product. This guide is for complete beginners who want to understand what Prototyping is all about.

原型有多种形式，从纸上的草图到看起来像最终产品的交互式模拟。本指南适用于想了解原型技术的完整初学者。

We’ll cover the meaning of a few terms related to rapid prototyping as well as the following:

我们将介绍与快速原型相关的一些术语的含义，以及以下内容：

什么是快速原型制作？ (What is Rapid Prototyping?)

Rapid Prototyping is an iterative process used to visualize what a website or an application will look like in order to get feedback and validation from users, stakeholders, developers, and designers.

快速原型开发是一个迭代过程，用于可视化网站或应用程序的外观，以便获得用户，利益相关者，开发人员和设计人员的反馈和验证。

When used well, rapid prototyping will improve the quality of your designs by enhancing communication between the various parties and reducing the risk of building something that no one wants.

如果使用得当，快速原型设计将通过加强各方之间的沟通并减少构建没人想要的东西的风险，从而提高设计质量。

您需要什么原型？ (What do you need to prototype?)

A prototype is not designed to be a fully functional version of a system, but is only meant to help visualize the user experience of the final product. As Google Ventures design partner Daniel Burka says:

原型并非设计为系统的功能齐全的版本，而只是旨在帮助可视化最终产品的用户体验。正如Google Ventures设计合作伙伴Daniel Burka所说：

The ideal prototype should be “Goldilocks quality.” If the quality is too low, people won’t believe the prototype is a real product. If the quality is too high, you’ll be working all night, and you won’t finish. You need Goldilocks quality. Not too high, not too low, but just right.

理想的原型应该是“金块品质”。如果质量太低，人们将不会相信原型是真正的产品。如果质量太高，您将整夜工作，并且无法完成。您需要Goldilocks的质量。不太高，不太低，但恰到好处。

You can prototype not just screens, apps, or websites, but almost anything. Prototyping is an excellent method to test the following (examples provided):

您不仅可以制作屏幕，应用程序或网站的原型，还可以制作任何东西的原型。原型制作是测试以下各项的绝佳方法(提供了示例)：

New functionalities: Prototype Instagram Stories in the Instagram app (before they were launched)

新功能：在Instagram应用程序中原型Instagram Stories(在发布之前)
Changes in a workflow: Prototype Medium’s new publishing flow after the introduction of paid memberships

工作流程中的变化：引入付费会员资格后，Prototype Medium的新发布流程
New technology: Prototype a self-driving car journey!

新技术：原型自动驾驶汽车之旅！
New interface: Prototype Apple Watch interface (when it first launched)

新界面：原型Apple Watch界面(首次启动时)

So, now you understand what rapid prototyping is for. But how do you do it? We’ll cover that next.

因此，现在您了解了快速原型的用途。但是你怎么做呢？接下来我们将介绍。

快速原型制作过程 (The Rapid Prototyping Process)

Rapid Prototyping involves a three-step process, repeated as many times as needed:

快速原型涉及三个步骤，并根据需要重复多次：

Prototype: Create a visual mock-up of your solution or interface.

原型：创建解决方案或界面的可视化模型。
Review: Share the prototype with users and evaluate if it meets their needs and expectations.

审查：与用户共享原型，并评估其是否满足他们的需求和期望。
Refine: Based on this feedback, identify areas that need to be improved or clarified.

完善：根据此反馈，确定需要改进或阐明的领域。

A prototype will usually start with a very simple mock-up of key areas and become more complex with each iteration as you gather more data from user feedback.

原型通常从关键区域的非常简单的模型开始，随着您从用户反馈中收集更多数据，每次迭代都会变得更加复杂。

您的原型中应包含多少？ (How much should you include in your prototype?)

Focus on the critical functions that will be used most often. The point of rapid prototyping is to show how a feature will work or what the design will look like without prototyping the entire product in detail. Remember, we’re aiming for the Goldilocks quality!

关注最常使用的关键功能。快速原型制作的目的是在不详细设计整个产品原型的情况下，展示功能的工作原理或设计外观。请记住，我们的目标是Goldilocks的品质 ！

Prototype one User Flow at a time. Instead of going screen by screen, base your prototype on a story that will take the user through the areas that you want to prototype. This way, you will get more accurate feedback because your prototype will reflect real life scenarios. For instance, prototype the “sign-up/sign-in/reset password” flow together.

一次原型制作一个用户流。 无需逐个屏幕地浏览，而是将原型建立在一个故事上，该故事将使用户遍历要创建原型的区域。这样，您将获得更准确的反馈，因为您的原型将反映现实生活中的情况。例如，一起制作“注册/登录/重置密码”流程的原型。

Also, remember to have an iteration plan in mind. A good rule of thumb when planning iterations is to start broad and then work your way towards a more detailed version of the solution. As you iterate, the fidelity of your prototypes, as well as how much you include in them, will increase.

另外，请记住要有一个迭代计划 。计划迭代时，一个好的经验法则是从头开始，然后逐步开发更详细的解决方案。当您进行迭代时，原型的保真度以及其中包含的数量将会增加。

But wait, what is this fidelity?

但是等等，这是什么保真度？

原型的保真度是什么意思？ (What is meant by the fidelity of a prototype?)

Fidelity refers to how closely a prototype matches the final product or solution. You can choose from a lot of different options and levels of accuracy, depending on the stage of the process and the goal of the prototype.

保真度是指原型与最终产品或解决方案的匹配程度。您可以根据过程的阶段和原型的目标，从多种不同的选项和精度级别中进行选择。

视觉(速写与样式) (Visual (Sketched vs. Styled))

Layout and design are the most noticeable aspects of a prototype’s fidelity. If a prototype is produced with a high level of visual fidelity from the beginning, users will tend to focus on visual rather than functional details, which would distract from the primary goal of the early stages of prototyping.

布局和设计是原型保真度最明显的方面。如果从一开始就生产出具有高视觉保真度的原型，那么用户将倾向于专注于视觉而非功能细节，这会分散原型开发早期阶段的主要目标。

功能性(静态与交互式) (Functional (Static vs. Interactive))

Should the prototype be static, or does it have to look fully functional (interactive)? Both versions have pros and cons: static prototypes are simpler and quicker to implement, while interactive ones can be used later for usability testing and user training.

原型应该是静态的，还是必须具有完整的功能(交互式)？两种版本都有其优缺点：静态原型更容易实现，而交互式原型可以在以后用于可用性测试和用户培训。

内容(Lorem ipsum与真实内容) (Content (Lorem ipsum vs. real content))

In the early stages of prototyping, standard “lorem ipsum” content can be useful to avoid distracting the user so they can focus on providing functional feedback instead of commenting on changes in the text.

在原型制作的早期阶段，标准的“ lorem ipsum”内容可能会有用，以避免分散用户的注意力，因此他们可以专注于提供功能反馈，而不是评论文本中的更改。

However, as the prototyping process continues, evaluate the need to replace dummy text with real content so users can get a feel for how it affects the overall design.

但是，随着原型制作过程的继续，请评估是否需要用真实内容替换伪文本，以便用户可以了解其如何影响整体设计。

Using real labels is also an excellent opportunity to test whether your “copy” is working well or not. “Copy” is just a fancy term for text labels and information you see on the screen, like calling the “Publish” button “Publish,” “Post,” “Send,” “Done” or something else.

使用真实标签也是一个很好的机会来测试您的“副本”是否运作良好。 “复制”只是您在屏幕上看到的文本标签和信息的一个奇特名词，例如，将“发布”按钮称为“发布”，“发布”，“发送”，“完成”或其他。

存在哪些保真度级别？ (What fidelity levels exist?)

Low-Fidelity: Low-Fi methods like pencil-and-paper sketches produce static prototypes with low visual and content fidelity that allow for quick and easy changes. This forces the user to focus on functionality and on how they will use the system instead of what it looks like.

低富达：低保方法，如铅笔和纸草图产生具有低视觉和内容保真度允许快速和容易变化的静态原型。这迫使用户将精力集中在功能以及他们将如何使用系统而不是外观上。
Medium-Fidelity: Computer-based tools like Visio produce what we can call medium-fidelity prototypes in the form of wireframes and workflows. This level of fidelity is used to demonstrate a system’s behavior, to determine if user needs are being met, and to evaluate the user experience.

中保真度：诸如Visio之类的基于计算机的工具以线框和工作流的形式产生了我们所谓的中保真度原型。此级别的保真度用于演示系统的行为，确定是否满足用户需求并评估用户体验。
High-Fidelity: High-fidelity prototypes can sometimes be so realistic that they are often mistaken for the real product. They are also much more time-consuming to produce. Tools like InVision, Sketch, Figma, Adobe XD, Framer, and so on allow non-technical users to create high-fidelity prototypes. Although these cannot be converted into usable code, they can be very handy later for usability testing or user training purposes.

高保真度：高保真度原型有时可能是如此逼真，以至于经常被误认为是真实产品。它们的生产也非常耗时。 InVision，Sketch，Figma，Adobe XD，Framer等工具可让非技术用户创建高保真原型。尽管这些不能转换为可用的代码，但是它们在以后进行可用性测试或用户培训时会非常方便。

您如何选择要在哪个保真度级别上进行原型制作？ (How do you select which fidelity level to prototype on?)

Most of the time, designs are best evaluated by starting with a rough sketch, then moving on to higher fidelity levels depending on the system’s complexity and requirements.

在大多数情况下，最佳设计是通过从粗略的草图开始进行评估，然后根据系统的复杂性和要求进入更高的保真度级别。

Sometimes, your choice might be guided by client requirements or areas of focus. For example, if you want to evaluate the visual impact of an interface change, you might want to go with a styled design instead of a rough sketch. Or if your solution is message focused, you may decide to use real content instead of standard “lorem ipsum” placeholder text.

有时，您的选择可能会受到客户要求或关注领域的指导。例如，如果要评估界面更改的视觉影响，则可能需要采用样式设计而不是粗略的草图。或者，如果您的解决方案是针对消息的，则可以决定使用实际内容，而不是标准的“ lorem ipsum”占位符文本。

您如何选择原型制作工具？ (How do you choose a prototyping tool?)

There is a wide variety of tools available for prototyping depending on your needs and approach. Before choosing a tool, here are a few questions to ask:

根据您的需求和方法，可以使用多种工具进行原型制作。在选择工具之前，这里有几个问题要问：

How much time would it take to learn how to use the tool?

学习如何使用该工具需要花费多少时间？
Does it support prototypes for the needs of my product (web, software applications, mobile apps, some new technology, and so on)?

它是否支持满足我的产品(网络，软件应用程序，移动应用程序，某些新技术等等)需求的原型？
Does the tool allow me to share my prototypes with others and gather their feedback?

该工具是否允许我与他人共享原型并收集他们的反馈？
How easy is it to make changes to the prototype?

更改原型有多容易？
Can I use pre-defined templates and stencils with this tool?

我可以在此工具中使用预定义的模板和模具吗？

原型最佳实践：做与不做 (Prototyping best practices: do’s and don’ts)

要做的是： (Do’s:)

Work with users and stakeholders to get the most feedback and engage them in the ownership of the final product

与用户和利益相关者合作，以获取最大的反馈并使他们参与最终产品的所有权
Set expectations early by making sure the users and stakeholders know that prototyping is a way to get answers to specific questions, and does not represent the finished product.

通过确保用户和利益相关者知道原型制作是获取特定问题答案的一种方式，尽早设定期望 ，并且不代表成品。
Make your high-fidelity realistic (including response delays) so that users and stakeholders are not disappointed when they compare it with the final product.

使您的高保真度逼真 (包括响应延迟)，以便用户和利益相关者将其与最终产品进行比较时不会感到失望。
Save templates and stencils to reuse on future projects.

保存模板和模具以在以后的项目中重复使用。

不要： (Don’ts:)

Don’t prototype features that won’t be in the final product不要制作最终产品中没有的原型功能
Don’t be a perfectionist. Good enough is your friend. The goal of rapid prototyping is to give everyone a common ground.不要成为完美主义者。你的朋友够好了。快速原型制作的目的是使每个人都有共同点。
Don’t prototype everything!不要制作所有东西的原型！

If your’re wondering how you should go about testing out your prototypes, read my post on Usability Testing here:

如果您想知道应该如何测试原型，请在此处阅读有关可用性测试的文章：

The well-kept secret behind great UX: Usability TestingWhether you only have a prototype or a full-fledged product, it’s a really good idea to run monthly usability tests…medium.freecodecamp.org

出色的UX背后的秘密秘诀：可用性测试 无论您只是拥有原型产品还是成熟的产品，每月进行一次可用性测试都是一个好主意…… medium.freecodecamp.org

Thanks for reading this quick guide. This was originally published as part of the UX Design course on Commonlounge, a platform that has courses with small bite-sized lessons like these on topics ranging from Django to Machine Learning that deliver the most value for the time you put in.

感谢您阅读此快速指南。它最初是在Commonlounge上的UX Design课程的一部分中发布的， Communlounge是一个平台，该平台提供的课程很小，涉及的主题从Django到Machine Learning ，在您投入的时间上提供了最大的价值。

You learn by working on real-world projects and getting feedback from industry mentors. You should check it out here!

您可以通过从事实际项目并从行业顾问那里获得反馈来学习。您应该在这里查看！

翻译自: https://www.freecodecamp.org/news/a-beginners-guide-to-rapid-prototyping-71e8722c17df/