作者：Jamie Kosoy  | 翻译：Hiyori & 菁菁 审校：赵艳兵

本文由人民邮电出版社异步社区授权UXRen翻译并发布，禁止转载或建立镜像。

 

原型是我掌握新工具、平台和技术的支撑框架。原型是验证一个想法是否可行的强有力工具。它是我整个创作过程的中心，也是我与合作的人和企业的交流媒介。

我对原型深有感情，因为我认为它们可以创造奇迹，但我也觉得它们没有得到应有的重视。原型通常不会被纳入到项目时间表中，或者，即使被纳入，通常却也只作为一个更大项目的不太相关的交付物。 其实只要你愿意，它可以起更大作用！

我想说服你把原型更深入地植入你的工作流程中。这种嵌入项目的方式，可以改变你作为创意人员的协作、学习和成长的方式。说服过程是这样的：我会试图做出一个合适的定义，然后深入探讨你怎样才可以做出实际有用的原型，这样的原型对我的实际工作也同样有效。为了更吸引人，我会提供一些我创作的原型，它们用于我制作自己的游戏应用Melody Jams，这个游戏在130个国家得到了苹果公司的官方推荐，而且一定时间内还冲到了应用商店儿童App排名第一。

 

1. 什么是原型

原型的经典定义是，它是你想要制作的原样尺寸东西的缩样。一个原型可能是部分地被创建或设计，用来展示一个更大系统的特定功能。这是一个相当不错的定义，但我想把原型看作更广泛的东西。我对原型的定义是什么？它是探索检验一个想法的无形变有形的神器。

它可以像在纸上绘制一些粗糙的草图一样简单。也许它只是被简单地设计一下，就像在After Effects中一个界面的动效演示。 也许它是一个在Codepen上粗糙的demo演示。或者它也可能有高得多的保真度。当有人看到一个原型时，他不应该有任何含糊不清的反应。换句话说，如果这个人要问，“如果应用程序是蓝色的会怎样呢？”，那么这就不是一个原型。如果你显示出了应用程序变成蓝色的效果，那么它就是（一个原型）。

当然，也有不同类型的原型，每个原型都有不同的目的：内部的，外部的和公开的。

（1）内部原型

内部的原型不需要给我或我团队以外的任何人带来直接的价值。它尽可以像我想要的那样粗糙和快速。在网站世界中，我可能会使用vanilla CSS、HTML和JavaScript、React、Angular或Vue来构建一个简单的组件，以便了解它是如何工作的，并权衡利弊。 事实上，这些类型的原型往往用在我工作流程中的很早阶段-—实际上是项目开始的第一天。 有了这些原型，我不必害怕有人不“ 理解它 ”，或者会弊大于利。我虽然可以向客户或利益相关者展示内部原型，特意显示原型制作过程的价值，但这还不是重点，立刻、马上、赶快展示我的创意想法才是我想要的。

图2所示的这个原型演示了iOS中一个圆圈被拖动到另一个圆圈附近时的情况。这是Melody Jams为内部团队展示的早期原型。

图2 这个原型演示了iOS中一个圆圈被拖动到另一个圆圈附近时的情况

（2）外部原型

一个外部的原型就是为你想要的方向做一个实例，以展示进展或论证某个事物是如何工作的。当客户需要一个管理工具时，我会在Craft、WordPress和Contentful（是的，所有3个！）中快速创建一个轻型博客，让他们了解每个工具的运行模式，以便他们可以更清楚地知道哪个最适合他们。这类原型在项目的中后期都非常适用。我记得有一个项目，客户正在考虑用一个新的服务提供商的API。把API接入原型并展示给客户，让他们知道这个服务提供商可以做什么，我们能够多快地整合它，以及对项目其他部分会产生什么样的影响。

图3所示的这个轻便的iPhone应用程序展示了Contentful如何加载内容—这是外部原型的一个很好的例子。像这样的原型可以同时用于评估一个CMS①，并验证它是否可用来提升iPhone应用程序。

图3 这个轻便的iPhone应用程序展示了Contentful如何加载内容

（3）公开原型

公开原型面向团队外部这一更大的范围。也就是说，把实际的设计过程公开出去接受真实检验，了解用户如何操作，并据此进行迭代。它可能是一个完整的试点产品之类的东西，开放给一小部分用户使用。这是最精致的原型，并且最接近于我前面提到的传统定义。它往往适合于一个更大型的项目，用在某些功能特性的测试阶段。

用户和客户可以轻松点击如图4所示的这个公开的InVision原型，并提供反馈。

图4 用户和客户可以轻松点击这个公开的InVision原型，并提供反馈

 

2. 快速的原型设计是好的原型吗？

简而言之，肯定是的。原型需要尽快在一个项目中建立。为了让你明白为什么，我们来做一下练习。

在脑海中想象一下椅子是什么样子的。想好了吗？ 是如图5所示的这样的椅子吗？

图5 椅子的图片

可能不是，对吧？ 你想的可能是户外椅、扶手椅、办公椅或凳子。你甚至可能没有想象出一个逼真的椅子！既然有了这张椅子的图片作参照，就可以消除上面的各种可能性了。这把椅子，是我正在谈论的，并且此后再提及，我们都知道指的是它。于是，我们有了一个共同的参照系。

当你的客户说，“我需要我的网站有现代感”，你怎么知道这是什么意思？如果没有实际的工具，比如情绪板，每个人头脑中对“现代”都有各自的定义，就像上面的椅子一样。这个问题不仅存在于设计，而且也会出现在登录流程的方式或软件运行环境的选择中。要迅速处理事情就会要求强制进行对话和做出反应。所有的含糊不清的部分就都能更快得到明确。

重要的是，原型也不必非得解决你期望它解决的问题。简单地创建和分享它，有时就能开启想法、灵感、挑战或顾虑，而人们之前并没意识到这些。原型做得越快、越频繁，所有的好东西就会越早浮出水面。

原型开发解锁了你在沙盒中进行实验、失败、学习和成长的能力。 你可以提升自己并同时改进手头的产品。这是非常关键的。

 

3. 谁应该设计原型？

每个人！原型设计是打破学科之间壁垒的一个机会。设计师应该设计原型，以便了解项目的局限性、复杂性和可能性。编程人员做原型，当然能用来测试可行性，但更能深入参与创作过程。无论项目经理、制作人、文案人员，只要是任何有想法的人都可以参与其中。

当然，原型不必疯狂写代码—甚至根本不需要！它只是生成和测试想法，用真实的东西来玩和探索。

由于原型设计可以像你想要的那样，或简单或复杂，因而在实践中采用原型将给你带来巨大的价值。 我们来看看原型的一些好处。

（1）撩起创意的骚动

有时候，你只是想尝试构建你从未见过的某个东西，或者仿效出你认为很酷的东西。这可能是一个不成熟的想法，也可能是用户界面的下一代趋势—谁知道呢？ 至少，弄清楚东西是如何工作的，这是作为设计师所感到的最满意的部分之一，原型设计为此提供了肥沃的土壤。

（2）为无畏和激进的想法留出空间

做出的东西，既能使用户容易理解又具有创新性，这是很难的。 即使你启动项目时有一个“原型周”的时间，也只是这个星期不受到太大限制。

（3）增加主题专业知识

我所知道的每一个开发工作室似乎都对一个工作平台拥有深厚的专业知识，并且暗中希望超越它（我确信这一点对于所有设计师来说也是成立的）。你正在用PHP做所有开发，而又想要投入Rails阵营吗？那么就请在开始项目时建立一些原型，即使它们与商业目标无关。

（4）规避风险

制作以前从未做过的东西，心里是很没底的。快速地大致搞明白它，可以消除那种心理障碍。 突然之间，之前不可能的状况只需要一两天就能消除。

（5）建立一个创意目录

当你的原型库随着一个个项目而不断扩展，相应地，以往的理念会得到重新审视。 有时来自一个项目的废料却会成为下一个项目的宝藏。

（6）为每个人赋能

当你要去把事情搞清楚时，职位头衔、多年的经验和技能都不重要。好的想法可以从任何人那里产生，但是当遇到高级创意人员从天而降肆意指点时，它就很难浮现了。我们需要从一个纯粹的创作流程开始，忽略职位，让好的想法从基层涌现出来。

（7）自定义你的流程

我曾经和很多设计师和代理商合作过，而且他们似乎一直被我开始工作的速度震撼到。我不会干等着需求抛来、美术设计去评审或其他种种。通过积极主动的方式，我可以超高速推进项目。

 

4. 如何开始

千万不要总是担心你建立原型的方法会出错，那样是不对的。就像李小龙说的那样：“力求不争”。时刻牢记这一点，下面是一些指导原则，可以帮助你完成一个快速的原型实践。

（1）列出问题陈述

想一下你正试图学习或者解决的事情，把它进行逐条拆分，然后把拆分出来的每一条当做不同的原型来对待。“如何在iOS中下载地图？”“如何将地图定位到特定的位置？”“如何在地图中绘制图形？”“如何在地图上放置大头针？”4条陈述，4个原型，快速得解决了4个问题。

（2）从你熟悉的事情入手

就像锻炼之前要进行拉伸运动一样，你不可能一开始就进入全速节奏。如果你是一个正在建立网站原型的开发者，你可能想从建立自己的模板开始：一个静态的HTML文件，一个Gulp配置，诸如此类。这样可以让你的创造力源源不断地扩展，当你进入一个未知领域时，你的魔力就已经开始发挥作用了。

（3）画得丑一点

用荧光色的Comics Sans MS字体，不要命名你的图层。打破所有规则。现在不是要求每像素都完美的时候，现在最重要的是把你的想法画出来。

（4）将设计初始原型的时间限制在60分钟以内

错综复杂和原型是你死我活的敌人。当你做得正确的时候，你可以在项目第一天结束时产出至少4个原型。

（5）率性最为先，别被急事赶

你今天想做什么？和这个项目一点关系都没有？不要纠结，就按照你想的来做。谁知道什么情况？很可能它的价值你还没意识到呢！

（6）分支

永远不要覆盖原型。相反的，要复制一份然后从那里进行迭代。这样你的原型永远是最简洁的，可以从不同的方向分支，并且易于学习。

（7）分享控

给所有人看你所做的原型。要为之感到骄傲！你在这个项目上所营造的积极能量会贯穿到整个的项目生命周期中。仅这一步就可以大大地提高整个项目的文化气氛。

（8）记录你正在做的原型以及结果

这就像目录中的README文件或者企业协作工具Slack的消息一样简单。要经常回顾你之前所做的东西。

（9）写下你所担忧的事情，然后把它们变成问题陈述

所以，你刚刚在Heroku上部署了你的第一个网站，但是你担心如何设置SSL证书？这不是一个问题，把它列下来稍后用原型来处理就可以了。

图6所示的是一个以Trello卡展示的问题陈述，它描述了如何建立一个基础的three js原型。

图6 以Trello卡展示的问题陈述

（10）如何在项目中增加预算

事实上，你不需要。这不是那种向上销售式的顺杆爬②。我就是这么做的。这篇文章在标题中包含“流程”这个词是有原因的：这不仅仅是关于如何建立原型的问题，这是一个关于如何建造东西的指导性原则。

当一个项目开始时，你就要做原型，一直到没有什么原型可以做了才可以停止。原型与你的主要代码或者设计文件都不一样。在项目初期，你的原型应该很粗糙，以至于无法开发设计。只要之后找到可以实行的方式就可以了。

这是按照项目不同而变通的决定。建立原型是一个持续的过程，当我们这样做的时候，就不会有失败的原型和错误。

当我和潜在的客户交谈的时候，我向他们解释说，这个过程会比我的竞争对手（比如你）有更快更多的产出。这些产出可以帮助定义一个API或者证明技术上的可行性，或者检查一个可怕的任务。特别是在设计师和内部设计团队中尤其具有影响力，他们喜欢这样的工作方式，因为我可以和他们一起快速地解决问题。我产出更高质量的、更定制化的、更不容易出错的工作成果。由于大家都习惯于看到粗糙的原型，因而就不担心失败的原型会让客户意识到——有些东西不能有效运行已成为工作流程中习以为常的现象。

这也使我长期处于有利的位置，因为我能够快速地掌握新技术。我的客户知道无论在安装、物理计算③、应用程序或者任何规模的网站等方面，都可以与我进行沟通。因为他们知道这种方法保证了结果一定会成功。

对于我来说，这并不是为了利益最大化，这是为了以我期望的方式去做我想做的事情。我从未想特意去学习并精通App和网站开发，事实上，这些东西在我开始的时候并不存在。我开始写代码是用来学习很酷很有意思的东西。我希望我的职业生涯是长久的、充实的、令人兴奋的，并且不断地有新的东西去学习。一个原型驱动的过程是完美适合那个目标的。

（11）工具

最近，似乎一提到“原型”这个词就不得不想到 In Vision——就好像是原型设计用到的 Kleenex（一种常用的餐巾纸）。In Vision是一个强大的工具，可以让设计师在不需要编程的情况下产出可点击的原型。这是真的：快速、直观、容易上手。

随着sketch的普及而出现的许多插件让原型制作更加方便。Framer是一个很好的例子，它可以导入sketch文件，只要有一点编程知识，就可以创建一些演示demo，比如点击动画。In Vision 也同样有sketch插件。其他工具，包括 Marvel 和 Craft，也是值得探索的。我们还有很多工具可以尝试。

你不必成为一个程序员，甚至不需要使用设计软件创造原型。不使用电脑，只在纸上画原型也是一个很好的探索UI设计方案的方式。你也可以在白板上尝试，这些方式甚至可以用在游戏设计中。

不知道从哪里开始？你可以考虑用每一种方式进行一次原型设计的快速试验。

回到网站和软件开发的世界，我喜欢做的事情是在 GitHub上专门为原型建立一个库。我已经加入了一个README文件，它描述了我在原型设计时考虑的一些规则，你可以使用或者借鉴它，尝试练习一下。

 

5. 学习案例：Melody Jams

大概在一年之前，我和几个朋友一起设计并发布了一款iOS平台上的儿童游戏，叫做 Melody Jams（也在Smashing Magazine上写了一篇关于这个游戏的文章），如图7所示。我们用了大概3个月的时间完成了这款游戏的开发。在这个过程中我们遇到了一些挑战：我们的设计师从来没有做过App的设计，并且他住在离我3000英里之外的地方，我们从来没有见过面。同时，我也有一年的时间没有开发过iOS平台的App了，所以可想而知我的技能退化了多少。

图7 Melody Jams进行中的动画原型

这个游戏需要将屏幕底部的小怪兽拖曳到舞台上指定的热点区。单从这一个设计，我的脑海里就浮现出一些问题清单：

• 怎样创建一个iOS App？
• 怎样创建一个iOS 游戏？
• 怎样在这个游戏里创建一个事物？
• 怎样点击这个事物？
• 怎样拖曳这个事物？
• 怎样能有多个可以拖曳的事物？
• 怎样发现一个事物接近另一个事物？

诸如此类，每一个问题都成为独立的原型。接着，每一个都是iOS 应用程序，直到所有问题都解决。每一条解决一个问题，也有的引出了新的问题，比如，当我拖曳完一个东西时，该怎么做动画使它动起来？

我已经在Swift 3中重建了这些原型，如图8所示，这样你可以看到这些原型库如果在今天创建的样子。你会注意到这些文档都很小——每个目录下都有一个README文件，一个屏幕截图或者GIF动画，但没有大量的详细文档。如果这能帮助我们列出注解，那就去做吧。对于我来说，这样是为了看到过程。这里没有理论，没有博客文章或者教程。从原型1到原型2再到原型3，只要有足够的练习，即便你从未见过，你也可以快速掌握编程语言的细微差别。

图8 GitHub上的原型过程

我们在项目的前几个星期遵循了这个流程，主要是开发原型而不是进行核心程序的开发。在项目结束的时候，我们有超过50个不同的原型，用来测试不同类型的动画、加载方案、缓存、声音测试和UI机制。

在这个过程中，设计师在进行logo、动画测试、应用程序图标的原型设计等等。音效设计师提供他们正在考虑的音乐的样例。整个过程中，每个人都喜欢我们一直在做的事情。

在游戏中，由“Mars Disco”中的歌曲制作的原型，是由我们的音效设计师Nate所创作的，那时所有设计和动画都未完成。

 

6. 总结

根据我广义的定义，你可能已经做了一些原型了，甚至根本都没像上面那样考虑过。所以接下来你应该与你的同事进行更多的分享，或者坚决要求你将如何使用原型来开展下一个项目。

将原型深入地融入到你的创作过程，可能带来革命性的改变。这可以带来更加积极的、丰富的团队文化，也可以成为程序员学习新语言或者设计师学习新工具的途径。项目能够更快速更高质量地完成，同时也带来了更多的快乐。你的客户将对设计的过程有明晰的了解，并且接受较低保真度的东西，可使得分享交流变得更频繁、更容易。你也会比竞争者看上去工作得更快，能够参与更广泛的项目。

有了以上这些好处，原型还有什么让你不喜欢的呢？所以，快点告诉我，是不是心服口服了？是不是大彻大悟了？知道下一步该怎么做了吧？

 

3+

---

更多译文：

看似“懒惰”的用户其实并不排斥改版，只是我们改错了！

作为设计师，你有职业道德么？你的团队呢？

作为设计师，我在Google学到的

设计之前，我要是早知道这8条设计法则就好了

3年，2200万用户的实验，告诉我们的真相

全部200+篇译文>>

 

申请加入UXRen翻译组>>

 

---

译者：Hiyori & 菁菁  审校：赵艳兵

作者：Jamie Kosoy

原文标题：《Everything You Ever Wanted To Know About Prototyping (But Were Afraid To Ask)》

原文链接：https://www.smashingmagazine.com/2017/12/prototyping-driven-process/

发布日期：December 7, 2017

版权声明：

• 本文版权归：UXRen翻译组 所有；
• 微信公众号转载说明：
  1）由于近期微信审理严格，若是该文章未在UXRen公众号上首发，请不要转载；
  2）公众号转载时，请在文章底部贴上UXRen公众号二维码。
• 网站转载说明：
  1）文章标题必须保留“UXRen译”字样；
  2）转载文中必须保留：“UXRen翻译组”、“作者”、“译者”及“审校者”信息；
  3）转载文末必须保留本译文网页链接地址；
• 如未遵照上述规则转载，视为侵权，UXRen社区保留随时追责的权利。