你了解線框圖和原型的過去、現在與將來嗎？

 　　本文作者Jerry Cao是UXPin的內容決策者，也是UXPin 這款在線線框圖/原型工具的在線內容開發者。如果你想學習設計原型的思路，熟悉相關工具，以及完整的設計流程，那麼你可以下載UXPin精心制作的《原型設計終極指南》(英文版)。這篇文章會系統為你介紹線框圖和原型的發展歷程，了解它們在不同歷史背景下的發展，能幫你在未來設計更優秀實用的線框圖和原型。通過線框圖和原型的發展歷程，你還能從側面了解用戶體驗設計的過去、現在和未來。

　　來源：What Does Lean UX Have That I Don’t?

　　設計方法的變遷直接影響了原型和線框圖在整個設計流程中的位置，所以，在開始聊原型之前，我們先溫故一下現在的設計方法。

　　現在：當前的設計方法

　　設計走到今天，最流行的兩種設計方法是Lean UX和Agile UX，也就是“精益UX”和“敏捷UX”。雖然兩者聽起來很接近，但是兩種設計方法從設計過程到涉及的范圍都截然不同。精益UX更接近於一種業務運營方式，而敏捷用戶體驗設計則接近一個項目的執行方法。

　　來源： Lean UX vs. Agile UX — Is There a Difference?

　　曾經，設計師只需要將設計好的內容打包發給開發者，然後丟下一句“祝你好運”就可以潇灑地收錢走人了，可惜這樣的時代已經一去不復返了。著名的網頁設計師、博客寫手Brad Frost 認為，隨著屏幕和設備的碎片化，曾經的“PSD時代”已經徹底結束了，因為這種打包PSD交付的方式，屬於典型的瀑布式開發流程(瀑布模型)，已經無法應對當前市場的需求了。正是因為設計方法的缺失，精益設計和敏捷設計這兩種方法的重要性就體現出來了。盡管兩種設計方法有著不少差異，但是普遍都認為兩種設計方法應該合理地結合起來。UXPin 的CEO Marcin Treder 曾經撰文對比過兩種設計方法，仔細看下兩種的差異，你會發現兩種方法與其說是對抗，不如說是互補。

　　1. 敏捷UX

　　敏捷宣言的發布讓這種新的開發方法展現在大家面前，而敏捷UX則將設計師和開發者統一到敏捷開發過程中來。通常，在這個過程中大家會遵循下面的原則：

　　·人和交互重於過程和工具

　　·可以工作的軟件 重於求全而完備的文檔

　　·客戶協作重於合同談判

　　·隨時應對變化重於遵循計劃

　　目前，上面的幾條規則被認為是“數字產品開發的黃金准則”。

　　來源：The Visual Agile Manifesto

　　盡管敏捷方法並不是直接作用於用戶體驗設計，但是它確實會提升基於合作的設計項目的運作方式。在《原型設計終極指南》中我們曾探討過，就像Design Studio和Cross-Functional Pairing 這樣的案例，敏捷UX讓設計師能用有意義的交互/動效替換文檔說明。另外，敏捷UX讓設計師、開發者和產品經理的溝通更加高效直觀。

　　2. 精益UX

　　基於最初的精益創業模式的方法論，通常會認為一家公司所發布的產品，必須在發布前通過研究，確定它的市場定位符合特定的需求，並且盡可能快地發布、推廣，將浪費降低到最低的程度，確保企業和產品的生存。精益UX更多的是專注於將產品推向市場這個過程，所以借助精益UX來設計產品過程中會發現，發布產品僅僅只是一個開始。

　　來源：Lean UX Cycle

　　精益UX的一些核心原則：

　　·專注解決問題，驗證客戶的假想(“走出辦公室”)

　　·放出能解決用戶問題的最小可能產品

　　·協作快速完成原型(“學習閉環”)

　　·基於完備的線框圖和規格表快速敏捷地制作原型

　　在被各類產品充斥的市場中，精益UX幾乎成為了自家產品生存的救生艇。

　　3、如何讓兩者結合到一起

　　敏捷UX更關注的問題是“如何進行產品設計”，而精益UX則更專注於“為什麼要這樣設計”。敏捷UX可以幫助設計師改造過時的設計和協作方法，而精益UX則指明了研究產品和衡量產品品質的方法。

　　精益UX會建議你在設計過程中借助A/B測試不斷針對產品進行研究，而不是僅在設計原型之前做研究，同理，客戶回訪和可用性測試也需要在設計和開發過程中不斷進行。

　　來源: How Spotify Builds Products

　　由於精益UX是一種整體的商業策略，所以你仍然可以使用敏捷UX的方法來構建產品。團隊頭腦風暴，繪制概念圖和需求分析，建立快速原型，並對其進行測試。而Spotify也正是這麼做的，我們在《最小可用產品設計指南》中也對這一方法有詳細的介紹。

　　兩種設計方法還是有不少共同點的：它們都強調協作而非文檔記錄，強調行之有效的沖刺而非雄心勃勃的時間表安排。

　　事實上，精益UX之父Jeff Gothelf 曾經說過，精益UX靈感“來自於精益模式和敏捷開發理論”，所以對於產品和設計而言，選擇精益UX還是敏捷UX並不重要，最核心的一點是“巧妙地工作，而非長時間加班”，這是兩者的共同點，也是推動快速原型設計成為主流的重要思想。

　　現狀：當今的原型設計

　　雖然絕大多數的人都是原型的堅定支持者，但是越來越多的設計師開始懷疑靜態線框圖設計的實際價值。越來越多的設計團隊開始合並相框圖和原型設計，借此來繞過線框圖設計階段，並盡早進入交互設計階段。

　　其實這和近幾年流行開的設計新工具有很大的關系，如果設計好的線框圖只需要多點擊幾下就能生成原型圖和視覺稿，那麼誰會強行將其分為2個階段呢?這個話題在Quora上已經被討論得很多了，有些專家還提到過“互動式線框圖”(其實也可以說是低保真原型)的好處，他們所說的理由各不相同，但是大抵都認同了它“一次滿足兩個願望”的優勢，合理結合了原型和線框圖。

　　所以，考慮到這一點，當前我們所說的原型說的應該就是像素精准可交互的視覺稿了。在不久的將來，我們會看到低保真原型會逐漸取代靜態線框圖，這將是設計發展史上的又一個裡程碑，而高保真原型則會繼續服務於產品演示和可用性測試。

　　過去：原型發展史

　　原型設計和工具有著極為密切的聯系，這也是為什麼當你回顧原型設計的發展歷程的時候，需要追溯到上世紀70年代。有趣的是，原型設計隨著電腦技術的高速發展，也進行著高密度的迭代升級，接下來我會列出塑造這個信息化時代的大事件，它們也是影響原型設計的重要裡程碑。

　　1970——瀑布模型成為軟件開發領域的主流

　　1975——信息架構的重要性被承認，並開始發展

　　1980——由於編程技術的發展，最早的數字化原型(類似流程圖)出現了

　　來源: Atari Prototypes: Tempest (1983)

　　1985——紙質原型開始出現，被用於可用性測試和概念分享

　　1985——瀑布模型被調整修改，並納入迭代開發和增量開發中(IID)

　　1986——第一款可視化設計軟件被開發出來

　　1986——Adobe Illustrator 問世

　　1987——微軟的PowerPoint問世(應該是用於蘋果家的Macintosh系列的電腦)

　　1988——軟件開發的螺旋模型問世並推廣

　　來源：Boehm’s Spiral Revisited

　　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 c