原型是我掌握新工具、平臺和技術的支撐框架。原型是驗證一個想法是否可行的強有力工具。它是我整個創作過程的中心，也是我與合作的人和企業的交流媒介。

我對原型深有感情，因為我認為它們可以創造奇跡，但我也覺得它們沒有得到應有的重視。原型通常不會被納入到項目時間表中，或者，即使被納入，通常卻也只作為一個更大項目的不太相關的交付物。 其實只要你願意，它可以起更大作用！

我想說服你把原型更深入地植入你的工作流程中。這種嵌入項目的方式，可以改變你作為創意人員的協作、學習和成長的方式。說服過程是這樣的：我會試圖做出一個合適的定義，然後深入探討你怎樣才可以做出實際有用的原型，這樣的原型對我的實際工作也同樣有效。為了更吸引人，我會提供一些我創作的原型，它們用於我制作自己的遊戲應用Melody Jams，這個遊戲在130個國家得到了蘋果公司的官方推薦，而且一定時間內還沖到了應用商店兒童App排名第一。

1. 什麽是原型

原型的經典定義是，它是你想要制作的原樣尺寸東西的縮樣。一個原型可能是部分地被創建或設計，用來展示一個更大系統的特定功能。這是一個相當不錯的定義，但我想把原型看作更廣泛的東西。我對原型的定義是什麽？它是探索檢驗一個想法的無形變有形的神器。

你的模式庫是最新的嗎？ Alla Kholmatova剛剛出版了一本滿是幹貨的書，詳解了設計體系以及如何正確使用它們。書裏面寫了她所經歷的常見陷阱、領悟和教訓。這本書有精裝書和電子書版本。如圖1所示。

圖1 Alla Kholmatova剛剛出版的書，詳解了設計體系以及如何正確使用它們

它可以像在紙上繪制一些粗糙的草圖一樣簡單。也許它只是被簡單地設計一下，就像在After Effects中一個界面的動效演示。 也許它是一個在Codepen上粗糙的demo演示。或者它也可能有高得多的保真度。當有人看到一個原型時，他不應該有任何含糊不清的反應。換句話說，如果這個人要問，“如果應用程序是藍色的會怎樣呢？”，那麽這就不是一個原型。如果你顯示出了應用程序變成藍色的效果，那麽它就是（一個原型）。

當然，也有不同類型的原型，每個原型都有不同的目的：內部的，外部的和公開的。

（1）內部原型

內部的原型不需要給我或我團隊以外的任何人帶來直接的價值。它盡可以像我想要的那樣粗糙和快速。在網站世界中，我可能會使用vanilla CSS、HTML和JavaScript、React、Angular或Vue來構建一個簡單的組件，以便了解它是如何工作的，並權衡利弊。 事實上，這些類型的原型往往用在我工作流程中的很早階段-—實際上是項目開始的第一天。 有了這些原型，我不必害怕有人不“ 理解它 ”，或者會弊大於利。我雖然可以向客戶或利益相關者展示內部原型，特意顯示原型制作過程的價值，但這還不是重點，立刻、馬上、趕快展示我的創意想法才是我想要的。

圖2所示的這個原型演示了iOS中一個圓圈被拖動到另一個圓圈附近時的情況。這是Melody Jams為內部團隊展示的早期原型。

圖2 這個原型演示了iOS中一個圓圈被拖動到另一個圓圈附近時的情況

（2）外部原型

一個外部的原型就是為你想要的方向做一個實例，以展示進展或論證某個事物是如何工作的。當客戶需要一個管理工具時，我會在Craft、WordPress和Contentful（是的，所有3個！）中快速創建一個輕型博客，讓他們了解每個工具的運行模式，以便他們可以更清楚地知道哪個最適合他們。這類原型在項目的中後期都非常適用。我記得有一個項目，客戶正在考慮用一個新的服務提供商的API。把API接入原型並展示給客戶，讓他們知道這個服務提供商可以做什麽，我們能夠多快地整合它，以及對項目其他部分會產生什麽樣的影響。

圖3所示的這個輕便的iPhone應用程序展示了Contentful如何加載內容—這是外部原型的一個很好的例子。像這樣的原型可以同時用於評估一個CMS①，並驗證它是否可用來提升iPhone應用程序。

圖3 這個輕便的iPhone應用程序展示了Contentful如何加載內容

（3）公開原型

公開原型面向團隊外部這一更大的範圍。也就是說，把實際的設計過程公開出去接受真實檢驗，了解用戶如何操作，並據此進行叠代。它可能是一個完整的試點產品之類的東西，開放給一小部分用戶使用。這是最精致的原型，並且最接近於我前面提到的傳統定義。它往往適合於一個更大型的項目，用在某些功能特性的測試階段。

用戶和客戶可以輕松點擊如圖4所示的這個公開的InVision原型，並提供反饋。

圖4 用戶和客戶可以輕松點擊這個公開的InVision原型，並提供反饋

2. 快速的原型設計是好的原型嗎？

簡而言之，肯定是的。原型需要盡快在一個項目中建立。為了讓你明白為什麽，我們來做一下練習。

在腦海中想象一下椅子是什麽樣子的。想好了嗎？ 是如圖5所示的這樣的椅子嗎？

圖5 椅子的圖片

可能不是，對吧？ 你想的可能是戶外椅、扶手椅、辦公椅或凳子。你甚至可能沒有想象出一個逼真的椅子！既然有了這張椅子的圖片作參照，就可以消除上面的各種可能性了。這把椅子，是我正在談論的，並且此後再提及，我們都知道指的是它。於是，我們有了一個共同的參照系。

當你的客戶說，“我需要我的網站有現代感”，你怎麽知道這是什麽意思？如果沒有實際的工具，比如情緒板，每個人頭腦中對“現代”都有各自的定義，就像上面的椅子一樣。這個問題不僅存在於設計，而且也會出現在登錄流程的方式或軟件運行環境的選擇中。要迅速處理事情就會要求強制進行對話和做出反應。所有的含糊不清的部分就都能更快得到明確。

重要的是，原型也不必非得解決你期望它解決的問題。簡單地創建和分享它，有時就能開啟想法、靈感、挑戰或顧慮，而人們之前並沒意識到這些。原型做得越快、越頻繁，所有的好東西就會越早浮出水面。

原型開發解鎖了你在沙盒中進行實驗、失敗、學習和成長的能力。 你可以提升自己並同時改進手頭的產品。這是非常關鍵的。

3. 誰應該設計原型？

每個人！原型設計是打破學科之間壁壘的一個機會。設計師應該設計原型，以便了解項目的局限性、復雜性和可能性。編程人員做原型，當然能用來測試可行性，但更能深入參與創作過程。無論項目經理、制作人、文案人員，只要是任何有想法的人都可以參與其中。

當然，原型不必瘋狂寫代碼—甚至根本不需要！它只是生成和測試想法，用真實的東西來玩和探索。

由於原型設計可以像你想要的那樣，或簡單或復雜，因而在實踐中采用原型將給你帶來巨大的價值。 我們來看看原型的一些好處。

（1）撩起創意的騷動

有時候，你只是想嘗試構建你從未見過的某個東西，或者仿效出你認為很酷的東西。這可能是一個不成熟的想法，也可能是用戶界面的下一代趨勢—誰知道呢？ 至少，弄清楚東西是如何工作的，這是作為設計師所感到的最滿意的部分之一，原型設計為此提供了肥沃的土壤。

（2）為無畏和激進的想法留出空間

做出的東西，既能使用戶容易理解又具有創新性，這是很難的。 即使你啟動項目時有一個“原型周”的時間，也只是這個星期不受到太大限制。

（3）增加主題專業知識

我所知道的每一個開發工作室似乎都對一個工作平臺擁有深厚的專業知識，並且暗中希望超越它（我確信這一點對於所有設計師來說也是成立的）。你正在用PHP做所有開發，而又想要投入Rails陣營嗎？那麽就請在開始項目時建立一些原型，即使它們與商業目標無關。

（4）規避風險

制作以前從未做過的東西，心裏是很沒底的。快速地大致搞明白它，可以消除那種心理障礙。 突然之間，之前不可能的狀況只需要一兩天就能消除。

（5）建立一個創意目錄

當你的原型庫隨著一個個項目而不斷擴展，相應地，以往的理念會得到重新審視。 有時來自一個項目的廢料卻會成為下一個項目的寶藏。

（6）為每個人賦能

當你要去把事情搞清楚時，職位頭銜、多年的經驗和技能都不重要。好的想法可以從任何人那裏產生，但是當遇到高級創意人員從天而降肆意指點時，它就很難浮現了。我們需要從一個純粹的創作流程開始，忽略職位，讓好的想法從基層湧現出來。

（7）自定義你的流程

我曾經和很多設計師和代理商合作過，而且他們似乎一直被我開始工作的速度震撼到。我不會幹等著需求拋來、美術設計去評審或其他種種。通過積極主動的方式，我可以超高速推進項目。

4. 如何開始

千萬不要總是擔心你建立原型的方法會出錯，那樣是不對的。就像李小龍說的那樣：“力求不爭”。時刻牢記這一點，下面是一些指導原則，可以幫助你完成一個快速的原型實踐。

（1）列出問題陳述

想一下你正試圖學習或者解決的事情，把它進行逐條拆分，然後把拆分出來的每一條當做不同的原型來對待。“如何在iOS中下載地圖？”“如何將地圖定位到特定的位置？”“如何在地圖中繪制圖形？”“如何在地圖上放置大頭針？”4條陳述，4個原型，快速得解決了4個問題。

（2）從你熟悉的事情入手

就像鍛煉之前要進行拉伸運動一樣，你不可能一開始就進入全速節奏。如果你是一個正在建立網站原型的開發者，你可能想從建立自己的模板開始：一個靜態的HTML文件，一個Gulp配置，諸如此類。這樣可以讓你的創造力源源不斷地擴展，當你進入一個未知領域時，你的魔力就已經開始發揮作用了。

（3）畫得醜一點

用熒光色的Comics Sans MS字體，不要命名你的圖層。打破所有規則。現在不是要求每像素都完美的時候，現在最重要的是把你的想法畫出來。

（4）將設計初始原型的時間限制在60分鐘以內

錯綜復雜和原型是你死我活的敵人。當你做得正確的時候，你可以在項目第一天結束時產出至少4個原型。

（5）率性最為先，別被急事趕

你今天想做什麽？和這個項目一點關系都沒有？不要糾結，就按照你想的來做。誰知道什麽情況？很可能它的價值你還沒意識到呢！

（6）分支

永遠不要覆蓋原型。相反的，要復制一份然後從那裏進行叠代。這樣你的原型永遠是最簡潔的，可以從不同的方向分支，並且易於學習。

（7）分享控

給所有人看你所做的原型。要為之感到驕傲！你在這個項目上所營造的積極能量會貫穿到整個的項目生命周期中。僅這一步就可以大大地提高整個項目的文化氣氛。

（8）記錄你正在做的原型以及結果

這就像目錄中的README文件或者企業協作工具Slack的消息一樣簡單。要經常回顧你之前所做的東西。

（9）寫下你所擔憂的事情，然後把它們變成問題陳述

所以，你剛剛在Heroku上部署了你的第一個網站，但是你擔心如何設置SSL證書？這不是一個問題，把它列下來稍後用原型來處理就可以了。

圖6所示的是一個以Trello卡展示的問題陳述，它描述了如何建立一個基礎的three js原型。

圖6 以Trello卡展示的問題陳述

（10）如何在項目中增加預算

事實上，你不需要。這不是那種向上銷售式的順桿爬②。我就是這麽做的。這篇文章在標題中包含“流程”這個詞是有原因的：這不僅僅是關於如何建立原型的問題，這是一個關於如何建造東西的指導性原則。

當一個項目開始時，你就要做原型，一直到沒有什麽原型可以做了才可以停止。原型與你的主要代碼或者設計文件都不一樣。在項目初期，你的原型應該很粗糙，以至於無法開發設計。只要之後找到可以實行的方式就可以了。

這是按照項目不同而變通的決定。建立原型是一個持續的過程，當我們這樣做的時候，就不會有失敗的原型和錯誤。

當我和潛在的客戶交談的時候，我向他們解釋說，這個過程會比我的競爭對手（比如你）有更快更多的產出。這些產出可以幫助定義一個API或者證明技術上的可行性，或者檢查一個可怕的任務。特別是在設計師和內部設計團隊中尤其具有影響力，他們喜歡這樣的工作方式，因為我可以和他們一起快速地解決問題。我產出更高質量的、更定制化的、更不容易出錯的工作成果。由於大家都習慣於看到粗糙的原型，因而就不擔心失敗的原型會讓客戶意識到——有些東西不能有效運行已成為工作流程中習以為常的現象。

這也使我長期處於有利的位置，因為我能夠快速地掌握新技術。我的客戶知道無論在安裝、物理計算③、應用程序或者任何規模的網站等方面，都可以與我進行溝通。因為他們知道這種方法保證了結果一定會成功。

對於我來說，這並不是為了利益最大化，這是為了以我期望的方式去做我想做的事情。我從未想特意去學習並精通App和網站開發，事實上，這些東西在我開始的時候並不存在。我開始寫代碼是用來學習很酷很有意思的東西。我希望我的職業生涯是長久的、充實的、令人興奮的，並且不斷地有新的東西去學習。一個原型驅動的過程是完美適合那個目標的。

（11）工具

最近，似乎一提到“原型”這個詞就不得不想到 In Vision——就好像是原型設計用到的 Kleenex（一種常用的餐巾紙）。In Vision是一個強大的工具，可以讓設計師在不需要編程的情況下產出可點擊的原型。這是真的：快速、直觀、容易上手。

隨著sketch的普及而出現的許多插件讓原型制作更加方便。Framer是一個很好的例子，它可以導入sketch文件，只要有一點編程知識，就可以創建一些演示demo，比如點擊動畫。In Vision 也同樣有sketch插件。其他工具，包括 Marvel 和 Craft，也是值得探索的。我們還有很多工具可以嘗試。

你不必成為一個程序員，甚至不需要使用設計軟件創造原型。不使用電腦，只在紙上畫原型也是一個很好的探索UI設計方案的方式。你也可以在白板上嘗試，這些方式甚至可以用在遊戲設計中。

不知道從哪裏開始？你可以考慮用每一種方式進行一次原型設計的快速試驗。

回到網站和軟件開發的世界，我喜歡做的事情是在 GitHub上專門為原型建立一個庫。我已經加入了一個README文件，它描述了我在原型設計時考慮的一些規則，你可以使用或者借鑒它，嘗試練習一下。

5. 學習案例：Melody Jams

大概在一年之前，我和幾個朋友一起設計並發布了一款iOS平臺上的兒童遊戲，叫做 Melody Jams（也在Smashing Magazine上寫了一篇關於這個遊戲的文章），如圖7所示。我們用了大概3個月的時間完成了這款遊戲的開發。在這個過程中我們遇到了一些挑戰：我們的設計師從來沒有做過App的設計，並且他住在離我3000英裏之外的地方，我們從來沒有見過面。同時，我也有一年的時間沒有開發過iOS平臺的App了，所以可想而知我的技能退化了多少。

圖7 Melody Jams進行中的動畫原型

這個遊戲需要將屏幕底部的小怪獸拖曳到舞臺上指定的熱點區。單從這一個設計，我的腦海裏就浮現出一些問題清單：

怎樣創建一個iOS App？

怎樣創建一個iOS 遊戲？

怎樣在這個遊戲裏創建一個事物？

怎樣點擊這個事物？

怎樣拖曳這個事物？

怎樣能有多個可以拖曳的事物？

怎樣發現一個事物接近另一個事物？

諸如此類，每一個問題都成為獨立的原型。接著，每一個都是iOS 應用程序，直到所有問題都解決。每一條解決一個問題，也有的引出了新的問題，比如，當我拖曳完一個東西時，該怎麽做動畫使它動起來？

我已經在Swift 3中重建了這些原型，如圖8所示，這樣你可以看到這些原型庫如果在今天創建的樣子。你會註意到這些文檔都很小——每個目錄下都有一個README文件，一個屏幕截圖或者GIF動畫，但沒有大量的詳細文檔。如果這能幫助我們列出註解，那就去做吧。對於我來說，這樣是為了看到過程。這裏沒有理論，沒有博客文章或者教程。從原型1到原型2再到原型3，只要有足夠的練習，即便你從未見過，你也可以快速掌握編程語言的細微差別。

圖8 GitHub上的原型過程

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

在這個過程中，設計師在進行logo、動畫測試、應用程序圖標的原型設計等等。音效設計師提供他們正在考慮的音樂的樣例。整個過程中，每個人都喜歡我們一直在做的事情。

在遊戲中，由“Mars Disco”中的歌曲制作的原型，是由我們的音效設計師Nate所創作的，那時所有設計和動畫都未完成。

6. 總結

根據我廣義的定義，你可能已經做了一些原型了，甚至根本都沒像上面那樣考慮過。所以接下來你應該與你的同事進行更多的分享，或者堅決要求你將如何使用原型來開展下一個項目。

將原型深入地融入到你的創作過程，可能帶來革命性的改變。這可以帶來更加積極的、豐富的團隊文化，也可以成為程序員學習新語言或者設計師學習新工具的途徑。項目能夠更快速更高質量地完成，同時也帶來了更多的快樂。你的客戶將對設計的過程有明晰的了解，並且接受較低保真度的東西，可使得分享交流變得更頻繁、更容易。你也會比競爭者看上去工作得更快，能夠參與更廣泛的項目。

有了以上這些好處，原型還有什麽讓你不喜歡的呢？所以，快點告訴我，是不是心服口服了？是不是大徹大悟了？知道下一步該怎麽做了吧？

——————————————————————

① 內容管理系統。 ——譯者註

② 向上銷售upsell，指根據既有客戶過去的消費喜好，提供更高價值的產品或服務，刺激客戶做更多的消費。 ——譯者註

③ 通過軟硬件對現實世界進行感知和交互的系統。 ——譯者註

原文網址：https://www.smashingmagazine.com/2017/12/prototyping-driven-process/

參與翻譯：Hiyori 菁菁

本文由Smashing Magazine獨家授權異步社區發布簡體中文版。版權所有 禁止轉載或建立鏡像。

推薦閱讀

2018年5月新書書單（文末福利）

2018年4月新書書單

異步圖書最全Python書單

一份程序員必備的算法書單

第一本Python神經網絡編程圖書

長按二維碼，可以關註我們喲

每天與你分享IT好文。

在“異步圖書”後臺回復“關註”，即可免費獲得2000門在線視頻課程

點擊閱讀原文，閱讀原文

閱讀原文

原型萬事通，你想知道（但不敢問）的都在這裏