In this article, I explore why it’s important to prototype. I’ll be looking at how the tools that we have used over the years have changed how we design digital products. And I’ll give you my view of how prototyping is evolving to help us build the products of the future.

在本文中，我将探讨原型的重要性。 我将研究多年来使用的工具如何改变了我们设计数字产品的方式。 我将向您介绍样机如何发展以帮助我们开发未来产品。

Let’s start by defining what prototyping is. According to the Cambridge dictionary prototyping is:

让我们开始定义什么是原型。 根据剑桥词典，原型是：

“a first full-scale and usually functional form of a new type or design of a construction.”

“一种新型的或建筑设计的第一个完整的，通常是功能性的形式。”

Wikipedia has this to say:

维基百科说：

A prototype is an early sample, model, or release of a product built to test a concept or process.[1] It is a term used in a variety of contexts, including semantics, design, electronics, and software programming. A prototype is generally used to evaluate a new design to enhance precision by system analysts and users.[2] Prototyping serves to provide specifications for a real, working system rather than a theoretical one.[3] In some design workflow models, creating a prototype (a process sometimes called materialization) is the step between the formalization and the evaluation of an idea.[4]

原型是为测试概念或过程而构建的产品的早期样本，模型或发布。 [1]这是一个在各种上下文中使用的术语，包括语义 ， 设计 ， 电子学和软件编程 。 原型通常用于评估新设计，以提高系统分析人员和用户的精度。 [2]原型设计旨在为实际的工作系统(而非理论上的系统)提供规范。 [3]在某些设计工作流程模型中，创建原型(有时称为实现的过程)是在形式化和评估想法之间的步骤。 [4]

回顾历史 (Prototyping back in history)

The idea of prototyping dates back many centuries in human history where inventors would create working scale models to help them explore and experiment. Leonardo Da Vinci is now almost more famous for inventions than he is for his art. Leonardo explored many ideas that have since become a reality today such as airplanes, parachutes, tanks, and even robots!

原型的想法可以追溯到人类历史上的多个世纪，在此期间，发明人将创建工作规模模型来帮助他们进行探索和实验。 莱昂纳多·达·芬奇(Leonardo Da Vinci)现在因发明远胜于他的艺术而闻名。 莱昂纳多(Leonardo)探索了许多至今已成为现实的想法，例如飞机，降落伞，坦克甚至是机器人！

If you look at the Wright brothers who through an iterative process of trial and error finally created the first the aeroplane which by definition was the prototype. In this case, the Wright brothers were not working on a scale model but the real thing, we could compare this to the early days of software program testing where developers simply built a version of the software and then iterated on it. At the bleeding edge of technology, we find this typically happens with prototyping tools being created further down the line.

如果您看一下赖特兄弟，他们经过反复的反复试验，最终创造出了第一架飞机，从定义上说，这是原型机。 在这种情况下，赖特兄弟不是在开发规模模型，而是在开发真实模型，我们可以将其与早期的软件程序测试进行比较，在测试中，开发人员只需构建软件的一个版本，然后对其进行迭代。 在技​​术的最前沿，我们发现这种情况通常发生在线下创建原型工具的时候。

The truth of the matter is that we have been following an iterative process of trial end error to create augmentations to help us achieve things that we otherwise can’t do solely with what we’re born with and prototyping has always been part of our process.

事实的真相是，我们一直在遵循反复的试验结束错误过程来创建增强功能，以帮助我们实现原本无法与生俱来的事情，而原型制作一直是我们过程的一部分。

快速成型 (Rapid prototyping)

Up to now humans have been prototyping manually with scale or fully working models but that was to change with the invention of computers.

到目前为止，人类一直在使用规模或完全正常工作的模型进行手动原型制作，但是随着计算机的发明，这种情况发生了变化。

Fast forward to the ’60s and an engineering professor called Herbert Voeckler explored the possibilities of using computers to control the factory floor machine tools. This ended up with Voeckler developing the first mathematical theories and algorithms which formed the basis of the 3D applications that we use today. 3D software has since been used to design mostly all things mechanical from toy cars to skyscrapers. The first instance where computer-aided design gave us the ability to rapidly prototype our ideas in the virtual world of computers.

进入60年代，一位名叫赫伯特·沃克勒(Herbert Voeckler)的工程教授探索了使用计算机控制工厂车间机床的可能性。 最终，Voeckler开发了第一个数学理论和算法，这些数学理论和算法构成了我们今天使用的3D应用程序的基础。 此后，从玩具车到摩天大楼，3D软件一直被用于设计所有机械方面的东西。 计算机辅助设计使我们能够在计算机的虚拟世界中快速原型化我们的思想的实例。

Later on, in the late ’80s, Carl Deckard pioneered layer-based manufacturing, wherein he thought of building a model layer by layer in the manufacturing process which had a wide range of applications with amazing results.

后来，在80年代后期，卡尔·德卡德(Carl Deckard)率先开发了基于层的制造方法，其中他想到了在制造过程中逐层构建模型的方法，该模型具有广泛的应用范围，并取得了惊人的效果。

Voeckler and Deckard paved the way for this new industry known as rapid prototyping and the revolutionised the manufacturing process. Now, 3D software and 3D printing allows us to not only rapidly prototype but actually manufacture products in our own home.

Voeckler和Deckard为这种称为快速原型制作的新行业铺平了道路，并彻底改变了制造Craft.io。 现在，3D软件和3D打印使我们不仅可以快速制作原型，而且可以在自己家里实际制造产品。

个人电脑的兴起 (The rise of the personal computer)

In the 1970s computers were mainly used by I.T professionals and hobbyists but this changed with the advent of the personal computer in the early ’80s. The Apple Macintosh and the Microsoft Windows operating system partnered with IBM brought affordable personal computing to the masses and effectively made everyone a potential computer ‘user’.

在1970年代，计算机主要由IT专业人员和业余爱好者使用，但是随着80年代初个人计算机的出现，这种情况发生了变化。 与IBM合作的AppleMacintosh和MicrosoftWindows操作系统为大众带来了负担得起的个人计算，并有效地使每个人都成为潜在的计算机“用户”。

These untrained users didn’t know how to use the previously complex applications. In parallel, the professional software industry which made programs for things like air traffic control was becoming unmanageably complex which led to something that became known as the software crisis. This crescendoed in the 1980s and it was clear that the way forward for computing and software was to understand and better empower users. The success of achieving ease of use relied heavily on iterative prototyping and empirical testing.

这些未经培训的用户不知道如何使用以前复杂的应用程序。 同时，为诸如空中交通管制之类的程序编写程序的专业软件行业变得难以管理，从而导致了所谓的软件危机。 这种情况在1980年代逐渐加深，很明显，计算和软件的前进方向是理解并更好地赋予用户权力。 实现易用性的成功在很大程度上取决于迭代原型和经验测试。

As a reaction to this, the discipline of Human-Computer Interaction was founded. Initially, this formed as a department within computer science which encompassed cognitive science and human factors engineering. But soon grew out of that to become a discipline in its own right.

作为对此的回应，建立了人机交互学科。 最初，这是一个计算机科学系，涵盖认知科学和人为因素工程。 但是很快就发展成为一种学科。

原型方法 (Prototyping methodologies)

With usability testing now established within software development, many processes were developed to help understand how people were interacting with software. The need to ‘prototype’ was key to be able to test these ideas with users. Subsequently, two prototyping approaches were developed.

现在在软件开发中建立了可用性测试，开发了许多过程来帮助理解人们如何与软件进行交互。 “原型”的需要是能够与用户一起测试这些想法的关键。 随后，开发了两种原型方法。

一次性原型 (Throwaway prototyping)

Throwaway prototyping was the first methodology that was used in testing for computer systems and software. A small portion of a system was developed and then evaluated. User feedback was incorporated into the development of the main system with the prototype subsequently discarded. Prototypes were a means to an end to solve individual problems.

一次性原型是用于计算机系统和软件测试的第一种方法。 开发了系统的一小部分，然后进行了评估。 用户反馈被纳入主系统的开发中，随后原型被丢弃。 原型是解决个人问题的一种手段。

A form of throwaway prototyping that was used was the Paper prototype which started in the 1980s and was popular with companies such as IBM, Microsoft, and Honeywell. It is an incredibly cheap, easy and efficient way to start to test ideas. The great thing about this process is that it allowed the designer to focus on the problem and solutions without boundaries. The small amount of time investment made it easy to throw ideas away and have more of an unbiased view towards possible solutions.

使用的一种一次性原型制作方法是Paper原型，该原型始于1980年代，并在IBM，Microsoft和Honeywell等公司中很受欢迎。 这是开始测试想法的一种非常便宜，简单且有效的方法。 此过程的优点在于，它使设计人员可以无限制地专注于问题和解决方案。 少量的时间投入使您很容易抛弃想法，并对可能的解决方案持更公正的看法。

进化原型 (Evolutionary prototyping)

Rapid development techniques and better software tools gave rise to another method of prototyping. Evolutionary prototyping entailed refining a prototype through the process of iterative testing. Changes and additional functionality is added until a final product emerges. We can see that this method grew out of the augmentation that software itself gave us as it became quicker and easier to build real products rather than relying on fake ones.

快速的开发技术和更好的软件工具催生了另一种原型制作方法。 进化原型需要通过迭代测试的过程来完善原型。 添加更改和其他功能，直到出现最终产品。 我们可以看到，这种方法源于软件本身为我们提供的增强功能，因为它可以更快，更轻松地构建真实产品，而不是依赖假冒产品。

一次性与进化 (Throwaway versus Evolutionary)

The evolutionary method originally was conceived to evolve a large product feature or whole product whereas throwaway prototyping is used to concept initial ideas for a feature and to validate interest in that feature. Both have their place as part of a holistic user-centered design process and are not mutually exclusive.

最初，演化方法被认为可以演化大型产品特征或整个产品，而一次性原型则用于概念化特征的初始构想并验证对该特征的兴趣。 两者在整体以用户为中心的设计过程中都有自己的位置，并且并不相互排斥。

软件原型 (Software prototyping)

Macromedia Flash (Macromedia Flash)

The arrival of the internet brought with it a spike in software technologies and tools. The first one of note from a rapid prototyping perspective was Macromedia Flash. Flash enabled designers to build highly interactive applications that were deployed via its browser plugin. Flash become ubiquitous as a tool when the programming language ActionScript was incorporated which suddenly turned a tool that previously could only do linear animations into something that could create fully-featured applications.

互联网的到来带来了软件技术和工具的猛增。 从快速原型设计的角度来看，第一个注意事项是MacromediaFlash。 Flash使设计人员能够构建高度交互的应用程序，并通过其浏览器插件进行部署。 当合并了编程语言ActionScript时，Flash作为一种工具无处不在，这突然使以前只能将线性动画转换为可以创建功能齐全的应用程序的工具。

ActionScript was simple enough to learn and combined with a designer-friendly GUI became a powerful tool to deliver digital products on the web. Flash wasn’t a prototyping tool per se. It was a tool that designers could use to build real apps. Flash enabled designers to create working software fast which in turn created. designer software boom in the later 90’s and early '00s.

ActionScript简单易学，并且与易于设计的GUI结合使用，成为在网络上交付数字产品的强大工具。 Flash本身并不是原型工具。 设计人员可以使用它来构建真实的应用程序。 Flash使设计人员能够快速创建工作软件，然后依次创建工作软件。 在90年代末和00年代初，设计师软件蓬勃发展。

Flash inspired many of the tools we have today with its capabilities of integrating UI design, interaction, animation, and development together. Rather than being maligned, this tool should be celebrated as a precursor to modern-day prototyping software

Flash通过将UI设计，交互，动画和开发集成在一起的功能启发了我们今天拥有的许多工具。 该工具不应被视为恶意，而应被誉为现代原型软件的前身

微软幻灯片软件 (Powerpoint)

Around the same time as web design was growing so was UX. UX practitioners were from a very different background to web designers, mainly from HCI and research and so found the use of applications such as PowerPoint a good fit to help them imagine user journeys and information hierarchies. From a prototyping perspective, this gave rise to what we now refer to as the ‘click-thru’ prototype. UX practitioners could use these presentation tools to envision product experiences.

大约在网页设计发展的同时，UX也是如此。 UX从业者与Web设计人员的背景非常不同，主要是来自HCI和研究人员，因此发现使用PowerPoint等应用程序非常适合帮助他们想象用户的旅程和信息层次结构。 从原型的角度来看，这产生了我们现在称为“ click-thru”原型的东西。 UX从业人员可以使用这些演示工具来设想产品体验。

Part of practicing user-centered design was to test prototypes with users. And practitioners could test people using these basic click-thru’s which gave test participants more of a feel of using real software in comparison to paper prototyping.

练习以用户为中心的设计的一部分是与用户一起测试原型。 从业人员可以使用这些基本的点击式测试来测试人员，与纸质原型制作相比，这给测试参与者带来了更多使用真实软件的感觉。

科学位 (Science bit)

There’s a psychological shift when people think software is real rather than knowing that it is fake. Muscle memory plays a big part in how we perceive and use interface which is why presnting animations in poerpoint is bad anf testing on real devices is crucial.

当人们认为软件是真实的而不是知道它是假的时，就会发生心理转变。 肌肉记忆在我们如何感知和使用界面中起着重要作用，这就是为什么在popoint中演示动画会很糟糕，而在真实设备上进行测试至关重要。

So far the tools we had were separate, with UI being designed by the web designer in tools such as Photoshop or Macromedia Fireworks, while UX practitioners were using Powerpoint / Keynote/paper prototyping to create and test the user’s experience with their products.

到目前为止，我们使用的工具是分开的，UI由Web设计人员在诸如Photoshop或Macromedia Fireworks之类的工具中设计，而UX从业人员则使用Powerpoint / Keynote /纸张原型来创建和测试用户对其产品的体验。

The needs of the UX practitioner who had come from HCI and the UI designer who had come from Graphic and web design were going to further evolve the tools and converge the design practice within digital.

来自HCI的UX从业者以及来自Graphic和Web设计的UI设计师的需求将进一步发展工具，并将设计实践融合到数字领域。

在浏览器中设计 (Designing in the browser)

Another form of prototyping that became popular was the design in the browser movement. The web was powered by two declarative languages and one programming language. These were HTML, CSS, and Javascript. Designers started to pick up HTML and CSS fairly easily and so the ability to rapid prototype in the browser started to happen.

原型制作的另一种流行形式是浏览器运动中的设计。 网络由两种声明性语言和一种编程语言提供支持。 这些是HTML，CSS和Javascript。 设计师开始相当容易地获取HTML和CSS，因此开始出现在浏览器中快速原型的能力。

所见即所得的编辑器 (WYSIWYG editors)

Web tools started to appear hiding away the code to make it easier for designers to create websites themselves with tools such as Golive CyberStudio and Macromedia Dreamweaver. these tools allowed designers to create real websites that could be used for testing that could be shared privately to gain feedback for deployment to a live server.

网络工具开始隐藏代码，以使设计人员更容易使用Golive Cyber​​Studio和Macromedia Dreamweaver等工具创建网站。 这些工具使设计人员可以创建可用于测试的真实网站，这些网站可以私下共享以获取部署到实时服务器的反馈。

Similarly, tools stated to appear for with a focus on HCI and usability. Low fidelity prototypes and specification capabilities that were part of some of the core tenants of HCI were built in.

同样，据称出现的工具着重于HCI和可用性。 内置了低保真原型和规范功能，它们是HCI某些核心租户的一部分。

Axure RP (Axure RP)

One of the first of these was Axure RP (Rapid Prototyping) was created. Below is a quote from Axure’s website.

其中的第一个是Axure RP(快速原型制作)。 以下是Axure网站的报价。

“In 2002, we were working for a start-up in the Bay Area, and found ourselves repeatedly frustrated by limitations of the typical software development life cycle: product teams had difficulty evaluating their solutions before writing specifications, and developers didn’t understand (or read) the specifications they were given. The results ranged from inefficiency to compromised products. Having worked as project managers and developers, we knew both sides of the experience — we lived the pain.

“ 2002年，我们在湾区的一家初创公司工作，结果发现我们一再受到典型软件开发生命周期的局限所困扰：产品团队在编写规范之前难以评估其解决方案，而开发人员也不了解(或阅读)给出的规格。 结果从低效率到受损产品不等。 在担任项目经理和开发人员之后，我们了解了经验的两面-我们度过了痛苦。

We started Axure to discover how to make software projects better. While others were coming up with extreme new approaches to shift responsibility in the development process, we believed the right people were doing the right job — they just needed better tools to do it. We decided to create a simple tool that would allow non-programmers to build interactive prototypes with documentation.

我们启动Axure来发现如何使软件项目更好。 当其他人提出极端的新方法来转移开发过程中的责任时，我们相信合适的人在做正确的工作-他们只是需要更好的工具来做到这一点。 我们决定创建一个简单的工具，允许非程序员使用文档构建交互式原型。

The product was called RP, for Rapid Prototyping. Its features allowed for a different approach to software projects.”

该产品称为RP，用于快速原型制作。 它的功能允许对软件项目采用不同的方法。”

Axure RP was a tool that was favored by UX practitioners. with the focus on how the software should work rather than its visual design. Practitioners could create wireframe interactive experiences together with a subset of javascript for logic and conditions and was the first tool since Flash to merge a design-friendly GUI with a code like capabilities. The code itself was hidden in favor of a visual programming builder where the UX practitioner could choose plain English options and the Javascript would be written under the hood. Still, an understanding of basic programming paradigms was needed such as conditions and variables but only at a very basic level. Axure still exists today as the tool of choice for many UX professionals.

Axure RP是UX从业者所青睐的工具。 重点关注软件的工作方式，而不是其视觉设计。 从业人员可以创建线框交互式体验，以及用于逻辑和条件的部分JavaScript，这是自Flash以来第一个将设计友好的GUI与类似功能的代码合并的工具。 该代码本身被隐藏起来，以供可视化编程构建器使用，其中UX从业人员可以选择简单的英语选项，而Javascript将在后台进行编写。 仍然需要了解基本的编程范例，例如条件和变量，但仅在非常基本的层次上。 今天，Axure仍然是许多UX专业人士的首选工具。

What Axure delivered was a way of prototyping as a real deliverable in the digital design process, a living document that could be played with and referenced by engineers.

Axure交付的是一种在数字设计过程中作为真实交付物进行原型制作的方法，这是一种可供工程师播放和参考的实时文档。

基调 (Keynote)

In 2003 Keynote was born, Apple’s answer to PowerPoint and Presentation software evolved with animated transitions. Apple’s Keynote brought with it the Magic Move feature which allowed the morphing of one object to another.

Keynote诞生于2003年，Apple对PowerPoint和Presentation软件的回答随着动画过渡而发展。 Apple的Keynote带有Magic Move功能，该功能允许将一个对象变形为另一个。

Whilst it wasn’t designed for prototyping at all, designers did use it to design software products. the ability to add navigation links together with the magic move feature made it trivial to stitch together something that looked like real software.

尽管它根本不是为原型设计的，但设计师确实使用它来设计软件产品。 将导航链接与魔术移动功能一起添加的功能使将看起来像真实软件的东西缝合在一起变得轻而易举。

后遗症 (After Effects)

When the iPhone was released in 2007 it changed the landscape of digital product design. Advancements it made in hardware interface design with its touch screen and multi-gestures caused designers to ponder how they might design these motion-oriented experiences.

当iPhone在2007年发布时，它改变了数字产品设计的格局。 它通过触摸屏和多手势在硬件界面设计方面取得的进步使设计师思考如何设计这些面向运动的体验。

Designers turned to After Effects to prototype how these interfaces might look. After Effects helped to evolve motion design as a key part of a holistic user experience something that no tool since Flash could offer

设计人员求助于After Effects，以原型化这些界面的外观。 After Effects帮助将运动设计发展为整体用户体验的关键部分，这是Flash无法提供的任何工具

One of the main problems using After Effects was that it’s a passive motion tool. You couldn’t create an interactive prototype with it but it did help fuel ideas about what an interaction design could and should be included. I wonder if Google’s Material Design would have come to pass without the extensive experimentation that came from designers using After Effects.

使用After Effects的主要问题之一是它是一种被动运动工具。 您无法使用它创建交互式原型，但是它确实有助于激发人们关于可以和应该包括哪些交互设计的想法。 我想知道，如果没有使用After Effects的设计师进行广泛的试验，Google的Material Design是否能够通过。

UX and UI Design, the ongoing conundrum

UX和UI设计，持续的难题

You can see that tools such as Director, Flash and After Effects very much drove the discipline of interaction design from a visual design perspective, while paper prototyping, presentation software and UX tools like Axure have driven the discipline of HCI. I see these as the humble beginings of the separation of UX and UI design. What’s interesting now is how they are now converging. Both of these disciplines are inexorably linked to each other and are in fact are part of any digital product design course that is taught today.

您可以看到，Director，Flash和After Effects等工具从视觉设计的角度极大地推动了交互设计的发展，而纸张原型，演示软件和UX工具(如Axure)推动了HCI的发展。 我将这些视为UX和UI设计分离的拙劣开端。 现在有趣的是它们现在如何融合。 这两个学科之间紧密地联系在一起，并且实际上是当今所教授的任何数字产品设计课程的一部分。

视觉 (InVision)

In 2011 Carl Valberg was running a small design and development shop. He could see that through a specific client that the requirements process was broken. Valberg realised that he needed a way for everyone to collaborate and so he and his team prototyped InVision (yes even prototyping tools need prototyping ), which allowed the designers to share basic wireframes with the whole team and allow everyone to collaborate. InVision was born and has become the entry-level tool for prototyping low fidelity user journeys. Its main strength has been in its collaborative capabilities rather than interaction design features but still, it plays an important part in facilitating a prototyping culture and helped us start to move away from the previous static design approach. One of the things that InVision gave us was an easy way to prototype for mobile with an InVision app freely available to download on both iOS and Android. Users could now try out mobile app prototypes ‘on device’ which was a huge leap forward for mobile design specifically.

2011年，卡尔·瓦尔伯格(Carl Valberg)经营着一家小型设计和开发店。 他可以通过一个特定的客户看到需求流程被打破了。 Valberg意识到他需要一种让每个人都可以进行协作的方式，因此他和他的团队对InVision进行了原型设计(是的，甚至原型工具也需要原型，)，这使设计师可以与整个团队共享基本线框，并允许每个人进行协作。 InVision诞生了，并且已经成为用于原型设计低保真用户旅程的入门级工具。 它的主要优势在于协作能力，而不是交互设计功能，但它仍然在促进原型文化中发挥了重要作用，并帮助我们开始摆脱以前的静态设计方法。 InVision提供给我们的一件事是使用InVision应用程序免费制作移动设备原型的简便方法，该应用程序可在iOS和Android上免费下载。 用户现在可以在“设备上”尝试移动应用原型，这对于移动设计而言是一个巨大的飞跃。

像素，原理和折纸 (Pixate, Principle, and Origami)

Things started to hot up in the mobile app space. With mobile apps becoming more advanced the need to design more realistic prototypes also increased. Coding an app was no trivial task. This wasn’t the web with easy to learn HTML and CSS. We were now in the realm of ‘real software’. Java and C based languages such as Objective C for iOS were hugely complex and so prototyping with real code became less and less of an option.

事情开始在移动应用程序领域升温。 随着移动应用程序变得越来越先进，设计更逼真的原型的需求也在增加。 对应用程序进行编码并不是一件容易的事。 这不是易于学习HTML和CSS的网络。 我们现在处于“真实软件”领域。 基于Java和C的语言(例如iOS的Objective C)非常复杂，因此使用真实代码进行原型制作的选择越来越少。

Three contrasting tools came to the market to help answer this need. Pixate was a tool that, like Axure had rudimentary logic capabilities. In Pixate you could perform interactions based on certain conditions but Pixate also was a motion design tool that could create smooth animations that felt like animations in real apps; something that users of mobile apps had come to expect. Pixate was value-based which meant that you added numerical values for properties you wised to change such as opacity, speed, and duration rather than via a timeline such as what was used in Flash or After Effects. The key element here and Pixate’s selling point was its logic and conditional capabilities.

三种对比工具进入市场，以帮助满足这一需求。 像Axure一样，Pixate是具有基本逻辑功能的工具。 在Pixate中，您可以根据特定条件执行交互，但是Pixate还是一种运动设计工具，可以创建流畅的动画，就像真实应用中的动画一样。 移动应用程序用户所期望的东西。 像素化是基于值的，这意味着您为明智的更改属性添加了数值，例如不透明度，速度和持续时间，而不是通过时间线(例如Flash或After Effects中使用的时间线)添加了数值。 Pixate卖点的关键要素是其逻辑和条件功能。

In contrast to Pixate, there was Principle. Principle’s focus was motion design and ease of use. It borrowed Keynotes’s magic move concept and put it on steroids. Without any specific motion design knowledge designers could create cool custom animations. On top of that, they could execute these on interactions such as tap and swipe. Because of Principle’s ease of use and rapid prototyping capabilities this tool became incredibly popular with UI designers.

与Pixate相反，有Principle。 Principle的重点是运动设计和易用性。 它借用了Keynotes的神奇动作概念并将其放在类固醇上。 没有任何特定的运动设计知识，设计人员就可以创建很酷的自定义动画。 最重要的是，他们可以在交互中执行这些操作，例如点击和滑动。 由于Principle的易用性和快速的原型制作功能，该工具在UI设计人员中变得非常受欢迎。

Origami is what is called a ‘node-based’ interaction design tool that was created on top of a Mac tool called Quartz Composer (a tool which was used for creating screensavers for Mac). Facebook extended Composer with Origami and started using it to prototype new Facebook features. The node-based interface was very unfamiliar for designers and a bit divisive but it did allow you to push your prototypes to your mobile device and like Pixate its ability to construct complex logic was its main selling point.

折纸是所谓的“基于节点的”交互设计工具，它是在称为Quartz Composer的Mac工具(用于为Mac创建屏保的工具)上创建的。 Facebook用Origami扩展了Composer，并开始使用它来原型化Facebook新功能。 基于节点的界面对于设计人员来说是非常陌生的，并且有些分歧，但是它确实允许您将原型推送到移动设备上，并且像Pixate一样，其构造复杂逻辑的能力是其主要卖点。

All of these tools still fell into the ‘throwaway prototype’ methodology although they were also pushing us into being able to create more realistic hi-fidelity prototypes even more rapidly. The advanced capabilities of these tools pushed prototyping squarely into hi-fidelity; especially with a lot of UI assets already designed.

尽管所有这些工具也促使我们能够更快地创建更逼真的高保真原型，但它们仍然属于“一次性原型”方法中。 这些工具的高级功能将原型直接推向了高保真度。 特别是已经设计了很多UI资产的情况。

UI creation and prototyping were still separate at this point but that started to change. InVision had up to this point been the go-to tool for simple click-thru’s but then other tools started to roll this functionality in. It made sense that if you were already creating your product screens that you would just extend these tools capabilities to stitch the screens together and that’s what happened.

此时，UI的创建和原型制作仍然是分开的，但是开始有所改变。 到目前为止，InVision一直是用于简单单击的必备工具，但随后其他工具开始使用此功能。有意义的是，如果您已经在创建产品屏幕，则只需扩展这些工具的功能即可进行拼接屏幕放在一起，就是这样。

Sketch famously had a plugin architecture that drove some very innovative extensions and one that caught everyone’s eye was Silver. Silver enabled the similar functionality that InVision did but right inside of Sketch. Later Sketch started to develop its own native prototyping functionality and together with the recent push into the cloud-enabled designers to do UI creation and low fidelity interaction design in a single tool. Figma has recently also joined the party by offering a similar ability to create click-thru prototypes.

Sketch著名的插件体系结构带来了一些非常创新的扩展，而Silver引起了所有人的关注。 Silver启用了InVision所具有的类似功能，但仅在Sketch内部。 之后，Sketch开始开发自己的本机原型功能，并且最近将其推向支持云的设计器，以便在单个工具中进行UI创建和低保真交互设计。 Figma最近还通过提供类似的功能来创建点击原型，从而加入了该党。

Adobe XD took a slightly more advanced tact. Its built-in prototyping functionality is similar to that of Principle with a magic move like animation feature. There is a clear evolution of tools starting to converge where designers can design both UI and how it works in a single tool.

Adobe XD采取了更高级的策略。 它的内置原型制作功能类似于Principle的功能，具有神奇的动作，例如动画功能。 工具的明显发展开始融合，设计人员可以在其中设计UI以及在单个工具中如何工作。

成帧器X和ProtoPie (Framer X and ProtoPie)

Framer X is a prototyping tool that arguably represents the most flexibility when it comes to what can be achieved. Framer X comes in two parts. The first part is the UI design IDE which like Sketch, Figma and Adobe XD enables you to draw all of your UI graphics. What’s nice about Framer is how it integrates its basic prototyping functionality. You can draw and start building your prototype as you go.

Framer X是一个原型工具，可以说是实现目标时最灵活的工具。 成帧器X分两部分。 第一部分是UI设计IDE，它类似于Sketch，Figma和Adobe XD，使您能够绘制所有UI图形。 Framer的优点在于它如何集成其基本原型功能。 您可以随时绘制并开始构建原型。

Designing and building liquid layouts is a breeze and enables designers to create in an environment that feels like you are creating a live experience. Unlike Adobe XD you can go even further with Framer and prototype a product that would be hard to distinguish from the real thing.

设计和构建液体布局轻而易举，使设计师能够在仿佛您正在创造现场体验的环境中进行创作。 与Adobe XD不同，您可以使用Framer进一步开发并创建难以与真实产品区分开的产品原型。

Unfortunately, there’s a but. To achieve these advanced interactions requires the designer to learn and understand CSS and the JavaScript library called React. There’s a free store where developers have coded ready to use components where you can find a lot of prerolled functionality but I would say it’s fair to say that at some point you’re going to need to code. Framer X is in its infancy but it made some massive strides forwards in terms of the direction design tool needs to evolve towards in the future.

不幸的是，有一个。 要实现这些高级交互，设计人员需要学习和理解CSS和称为ReactJavaScript库。 有一个免费商店，开发人员已编写了可以使用的组件的编码，可以在其中找到许多预卷功能，但是我可以说在某个时候您需要编码。 Framer X尚处于起步阶段，但在未来设计工具的发展方向上取得了长足的进步。

ProtoPie is an interaction design tool that enables you an extreme amount of flexibility in terms of what you can prototype. It’s a value-based tool like Pixate was. One of ProtoPie’s unique selling points is its ability to control many native functions and features on the digital devices of today including compass, accelerometer, and camera. It also has some other unique abilities such as being able to connect to a prototype on another on a different device and have them communicate with each other in real-time; prototyping a chat app would be fairly trivial to produce.

ProtoPie是一个交互设计工具，可为您提供原型制作方面的极大灵活性。 像Pixate一样，这是一个基于价值的工具。 ProtoPie的独特卖点之一是它能够控制当今数字设备上的许多本机功能，包括指南针，加速度计和照相机。 它还具有其他一些独特的功能，例如能够连接到不同设备上的另一个原型，并使它们实时相互通信。 制作聊天应用程序的原型将非常容易。

There are too many features to list here but it’s up there with Framer in terms of its capability but without the need to write any code. It’s not trying to be a UI drawing tool at the moment but it has close integrations with popular tools such as Sketch, Figma and Adobe XD. You can build out your prototype and watch a live update of it working in ProtoPie Studio’s preview and you can also live a link to an actual device with the ability to push updates with a single tap.

这里列出了太多功能，但是就功能而言，它与Framer兼容，而无需编写任何代码。 目前，它并没有试图成为UI绘图工具，但已与Sketch，Figma和Adobe XD等流行工具紧密集成。 您可以构建原型并在ProtoPie Studio的预览中观看其实时更新，还可以实时链接到实际设备，并能够一键推送更新。

For me ProtoPie represents the sweet spot between what an interaction design tool should be; a code-free environment to imagine your wildest designs as well as helping you find more ideas simply by using it. It rarely gets in your way and is relatively easy to learn. Maybe one day it will have a fully-featured set of design tools and that may happen as ProtoPies roadmap is driven solely by designer requested features.

对我来说，ProtoPie代表了交互设计工具应该是之间的最佳结合点。 一个无代码的环境，可以想象您最疯狂的设计，并仅通过使用它就可以帮助您找到更多的想法。 它很少会妨碍您，并且相对容易学习。 也许有一天它将拥有一套功能完备的设计工具，并且可能会由于ProtoPies路线图完全由设计师要求的功能来驱动而发生。

语音界面 (Voice UI)

Tools like Alexa and Google Home presents yet another paradigm shift in user interface design. How can designers prototype these experiences? Designing voice UI brings us back to the aforementioned Adobe XD.

Alexa和Google Home之类的工具提出了用户界面设计的另一种范式转变。 设计师如何原型化这些体验？ 设计语音UI使我们回到了前面提到的Adobe XD。

XD gives you the ability to prototype experiences for devices such as voice assistants and smart speakers. In XD voice commands are just another trigger like tap or click. Speech Playback gives access to XD’s text to speech engine that you use to create interactions within your prototype. It even has some language support.

XD使您能够原型化语音助手和智能扬声器等设备的体验。 在XD中，语音命令只是另一个触发，如点击或单击。 语音播放使您可以访问XD文本到语音引擎，您可以使用语音引擎在原型中创建交互。 它甚至有一些语言支持。

Voice UI isn’t just about having conversations with Siri though. XD allows you to design experiences that use voice and visual interfaces together.

语音UI不仅与Siri进行对话。 XD允许您设计同时使用语音和视觉界面的体验。

增强和虚拟现实 (Augmented and Virtual Reality)

The way we will interface with technology is continually changing and it’s only a matter of time before AR and VR make their way into our mainstream lives.

我们与技术交互的方式正在不断变化，AR和VR进入我们的主流生活只是时间问题。

A few prototyping tools are starting to appear for AR, mainly accessible only through devices such as the iPad such as Torch and Adobe Aero. For VR however its still early days of having a dedicated tool but it can be done by using a few tools together. (check out Yang’s tutorial here ).

一些用于AR的原型工具开始出现，主要只能通过iPad之类的设备使用，例如Torch和Adobe Aero 。 但是，对于VR来说，拥有专用工具还处于初期，但是可以通过同时使用一些工具来完成。 ( 在此处查看Yang的教程)。

Prototyping VR experiences is growing maybe unsurprisingly from the games industry. Unity is a popular games platform that can already create AR and VR experiences. With VR comes the need for more advanced skills in 3D modeling and 3D animation so it will be interesting to see how this might affect the role of the Product Designer.

从游戏行业开始，VR原型体验的增长可能不足为奇。 Unity是一个流行的游戏平台，已经可以创建AR和VR体验。 VR带来了对3D建模和3D动画更高级技能的需求，因此很有趣的是，这将如何影响产品设计人员的角色。

那我们为什么要原型？ (So why should we prototype?)

In the day to day, prototyping will help you define the space between your artboards. Too much pressure is put on dev’s to figure this out and I've seen too many designer’s shirk responsibility on this front.

在日常工作中，原型制作将帮助您定义画板之间的空间。 开发人员要解决这个问题的压力太大，而我在这方面看到太多的设计师推卸责任。

Takeaway: Use prototyping to instigate a conversation with engineering and collaborate.

总结：使用原型与工程技术进行对话并进行协作。

A designer's job is to solve problems. A product designer's job is to solve product design problems before we get to dev. If you are firefighting at the dev stage you’ve failed as a product designer and I guarantee your not prototyping. Start doing it.

设计师的工作是解决问题。 产品设计师的工作是在开发之前解决产品设计问题。 如果您在开发阶段进行消防工作，那么您作为产品设计师失败了，我保证您不会进行原型设计。 开始做吧。

A big part of being a product designer is about being part of a team. Prototyping is a conduit to creating a dialog with engineering, use it.

成为产品设计师的很大一部分就是成为团队的一部分。 原型是使用工程创建对话框的渠道。

Prototyping enables you to design in the same environment that a user is using your product, this a requirement, not a nice to have.

原型使您能够在用户使用产品的相同环境中进行设计，这是一项要求，而不是一件好事。

It feels that we have come full circle with a look into digital prototyping. We have seen how prototyping started at the beginning of new technologies and that over time how tools were developed to empower people to create products more easily.

感觉到我们已经全面研究了数字原型。 我们已经看到了原型设计是如何在新技术开始时开始的，以及随着时间的推移如何开发工具以使人们能够更轻松地创建产品。

We have seen how the direction we push the products we make affects the skills we learn which ultimately defines new roles and disciplines. Like technology, the makers behind it are also always evolving.

我们已经看到了推销产品的方向如何影响我们学习的技能，这些技能最终定义了新的角色和学科。 像技术一样，其背后的制造商也在不断发展。

We can also glimpse the future, the next phase in our evolution as designers, pushing the tools that we use and the platforms we design within so we can continue to design the future. It’s never been a more exciting time to be a designer in digital.

我们还可以瞥见未来，即作为设计师的进化的下一阶段，推动我们使用的工具和我们在其中设计的平台，以便我们可以继续设计未来。 成为数字设计师从来没有像现在这样激动人心。