从设计、制作到发布，教你5天完成一个MVP产品

最新推荐文章于 2021-02-19 07:16:57 发布

「已注销」

最新推荐文章于 2021-02-19 07:16:57 发布

阅读量728

点赞数

本文链接：https://blog.csdn.net/duxinshuxiaobian/article/details/105212992

版权

全文共3051字，预计学习时长10分钟

图源：unsplash

一个产品，从构思到发布，耗时3—6个月，总利润只在500美元以下，过去一年中笔者完成的每一个产品皆是如此。当时笔者觉得这样已经非常迅速了。直到这一次，采取了不同的方法之后，工作效率犹如坐上喷射机。

虽然花费这么长的时间也积累了编码经验和知识，但如果能早一点意识到问题并改变方式，显然会让笔者更快乐一点。

从半年到5天的极限挑战到底是怎样实现的？一起来看看吧！

首先，从建立社区开始

笔者很清楚想要打造什么样的产品，然而在目标受众表示他们的需要之前，不要被这个想法束缚。在早期阶段，目标很简单，就是建立受众并开始对话。对笔者来说，目标受众是像自己这样的前端开发人员。

不是一开始就试图实现一些具体的愿景，先把想法精减到一个基本的价值元素。这将是一个最小可行的产品，可以交付给指定的目标用户群体，并让他们定期与网站互动。

这也称为 Minimal Lovable Product。

如果从一个对笔者提供的免费内容所感兴趣的社区开始，可以进行长期对话，然后专门围绕他们的需求开发一个产品，最好是围绕长期产品目标创建最低限度的产品。但它并不一定是最终想法的一个简化的版本，它只需要将价值传递给最终的目标客户群体。

图源：unsplash

下面这个例子，会说明笔者是如何从一个基本的价值元素开始制定一个长期的产品目标的。

长期目标

很多开发人员都有完整的项目和UI组件，他们花了几周时间开发，但却从来没有使用过。这些产品中，有许多都是可以销售的，但目前还没有针对这方面的专门市场。所以，笔者的长期目标就是让开发人员买卖他们创造的资源。

这样初步的想法随时可能会改变，冒险开发一个功能齐全的平台并不是合适的选择。笔者仍不知道这个市场的最终产品将会是什么，也不必这样做。社区会基于数据和市场的直接反馈来辅助决定下一步创建什么。

短期目标：基本价值交付

现在能做的是从项目的基本价值元素开始：开发人员为其下一个项目寻找策展资源的地方。除去一些复杂的功能，这个概念基本和最初的想法是一样的。虽然不在平台上交易，但至少应该能够估测人们对这类产品（即策展资源）的兴趣，会对哪类资源兴趣最大。

拒绝那些需要更多时间编写代码的功能

· 没有数据库

· 没有登陆系统

· 没有用户配置文件

· 没有支付整合

· 没有文档（条款和条件或指南）

· 没有使项目的开发时间超过一周的功能

图源：unsplash

专注于能进入市场的独特价值

笔者有一个策展的诀窍，特别是当涉及到设计和开发资源的时候，因此决定创建一个策展的前端资源平台。虽然也有类似的存储库，但笔者想得到一些特别的资源。

目标是制作一系列框架，并把重点放在质量上而不是数量上。每种资源在经过精心挑选和深思熟虑后才能发布。笔者决定只发布自己想用的东西。

笔者已经保存了大量的书签，并且在Medium上写了一些关于自己所策划的资源的文章，这是一个很好的起点。首先决定要为哪些框架管理资源，最后只选择那些有直接经验的框架。

发布过程

1.简化用户体验

笔者花了半天时间在Sketch中创建了一个UI线框，参考其他类似的站点，把最满意好的想法呈现在一个两页的站点中。笔者倾向于在设计阶段添加额外的细节，强迫自己在接下来的几天里删掉所有还没有准备好构建的元素。另外，作为设计师，笔者第一次不注重好看与否。这一阶段黑白已经足够了，任何颜色或元素设计以后再议。

2.确定样式

虽然可以选择现成的CSS框架，比如Bootstrap或UI kit，但笔者最近为另一个项目自创了最简单的CSS框架，所以决定使用它。它非常简单，只包括浏览器重置、按钮、表单，导航栏和卡片等基本元素，因此非常适合用于此MVP项目。笔者更喜欢没有网格的框架，因为更习惯使用CSS网格来处理所有的事情。如果你正在自创一个基于卡片的站点，请学习网格的基础知识（对于流体卡布局来说这是不可思议的）。总的来说，定制此CSS框架以适应这个项目花了不到一天的时间。

最简单的、无网格的CSS框架

3.创建组件

笔者常用Vue来创建大多数网络应用程序，这个网站也如此。首先粗略构建了各个组件（基于线框图草图）、路由和一个详细的卡元素，数据中的每个资源将循环使用这些元素。你可能会注意到，在开始编码时，笔者发现了比线框图更好的方法，能够进一步简化UI。与使用模态组件来显示每个资源的下载/视图按钮相比，通过卡本身的悬停覆盖来访问它们，会更方便使用。同样，这也是坚持使用线框的一个很好的理由，最终甚至没有使用那个设计（节省了更多的时间）。这个悬停覆盖也是可动的，点击卡就可运行。

这是为了更好的用户体验，用户可以更快地访问资源。如果以后需要像模态框这样的扩展功能，就可以轻松地即时添加它们。完成所有的页面、组件和应用程序逻辑大约花了整整两天的时间。

这就是完整的应用程序，很简单吧。

4.确定数据结构和数据源

笔者将.json数据文件按框架分开，以便之后易于添加，并将其保存在项目文件中，而不是使用外部数据库。这样，如果改变了使用的数据库，就不必更改一堆代码来适应它（从第5点中你将会发现这个决定多么明智）。收集资源确实是这项工作中最耗时的，尤其是手动优化每个图像环节。总而言之，这只花了两天的时间。

5.部署到主机

网站完成之后，笔者首先选择在Netlify上发布。虽然部署很容易，但在图像加载方面遇到了重大问题。即使手动优化了每个图像（减少宽度，用多个图像优化器运行，如Ezgif等），Netlify也需要花费一分钟的时间来处理300KB的文件。

经过一整天的故障排除，笔者决定将站点完全迁移到Firebase，看看这是否会减短加载时间。两个小时后，站点开始运转，DNS记录已经传播，这个站点突然迅速火了起来。如果之前只使用单一数据库，可能会导致重大的启动延迟。通过简化，只建立自己需要的内容，节省了自己的时间和精力，最终仍然得到了最好的结果。笔者本可以更快地发布，但处理这些问题至少花了一天的时间。

6.准备发布并上线

为图像绘制草图

此时，发布前的准备已经完成了。笔者添加了更多的资源和一些方便的功能（比如清除搜索栏中的文本按钮），但是没有添加任何主要的内容。为了准备在Product Hunt上发布，笔者在Sketch中创建了12个单独的框架，然后将它们上传到ProductHuntGif，它立即将其变成了适应产品页面大小的图像。准备发布用了不到半天的时间。不需要找猎头，因为笔者已经是一个PH。通常为产品联系猎头后，需要等几天才能得到回复（笔者也很乐意帮助）。