写点什么

手把手教你怎样用 5 天完成一款 MVP 产品

  • 2020 年 4 月 04 日
  • 本文字数:3048 字

    阅读完需:约 10 分钟

手把手教你怎样用5天完成一款MVP产品


本文最初发布于 Better Programming 博客,经原作者授权由 InfoQ 中文站翻译并分享。


过去一年,我发布了几款产品。从最初的构思到最终发布,每款产品都需要 3-6 个月的时间。当时,我认为这个节奏很快了,但投入这么多时间后,所有项目的总利润都徘徊在 500 美元以下。


这些项目的实践让我的编程经验和知识均有所增长。但是,我还是希望换一种做事方式。即使失败,也要失败地更快些。


在这一次,我采取了一种不同的方法。


首先建立一个社区

对于构建一款怎样的产品,我有了想法,但是直到目标受众说他们真有需要时,我才会确定下来一个概念。


项目的早期阶段,我的目标是建立一个受众群体并开始与他们对话。对我而言,目标受众是像我一样的前端开发人员。


我没有试图从一开始就树立具体的愿景,而是先把想法约束起来,直到找出一个基本的价值要素。这可能会是一个最小产品,它能允许我为特定的目标用户传递价值,并让他们定期与站点互动。


有时候,我们将其称为“小可爱产品”(Minimal Lovable Product)。


我明白,只要先建立一个对我免费提供的产品感兴趣的社区,那么我就有了持续的交流渠道,然后就能专门针对他们的需求去开发产品。最好围绕你的长期目标创建最小产品。但是,它不一定是你终极想法的低配版本。它只需为你的最终目标客户群提供价值即可。


下面这个例子阐释了我是怎样从一个基本价值要素入手,制定长期产品目标的。


我的长远目标

许多开发人员都在很多完整的项目和 UI 组件上投入好几周的时间,之后再也不用它们做任何事情了。在我看来,许多产品都可以卖上价,但实际上并不存在一个专门针对这一需求的市场。


因此,我的长期目标是打造一个允许开发人员买卖自己创建资源的场所。


我有了一个初步的想法,但是它随时都可能改变或转向,并且我不会冒险花费大量时间去开发一个功能齐全的平台。


我仍然不知道在这个细分市场中,我的最终产品将是怎样的形态,也没必要搞清楚这个问题。我的社区将会帮助我决定下一步的构建方向,具体走向将根据数据和市场的直接反馈来确定。


我的短期基本价值交付形态

我能做的就是从项目的基本价值要素入手:开发人员可以在这里为他们的下一个项目找到精选资源。


本质上,这个概念与我最初的想法是一样的,只是没有那么多繁琐功能。虽然平台本身不会有买卖交易,但我至少应该能评估人们对此类产品(即精选资源)的兴趣,并看看人们对哪种资源表现出最大兴趣。


我拒绝那些需要大量时间编写的功能

  • 没有数据库

  • 没有登录系统

  • 没有用户个人资料

  • 没有付款整合渠道

  • 没有文档(条款和条件或指南)

  • 没有让项目花费超过一周时间才能开发出来的功能


我专注于能带给市场的独特价值

我认为自己有策划展览的天赋,尤其是在设计和开发资源方面特别熟练。正是出于这种想法,我决定创建一个精选的前端资源平台。尽管市面上也有类似的存储库,但我想要做一些独特的事情。


我想要一系列框架,专注于质量而非数量。每项资源在发布前都经过精心挑选和周密考虑。我决定只发布自己会去使用的东西。


我已经保存了一大堆书签,并在 Medium 上就我收集到的资源写了一些文章,因此我认为这是个不错的起点。我首先要决定为哪些框架展示资源,最后,我只选择了那些自己亲身使用过的框架。


发布过程

1.简化用户体验

我花了半天时间在 Sketch 中创建 UI 线框。我参考了其他类似网站,并将最佳思路汇总成一个两页的站点。


我喜欢在设计阶段添加额外细节,但这次我强迫自己把尚未准备好在接下来的几天内构建的那些元素都删掉了。另外,因为我是第一次做设计师,所以也不在乎网页的外观是不是精美。这一阶段用黑白色调就已足够,其他颜色或元素设计都会在今后加入进来。



2.确定样式

虽然我可以选择现成的 CSS 框架(如 Bootstrap 或 UI 套件),但我最近为另一个项目构建了自己的最小 CSS 框架,所以决定改用它。


它非常小,仅包含浏览器重置、按钮、表单、导航栏和卡片之类的基本元素,因此非常适合我的 MVP 项目。我更喜欢没有网格的框架,因为这段时间我很喜欢使用 CSS Grid。如果你要自己构建一个基于卡片的网站,请学习 Grid 的基础知识(它顺滑的卡片布局太棒了)。总的来说,针对这个项目调整,我的 CSS 框架花费不到一天的时间。



我的最小化无网格的 CSS 框架


3.创建组件

如今,我构建的大多数 Web 应用用的都是 Vue,这个站点也是如此。


我首先粗略绘制出各个组件(基于我的 Sketch 线框)、路径以及一个详细的卡片元素,后者用来放各项资源。你可能会注意到,我发现了几种进一步简化 UI 的方法,这是在我开始对着线框写代码时找出来的。


我发现,与其使用一个 modal 组件为每个资源显示下载/查看按钮,不如让人们通过在卡片上的悬停覆盖来访问这些 UI。这也是坚持使用线框的一个很好理由,因为我最后甚至没有使用这种设计(节省更多时间)。这个悬停叠加层也能在移动设备上使用,点击卡片即可。


最后做出来的用户界面体验更好,用户可以更快地访问资源。如果以后需要扩展功能(如 modal),那么到时也能轻松添加它们。完成所有页面、组件和应用程序逻辑大约需要整整两天的时间。



4.决定数据结构和来源

我按框架分离了.json数据文件,这样以后添加起来会更容易。我还决定将它们保留在项目文件中,而不是使用外部数据库。这样,如果我改变主意要换一个数据库来用,也无需更改一堆代码来适配新的数据库(如你在第 5 步中将看到的,这是一个明智决定)。


确实,收集资源是工作中最耗时的部分,尤其是我需要手动优化每张图像。总而言之,这一步花了整整两天时间。



5.部署到主机

网站准备就绪后,我决定在 Netlify 上发布它,因为我听说过它的好处。尽管部署过程很容易,但是我在图像加载方面遇到大问题。


虽然我手动优化了每张图像(减小宽度、通过多个图像优化器「如 Ezgif 等」处理它们),但一些大约 300kb 的文件仍需要花费一分钟多的时间才能由 Netlify 加载完毕。经过一整天的故障排除后,我决定将网站完全移至 Firebase,看看这是否能缩短加载时间。


两个小时后网站迁移完毕,DNS 记录已传播,我的站点突然就飞起来了。如果我把自己困在某个数据库选项的话,发布过程就可能遇到严重延迟。现在我舍弃掉复杂事物,只构建自己需要的东西,这样就节约了时间和精力,最后还获得了最佳结果。


我本可以更快上线网站,但是处理这些问题浪费了我至少一天时间。


6.准备发布并上线

到这个时候,我已经准备好发布了。


我增加了一些资源和一些便利功能(例如用来在搜索字段中清除文本的按钮),但没有添加任何主要改进。为了准备在 Product Hunt 上发布,我在 Sketch 中创建了 12 个单独的框架,然后将它们上传到了ProductHuntGif,这个站点立刻就将它们变成了适合我产品页面的 gif 尺寸。发布准备过程需要不到半天时间。



我的 GIF 的 Sketch 画板



提示:在上传前,你可能必须颠倒图像的顺序才能正确播放。


对于其他图像(包括本文顶部的 GIF),我使用了 GIF Brewery 3 来快速捕捉和调整产品预览的大小。截至目前,这是我发现的用于快速在线创建 GIF 的最佳工具。


总结

我不知道这个产品会怎样走下去,但我知道,这一次我在产品开发过程中迈出最好的第一步。至少,我将建立一个社区,并利用这个社区来获取有关下一步工作的反馈。


现在,我打下了一个基础,可以吸引早期用户并进行交叉推广,而非启动一个全新平台。


无论是要做资产精选、一个简单的工具还是电子邮件模板,我们都有许多免费的产品可用,它们可以让你花费很少时间或金钱来开发并上线。作为企业家,我们必须首先为市场带来价值,然后我们才能弄清社区需要怎样的产品。


英文原文:


I Designed, Built, and Launched an MVP Product in 5 Days


2020 年 4 月 04 日 19:007681
用户头像
王强 技术是文明进步的力量

发布了 645 篇内容, 共 241.1 次阅读, 收获喜欢 1409 次。

关注

评论

发布
暂无评论
发现更多内容

上天的源码要不要——GitHub 热点速览 v.21.08

HelloGitHub

Python GitHub 开源 Go 语言

透彻解析!如何快速的开发一个完整的直播app,薪资翻倍

欢喜学安卓

android 程序员 面试 移动开发

工业互联网助力数字中国建设(新论)

浪潮云

工业互联网

诊所数字化:最大的数据资产-患者数字档案内容

boshi

电子病历 数字化医疗 七日更 28天写作

前端面试常考题:JS垃圾回收机制

华为云开发者社区

JavaScript Vue 前端 js 垃圾回收

CL的配置中心知识整理

白鹿猫余

微服务 技术选型 配置中心 配置管理

解决dyld: Library not loaded icu4c

一个大红包

brew icu4c

线程池面试必考

叫练

面试 线程池 线程池工作原理

Fast AI人工智能审图平台-建筑图纸设计效率的倍增器

AI AI审图

Mybatis【20】-- Mybatis延迟加载怎么处理?

秦怀杂货店

数据库 缓存 mybatis 加载

压力太大的话,就放点气儿吧

道伟

28天写作

如何解决深度推荐系统中的Embedding冷启动问题?

王喆

机器学习 深度学习 推荐系统 计算广告 Embedding

西北大学研发猴脸识别技术,金丝猴可刷脸打卡;IJCAI 2020丨基于学习实例隐空间的文本风格转换

京东科技开发者

人脸识别 IT 量子通讯

产品经理训练营第四周总结

产品经理训练营

什么容易被记住——造梦师指南

Justin

心理学 28天写作 游戏设计

透彻解析!在字节跳动我是如何当面试官的,讲的明明白白!

欢喜学安卓

android 程序员 面试 移动开发

go get下载包失败问题

happlyfox

28天写作 2月春节不断更 Go 语言

读书笔记-MySQL

crush

MySQL

产业实践推动科技创新,京东科技集团3篇论文入选ICASSP 2021

京东科技开发者

人工智能 机器学习 信号 语音识别

Kafka.05 - 生产者与消费者介绍

insight

kafak 2月春节不断更

基于matlab的控制系统与仿真2-传递函数模型

AXYZdong

matlab 2月春节不断更

【进阶】面试官问我Chrome浏览器的渲染原理(6000字长文)

魔王哪吒

学习 程序员 chorme 28天写作 2月春节不断更

Selenium 常用方法与属性、鼠标悬停与 Select 操作

梦想橡皮擦

Python 28天写作 2月春节不断更

从磁盘读取成本分析两种 100% 遍历思路:按格子遍历 & 按线遍历

宫水三叶的刷题日记

面试 LeetCode 数据结构与算法

Java lambda表达式人类使用指南

ES_her0

28天写作

“云原生”的应用价值及关键属性解读

浪潮云

这些面试题你会吗?连续四年百度Android岗必问面试题!深度好文

欢喜学安卓

android 程序员 面试 移动开发

话题讨论 | 技术人员的职业发展困惑,你也有么?

架构精进之路

职业规划 话题讨论 28天写作 技术人员

(28DW-S8-Day3) 比特币、 区块链是什么?

mtfelix

比特币 区块链 28天写作

我在极客时间录课的故事(四):学习产生惰性是一种正常现象

石桥码农

我在极客时间录课的故事

关于GaussDB(DWS)的正则表达式知多少?人人都能看得懂的详解来了!

华为云开发者社区

正则表达式 GaussDB

Flutter 自动化测试

Flutter 自动化测试

手把手教你怎样用5天完成一款MVP产品-InfoQ