红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

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

  • 2020-04-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-04-04 19:008061
用户头像
王强 技术是文明进步的力量

发布了 785 篇内容, 共 373.3 次阅读, 收获喜欢 1709 次。

关注

评论

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

NetCore性能排查

神农写代码

行业分析| 音视频呼叫邀请适用于多领域

anyRTC开发者

音视频 WebRTC 语音通话 视频通话 呼叫邀请

还搞不明白,一次性给你总结好网络层概念

华为云开发者联盟

网络协议 IP 网络层 组网

教育行业可以用云管平台吗?有案例介绍吗?

行云管家

云计算 企业上云 云管平台 云管理

java培训-Redis 原理与知识总结分享 不愁面试

@零度

redis JAVA开发

FabEdge V0.5.0 新特性:支持跨集群服务访问

BoCloud博云

开源 边缘计算 cncf

OceanBase 在证券行业基金资管场景落地实践与解决方案

OceanBase 数据库

证券 oceanbase

Apache Impala架构解析及与Hive、SparkSQL的性能比较

编程江湖

安利一个小众但实用的导航网站(推荐收藏)

小炮

导航网站

TDengine 助力智慧燃气,支撑数百万智能终端的接入管理

TDengine

“既要性能,也要安全”,这样的Rust,谁不喜欢!

非凸科技

rust 编程语言 软件开发 招聘

为什么要做等保二级,有什么好处?

行云管家

网络安全 等保 等保2.0

通过IPv6隧道实现天翼云云主机IPv4和IPv6双栈接入

天翼云开发者社区

网络

TDengine 在智慧矿山系统中的应用

TDengine

看完微信抢红包算法你就明白,为啥你不是手气最佳

华为云开发者联盟

算法 微信红包 手气最佳 剩余金额随机法 割线法

OpenHarmony标准设备应用开发(一)——HelloWorld

OpenHarmony开发者

Hello World ! OpenHarmony 标准设备

从0到100:基于微信小程序的羽毛球馆预约系统的开发笔记

CC同学

中科柏诚:用数字技术纾困解难,助力中小企业恢复成长活力

联营汇聚

在 Rainbond 中一键安装高可用 Nacos 集群

北京好雨科技有限公司

开源 Kubernetes nacos PaaS rainbond

提效24.3%!看OA预算管理系统的低代码开发实践

鲸品堂

低代码开发

华为云GaussDB专家走进课堂,跟莘莘学子聊聊数据库

华为云开发者联盟

数据库 人才培养 华为云 GaussDB 华为云数据库

提高企业产品交付效率系列(1)—— 企业应用一键安装和升级

北京好雨科技有限公司

Kubernetes PaaS rainbond

2022年中国音频行业产品洞察分析

易观分析

音频体验 在线音频

助力数字经济 明源云助力不动产行业打造数字新引擎

科技热闻

四大功能!带你初识 Fabric | 容器网络系列第2期

BoCloud博云

云原生 容器网络方案

web前端培训-通过JS 可以读取电脑上所有数据

@零度

JavaScript 前端开发

Java篇|忘记格式化代码,把女朋友鸽了

Jianmu

Java 自动化 持续集成 建木CI 格式化代码

想做好分布式架构?这个知识点一定要理解透!

博文视点Broadview

Spark的job、stage和task的机制论述

编程江湖

给工厂做开发,竟然喝着咖啡听“交响”?

阿里云云效

云计算 阿里云 DevOps 研发 研发提效

【CI/CD研讨会报名,截止最后一天】全程参会,还有惊喜奖品等你拿!

龙智—DevSecOps解决方案

cicd 持续集成 jenkins CI/CD 持续发布

手把手教你怎样用5天完成一款MVP产品_文化 & 方法_Titus Decali_InfoQ精选文章