拋棄 MVP，採用最小可行原型 (MVPr)

追求完美是一個微妙的陷阱，往往會導致設計師陷入無休止的迭代和審查循環。 在數字產品領域尤其如此，每個交互和圖形元素都可能成為設計痴迷的對象。

但是，當我們退後一步觀察數字產品設計的跨學科性質時，很容易看出設計師是如何落入完美陷阱的。

想想設計單個數字產品所涉及的所有人員和角色：

• 設計研究人員
• 用戶界面設計師
• 信息架構師
• 用戶體驗設計師
• 產品設計師
• 產品經理
• 內容策略師
• 品牌專家
• 用戶體驗文案作家
• 等等。

以一種或另一種方式，這些中的每一個都相交。 例如，如果不考慮用戶體驗，產品的用戶界面就不可能成功。 相互關聯帶來了理解設計決策如何相互影響的壓力： “如果我們做 X，那將如何影響 Y 和 Z？”

這種類型的戰略預測可能很有價值，但它也可能導致設計過程停滯不前，陷入可怕的完美循環： “我們必須先得到 X，然後才能執行 Y 和 Z。”

那麼，有什麼選擇呢？ 有沒有一種方法可以根據真實世界的指標和從真人那裡獲得的見解來快速創建、發布、測試和改進數字產品？

在本指南中，我們將通過最小可行原型的視角來解決這些問題，並為設計人員提供構建、測試和改進數字產品的極其簡單的過程。

使用最小可行原型模擬發射

沒有人知道任何事情……整個電影領域沒有一個人確切地知道什麼會起作用。 每次出去都是一個猜測，如果你幸運的話，一個受過教育的人。 ——威廉·戈德曼，奧斯卡獲獎編劇

數字產品設計過程的最早決定充其量只是基於猜測。 在產品到達實際用戶手中之前，一切都是理論上的。 另一方面，在產品準備好之前推出產品可能會損害其聲譽（代價高昂的錯誤）。

如果有一種方法可以在任何主要設計工作開始之前就模擬發布並確定產品的可行性怎麼辦？

這就是最小可行原型 (MVPr) 的價值，這是一種產品設計方法，與更熟悉的“最小可行產品”相比，它需要的時間和金錢要少得多。

以下是最小可行原型 (MVPr) 設計過程的概述：

1. 發現
2. 研究
3. 信息架構
4. 視覺設計
5. 發射
6. 測試

等待！ 這不是每個人都使用的過程嗎？

是的，我們將看到，依靠上述步驟的基本要素，我們可以成功……

• 模擬真實產品的功能；
• 模仿真實產品的發布； 和
• 發現一個真正的產品是否值得建造。

一步一步：如何構建 MVPr

1. 發現：開始做決定

開始發現過程的一個好方法是搜索與您的想法相似的網站、博客和應用程序。 了解他們的歷史、目標市場、運營方式等。如果您發現沒有一個相關競爭對手能像您的原型那樣做，請繼續前進。

此步驟不需要任何專業知識。 秘訣就是做——從意圖到行動。

特別注意競爭對手的優勢和劣勢。 您如何使用他們已經完成（或未能完成）的事情來使您的原型更強大？

經過 1-2 小時的研究，您應該能夠確定最重要的競爭對手並了解每個競爭對手的關鍵方面。

2. 研究：定義你的用戶

誰是你的目標用戶，他們為什麼要關心你的產品？ 理解這一點至關重要，但我們必須從計算假設開始。 最好從強烈的自以為是的願景開始。 不要再猜測或嘗試“為每個人做點什麼”。 我們不想要淡化的設計。

相反，請仔細查看在發現階段發現的競爭對手網站，並根據常識描繪潛在用戶的畫像。

以下是一些可在網絡上輕鬆訪問的實際調查領域：

• 訪問評論網站，看看人們如何評價他們與競爭對手的經歷。
• 在社交媒體上關注您產品所在行業的影響者，並觀察他們如何吸引受眾。
• 搜索信譽良好的新聞文章，詳細了解您的競爭對手的運作方式。
• 查看競爭對手在社交媒體上與其用戶的互動。
• 看看您是否可以找到任何討論您的競爭對手的問題或問題的論壇。

無需大量財務投資即可從這些途徑中的每一個中獲得寶貴的見解。 這對於預算有限的小型設計團隊尤其重要。 大品牌在研​​究上花費大量資金，但小團隊和個人自由職業者必須想辦法變得更有資源。

3. 信息架構：構建原型

原型將如何工作，最重要的信息是什麼？

開始回答這個問題的最簡單方法是分析與您正在構建的原型相似的一流站點。 您選擇參考的網站的整體外觀和體驗應該非常出色。

首先將網站分成幾部分。 什麼是所有相關頁面，它們的視覺結構如何？ 不要害怕反轉網站的線框，然後使用您自己的信息、顏色、圖像等重新創建它。

為什麼要這樣做？ 您的網站可能會以與競爭對手網站類似的方式運行——您只是有不同的目標。 如果用戶對已建立的體驗反應良好，則無需發明復雜的系統。

*專業提示：在研究網站的信息架構時，一種有用的技術是截取屏幕截圖並將其設為灰度，這樣您就不會因顏色的影響而分心（這可能很有說服力）。

在此之後，利用在線資源讓設計師能夠快速從零開始到交互式原型。 有大量的用戶界面工具包、HTML 模板、WordPress 主題等等。 不要害怕修改它們以適合您的原型，也不要擔心像素完美或漂亮的代碼。 在這個階段，沒有人關心。 他們關心你的產品是否有用。

以下是使用免費 UI 工具包的工作原理：

我們在上圖中完成了什麼？

• 我們刪除了所有顏色和圖像。
• 導航欄保持不變。
• 過濾系統的功能保持不變，但措辭有所改變。
• 為了更好地展示我們計劃使用的圖像，我們從兩列變為一列。

在不到一個小時的時間內，我們就有了進一步開發原型的視覺基礎。

4. 視覺設計：重新利用免費的 UI 資源

原型的視覺外觀和感覺離不開它的工作方式。 這不僅僅是關於圖形。 有影響力的視覺設計講述一個故事，並提供具有真正價值的體驗。

在這裡，視覺一致性是關鍵，因為它可以幫助用戶熟悉產品並更有效地導航。 為了在原型開發的早期實現這種一致性，重新利用免費的 UI 資源是明智的。

以這種方式工作，您不必花費數小時開發一個有凝聚力的設計系統。 排版、按鈕樣式、圖標和所有其他重要的 UI 組件都得到了照顧。

5. 發布：編碼還是不編碼？

是時候與全世界分享您的原型了。 幸運的是，將模型轉換為動態原型比以往任何時候都容易。 多虧了許多直觀的工具，你甚至不需要知道如何編碼——但你應該學習嗎？

無代碼 MVPr

完成視覺設計後，將原型嵌入到登錄頁面中，以便訪問者可以與之交互並提供有關您的想法的一般反饋。 在 MVPr 設計過程的這一點上，有幾種方法可以創建無代碼原型。 以下是您的選擇：

基本原型

• InVision 具有構建和測試基本原型所需的所有功能，它提供了無痛體驗，沒有復雜性。

富媒體原型

• 對於復雜的交互、過渡和動畫，Principle 非常有用。

100% 逼真的原型

• Framer 允許設計師模擬任何可以想像的數字產品體驗。 當原型必須在原生動畫和基於邏輯的編碼方面看起來和感覺真實時，這是完美的選擇（例如：如果這樣做，那就這樣做）。
• Webflow 提供了在 100% 所見即所得畫布上設計、使用代碼構建和啟動響應式網站的能力。

單擊以查看全尺寸圖像。

編碼的MVPr

代碼可以是一個了不起的盟友。 毫無疑問，這是構建產品的最佳方式。 主要缺點是您需要知道如何編寫代碼才能體驗高級定制的好處。 如果沒有適當的知識庫，選擇嘗試代碼會減慢您的速度。

有很多代碼入門工具包可以幫助您順利進行。 例如，我們上面介紹的 UI 工具包有自己的 HTML 版本可供下載：

6. 測試：利用廣告洞察

測試原型的秘訣在於工具可以讓您以最少的努力獲得最大的洞察力，同時仍然提供價值。 您所需要的只是幾美元和一些耐心的解決問題的方法。

衡量對您的產品的興趣的實際第一步是製作廣告並定位在研究階段發現的人。 根據您的受眾和您設計的產品類型，您可以在 Google、LinkedIn、Instagram 或 Twitter 上投放廣告。 對於企業對消費者的產品，推薦使用 Facebook。

*專業提示： AdEspresso 是一個方便的地方，可以同時運行數百個版本的社交廣告，同時收集有用的比較分析。

投放廣告，你會學到兩件事：

1. 查看您廣告的人數
2. 點擊您的廣告的人數

一旦您確認您的目標受眾有興趣與您的廣告互動，您就需要為早期用戶創造價值。 這是如何做：

• 添加“訂閱”表單並要求用戶提供他們的電子郵件地址。
• 跟進以讓他們知道您何時啟動。
• 確保您的社交媒體渠道啟動並運行，這樣您就可以構建社交按鈕，讓用戶傳播有關您產品的信息。

使用此策略，您將獲得：

• 可用於早期營銷工作的電子郵件地址列表
• 人們向他們的個人和專業網絡推薦您的產品
• 更清楚地了解是否有人對您的產品感到興奮

當你第一次得到真正的反饋時，你的產品就已經上線了。 通過這個交付價值、分析行為和迭代解決方案的循環，您將了解哪些有效，哪些無效，您將更接近人們真正想要使用的產品。

勇敢地啟動和學習

最小可行原型的最終目標是：從有根據的設計猜測轉變為真實的、可操作的反饋，速度和信心。

這是一個將不確定性和失誤視為改進機會的過程。 最重要的是，它獎勵行動。 好的設計需要大膽的決策和麵對不完美繼續前進的意願。

所以不要因為追求完美而陷入困境，也不要與大品牌及其海量資源進行比較。 繼續前進，很快您就會發現自己擁有一款人們樂於使用的精美產品。

• • •

進一步閱讀 Toptal 設計博客：

1. 輕鬆製作原型 - InVision Studio 教程
2. 如何進行有效的設計衝刺
3. 誰知道 Adob​​e CC 可以線框？
4. 面向大眾的 UX 測試：保持簡單且具有成本效益
5. 客戶旅程地圖——它們是什麼以及如何構建一個