你想知道的关于原型的一切（但不敢问）

原型是我学习新工具、平台和技术的框架。 原型可以作为一个想法是否可行的有力证明。 它是我整个创作过程的核心，也是我用来与我合作的人和企业建立联系的媒介。

我对原型很感兴趣，因为我认为它们可以创造奇迹，但我也认为它们没有得到应有的结果。 原型设计通常根本不包含在项目时间表中，或者，如果是的话，通常作为更大项目的一些切线交付。 如果您愿意，它可以更多！

我想说服你在你的工作流程中更深入地构建原型。 这种处理项目的方式可能会改变您作为有创造力的人的协作、学习和成长方式。 事情是这样的：我将尝试在纸上写下一个好的定义，然后深入研究如何使原型设计对你的实践和我的实践一样重要。 为了让锅更甜，我将提供一些我为自己制作的游戏 Melody Jams 创建的原型，该游戏在 130 个国家/地区被 Apple 推荐，并在短时间内成为商店中排名第一的儿童应用程序。

什么是原型？

原型的经典定义是它是您想要制作的全尺寸事物的比例演示。 原型可能是部分构建或设计的，以展示更大系统的特定功能。 这是一个很好的定义，但我喜欢将原型视为更广泛的东西。 我对原型的定义？ 它是探索一个想法的有形人工制品。

它可以像在纸上画一些粗略的草图一样简单。 也许它是纯粹的设计，就像在 After Effects 中界面如何工作的动画演练。 也许这是一个扔到 Codepen 上的粗略演示。 或者它可能是保真度更高的东西。 当有人看到原型时，他们的反应不应该有任何歧义。 换句话说，如果这个人要问，“如果应用程序是蓝色的怎么办？”，那么这不是原型。 如果您展示应用程序在蓝色时的外观，那么它就是。

还有不同种类的原型，每种都有不同的用途：内部、外部和公共。

内部原型

内部原型不一定能立即向我或我的团队之外的任何人传达价值。 它可以像我想做的那样粗糙和快速。 在网站世界中，我可能会使用 vanilla CSS、HTML 和 JavaScript、React、Angular 或 Vue 构建一个简单的组件，只是为了了解它的工作原理并权衡利弊。 这些类型的原型往往会在我的流程的早期出现——实际上是项目开始的第一天。 有了这些原型，我不必担心有人不会“得到它”，或者它会弊大于利。 我可能会选择向客户或利益相关者展示内部原型，以增强原型制作过程的价值，但这还不是重点——现在我想快速、快速、快速地展示想法。

外部原型

外部原型为您尝试进入的方向提供了案例，以显示进度或演示某事的工作原理。 当客户需要管理工具时，我可能会在 Craft、WordPress 和 Contentful（是的，全部三个！）中创建一个快速博客，让他们了解每个工具的工作原理，以便他们可以就哪些工具做出更明智的决定最适合他们。 这些原型在项目的中后期非常有用。 我记得有一个项目，其中客户正在考虑更改以包含新的服务提供商的 API。 拼凑一个原型向客户展示了提供商可以做什么，我们可以多快集成它以及对项目的其余部分的影响。

公共原型

公共原型在更广阔的世界中存在。 这基本上是将实际的设计过程放到野外，了解用户的操作并从那里进行迭代。 它可能是成熟的试点产品，也可能是一小部分用户可以使用的产品。 它是最精致的原型类型，最接近我之前提到的传统定义。 作为某种性质的测试阶段的一部分，它往往适合更大的项目。

快速原型是好的原型吗？

简短的回答是肯定的。 在项目中快速、尽快地制作原型。 为了让您了解原因，让我们尝试一个练习。

在你的脑海中想象一把椅子是什么样子的。 有一个好主意吗？ 是这把椅子吗？

应该不会吧？ 您可能一直在考虑户外椅子、扶手椅、办公椅或凳子。 您甚至可能都没有想到一张逼真的椅子！ 既然你有了这把椅子的照片，就没有歧义了。 这就是我所说的椅子，从今以后，我们都知道这一点。 我们现在有了一个共同的参考框架。

当您的客户说“我需要让我的网站感觉现代”时，您怎么知道这意味着什么？ 如果没有一个有形的人工制品，比如情绪板，每个人的脑海中都会对“现代”有不同的定义，就像上面的椅子一样。 问题并非特定于设计。 这是关于登录流程的工作方式或在托管环境之间进行选择的方式。 快速做事会迫使对话和反应。 所有模糊不清的东西都被更快地弄清楚了。

重要的是，原型不必解决您期望它解决的问题。 简单地创建和分享它有时会释放人们没有意识到的想法、灵感、挑战或担忧。 原型制作得越快、越频繁，所有这些好东西就会越早浮出水面。

这是关键。 原型设计解锁了您在沙盒中进行实验、失败、学习和成长的能力。 您正在同时改进自己和正在开发的产品。

谁应该原型？

每个人！ 原型设计是打破学科之间壁垒的机会。 设计师应该制作原型，以便他们了解项目的局限性、复杂性和可能性。 编码人员可以通过原型来测试可行性，当然，也可以更多地参与到创作过程中。 项目经理、制片人、撰稿人，任何有想法的人都可以参与其中。

同样，原型设计不一定是要编写一些疯狂的东西——甚至根本就不是编码！ 它是关于用真实的东西来玩和探索的产生和测试想法。

因为原型设计可以像您希望的那样简单或复杂，因此将其作为实践的一部分，您将获得大量价值。 让我们来看看一些好处。

划伤创意之痒

有时你只是想尝试构建一些你以前从未见过的东西，或者模仿一些你认为很酷的东西。 这可能是一个轻率的想法或下一个 UI 趋势——谁知道呢？ 至少，弄清楚东西是如何工作的是作为设计师最令人满意的部分之一，而原型设计提供了肥沃的土壤。

为勇敢和激进的想法增添了空间

很难同时尝试发布用户会理解并具有创造性的东西。 即使您只是在“原型设计周”开始一个项目，那也是一个充满无限可能的一周。

发展主题专业知识

我认识的每一家开发商店似乎都在一个平台上拥有深厚的专业知识，并且暗地里渴望超越它（我相信设计师也是如此）。 您是否使用 PHP 构建所有内容并想进入 Rails？ 在启动项目时构建一些原型，即使它们与业务目标无关。

降低风险

制作你以前从未做过的东西是可怕的。 粗略而迅速地解决它可以消除心理障碍。 突然之间，不可能的事情只需要一两天就能完成。

构建创意目录

随着您的原型库从一个项目到另一个项目，想法会被重新审视。 有时，一个项目的垃圾会成为下一个项目的宝藏。

赋予每个人权力

当你刚刚开始弄清楚事情时，头衔、多年的经验和技能组合应该无关紧要。 好的想法可以来自任何人，但是当高级创意某某从高层来指导思想时，这很难做到。 从纯粹的创客流程开始，可以消除标题并从底部冒出好主意。

定制您的流程

我与许多设计师和机构合作过，他们似乎一直为之震惊的一件事是我开始工作的速度。 我不等待填写要求，获得批准的艺术指导或其他任何事情。 通过开始运行，我可以更快地推进项目。

如何开始

错误的原型制作方法是担心您的原型制作方法错误。 正如李小龙所说，“力争不争”。 考虑到这一点，这里有一些指导方针可以帮助您培养快速原型设计实践。

写问题陈述

给定您要学习或解决的问题，将其分解为原子单元，并将每个单元视为不同的原型。 “如何在 iOS 中加载地图？” “如何将地图定位到特定位置？” “如何在地图上绘制形状？” “如何在地图上放置图钉？” 四个语句，四个原型，四个东西很快就学会了。

从你知道如何做的事情开始

就像锻炼前的伸展运动一样，你无法通过全速开始进入节奏。 如果你是一个正在为网站设计原型的程序员，也许你想从构建自己的样板开始：静态 HTML 文件、Gulp 配置等等。 这将使您的创意源源不断，因此，当您处于未知领域时，您的魔力已经开始发挥作用。

建造丑陋

为您的字体使用 Comics Sans MS 和明亮的石灰绿色。 不要命名你的图层。 打破所有规则。 现在不是像素完美的时候； 是时候把想法写在纸上了。

将初始原型保持在 60 分钟以内

原型设计和复杂性是死敌。 如果你做得对，在项目的第一天结束时，你应该能够生产出至少四个原型。

按感觉优先，而不是按紧迫性

你今天想做什么？ 跟项目没有关系？ 不要与之抗争。 做了。 谁知道？ 也许它有尚未被发现的价值！

叉

永远不要覆盖原型。 相反，制作一个副本并从那里迭代。 这样，您的原型将永远是最简单的，可以在不同的方向分叉并且易于学习。

过度分享

向大家展示你在做什么！ 为之骄傲！ 您围绕实践建立的正能量将融入项目的整个生命周期。 仅此一步就可以极大地增强项目的文化。

记录你的原型和结果

这可以像目录中的 README 文件或 Slack 上的消息一样简单。 总是回去从你所做的事情中学习。

写下你的恐惧，把它们变成问题陈述

那么，您刚刚将您的第一个网站推送到 Heroku，但您还在为如何设置 SSL 证书而烦恼？ 不是问题。 稍后将其排队以进行原型设计。

如何将其预算到您的项目中

事情是这样的：你没有。 这不是某种追加销售。 我就是这样做的。 这篇文章的标题中有“过程”一词是有原因的：这不仅仅是关于如何创建原型。 这是关于如何构建东西的指导原则。

您将在开始项目的那一天开始制作原型。 你不会停下来，直到没有任何东西可以原型。 原型与您的主要代码或设计文件不同。 在早期，您的原型应该过于粗糙而无法投入生产。 后来，如果找到一种过渡方式感觉很有意义，那很好。 这是一个项目一个项目的决定。 原型设计始终是一个常数。 当它以这种方式设置时，就不会有原型失败或错误之类的事情。

当我与潜在客户交谈时，我向他们解释说，这个过程往往会比他们对我的竞争对手的期望更快地产生更多的输出（阅读：你）。 该输出可能有助于定义 API 或证明技术可行性或检查可怕的任务。 对设计师和内部设计团队特别有影响力的地方——他们喜欢以这种方式工作，因为我很快就和他们在一起，把事情弄清楚了。 我制作更高质量、更定制、更不容易出错的作品。 因为每个人都习惯于看到粗糙的工作，所以失败的原型不会引起客户的警觉——一些不工作的东西只是该过程的预期部分。

这也使我长期处于有利地位，因为我能够很快掌握新技术。 我的客户知道他们可以就安装、物理计算项目、应用程序或任何规模的网站与我联系，因为他们知道这种方法可以保证成功的结果。

对我来说，这不是为了最大化利润。 这是为了谋生做我想做的事情。 我从来没有打算擅长网站或应用程序 - 事实上，当我开始时，这些东西并不存在！ 我开始用代码学习很酷、很有趣的东西。 我希望我的职业生涯是漫长的、充实的、令人兴奋的，并且不断地充满新的东西要学习。 原型驱动的流程非常适合这一点。

工具

这些天来，您似乎无法在不考虑 InVision 的情况下说出“原型”这个词——它就像原型设计中的面巾纸。 如果您以前没有使用过 InVision，它是设计人员无需编码即可点击项目的绝佳工具。 这是真正的交易：快速、直观且易于上手。

随着 Sketch 越来越受欢迎，大量的插件正在出现，以方便使用它的原型。 Framer 就是一个很好的例子。 它会导入 Sketch 文件，只需一点编码知识，您就可以创建自定义演示，例如点击动画。 InVision 也有一个 Sketch 插件。 其他的，包括漫威和工艺，都值得探索。 有很多工具可以尝试。

您不需要成为编码员，甚至不需要使用软件来制作原型。 纸质原型是在不需要计算机的情况下尝试 UI 设计的好方法。 您也可以使用白板。 这些技术甚至适用于游戏设计。

不知道从哪个开始？ 考虑使用这些工具中的每一个进行原型设计冲刺！

回到网络和软件开发的世界，我喜欢做的一件事就是专门为原型建立一个 GitHub 存储库。 我包含了一个 README 文件，其中描述了我在制作原型时关心的一些规则，您可以使用或 fork 来试一试。

案例研究：旋律果酱

大约一年前，我和一些朋友为孩子们开发并推出了一款名为 Melody Jams 的 iOS 游戏（并为 Smashing Magazine 写了一篇关于它的文章！）。 那场比赛在大约三个月内被编码为坚果汤。 有一些挑战：设计师以前从未做过应用程序，他住在离我 3000 英里的地方，我们从未见过面。 此外，我已经有一年没有编写过 iOS 应用程序了，所以我的能力已经大幅萎缩。

游戏涉及将怪物从屏幕底部拖到舞台上的指定热点。 仅从那一个设计，我的脑海中就涌现出许多问题陈述：

• 如何创建 iOS 应用程序？
• 如何创建 iOS 游戏？
• 如何在游戏中创建事物？
• 我怎么能点击那个东西？
• 怎么拖东西？
• 如何有多个可以拖动的东西？
• 我如何检测一物何时靠近另一物？

等等。 这些中的每一个都成为了单独的定制原型——每个都有一个 iOS 应用程序——直到所有问题都解决了。 每个人都解决了一个问题，有些人提出了新的问题——例如，当我完成拖动后如何为一个东西设置动画？

我已经在 Swift 3 中重新创建了这些原型，因此您可以看到如果原型存储库在今天构建时的样子。 您会注意到的一件事是，这些文档非常简单——每个目录中有一个 README 文件和一个屏幕截图或 GIF，但没有大量详细文档。 如果打印我们的评论有帮助，请务必这样做。 对我来说，这是关于看到一个进步。 这里没有理论，没有博客文章或教程。 原型 3 源自原型 2，原型 2 源自原型 1。只要有足够的练习，即使您以前从未见过，您也可以快速掌握编程语言的细微差别。

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

在此期间，设计师正在制作徽标原型、动作测试、应用程序图标等。 声音设计师提供了他正在考虑的歌曲的例子。 在我们制作的整个过程中，每个人都喜欢我们正在制作的东西。

结论

按照我的广义定义，你可能已经做了一些原型设计，甚至没有考虑过。 也许你的下一步是更频繁地与你的同行分享，或者断言原型设计将是你开始下一个项目的方式。

将原型深入整合到您的创作过程中可能会带来变革。 它可以营造更积极、更丰富的团队文化。 它可以是开发人员学习新语言或设计人员学习新工具的一种机制。 项目完成得更快，质量更高，更有趣。 您的客户将对流程有更大的了解，并准备以较低的保真度看待事物，这使得与他们分享事物的频率更高，痛苦更少。 你也会看起来比你的竞争对手工作得更快，并且你能够从事更广泛的项目。

有了所有这些好处，有什么不喜欢的呢？ 所以，告诉我，你相信吗？ 启发？ 你的下一步是什么？