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

图源：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。一般为产品联系猎头后，须要等几天才能获得回复（笔者也很乐意帮助）。

提示:在上传图像以前，可能须要更改图像的顺序才能正确播放。

对于其余图像（包括本文顶部的图像），笔者使用GIF Brewery 3快速获取和调整产品预览的大小。这是目前为止发现的最好的快速建立图像的工具。

结语

笔者不肯定这款产品会有什么反响，但知道这一次，本身在产品开发道路上迈出了最好的第一步。至少已经创建了一个社区，能够利用这个社区来得到反馈，以进行下一步。

笔者不用发布一个全新的平台，如今已经有一个站点，来交叉推广和收集早期阶段的用户。

不管是策展资产、简单的工具，仍是电子邮件模板，有许多能够作的免费的产品，开创运行只需很是少的时间或金钱。做为企业家，咱们必须首先为市场带来价值，而后才能准确地知道咱们的社区须要什么样的产品。

图源：unsplash

正确审查市场，探索项目发展道路与通往市场之路的契合之处，是完成一个产品的关键。文章中的方法有没有给你一些启发呢，快去实践一下吧~

留言点赞发个朋友圈

咱们一块儿分享AI学习与发展的干货

编译组：杨月、高荣蔚
相关连接：
https://medium.com/better-programming/i-designed-built-and-launched-an-mvp-platform-in-5-days-c06fa629adb9

如转载，请后台留言，遵照转载规范

推荐文章阅读

ACL2018论文集50篇解读
EMNLP2017论文集28篇论文解读
2018年AI三大顶会中国学术成果全连接
ACL2017论文集：34篇解读干货全在这里
10篇AAAI2017经典论文回顾

长按识别二维码可添加关注

读芯君爱你