從設計、製做到發佈，教你5天完成一個MVP產品

圖源：unsplash

一個產品，從構思到發佈，耗時3—6個月，總利潤只在500美圓如下，過去一年中筆者完成的每個產品皆是如此。當時筆者以爲這樣已經很是迅速了。直到這一次，採起了不一樣的方法以後，工做效率猶如坐上噴射機。

雖然花費這麼長的時間也積累了編碼經驗和知識，但若是能早一點意識到問題並改變方式，顯然會讓筆者更快樂一點。

從半年到5天的極限挑戰究竟是怎樣實現的？一塊兒來看看吧！

首先，從創建社區開始

筆者很清楚想要打造什麼樣的產品，然而在目標受衆表示他們的須要以前，不要被這個想法束縛。在早期階段，目標很簡單，就是創建受衆並開始對話。對筆者來講，目標受衆是像本身這樣的前端開發人員。

不是一開始就試圖實現一些具體的願景，先把想法精減到一個基本的價值元素。這將是一個最小可行的產品，能夠交付給指定的目標用戶羣體，並讓他們按期與網站互動。

這也稱爲 Minimal Lovable Product。

若是從一個對筆者提供的免費內容所感興趣的社區開始，能夠進行長期對話，而後專門圍繞他們的需求開發一個產品，最好是圍繞長期產品目標建立最低限度的產品。但它並不必定是最終想法的一個簡化的版本，它只須要將價值傳遞給最終的目標客戶羣體。

圖源：unsplash

下面這個例子，會說明筆者是如何從一個基本的價值元素開始制定一個長期的產品目標的。

長期目標

不少開發人員都有完整的項目和UI組件，他們花了幾周時間開發，但卻歷來沒有使用過。這些產品中，有許多都是能夠銷售的，但目前尚未針對這方面的專門市場。因此，筆者的長期目標就是讓開發人員買賣他們創造的資源。

這樣初步的想法隨時可能會改變，冒險開發一個功能齊全的平臺並非合適的選擇。筆者仍不知道這個市場的最終產品將會是什麼，也沒必要這樣作。社區會基於數據和市場的直接反饋來輔助決定下一步建立什麼。

短時間目標：基本價值交付

如今能作的是從項目的基本價值元素開始：開發人員爲其下一個項目尋找策展資源的地方。除去一些複雜的功能，這個概念基本和最初的想法是同樣的。雖然不在平臺上交易，但至少應該可以估測人們對這類產品（即策展資源）的興趣，會對哪類資源興趣最大。

拒絕那些須要更多時間編寫代碼的功能

· 沒有數據庫
· 沒有登錄系統
· 沒有用戶配置文件
· 沒有支付整合
· 沒有文檔（條款和條件或指南）
· 沒有使項目的開發時間超過一週的功能

圖源：unsplash

專一於能進入市場的獨特價值

筆者有一個策展的訣竅，特別是當涉及到設計和開發資源的時候，所以決定建立一個策展的前端資源平臺。雖然也有相似的存儲庫，但筆者想獲得一些特別的資源。

目標是製做一系列框架，並把重點放在質量上而不是數量上。每種資源在通過精心挑選和深思熟慮後才能發佈。筆者決定只發布本身想用的東西。

筆者已經保存了大量的書籤，而且在Medium上寫了一些關於本身所策劃的資源的文章，這是一個很好的起點。首先決定要爲哪些框架管理資源，最後只選擇那些有直接經驗的框架。

發佈過程

1.簡化用戶體驗

筆者花了半天時間在Sketch中建立了一個UI線框，參考其餘相似的站點，把最滿意好的想法呈如今一個兩頁的站點中。筆者傾向於在設計階段添加額外的細節，強迫本身在接下來的幾天裏刪掉全部尚未準備好構建的元素。另外，做爲設計師，筆者第一次不注重好看與否。這一階段黑白已經足夠了，任何顏色或元素設計之後再議。

2.肯定樣式

雖然能夠選擇現成的CSS框架，好比Bootstrap或UI kit，但筆者最近爲另外一個項目自創了最簡單的CSS框架，因此決定使用它。它很是簡單，只包括瀏覽器重置、按鈕、表單，導航欄和卡片等基本元素，所以很是適合用於此MVP項目。筆者更喜歡沒有網格的框架，由於更習慣使用CSS網格來處理全部的事情。若是你正在自創一個基於卡片的站點，請學習網格的基礎知識（對於流體卡布局來講這是難以想象的）。總的來講，定製此CSS框架以適應這個項目花了不到一天的時間。

最簡單的、無網格的CSS框架

3.建立組件

筆者經常使用Vue來建立大多數網絡應用程序，這個網站也如此。首先粗略構建了各個組件（基於線框圖草圖）、路由和一個詳細的卡元素，數據中的每一個資源將循環使用這些元素。你可能會注意到，在開始編碼時，筆者發現了比線框圖更好的方法，可以進一步簡化UI。與使用模態組件來顯示每一個資源的下載/視圖按鈕相比，經過卡自己的懸停覆蓋來訪問它們，會更方便使用。一樣，這也是堅持使用線框的一個很好的理由，最終甚至沒有使用那個設計（節省了更多的時間）。這個懸停覆蓋也是可動的，點擊卡就可運行。

這是爲了更好的用戶體驗，用戶能夠更快地訪問資源。若是之後須要像模態框這樣的擴展功能，就能夠輕鬆地即時添加它們。完成全部的頁面、組件和應用程序邏輯大約花了整整兩天的時間。

這就是完整的應用程序，很簡單吧。

4.肯定數據結構和數據源

筆者將.json數據文件按框架分開，以便以後易於添加，並將其保存在項目文件中，而不是使用外部數據庫。這樣，若是改變了使用的數據庫，就沒必要更改一堆代碼來適應它（從第5點中你將會發現這個決定多麼明智）。收集資源確實是這項工做中最耗時的，尤爲是手動優化每一個圖像環節。總而言之，這隻花了兩天的時間。

5.部署到主機

網站完成以後，筆者首先選擇在Netlify上發佈。雖然部署很容易，但在圖像加載方面遇到了重大問題。即便手動優化了每一個圖像（減小寬度，用多個圖像優化器運行，如Ezgif等），Netlify也須要花費一分鐘的時間來處理300KB的文件。

通過一成天的故障排除，筆者決定將站點徹底遷移到Firebase，看看這是否會減短加載時間。兩個小時後，站點開始運轉，DNS記錄已經傳播，這個站點忽然迅速火了起來。若是以前只使用單一數據庫，可能會致使重大的啓動延遲。經過簡化，只創建本身須要的內容，節省了本身的時間和精力，最終仍然獲得了最好的結果。筆者本能夠更快地發佈，但處理這些問題至少花了一天的時間。

6.準備發佈並上線

爲圖像繪製草圖

此時，發佈前的準備已經完成了。筆者添加了更多的資源和一些方便的功能（好比清除搜索欄中的文本按鈕），可是沒有添加任何主要的內容。爲了準備在Product Hunt上發佈，筆者在Sketch中建立了12個單獨的框架，而後將它們上傳到ProductHuntGif，它當即將其變成了適應產品頁面大小的圖像。準備發佈用了不到半天的時間。不須要找獵頭，由於筆者已是一個PH。一般爲產品聯繫獵頭後，須要等幾天才能獲得回覆（筆者也很樂意幫助）。

提示:在上傳圖像以前，可能須要更改圖像的順序才能正確播放。

對於其餘圖像（包括本文頂部的圖像），筆者使用GIF Brewery 3快速獲取和調整產品預覽的大小。這是目前爲止發現的最好的快速建立圖像的工具。

結語

筆者不肯定這款產品會有什麼反響，但知道這一次，本身在產品開發道路上邁出了最好的第一步。至少已經創建了一個社區，能夠利用這個社區來得到反饋，以進行下一步。

筆者不用發佈一個全新的平臺，如今已經有一個站點，來交叉推廣和收集早期階段的用戶。

不管是策展資產、簡單的工具，仍是電子郵件模板，有許多能夠作的免費的產品，開創運行只需很是少的時間或金錢。做爲企業家，咱們必須首先爲市場帶來價值，而後才能準確地知道咱們的社區須要什麼樣的產品。

圖源：unsplash

正確審查市場，探索項目發展道路與通往市場之路的契合之處，是完成一個產品的關鍵。文章中的方法有沒有給你一些啓發呢，快去實踐一下吧~

留言點贊發個朋友圈

咱們一塊兒分享AI學習與發展的乾貨

編譯組：楊月、高榮蔚
相關連接：
https://medium.com/better-programming/i-designed-built-and-launched-an-mvp-platform-in-5-days-c06fa629adb9

如轉載，請後臺留言，遵照轉載規範

推薦文章閱讀

ACL2018論文集50篇解讀
EMNLP2017論文集28篇論文解讀
2018年AI三大頂會中國學術成果全連接
ACL2017論文集：34篇解讀乾貨全在這裏
10篇AAAI2017經典論文回顧

長按識別二維碼可添加關注

讀芯君愛你