你想知道的關於原型的一切（但不敢問）

原型是我學習新工具、平台和技術的框架。 原型可以作為一個想法是否可行的有力證明。 它是我整個創作過程的核心，也是我用來與我合作的人和企業建立聯繫的媒介。

我對原型很感興趣，因為我認為它們可以創造奇蹟，但我也認為它們沒有得到應有的結果。 原型設計通常根本不包含在項目時間表中，或者，如果是的話，通常作為更大項目的一些切線交付。 如果您願意，它可以更多！

我想說服你在你的工作流程中更深入地構建原型。 這種處理項目的方式可能會改變您作為有創造力的人的協作、學習和成長方式。 事情是這樣的：我將嘗試在紙上寫下一個好的定義，然後深入研究如何使原型設計對你的實踐和我的實踐一樣重要。 為了讓這一切變得更甜蜜，我將提供一些我為自己製作的遊戲 Melody Jams 創建的原型，該遊戲在 130 個國家/地區被 Apple 推薦，並在短時間內成為商店中排名第一的兒童應用程序。

什麼是原型？

原型的經典定義是它是您想要製作的全尺寸事物的比例演示。 原型可能是部分構建或設計的，以展示更大系統的特定功能。 這是一個很好的定義，但我喜歡將原型視為更廣泛的東西。 我對原型的定義？ 它是探索一個想法的有形人工製品。

它可以像在紙上畫一些粗略的草圖一樣簡單。 也許它是純粹的設計，就像在 After Effects 中界面如何工作的動畫演練。 也許這是一個扔到 Codepen 上的粗略演示。 或者它可能是保真度更高的東西。 當有人看到原型時，他們的反應不應該有任何歧義。 換句話說，如果這個人要問，“如果應用程序是藍色的怎麼辦？”，那麼這不是原型。 如果您展示應用程序在藍色時的外觀，那麼它就是。

還有不同種類的原型，每種都有不同的用途：內部、外部和公共。

內部原型

內部原型不一定能立即向我或我的團隊之外的任何人傳達價值。 它可以像我想做的那樣粗糙和快速。 在網站世界中，我可能會使用 vanilla CSS、HTML 和 JavaScript、React、Angular 或 Vue 構建一個簡單的組件，只是為了了解它的工作原理並權衡利弊。 這些類型的原型往往會在我的流程的早期出現——實際上是項目開始的第一天。 有了這些原型，我不必擔心有人不會“得到它”，或者它會弊大於利。 我可能會選擇向客戶或利益相關者展示內部原型，以增強原型製作過程的價值，但這還不是重點——現在我想快速、快速、快速地展示想法。

外部原型

外部原型為您嘗試進入的方向提供了案例，以顯示進度或演示某事的工作原理。 當客戶需要管理工具時，我可能會在 Craft、WordPress 和 Contentful（是的，全部三個！）中創建一個快速博客，讓他們了解每個工具的工作原理，以便他們可以就哪些工具做出更明智的決定最適合他們。 這些原型在項目的中後期非常有用。 我記得有一個項目，其中客戶正在考慮更改以包含新的服務提供商的 API。 拼湊一個原型向客戶展示了提供商可以做什麼，我們可以多快集成它以及對項目的其餘部分的影響。

公共原型

公共原型在更廣闊的世界中存在。 這基本上是將實際的設計過程放到野外，了解用戶的操作並從那裡進行迭代。 它可能是成熟的試點產品，也可能是一小部分用戶可以使用的產品。 它是最精緻的原型類型，最接近我之前提到的傳統定義。 作為某種性質的測試階段的一部分，它往往適合更大的項目。

快速原型是好的原型嗎？

簡短的回答是肯定的。 在項目中快速、盡快地製作原型。 為了讓您了解原因，讓我們嘗試一個練習。

在你的腦海中想像一把椅子是什麼樣子的。 有一個好主意嗎？ 是這把椅子嗎？

應該不會吧？ 您可能一直在考慮戶外椅子、扶手椅、辦公椅或凳子。 您甚至可能都沒有想到一張逼真的椅子！ 既然你有了這把椅子的照片，就沒有歧義了。 這就是我所說的椅子，從今以後，我們都知道這一點。 我們現在有了一個共同的參考框架。

當您的客戶說“我需要讓我的網站感覺現代”時，您怎麼知道這意味著什麼？ 如果沒有一個有形的人工製品，比如情緒板，每個人的腦海中都會對“現代”有不同的定義，就像上面的椅子一樣。 問題並非特定於設計。 這是關於登錄流程的工作方式或在託管環境之間進行選擇的方式。 快速做事會迫使對話和反應。 所有模糊不清的東西都被更快地弄清楚了。

重要的是，原型不必解決您期望它解決的問題。 簡單地創建和分享它有時會釋放人們沒有意識到的想法、靈感、挑戰或擔憂。 原型製作得越快、越頻繁，所有這些好東西就會越早浮出水面。

這是關鍵。 原型設計解鎖了您在沙盒中進行實驗、失敗、學習和成長的能力。 您正在同時改進自己和正在開發的產品。

誰應該原型？

每個人！ 原型設計是打破學科之間壁壘的機會。 設計師應該製作原型，以便他們了解項目的局限性、複雜性和可能性。 編碼人員可以通過原型來測試可行性，當然，也可以更多地參與到創作過程中。 項目經理、製片人、撰稿人，任何有想法的人都可以參與其中。

同樣，原型設計不一定是要編寫一些瘋狂的東西——甚至根本就不是編碼！ 它是關於用真實的東西來玩和探索的產生和測試想法。

因為原型設計可以像您希望的那樣簡單或複雜，因此將其作為實踐的一部分，您將獲得大量價值。 讓我們來看看一些好處。

劃傷創意之癢

有時你只是想嘗試構建一些你以前從未見過的東西，或者模仿一些你認為很酷的東西。 這可能是一個輕率的想法或下一個 UI 趨勢——誰知道呢？ 至少，弄清楚東西是如何工作的是作為設計師最令人滿意的部分之一，而原型設計提供了肥沃的土壤。

為勇敢和激進的想法增添了空間

很難同時嘗試發布用戶會理解並具有創造性的東西。 即使您只是在“原型設計週”開始一個項目，那也是一個充滿無限可能的一周。

發展主題專業知識

我認識的每一家開發商店似乎都在一個平台上擁有深厚的專業知識，並且暗地裡渴望超越它（我相信設計師也是如此）。 您是否使用 PHP 構建所有內容並想進入 Rails？ 在啟動項目時構建一些原型，即使它們與業務目標無關。

降低風險

製作你以前從未做過的東西是可怕的。 粗略而迅速地解決它可以消除心理障礙。 突然之間，不可能的事情只需要一兩天就能完成。

構建創意目錄

隨著您的原型庫從一個項目到另一個項目，想法會被重新審視。 有時，一個項目的垃圾會成為下一個項目的寶藏。

賦予每個人權力

當你剛剛開始弄清楚事情時，頭銜、多年的經驗和技能組合應該無關緊要。 好的想法可以來自任何人，但是當高級創意某某從高層來指導思想時，這很難做到。 從純粹的創客流程開始，可以消除標題並從底部冒出好主意。

定制您的流程

我與許多設計師和機構合作過，他們似乎一直為之震驚的一件事是我開始工作的速度。 我不等待填寫要求，獲得批准的藝術指導或其他任何事情。 通過開始運行，我可以更快地推進項目。

如何開始

錯誤的原型製作方法是擔心您的原型製作方法錯誤。 正如李小龍所說，“力爭不爭”。 考慮到這一點，這裡有一些指導方針可以幫助您培養快速原型設計實踐。

寫問題陳述

給定您要學習或解決的問題，將其分解為原子單元，並將每個單元視為不同的原型。 “如何在 iOS 中加載地圖？” “如何將地圖定位到特定位置？” “如何在地圖上繪製形狀？” “如何在地圖上放置圖釘？” 四個語句，四個原型，四個東西很快就學會了。

從你知道如何做的事情開始

就像鍛煉前的伸展運動一樣，你無法通過全速開始進入節奏。 如果你是一個正在為網站設計原型的程序員，也許你想從構建自己的樣板開始：靜態 HTML 文件、Gulp 配置等等。 這將使您的創意源源不斷，因此，當您處於未知領域時，您的魔力已經開始發揮作用。

建造醜陋

為您的字體使用 Comics Sans MS 和明亮的石灰綠色。 不要命名你的圖層。 打破所有規則。 現在不是像素完美的時候； 是時候把想法寫在紙上了。

將初始原型保持在 60 分鐘以內

原型設計和復雜性是死敵。 如果你做得對，在項目的第一天結束時，你應該能夠生產出至少四個原型。

按感覺優先，而不是按緊迫性

你今天想做什麼？ 跟項目沒有關係？ 不要與之抗爭。 做了。 誰知道？ 也許它有尚未被發現的價值！

叉

永遠不要覆蓋原型。 相反，製作一個副本並從那裡迭代。 這樣，您的原型將永遠是最簡單的，可以在不同的方向分叉並且易於學習。

過度分享

向大家展示你在做什麼！ 為之驕傲！ 您圍繞實踐建立的正能量將融入項目的整個生命週期。 僅此一步就可以極大地增強項目的文化。

記錄你的原型和結果

這可以像目錄中的 README 文件或 Slack 上的消息一樣簡單。 總是回去從你所做的事情中學習。

寫下你的恐懼，把它們變成問題陳述

那麼，您剛剛將您的第一個網站推送到 Heroku，但您還在為如何設置 SSL 證書而煩惱？ 不是問題。 稍後將其排隊以進行原型設計。

如何將其預算到您的項目中

事情是這樣的：你沒有。 這不是某種追加銷售。 我就是這樣做的。 這篇文章的標題中有“過程”一詞是有原因的：這不僅僅是關於如何創建原型。 這是關於如何構建東西的指導原則。

您將在開始項目的那一天開始製作原型。 你不會停下來，直到沒有任何東西可以原型。 原型與您的主要代碼或設計文件不同。 在早期，您的原型應該過於粗糙而無法投入生產。 後來，如果找到一種過渡方式感覺很有意義，那很好。 這是一個項目一個項目的決定。 原型設計始終是一個常數。 當它以這種方式設置時，就不會有原型失敗或錯誤之類的事情。

當我與潛在客戶交談時，我向他們解釋說，這個過程往往會比他們對我的競爭對手的期望更快地產生更多的輸出（閱讀：你）。 該輸出可能有助於定義 API 或證明技術可行性或檢查可怕的任務。 對設計師和內部設計團隊特別有影響力的地方——他們喜歡以這種方式工作，因為我很快就和他們在一起，把事情弄清楚了。 我製作更高質量、更定制、更不容易出錯的作品。 因為每個人都習慣於看到粗糙的工作，所以失敗的原型不會引起客戶的警覺——一些不工作的東西只是該過程的預期部分。

這也使我長期處於有利地位，因為我能夠很快掌握新技術。 我的客戶知道他們可以就安裝、物理計算項目、應用程序或任何規模的網站與我聯繫，因為他們知道這種方法可以保證成功的結果。

對我來說，這不是為了最大化利潤。 這是為了謀生做我想做的事情。 我從來沒有打算擅長網站或應用程序 - 事實上，當我開始時，這些東西並不存在！ 我開始用代碼學習很酷、很有趣的東西。 我希望我的職業生涯是漫長的、充實的、令人興奮的，並且不斷地充滿新的東西要學習。 原型驅動的流程非常適合這一點。

工具

這些天來，您似乎無法在不考慮 InVision 的情況下說出“原型”這個詞——它就像原型設計中的面巾紙。 如果您以前沒有使用過 InVision，它是設計人員無需編碼即可點擊項目的絕佳工具。 這是真正的交易：快速、直觀且易於上手。

隨著 Sketch 越來越受歡迎，大量的插件正在出現，以方便使用它的原型。 Framer 就是一個很好的例子。 它會導入 Sketch 文件，只需一點編碼知識，您就可以創建自定義演示，例如點擊動畫。 InVision 也有一個 Sketch 插件。 其他的，包括漫威和工藝，都值得探索。 有很多工具可以嘗試。

您不需要成為編碼員，甚至不需要使用軟件來製作原型。 紙質原型是在不需要計算機的情況下嘗試 UI 設計的好方法。 您也可以使用白板。 這些技術甚至適用於遊戲設計。

不知道從哪個開始？ 考慮使用這些工具中的每一個進行原型設計衝刺！

回到網絡和軟件開發的世界，我喜歡做的一件事就是專門為原型建立一個 GitHub 存儲庫。 我包含了一個 README 文件，其中描述了我在製作原型時關心的一些規則，您可以使用或 fork 來試一試。

案例研究：旋律果醬

大約一年前，我和一些朋友為孩子們開發並推出了一款名為 Melody Jams 的 iOS 遊戲（並為 Smashing Magazine 寫了一篇關於它的文章！）。 那場比賽在大約三個月內被編碼為堅果湯。 有一些挑戰：設計師以前從未做過應用程序，他住在離我 3000 英里的地方，我們從未見過面。 此外，我已經有一年沒有編寫過 iOS 應用程序了，所以我的能力已經大幅萎縮。

遊戲涉及將怪物從屏幕底部拖到舞台上的指定熱點。 僅從那一個設計，我的腦海中就湧現出許多問題陳述：

• 如何創建 iOS 應用程序？
• 如何創建 iOS 遊戲？
• 如何在遊戲中創建事物？
• 我怎麼能點擊那個東西？
• 怎麼拖東西？
• 如何有多個可以拖動的東西？
• 我如何檢測一物何時靠近另一物？

等等。 這些中的每一個都成為了單獨的定制原型——每個都有一個 iOS 應用程序——直到所有問題都解決了。 每個人都解決了一個問題，有些人提出了新的問題——例如，當我完成拖動後如何為一個東西設置動畫？

我已經在 Swift 3 中重新創建了這些原型，因此您可以看到如果原型存儲庫在今天構建時的樣子。 您會注意到的一件事是，這些文檔非常簡單——每個目錄中有一個 README 文件和一個屏幕截圖或 GIF，但沒有大量詳細文檔。 如果打印我們的評論有幫助，請務必這樣做。 對我來說，這是關於看到一個進步。 這裡沒有理論，沒有博客文章或教程。 原型 3 源自原型 2，原型 2 源自原型 1。只要有足夠的練習，即使您以前從未見過，您也可以快速掌握編程語言的細微差別。

在項目的前幾週，我們遵循了這個流程，主要是開發原型，而不是核心應用程序。 到項目結束時，我們有超過 50 個不同的原型來測試不同類型的動畫、加載方案、緩存、聲音測試和 UI 機制。

在此期間，設計師正在製作徽標原型、動作測試、應用程序圖標等。 聲音設計師提供了他正在考慮的歌曲的例子。 在我們製作的整個過程中，每個人都喜歡我們正在製作的東西。

結論

按照我的廣義定義，你可能已經做了一些原型設計，甚至沒有考慮過。 也許你的下一步是更頻繁地與你的同行分享，或者斷言原型設計將是你開始下一個項目的方式。

將原型深入整合到您的創作過程中可能會帶來變革。 它可以營造更積極、更豐富的團隊文化。 它可以是開發人員學習新語言或設計人員學習新工具的一種機制。 項目完成得更快，質量更高，更有趣。 您的客戶將對流程有更大的了解，並準備以較低的保真度看待事物，這使得與他們分享事物的頻率更高，痛苦更少。 你也會看起來比你的競爭對手工作得更快，並且你能夠從事更廣泛的項目。

有了所有這些好處，有什麼不喜歡的呢？ 所以，告訴我，你相信嗎？ 啟發？ 你的下一步是什麼？