編者按：本文作者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 coding，這是一套針對軟件開發的編程與修改的理論，這套由谷歌所推行的“20%時間”策略指的是，允許程序員將一小部分工作時間劃分出來做他們自己想做的任何事情。

來源: Working Locally Instead of Cowboy Coding

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。閱讀完這篇文章你會發現這類工具多得令人驚訝，而且其中絕大多數都界限模糊，功能游離于線框圖、原型和視覺稿之間，其實你也可以從中窺見未來。

來源: 2014 — The Year of Interactive Design Tools

老的設計方法逐漸被新的工具和新的思路所替代，靜態設計和瀑布模型也將成為故紙堆中的記錄。新的設計工具裹挾著全新的設計方法帶著我們走向新時代。正如同我們在《原型設計終極指南》中所提及的那樣，新一輪的設計工具已經帶來了兩種至關重要的更新：

1、快速原型設計——在未來，你會在原型設計過程中碰到更多的原型設計思路、細化方式、頻率變化，這些變化會提升并改進早期設計階段的功能和效果?？紤]到現在許多新興的設計工具已經支持全方位的原型設計（從靜態到動態都支持了），所以你已經沒有借口不去探索和練習快速原型設計了。

2、非郵件式協作——越來越多的是原型設計工具已經具備在線通訊和協作的功能了，這有效的縮短了設計師、開發者和相關人員之間的距離。隨著大家對于早期設計流程缺陷的認知，相關從業者會更加深入的協作、交流，并且相關工具會越來越普及。（UXPin和InVision就是典型）

討論原型設計的未來的時候，另外一個不得不提及的的熱門話題是“microinteractions”，也就是“微交互”。簡單的說，一個典型的為交互用例通常是源自于單個目的——比如解鎖手機——基于這一目標任務所需的觸發機制、規則和反饋就構成了一個微交互。得益于新的原型設計工具，微交互將設計重心從整體個產品于用戶體驗轉移到單個動作的用戶體驗和過程上來，讓產品細節設計上升到一個新的高度成為了可能。

來源: Microinteractions

微交互背后有一整套完整的邏輯。每個產品UI的細節（單個細節，而非所有細節的總和）是讓不同產品拉開距離的重要因素，事實上很多用戶會因為單個細節而愛上某個APP。FastCoDesign的設計類文章撰稿人 John Pavlus 將微交互稱為“用戶體驗設計的未來”，這從側面反應了這一新領域的認可度。微交互是交互設計的放大鏡，使得那些令人愉悅難忘的細節成為關注的焦點。而為了將這些提升產品外觀、感受的瞬間完善出來，原型設計自然就成了打造完美細節的重要基石。

深入了解微交互:《微交互：細節設計成就卓越產品》

結語

向前發展，不是進化，就是滅亡。能否生存下去，大多取決于對于先兆的正確解讀和前期的適應與否。線框圖仍然有它的用武之地，但是現在的線框圖更多是被是作為原型設計的藍圖，這不同于它在5年前的地位，那時候的線框圖是被是作為設計過程中重要的交付內容，10年前的線框圖的重要性更高，它的重要性幾乎和產品本身等同。

來源: The Future of UX Design

而原型設計在過去十幾年中的變化也是明顯的，從早期包含小段代碼的產品化的可交互原型，到現如今可以快速建立并用于用戶體驗測試的快速原型，變化可謂是翻天覆地。通過迭代，原型直接替我們一次性克服了對設計和代碼的恐懼。在這樣的設定之下，我們有理由擁抱現在的原型，和它的未來。同樣的，我們也理當更加緊密的協作，強調早期交互的重要性，將靈活迭代推行下去。
?
祝你好運！

【原型設計技能提升指南】

線框圖和原型對比：
《設計師基礎知識：你知道線框圖和原型有啥區別嗎》

原型設計素材支撐：
《超實用！圖片素材隨手找，原型設計快又好》

低保真模型設計：
《過稿有訣竅！超全面的低保真原型初級指南》

原文地址：designmodo
優設譯者：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量92萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：