原文：Morgan Carter

原型是设计中最重要的方面之一，它让我们可以在没有开始完整的开发阶段，更快也更简单地测试产品概念。

我们可以在早期试验一些疯狂的想法，并且对于这些想法可以最终成为现实更为自信。

从低保真原型到高保真原型的过程更像是从放大到缩小的各个阶段。我们在进入到细节中去之前，对设计决定进行测试和迭代，而绘制想法的草图就显得尤为重要。

在深入地思考一个产品之前，原型阶段可以让你看到一片森林，而不仅仅是一棵树木。

五个维度的真实性

有五个方式来测量一个原型的真实程度。

随着真实性的增加，这五个维度不一定会平均地分布在各个阶段（一个中等真实度的原型不一定适用在中等阶段，但也许在一些高阶段和低阶段适用）。

视觉精炼层次

原型与最终产品看上去有多相似？一个低保真的原型也许就是一个手绘的草稿，而一个高保真原型就会是精确到像素，看上去和真实的产品没什么区别。

功能的广度

原型能够包含多少的功能？一个低保真的原型聚焦于那些最重要的任务，而高保真原型会有更细节的任务（比如：重置你的密码）

功能的深度

每一个功能能够被多大程度地制作成原型？一个低保真的原型可以在页面和页面之间跳转，并在已有典型数据的情况下，告诉你大概的用户流程。一个高保真的原型可以让你输入数据，知道那些在进行不同的输入时影响到输出的区分

。

交互的丰富性

原型中会有多少的交互？低保真原型也许会相当简单，在用户使用时没有任何的反馈信息。高保真原型将会考虑动画效果，hover状态，表单验证，和所有用户与产品直接的细节交互。

数据模型的丰富性

你的原型中应用的数据有多丰富？低保真原型使用的是有限的，典型的数据设置，显示最常见的

用例。高保真原型会包括边缘的情况，比如非常长的用户名（应该减少用户名的长度），无数据（提供默认人物头像），第一次使用（使用空白状态），或者极端大的数据量（使用翻页或者过滤）。

低保真原型

一个低保真的原型是你的产品的宏观层面。你聚焦于最重要的任务，并且是一个最简要的形式。你不用担心反馈，交互或者边缘的情况。

我们一开始要用低保真原型是因为我们想要将我们的关注点放在导航，用户流程，和哪些功能将要被包含在产品中。如果我们一开始就着手于小的细节，如字体或者颜色，就会出现几个问题：

1.你的客户或者老会认为这就是最终产品的样子。保持一个草稿的状态是为了明确：这不是一个精确到像素的解释。

2.你的客户或者老板（或你自己）将会开始专注于这些在这个阶段并不重要的细节。对于用户流程根本没有关系的字体，只会导致干扰。

3.一旦你开始花大量的时间将设计的视觉部分做得完美，你就会依赖它。如果这不是一个好的设计，你将不忍心将它舍弃。如果这个草稿花的时间并不多，那么舍弃它将更加容易。

4.它让一个不好的决定看上去像一个好的决定。在过去，我作曲和合成我自己的音乐。当我作曲的时候，我经常让乐器的声音听上去很不好。如果我的乐器声音非常美妙，那么就算我写了一首很烂的曲子，它听上去却是好的。如果这个音乐在很烂的合成以后还是听上去不错，它意味着在很好的合成之后，它听上去会更好。同样道理，在前期投入太多在视觉层面，会毁掉你的观点。如果设计草图很容易理解，并且看上去不错，那么它应该在设计的最终阶段也会看上去非常好，并且非常容易理解。

很多人使用像InVision这样的工具，进入高保真原型阶段。但是我发现它最有用的是：用户是怎么样从一个页面到另外一个页面，每一个页面具体是什么样子并不重要。

在这个阶段你可以问这些问题：

哪一些元素可以包含在屏幕内，而哪一些可以被去掉？

在信息架构之间最好的导航方式是什么？

在有导航的情况下我的“位置”够清晰么？

中保真原型

定义中度保真的原型挺困难的。它也许是这五个维度的中间阶段，或者它在一些维度中比较低，或者在另外一些维度中比较高。

它也许在一些重要功能上更进一步，但是还是缺少细节的功能。专注的维度，将会最终依赖于项目的需求。

在这个维度，你会专注于每个单独页面的布局。你知道这些页面如何适应于综合的导航，你也是思考在页面的哪个位置放置相关元素（甚至你还不知道每一个元素它们最终是什么样的）

动画可以在这个阶段展现。一旦你开始布局每一个页面，你可以思考如何从一个页面切换到另外一个页面。也许从一个状态直接跳转到另外一种状态会令人迷惑，所以动画可以帮助用户在应用中切换。Material Design Guideline提供了很多不错的过渡方式。

在这个阶段你可以问这些问题：

在这个页面里什么是最重要的元素，以及我如何层级里给它制定优先级？

这个按钮的颜色是什么?

我应该给这一次输入使用一个选择的下拉菜单还是单选按钮？

高保真原型

高保真原型专注于产品的细节层面。大的方向已经有了，高保真原型是确定你的设计从视觉上传达了产品的功能。你开始思考如何给你的设计添砖加瓦，专注于颜色和对比度，以及任何细节的交互。如果你使用动画，你将会在这个阶段努力将它做好。

在这个阶段，效果图将会真实地展现在最终的屏幕里。

在这个阶段你可以问这些问题：

人们意识不到这个按钮是可点击的，我是否应该给它加上渐变？

我们是否可以在这两种颜色之间增加对比度，使之可以更加容易的阅读？

这个元素当鼠标点击时是什么效果？

当没有完整数据的时候这个看上去是什么样的？

现实中的原型

在真实的情况下（特别是在初创公司），你可能不会完全按照低保真－中保真－高保真这个流程。这也是可以理解的。只花10分钟画你的设计草图，并且与其他人一起讨论，比起直接在photoshop中制作更加有效。

最后，在一些阶段，你需要将原型制作成代码。一旦你到达了一个高保真的程度，它可以直接更快地转化成代码，而不需要通过photoshop或Sketch。但是到了这个阶段，并不代表设计的流程就结束了。如果你知道如何写代码，那么在浏览器中设计（直接用代码制作）也很好呀，它避免了很多设计师和程序员的交流成本。但是如果你不会写代码，原型就变得越发重要了－花了几分钟画原型图，会在给你的程序员节省按天计算的时间哦。