『InfoQ』手把手教你怎样用 5 天完成一款 MVP 产品( 二 )

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