抛弃 MVP，采用最小可行原型 (MVPr)

追求完美是一个微妙的陷阱，往往会导致设计师陷入无休止的迭代和审查循环。 在数字产品领域尤其如此，每个交互和图形元素都可能成为设计痴迷的对象。

但是，当我们退后一步观察数字产品设计的跨学科性质时，很容易看出设计师是如何落入完美陷阱的。

想想设计单个数字产品所涉及的所有人员和角色：

• 设计研究人员
• 用户界面设计师
• 信息架构师
• 用户体验设计师
• 产品设计师
• 产品经理
• 内容策略师
• 品牌专家
• 用户体验文案作家
• 等等。

以一种或另一种方式，这些中的每一个都相交。 例如，如果不考虑用户体验，产品的用户界面就不可能成功。 相互关联带来了理解设计决策如何相互影响的压力： “如果我们做 X，那将如何影响 Y 和 Z？”

这种类型的战略预测可能很有价值，但它也可能导致设计过程停滞不前并陷入可怕的完美循环： “我们必须先得到 X，然后才能执行 Y 和 Z。”

那么，有什么选择呢？ 有没有一种方法可以根据真实世界的指标和从真人那里获得的见解来快速创建、发布、测试和改进数字产品？

在本指南中，我们将通过最小可行原型的视角来解决这些问题，并为设计人员提供构建、测试和改进数字产品的极其简单的过程。

使用最小可行原型模拟发射

没有人知道任何事情……整个电影领域没有一个人确切地知道什么会起作用。 每次出去都是一个猜测，如果你幸运的话，一个受过教育的人。 ——威廉·戈德曼，奥斯卡获奖编剧

数字产品设计过程的最早决定充其量只是基于猜测。 在产品到达实际用户手中之前，一切都是理论上的。 另一方面，在产品准备好之前推出产品可能会损害其声誉（代价高昂的错误）。

如果有一种方法可以在任何主要设计工作开始之前就模拟发布并确定产品的可行性怎么办？

这就是最小可行原型 (MVPr) 的价值，这是一种产品设计方法，与更熟悉的“最小可行产品”相比，它需要的时间和金钱要少得多。

以下是最小可行原型 (MVPr) 设计过程的概述：

1. 发现
2. 研究
3. 信息架构
4. 视觉设计
5. 发射
6. 测试

等待！ 这不是每个人都使用的过程吗？

是的，我们将看到，依靠上述步骤的基本要素，我们可以成功……

• 模拟真实产品的功能；
• 模仿真实产品的发布； 和
• 发现一个真正的产品是否值得建造。

一步一步：如何构建 MVPr

1. 发现：开始做决定

开始发现过程的一个好方法是搜索与您的想法相似的网站、博客和应用程序。 了解他们的历史、目标市场、运营方式等。如果您发现没有一个相关竞争对手能像您的原型那样做，请继续前进。

此步骤不需要任何专业知识。 秘诀就是做——从意图到行动。

特别注意竞争对手的优势和劣势。 您如何使用他们已经完成（或未能完成）的事情来使您的原型更强大？

经过 1-2 小时的研究，您应该能够确定最重要的竞争对手并了解每个竞争对手的关键方面。

2. 研究：定义你的用户

谁是你的目标用户，他们为什么要关心你的产品？ 理解这一点至关重要，但我们必须从计算假设开始。 最好从强烈的自以为是的愿景开始。 不要再猜测或尝试“为每个人做点什么”。 我们不想要淡化的设计。

相反，请仔细查看在发现阶段发现的竞争对手网站，并根据常识描绘潜在用户的画像。

以下是一些可在网络上轻松访问的实际调查领域：

• 访问评论网站，看看人们如何评价他们与竞争对手的经历。
• 在社交媒体上关注您产品所在行业的影响者，并观察他们如何吸引受众。
• 搜索信誉良好的新闻文章，详细了解您的竞争对手的运作方式。
• 查看竞争对手在社交媒体上与其用户的互动。
• 看看您是否可以找到任何讨论您的竞争对手的问题或问题的论坛。

无需大量财务投资即可从这些途径中的每一个中获得宝贵的见解。 这对于预算有限的小型设计团队尤其重要。 大品牌在研​​究上花费大量资金，但小团队和个人自由职业者必须想办法变得更有资源。

3. 信息架构：构建原型

原型将如何工作，最重要的信息是什么？

开始回答这个问题的最简单方法是分析与您正在构建的原型相似的一流站点。 您选择参考的网站的整体外观和体验应该非常出色。

首先将网站分成几部分。 什么是所有相关页面，它们的视觉结构如何？ 不要害怕反转网站的线框，然后使用您自己的信息、颜色、图像等重新创建它。

为什么要这样做？ 您的网站可能会以与竞争对手网站类似的方式运行——您只是有不同的目标。 如果用户对已建立的体验反应良好，则无需发明复杂的系统。

*专业提示：在研究网站的信息架构时，一种有用的技术是截取屏幕截图并将其设为灰度，这样您就不会因颜色的影响而分心（这可能很有说服力）。

在此之后，利用在线资源让设计师能够快速从零开始到交互式原型。 有大量的用户界面工具包、HTML 模板、WordPress 主题等等。 不要害怕修改它们以适合您的原型，也不要担心像素完美或漂亮的代码。 在这个阶段，没有人关心。 他们关心你的产品是否有用。

以下是使用免费 UI 工具包的工作原理：

我们在上图中完成了什么？

• 我们删除了所有颜色和图像。
• 导航栏保持不变。
• 过滤系统的功能保持不变，但措辞有所改变。
• 为了更好地展示我们计划使用的图像，我们从两列变为一列。

在不到一个小时的时间内，我们就有了进一步开发原型的视觉基础。

4. 视觉设计：重新利用免费的 UI 资源

原型的视觉外观和感觉离不开它的工作方式。 这不仅仅是关于图形。 有影响力的视觉设计讲述一个故事，并提供具有真正价值的体验。

在这里，视觉一致性是关键，因为它可以帮助用户熟悉产品并更有效地导航。 为了在原型开发的早期实现这种一致性，重新利用免费的 UI 资源是明智的。

以这种方式工作，您不必花费数小时开发一个有凝聚力的设计系统。 排版、按钮样式、图标和所有其他重要的 UI 组件都得到了照顾。

5. 发布：编码还是不编码？

是时候与全世界分享您的原型了。 幸运的是，将模型转换为动态原型比以往任何时候都容易。 多亏了许多直观的工具，你甚至不需要知道如何编码——但你应该学习吗？

无代码 MVPr

完成视觉设计后，将原型嵌入到登录页面中，以便访问者可以与之交互并提供有关您的想法的一般反馈。 在 MVPr 设计过程的这一点上，有几种方法可以创建无代码原型。 以下是您的选择：

基本原型

• InVision 具有构建和测试基本原型所需的所有功能，它提供了无痛体验，没有复杂性。

富媒体原型

• 对于复杂的交互、过渡和动画，Principle 非常有用。

100% 逼真的原型

• Framer 允许设计师模拟任何可以想象的数字产品体验。 当原型必须在原生动画和基于逻辑的编码方面看起来和感觉真实时，这是完美的选择（例如：如果这样做，那就这样做）。
• Webflow 提供了在 100% 所见即所得画布上设计、使用代码构建和启动响应式网站的能力。

单击以查看全尺寸图像。

编码的MVPr

代码可以是一个了不起的盟友。 毫无疑问，这是构建产品的最佳方式。 主要缺点是您需要知道如何编写代码才能体验高级定制的好处。 如果没有适当的知识库，选择尝试代码会减慢您的速度。

有很多代码入门工具包可以帮助您顺利进行。 例如，我们上面介绍的 UI 工具包有自己的 HTML 版本可供下载：

6. 测试：利用广告洞察

测试原型的秘诀在于工具可以让您以最少的努力获得最大的洞察力，同时仍然提供价值。 您所需要的只是几美元和一些耐心的解决问题的方法。

衡量对您的产品的兴趣的实际第一步是制作广告并定位在研究阶段发现的人。 根据您的受众和您设计的产品类型，您可以在 Google、LinkedIn、Instagram 或 Twitter 上投放广告。 对于企业对消费者的产品，推荐使用 Facebook。

*专业提示： AdEspresso 是一个方便的地方，可以同时运行数百个版本的社交广告，同时收集有用的比较分析。

投放广告，你会学到两件事：

1. 查看您广告的人数
2. 点击您的广告的人数

一旦您确认您的目标受众有兴趣与您的广告互动，您就需要为早期用户创造价值。 这是如何做：

• 添加“订阅”表单并要求用户提供他们的电子邮件地址。
• 跟进以让他们知道您何时启动。
• 确保您的社交媒体渠道启动并运行，这样您就可以构建社交按钮，让用户传播有关您产品的信息。

使用此策略，您将获得：

• 可用于早期营销工作的电子邮件地址列表
• 人们向他们的个人和专业网络推荐您的产品
• 更清楚地了解是否有人对您的产品感到兴奋

当你第一次得到真正的反馈时，你的产品就已经上线了。 通过这个传递价值、分析行为和迭代解决方案的循环，您将了解哪些有效，哪些无效，您将更接近人们真正想要使用的产品。

勇敢地启动和学习

最小可行原型的最终目标是：从有根据的设计猜测转变为真实的、可操作的反馈，速度和信心。

这是一个将不确定性和失误视为改进机会的过程。 最重要的是，它奖励行动。 好的设计需要大胆的决策和面对不完美继续前进的意愿。

所以不要因为追求完美而陷入困境，也不要与大品牌及其海量资源进行比较。 继续前进，很快您就会发现自己拥有一款人们乐于使用的精美产品。

• • •

进一步阅读 Toptal 设计博客：

1. 轻松制作原型 - InVision Studio 教程
2. 如何进行有效的设计冲刺
3. 谁知道 Adob​​e CC 可以线框？
4. 面向大众的 UX 测试：保持简单且具有成本效益
5. 客户旅程地图——它们是什么以及如何构建一个