16 小时发布 — 我在一个周末内设计、构建和发布产品的过程详解。

背景

今年早些时候，我启动了一个名为Lancerlist的副项目，这是一个允许公司在其城市寻找自由职业者的平台。

这次发布是我创意生涯中的一个重要里程碑。这是我第一次在一个周末就构思并发布产品，确切地说，花了16个小时。

相比之下，我的第一个副业项目，一个为网红销售 Instagram Shoutouts 的平台，花了大约 6 个月的时间打造，结果却有点失败。从那时起，我意识到快速发布一个想法的价值，看看它是否值得深入研究。

下面我将这 16 个小时分解为不同的阶段，并解释了我在这段时间内所做的事情。

背景

不久前，我听了一个关于构建垂直网络平台的播客，这个特定的行业是石油和天然气，但让我感兴趣的是，这个网络促进了钻井平台所有者和承包商之间的大多数联系。

在创意自由职业行业，我们拥有 Freelancer.com 和 Elance 等网络，它们连接并促进公司和自由职业者之间的交易。

这些平台存在一些问题，例如这些平台对每笔交易收取高达 20% 的佣金，或者全球竞争导致价格下降并引发竞相压价的现象。

未来，我认为自由职业者和公司都希望更好地掌控整个流程。随着全球竞争的加剧，本地化办公的优势将变得更加重要；沟通、声誉和质量控制都是需要考虑的因素。

想法和范围（1小时）

考虑到这些背景信息，当前的主要问题是公司发现和自由职业者的曝光。

目前，发现选项包括前面提到的自由职业平台或 LinkedIn 等通用社交网络。两者的问题在于搜索结果过于笼统。自由职业平台虽然目标明确，但提供的是全球搜索结果。而 LinkedIn 可以进行筛选，但搜索结果并非针对积极寻找工作的自由职业者。

成熟的自由职业者拥有自己的网络、声誉和现有客户来保持现金流，而入门级自由职业者在早期建立这些资源则比较困难，目前的选择需要创建个人品牌（Twitter）或冷门推广（电子邮件）。

我的解决方案是一个简单的平台，允许自由职业者注册，展示他们的联系方式和所选作品，并设置他们的所在地。然后，公司可以根据地点（最好是他们自己的地点）搜索，根据作品的优劣来寻找并联系自由职业者。

当这个想法在我脑海里浮现时，我集思广益，列出了我认为会对平台有益的潜在功能和交互的清单。

然后，我根据规模（设计和开发时间）和潜在影响对这些功能进行了排序。我将它们绘制成图表，并创建了一份路线图，其中影响大、规模小的功能按最小可行产品的优先级排序。

用户体验设计（1小时）

对于大型项目，我通常会进行深入的用户调研，创建用户画像并绘制用户旅程地图。对于像这样以快速发布 MVP 为目标的小项目来说，这些其实并不重要，因为作为一名兼职自由职业者，我了解目标用户。

因此，我决定使用 UX 阶段来定义信息架构并创建产品关键流程的低保真模型。

信息架构只是列出产品运行所需的信息/数据，然后组织起来以显示信息之间的关系。

说实话，你可以用蜡笔在墙上画出信息架构，但如果你想退还押金，我不建议你这么做。我的意思是，你不需要什么特别的东西，我个人用的是 draw.io 工具，它是一款免费的云端流程图制作工具，能帮我把脑子里的想法更持久地视觉化。

低保真模型是产品的简单视觉呈现，就像在纸上勾勒出屏幕设计图一样。在这个阶段，我会根据信息架构创建基本的布局，并思考用户如何在各个屏幕之间导航。

除了纸笔之外，我最喜欢的创建简单模型的工具之一是 Balsamiq。Balsamiq 拥有类似草图的风格，让我可以创建简单的布局，而无需担心 UI 设计中的细节。然后，我可以在屏幕之间添加链接，创建一个可点击的原型。虽然功能简单，但效果很好。

UI设计（2小时）

现在我已经对想要构建的内容有了大致的设计，是时候把它变成最终产品的样子了。这些设计将作为我前端开发的基础。

我选择的武器是 Figma，它允许我在 Mac 和 Windows 之间切换，所有文件都存储在云中，这意味着我可以轻松地从我离开的地方找到设计，而不必担心我是否拥有最新版本。

我首先要考虑的是品牌，对于配色方案，我的灵感大致来自于《金融时报》等报纸，它们的背景是灰白色，配色方案主要是单色。

我想到最简单的标志是“Lancerlist”，它带有我喜欢的衬线字体，没有图标，这可以稍后再添加，但对于 MVP 来说不是必需的。

对于实际的 UI，对于大型项目，我通常会创建一个设计系统，使所有组件可互换并创建一个交互式原型。

对于这种规模的项目来说，这并非必要。在用户界面设计上，我花了两个小时反复尝试了许多组件设计，并在需要时使用 Dribbble 寻找灵感，当它“足够好”时就停止，而不是完美。非常侘寂。

我最终从 UX 设计了五个全屏，覆盖了 95％ 的界面，我很高兴继续进行开发。

后端（2 小时）

为了启动开发，我总是倾向于先构建项目的后端。这允许我首先构建产品的功能，并且通常也是我在设计阶段发现大多数错误的时候。

我做的第一件事是设置两个数据库：一个临时数据库和一个生产数据库。这样我就可以在本地测试产品，而不用担心意外删除实际用户数据。

该产品的整个后端都基于 Laravel 构建，这是一个模型-视图-控制器 (MVC) PHP 框架。我已经使用 Laravel 多年，并且非常喜欢它，这意味着我可以运用过去的知识来节省时间。

总体而言，后端结构与默认的 Laravel 设置相同。我使用 Laravel Auth 创建了身份验证系统，设置过程实际上只花了 30 秒，而且运行起来非常顺畅，尤其对于 MVP 来说。

前端（8 小时）

该项目中最耗费时间的是前端开发，将 UI 设计转变为功能性、交互性和响应性的界面。

在我的大多数业余项目中，我使用 VueJs 作为主要的前端框架，并构建前端以使其能够与 Vue 组件协同工作。然而，这确实增加了项目的复杂性和开发时间，而且我计划在一个周末内完成，所以我决定保持前端的简洁。

对于 HTML，我决定使用 Laravel 的 Blade 模板系统。对于熟悉 Twig 的人来说，它非常相似，但还有一个额外的好处，那就是能够访问 Laravel 函数。HTML 结构很简单，只有一个布局，各个页面可以扩展它，并将属性（例如页面标题）传递回去。

在样式方面，我再次借助了 Laravel 的另一个功能 Mix。Mix 充当 SCSS 和 JavaScript 的编译器，并且内置于框架中，这意味着无需复杂的 WebPack 设置。所有样式均在 SCSS 中完成，并通过组件、变量和 mixin 进行结构化，使项目井然有序，从而实现快速开发。

为了实现交互性，我使用了纯 ES6 JavaScript 函数，这些函数可以在页面加载时检测交互组件，并当场分配所有功能。总的来说，MVP 阶段的交互性非常低，符合设计初衷，所以添加起来没花太长时间。

完成后，我将其连接到后端以获取实时数据并进行彻底测试，检查我的逻辑中的任何缺陷或代码中的错误并进行相应的修复。

部署（1 小时）

该项目现已准备好启动，但现阶段，它仅存在于我的本地计算机上，是时候将其移到网上了。

我做的第一件事就是创建一个 git 仓库，并将我的代码推送到那里。这样我就可以控制代码的不同版本，从而可以同时开发和发布多个功能。

然后，我在 Laravel Forge（一个提供用于管理基于 Ubuntu 的服务器的用户界面的工具）的帮助下设置了一个基本的 DigitalOcean droplet（服务器）。

然后，我购买了域名，设置了指向我服务器的 DNS 记录，并在 Forge 中为该域名创建了一个新项目。之后，我在 Forge 中设置了部署，它将存储在 git 仓库中的代码复制到我的服务器上。

我继续在 Forge 中建立一个新的数据库，并从我的本地计算机复制该数据库。

DNS 记录大约 30 分钟后就上传完毕，我们开始工作了。项目现已启动，并在主域名上运行。
大功告成。

发射（1小时）

是时候发布啦！以前我总是迟迟不敢发布新项目，要么是因为想把项目做得完美，要么是因为害怕发布自己的成果。但这次不一样了。

我决定在Twitter和ProductHunt两个阵地展开产品上线，所以我的准备工作都集中在这两个阵地上。
在Twitter上，我创建了账户，用头像、主色调（当时流行这种颜色）打造了品牌形象，并在个人简介中加入了行动号召，方便感兴趣的用户使用。我为网站制作了社交媒体卡片，并发布了一条带有行动号召和链接的置顶推文。

对于 ProductHunt，我通过创建缩略图、截屏以及预先撰写第一条旨在提升用户参与度的评论来准备发布。然后，我通过 ProductHunt 控制面板安排了第二天的发布。

我构建了一个非常基础的、受密码保护的仪表盘（作为一个新的 Laravel 项目），用于统计页面浏览量和注册量，并将其部署到子域名，这样我就可以随时随地监测启动情况。
第二天它就上线了。

你可以在这里找到280字的发布会后续总结。以后我会再写一篇文章，详细分析发布会的各项数据。

但为了让你大致了解一下发生了什么，我在午夜乘坐夜间巴士前往康沃尔冲浪时启动了它，18 小时后，我坐在 Wetherspoons 做客户支持！

请访问lancerlist.co查看项目实时进展。您也可以在 Twitter 上关注我的账号@madebycrevans
并关注我的进展。

最初发表于https://madebycrevans.com。