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

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

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

現(xiàn)在：當前的設計方法

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

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

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

1. 敏捷UX

敏捷宣言的發(fā)布讓這種新的開發(fā)方法展現(xiàn)在大家面前，而敏捷UX則將設計師和開發(fā)者統(tǒng)一到敏捷開發(fā)過程中來。通常，在這個過程中大家會遵循下面的原則：
·人和交互重于過程和工具
·可以工作的軟件 ?重于求全而完備的文檔
·客戶協(xié)作重于合同談判
·隨時應對變化重于遵循計劃

目前，上面的幾條規(guī)則被認為是“數(shù)字產(chǎn)品開發(fā)的黃金準則”。

來源：The Visual Agile Manifesto

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

2. 精益UX

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

來源：Lean UX Cycle

精益UX的一些核心原則：
·專注解決問題，驗證客戶的假想（“走出辦公室”）
·放出能解決用戶問題的最小可能產(chǎn)品
·協(xié)作快速完成原型（“學習閉環(huán)”）
·基于完備的線框圖和規(guī)格表快速敏捷地制作原型

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

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

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

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

來源: How Spotify Builds Products

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

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

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

現(xiàn)狀：當今的原型設計

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

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

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

過去：原型發(fā)展史

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

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

1975——信息架構的重要性被承認，并開始發(fā)展

1980——由于編程技術的發(fā)展，最早的數(shù)字化原型（類似流程圖）出現(xiàn)了

來源: Atari Prototypes: Tempest (1983)

1985——紙質原型開始出現(xiàn)，被用于可用性測試和概念分享

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

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

1986——Adobe Illustrator 問世

1987——微軟的PowerPoint問世（應該是用于蘋果家的Macintosh系列的電腦）

1988——軟件開發(fā)的螺旋模型問世并推廣

來源：Boehm’s Spiral Revisited

1990——Adobe Photoshop問世（它和電影發(fā)展史息息相關）

1991——IBM 推出用于軟件開發(fā)的“軟件快速開發(fā)”（RAD）理論

1992——微軟 Visio問世（原本名為Shapeware，最終在2000年為微軟所收購）

1995——案例展示和UI設計上布局變得更加全面

2000——為了迎合日益增長的需求，原型設計軟件出現(xiàn)了

2000——著名軟件Omnigraffle問世

2001——《敏捷宣言》發(fā)布，這也是后來敏捷UX運動的起點

2003——Axure 出現(xiàn)，這是目前最主流的原型設計軟件

2003——iRise發(fā)布

2005——基于網(wǎng)絡的原型（SaaS）越來越普遍，這也為低保真原型設計類APP打開了一扇門，也成為了整合協(xié)作與產(chǎn)品管理的APP誕生的契機

2005—— MockupScreens 問世

2006—— Gliffy 誕生

2006—— Cowboy coding，這是一套針對軟件開發(fā)的編程與修改的理論，這套由谷歌所推行的“20%時間”策略指的是，允許程序員將一小部分工作時間劃分出來做他們自己想做的任何事情。

來源: Working Locally Instead of Cowboy Coding

2007—— Jumpchart 誕生

2008—— Balsamiq 問世

2008—— Protoshare 發(fā)布

2008—— Justinmind 問世

2008——創(chuàng)業(yè)公司之間的激烈競爭導致了精益UX運動

2010——技術發(fā)展促使無代碼高保真SaaS原型的誕生

2011——UXPin的誕生（紙質、移動端、網(wǎng)頁、響應式）

2011——InVision的問世（移動端，網(wǎng)頁）

2012——Flinto（移動端）

2012——POP出現(xiàn)（針對移動端的紙質原型）

2013——Marvel （移動端，網(wǎng)頁）

未來：屬于原型的時代

我們對于未來的猜測始于我們對于現(xiàn)有原型和線框圖的討論：線框圖和原型以低保真原型的形式結合到一起，同時兼具了大綱和組織的功能。

我們將2014年稱為“交互設計工具之年”，并為此專門撰文。這篇文章當中，Bloc的設計師 Emelyn Baker 解釋了這次交互設計工具社區(qū)爆發(fā)式增長的原因，并且列舉出了那些最優(yōu)秀的工具，其中包括了UXPin。閱讀完這篇文章你會發(fā)現(xiàn)這類工具多得令人驚訝，而且 其中絕大多數(shù)都界限模糊，功能游離于線框圖、原型和視覺稿之間，其實你也可以從中窺見未來。

來源: 2014 — The Year of Interactive Design Tools

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

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

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

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

來源: Microinteractions

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

結語

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

來源: The Future of UX Design

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

祝你好運！

原文來自：優(yōu)設

原文地址：designmodo

優(yōu)設譯者：@陳子木