本文作者Jerry Cao是UXPin的內容決策者，也是UXPin 這款線上線框圖/原型工具的線上內容開發者。如果你想學習設計原型的思路，熟悉相關工具，以及完整的設計流程，那麼你可以下載UXPin精心製作的《原型設計終極指南》（英文版）。這篇文章會系統為你介紹線框圖和原型的發展歷程，瞭解它們在不同歷史背景下的發展，能幫你在未來設計更優秀實用的線框圖和原型。通過線框圖和原型的發展歷程，你還能從側面瞭解使用者體驗設計的過去、現在和未來。
設計方法的變遷直接影響了原型和線框圖在整個設計流程中的位置，所以，在開始聊原型之前，我們先溫故一下現在的設計方法。
現在：當前的設計方法
設計走到今天，最流行的兩種設計方法是Lean UX和Agile UX，也就是“精益UX”和“敏捷UX”。雖然兩者聽起來很接近，但是兩種設計方法從設計過程到涉及的範圍都截然不同。精益UX更接近於一種業務運營方式，而敏捷使用者體驗設計則接近一個專案的執行方法。
曾經，設計師只需要將設計好的內容打包發給開發者，然後丟下一句“祝你好運”就可以瀟灑地收錢走人了，可惜這樣的時代已經一去不復返了。著名的網頁設計師、部落格寫手Brad Frost 認為，隨著螢幕和裝置的碎片化，曾經的“PSD時代”已經徹底結束了，因為這種打包PSD交付的方式，屬於典型的瀑布式開發流程（瀑布模型），已經無法應對當前市場的需求了。正是因為設計方法的缺失，精益設計和敏捷設計這兩種方法的重要性就體現出來了。儘管兩種設計方法有著不少差異，但是普遍都認為兩種設計方法應該合理地結合起來。UXPin 的CEO Marcin Treder 曾經撰文對比過兩種設計方法，仔細看下兩種的差異，你會發現兩種方法與其說是對抗，不如說是互補。
1. 敏捷UX
敏捷宣言的釋出讓這種新的開發方法展現在大家面前，而敏捷UX則將設計師和開發者統一到敏捷開發過程中來。通常，在這個過程中大家會遵循下面的原則：
·人和互動重於過程和工具
·可以工作的軟體 重於求全而完備的文件
·客戶協作重於合同談判
·隨時應對變化重於遵循計劃
目前，上面的幾條規則被認為是“數字產品開發的黃金準則”。
儘管敏捷方法並不是直接作用於使用者體驗設計，但是它確實會提升基於合作的設計專案的運作方式。在《原型設計終極指南》中我們曾探討過，就像Design Studio和Cross-Functional Pairing 這樣的案例，敏捷UX讓設計師能用有意義的互動/動效替換文件說明。另外，敏捷UX讓設計師、開發者和產品經理的溝通更加高效直觀。
2. 精益UX
基於最初的精益創業模式的方法論，通常會認為一家公司所釋出的產品，必須在釋出前通過研究，確定它的市場定位符合特定的需求，並且儘可能快地釋出、推廣，將浪費降低到最低的程度，確保企業和產品的生存。精益UX更多的是專注於將產品推向市場這個過程，所以藉助精益UX來設計產品過程中會發現，釋出產品僅僅只是一個開始。
精益UX的一些核心原則：
·專注解決問題，驗證客戶的假想（“走出辦公室”）
·放出能解決使用者問題的最小可能產品
·協作快速完成原型（“學習閉環”）
·基於完備的線框圖和規格錶快速敏捷地製作原型
在被各類產品充斥的市場中，精益UX幾乎成為了自家產品生存的救生艇。
3、如何讓兩者結合到一起
敏捷UX更關注的問題是“如何進行產品設計”，而精益UX則更專注於“為什麼要這樣設計”。敏捷UX可以幫助設計師改造過時的設計和協作方法，而精益UX則指明瞭研究產品和衡量產品品質的方法。
精益UX會建議你在設計過程中藉助A/B測試不斷針對產品進行研究，而不是僅在設計原型之前做研究，同理，客戶回訪和可用性測試也需要在設計和開發過程中不斷進行。
由於精益UX是一種整體的商業策略，所以你仍然可以使用敏捷UX的方法來構建產品。團隊頭腦風暴，繪製概念圖和需求分析，建立快速原型，並對其進行測試。而Spotify也正是這麼做的，我們在《最小可用產品設計指南》中也對這一方法有詳細的介紹。
兩種設計方法還是有不少共同點的：它們都強調協作而非文件記錄，強調行之有效的衝刺而非雄心勃勃的時間表安排。
事實上，精益UX之父Jeff Gothelf 曾經說過，精益UX靈感“來自於精益模式和敏捷開發理論”，所以對於產品和設計而言，選擇精益UX還是敏捷UX並不重要，最核心的一點是“巧妙地工作，而非長時間加班”，這是兩者的共同點，也是推動快速原型設計成為主流的重要思想。
現狀：當今的原型設計
雖然絕大多數的人都是原型的堅定支持者，但是越來越多的設計師開始懷疑靜態線框圖設計的實際價值。越來越多的設計團隊開始合併相框圖和原型設計，藉此來繞過線框圖設計階段，並儘早進入互動設計階段。
其實這和近幾年流行開的設計新工具有很大的關係，如果設計好的線框圖只需要多點選幾下就能生成原型圖和視覺稿，那麼誰會強行將其分為2個階段呢？這個話題在Quora上已經被討論得很多了，有些專家還提到過“互動式線框圖”（其實也可以說是低保真原型）的好處，他們所說的理由各不相同，但是大抵都認同了它“一次滿足兩個願望”的優勢，合理結合了原型和線框圖。
所以，考慮到這一點，當前我們所說的原型說的應該就是畫素精準可互動的視覺稿了。在不久的將來，我們會看到低保真原型會逐漸取代靜態線框圖，這將是設計發展史上的又一個里程碑，而高保真原型則會繼續服務於產品演示和可用性測試。
過去：原型發展史
原型設計和工具有著極為密切的聯絡，這也是為什麼當你回顧原型設計的發展歷程的時候，需要追溯到上世紀70年代。有趣的是，原型設計隨著電腦技術的高速發展，也進行著高密度的迭代升級，接下來我會列出塑造這個資訊化時代的大事件，它們也是影響原型設計的重要里程碑。
1970——瀑布模型成為軟體開發領域的主流
1975——資訊架構的重要性被承認，並開始發展
1980——由於程式設計技術的發展，最早的數字化原型（類似流程圖）出現了
1985——紙質原型開始出現，被用於可用性測試和概念分享
1985——瀑布模型被調整修改，並納入迭代開發和增量開發中（IID）
1986——第一款視覺化設計軟體被開發出來
1986——Adobe Illustrator 問世
1987——微軟的PowerPoint問世（應該是用於蘋果家的Macintosh系列的電腦）
1988——軟體開發的螺旋模型問世並推廣
1990——Adobe Photoshop問世（它和電影發展史息息相關）
1991——IBM 推出用於軟體開發的“軟體快速開發”（RAD）理論
1992——微軟 Visio問世（原本名為Shapeware，最終在2000年為微軟所收購）
1995——案例展示和UI設計上佈局變得更加全面
2000——為了迎合日益增長的需求，原型設計軟體出現了
2000——著名軟體Omnigraffle問世
2001——《敏捷宣言》釋出，這也是後來敏捷UX運動的起點
2003——Axure 出現，這是目前最主流的原型設計軟體
2003——iRise釋出
2005——基於網路的原型（SaaS）越來越普遍，這也為低保真原型設計類APP開啟了一扇門，也成為了整合協作與產品管理的APP誕生的契機
2005—— MockupScreens 問世
2006—— Gliffy 誕生
2006—— Cowboy coding，這是一套針對軟體開發的程式設計與修改的理論，這套由谷歌所推行的“20%時間”策略指的是，允許程式設計師將一小部分工作時間劃分出來做他們自己想做的任何事情。
2007—— Jumpchart 誕生
2008—— Balsamiq 問世
2008—— Protoshare 釋出
2008—— Justinmind 問世
2008——創業公司之間的激烈競爭導致了精益UX運動
2010——技術發展促使無程式碼高保真SaaS原型的誕生
2011——UXPin的誕生（紙質、移動端、網頁、響應式）
2011——InVision的問世（移動端，網頁）
2012——Flinto（移動端）
2012——POP出現（針對移動端的紙質原型）
2013——Marvel （移動端，網頁）
未來：屬於原型的時代
我們對於未來的猜測始於我們對於現有原型和線框圖的討論：線框圖和原型以低保真原型的形式結合到一起，同時兼具了大綱和組織的功能。
我們將2014年稱為“互動設計工具之年”，併為此專門撰文。這篇文章當中，Bloc的設計師 Emelyn Baker 解釋了這次互動設計工具社群爆發式增長的原因，並且列舉出了那些最優秀的工具，其中包括了UXPin。閱讀完這篇文章你會發現這類工具多得令人驚訝，而且其中絕大多數都界限模糊，功能遊離於線框圖、原型和視覺稿之間，其實你也可以從中窺見未來。
老的設計方法逐漸被新的工具和新的思路所替代，靜態設計和瀑布模型也將成為故紙堆中的記錄。新的設計工具裹挾著全新的設計方法帶著我們走向新時代。正如同我們在《原型設計終極指南》中所提及的那樣，新一輪的設計工具已經帶來了兩種至關重要的更新：
1、快速原型設計——在未來，你會在原型設計過程中碰到更多的原型設計思路、細化方式、頻率變化，這些變化會提升並改進早期設計階段的功能和效果。考慮到現在許多新興的設計工具已經支援全方位的原型設計（從靜態到動態都支援了），所以你已經沒有藉口不去探索和練習快速原型設計了。
2、非郵件式協作——越來越多的是原型設計工具已經具備線上通訊和協作的功能了，這有效的縮短了設計師、開發者和相關人員之間的距離。隨著大家對於早期設計流程缺陷的認知，相關從業者會更加深入的協作、交流，並且相關工具會越來越普及。（UXPin和InVision就是典型）
討論原型設計的未來的時候，另外一個不得不提及的的熱門話題是“microinteractions”，也就是“微互動”。簡單的說，一個典型的為互動用例通常是源自於單個目的——比如解鎖手機——基於這一目標任務所需的觸發機制、規則和反饋就構成了一個微互動。得益於新的原型設計工具，微互動將設計重心從整體個產品於使用者體驗轉移到單個動作的使用者體驗和過程上來，讓產品細節設計上升到一個新的高度成為了可能。
微互動背後有一整套完整的邏輯。每個產品UI的細節（單個細節，而非所有細節的總和）是讓不同產品拉開距離的重要因素，事實上很多使用者會因為單個細節而愛上某個APP。FastCoDesign的設計類文章撰稿人 John Pavlus 將微互動稱為“使用者體驗設計的未來”，這從側面反應了這一新領域的認可度。微互動是互動設計的放大鏡，使得那些令人愉悅難忘的細節成為關注的焦點。而為了將這些提升產品外觀、感受的瞬間完善出來，原型設計自然就成了打造完美細節的重要基石。
結語
向前發展，不是進化，就是滅亡。能否生存下去，大多取決於對於先兆的正確解讀和前期的適應與否。線框圖仍然有它的用武之地，但是現在的線框圖更多是被是作為原型設計的藍圖，這不同於它在5年前的地位，那時候的線框圖是被是作為設計過程中重要的交付內容，10年前的線框圖的重要性更高，它的重要性幾乎和產品本身等同。
而原型設計在過去十幾年中的變化也是明顯的，從早期包含小段程式碼的產品化的可互動原型，到現如今可以快速建立並用於使用者體驗測試的快速原型，變化可謂是翻天覆地。通過迭代，原型直接替我們一次性克服了對設計和程式碼的恐懼。在這樣的設定之下，我們有理由擁抱現在的原型，和它的未來。同樣的，我們也理當更加緊密的協作，強調早期互動的重要性，將靈活迭代推行下去。
備註：IxD是互動設計縮寫，UX是使用者體驗縮寫。