未来已来|人工智能与数据库融合发展分论坛议程初探 了解详情
写点什么

手把手教你怎样用 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:008108
用户头像
王强 技术是文明进步的力量

发布了 793 篇内容, 共 385.7 次阅读, 收获喜欢 1727 次。

关注

评论

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

备战金九银十,两份JAVA面试题2022最新整合版,祝你脱颖而出

王小凡

Java MySQL spring 面试 springboot

HarmonyOS分布式协同演奏技术实现路线(Java)

程序员啊叶

Java 编程 程序员 架构 java面试

五面阿里,终拿offer,不明白为什么面试官总喜欢问Java这种问题

程序知音

Java 阿里 后端技术 八股文 Java面试八股文

大厂面试突击必备:“网络编程”高频八连击,扛得住吗?

程序员啊叶

Java 编程 程序员 架构 java面试

如何写一份高可读性的软件工程设计文档

C++后台开发

数据库 软件工程 后端开发 C/C++后台开发 C/C++开发

蓦然回首,“工厂、构造、原型”设计模式,正在灯火阑珊处

掘金安东尼

JavaScript 前端 7月月更

时序数据库在船舶风险管理领域的应用

CnosDB

IoT 时序数据库 开源社区 CnosDB infra

Kubernetes应用管理深度剖析

Bob

云原生 容器化 后端技术 Kubernetes 集群

太牛了,百度这份开发手册几乎涵盖了Spring Cloud所有操作

程序猿阿宇

架构 java程序员 java面试 秋招 程序员‘

CMake库搜索函数居然不搜索LD_LIBRARY_PATH

华为云开发者联盟

后端 开发

只分享这一次!阿里软件架构师深入底层手写JDK源码

程序猿阿宇

架构 Java 面试 大厂技能 后端技术 秋招

Moonbeam创始人解读多链新概念Connected Contract

One Block Community

区块链

一文读懂Elephant Swap,为何为ePLATO带来如此高的溢价?

鳄鱼视界

京东发布这份SpringBoot实战手册带你从0手动搭建企业级商城项目

程序猿阿宇

程序员 面试 java程序员 Spring Boot CLI 秋招

六面蚂蚁金服,唬住了面试官要了30K;其实Java面试也没那么难

程序知音

Java 程序员 后端技术 秋招 Java面试八股文

我给大家免费公开五份阿里Java架构师学习手册!助力金九银十

程序猿阿宇

架构 Java 面试 大厂面试 大厂技能 秋招

SocialFi 何以成就 Web3 去中心化社交未来

One Block Community

区块链

4位资深专家多年大厂经验分享出Flink技术内幕架构设计与实现原理

程序员啊叶

Java 编程 程序员 架构 java面试

数据中台建设(五):打破企业数据孤岛和提取数据价值

Lansonli

数据中台 7月月更

阿里内网最新发布“M8”级Java面试笔记,助力金九银十

程序员啊叶

Java 编程 程序员 架构 java面试

加密生活,Web3 项目合伙人的一天

TinTinLand

区块链

手慢无!阿里亿级流量高并发系统设计核心原理全彩笔记现实开源

Java全栈架构师

Java 面试 程序人生 分布式锁 架构师

想用K8s,还得先会Docker吗?其实完全没必要

程序员啊叶

Java 编程 程序员 架构 java面试

上天入地Hadoop——使用高性能分布式技术完成大数据处理任务

程序猿阿宇

大数据 架构 Java 面试 java程序员 编程、

腾讯被裁,转头去字节!Java后端核心面试题在手,怎能进不去大厂

程序员啊叶

Java 编程 程序员 架构 java面试

浅谈非 EVM 公链的可能性: 兼容多类型虚拟机是否是区块链未来?

One Block Community

区块链

干货来袭!2022阿里巴巴全新出品Spring全家桶全栈笔记(终极版)奉上

程序员小毕

Java spring 程序员 面试 微服务

难道Redis真的变慢了吗?

程序员啊叶

Java 编程 程序员 架构 java面试

真香!180页100+题15W+字解析的《Java高级面试指南》,果断收下

程序员啊叶

Java 编程 程序员 架构 java面试

SMI 与 Gateway API 的 GAMMA 倡议意味着什么?

张晓辉

Kubernetes 服务网格 SMI

[ Kitex 源码解读 ] 熔断机制是如何实现的

baiyutang

Go 微服务 微服务架构 kitex CloudWeGo

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