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

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

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

現(xiàn)在：當(dāng)前的設(shè)計方法

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

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

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

1. 敏捷UX

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

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

來源：The Visual Agile Manifesto

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

2. 精益UX

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

來源：Lean UX Cycle

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

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

3、如何讓兩者結(jié)合到一起

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

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

來源: How Spotify Builds Products

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

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

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

現(xiàn)狀：當(dāng)今的原型設(shè)計

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

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

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

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

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

1970——瀑布模型成為軟件開發(fā)領(lǐng)域的主流
1975——信息架構(gòu)的重要性被承認，并開始發(fā)展
1980——由于編程技術(shù)的發(fā)展，最早的數(shù)字化原型（類似流程圖）出現(xiàn)了

來源: Atari Prototypes: Tempest (1983)

1985——紙質(zhì)原型開始出現(xiàn)，被用于可用性測試和概念分享
1985——瀑布模型被調(diào)整修改，并納入迭代開發(fā)和增量開發(fā)中（IID）
1986——第一款可視化設(shè)計軟件被開發(fā)出來
1986——Adobe Illustrator 問世
1987——微軟的PowerPoint問世（應(yīng)該是用于蘋果家的Macintosh系列的電腦）
1988——軟件開發(fā)的螺旋模型問世并推廣

來源：Boehm’s Spiral Revisited

1990——Adobe Photoshop問世（它和電影發(fā)展史息息相關(guān)）
1991——IBM 推出用于軟件開發(fā)的“軟件快速開發(fā)”（RAD）理論
1992——微軟 Visio問世（原本名為Shapeware，最終在2000年為微軟所收購）
1995——案例展示和UI設(shè)計上布局變得更加全面
2000——為了迎合日益增長的需求，原型設(shè)計軟件出現(xiàn)了
2000——著名軟件Omnigraffle問世
2001——《敏捷宣言》發(fā)布，這也是后來敏捷UX運動的起點
2003——Axure 出現(xiàn)，這是目前最主流的原型設(shè)計軟件
2003——iRise發(fā)布
2005——基于網(wǎng)絡(luò)的原型（SaaS）越來越普遍，這也為低保真原型設(shè)計類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è)公司之間的激烈競爭導(dǎo)致了精益UX運動
2010——技術(shù)發(fā)展促使無代碼高保真SaaS原型的誕生
2011——UXPin的誕生（紙質(zhì)、移動端、網(wǎng)頁、響應(yīng)式）
2011——InVision的問世（移動端，網(wǎng)頁）
2012——Flinto（移動端）
2012——POP出現(xiàn)（針對移動端的紙質(zhì)原型）
2013——Marvel （移動端，網(wǎng)頁）

未來：屬于原型的時代

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

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

來源: 2014 — The Year of Interactive Design Tools

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

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

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

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

來源: Microinteractions

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

深入了解微交互:《微交互：細節(jié)設(shè)計成就卓越產(chǎn)品》

結(jié)語

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

來源: The Future of UX Design

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

【原型設(shè)計技能提升指南】

線框圖和原型對比：
《設(shè)計師基礎(chǔ)知識：你知道線框圖和原型有啥區(qū)別嗎》

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

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

原文地址：designmodo
優(yōu)設(shè)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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