作為一個(gè)交互設(shè)計(jì)師和工具控，我對原型設(shè)計(jì)應(yīng)該用什么工具這個(gè)話題一直很感興趣。工作至今，陸續(xù)使用過很多不同類型的原型工具，從最基本的紙筆，到Axure RP/Omni graffle，在不斷地嘗試和比較中，也一直在思考到底什么原型工具最適合做交互設(shè)計(jì)。后來發(fā)現(xiàn)其實(shí)這個(gè)問題無解。脫離了目的，單純地討論工具是沒有價(jià)值的。所以想到寫一下快速原型的目的和工具選擇。

先來對原型（prototype）做個(gè)定義，這里的關(guān)鍵點(diǎn)是要區(qū)分wireframe，prototype和mockup三個(gè)概念。

Wireframe，直譯的話是線框圖。由線條構(gòu)成的草圖或示意圖，都屬于wireframe。當(dāng)然如果有簡單的陰影表現(xiàn)或者上色的話，一般也歸到wireframe。

Mockup，模型，工業(yè)設(shè)計(jì)中用mockup會比較多，比如1：1的汽車油泥模型。但在ui設(shè)計(jì)中，mockup的概念和wireframe有時(shí)分得不是很清楚。如balsamiq mockups這款軟件，它的實(shí)現(xiàn)的效果其實(shí)應(yīng)該是屬于wireframe的級別。下圖是balsamiq mockups的實(shí)現(xiàn)效果。

最后說prototype，原型。原型更強(qiáng)調(diào)功能性，和以上兩者很容易區(qū)分，一般可以交互的就是原型了。所以ps的輸出稿一般不會是原型，而用dw實(shí)現(xiàn)的網(wǎng)頁就叫原型了，如下圖是蘋果的一個(gè)原型機(jī)。

在flicrk上搜了很久，發(fā)現(xiàn)原型很難用圖片表現(xiàn)，所以找了個(gè)youtube上的紙面原型的視頻。我一直對紙面原型不感冒，看了之后就更覺得如此了。視頻地址

原型一般又有低保真原型（low-fidelity prototype）和高保真原型（high-fidelity prototype）之說，像上面這個(gè)紙面原型就屬于低保真原型。不過糾結(jié)一下的話，這個(gè)分法又是有問題的。因?yàn)楸Ｕ娑戎辽儆袃蓚€(gè)維度。視覺的保真度和交互的保真度（功能實(shí)現(xiàn)的完善程度）。另一個(gè)維度是內(nèi)容的保真度，在內(nèi)容性產(chǎn)品上，這也是一個(gè)很重要的維度。

在上面這張坐標(biāo)圖中，有個(gè)重要的因素是技術(shù)或者說代碼是否可以復(fù)用。這里先做個(gè)撇清，這不是本文所關(guān)注的主要內(nèi)容，在快速原型中考慮代碼復(fù)用，會無端帶來很多限制。就我見到的，一般說來web或者blend以外的項(xiàng)目，原型代碼的復(fù)用比較少見。而且追求代碼復(fù)用的原型，一定已經(jīng)處于保真度比較高的階段了，本身已經(jīng)不符合快速原型要追求數(shù)量和迭代的目的了，下面會提到。

在面對外部客戶的時(shí)候，原型的視覺保真度會比較重要，它能夠更好地幫助客戶理解設(shè)計(jì)，而且一個(gè)視覺保真度高的原型，在提案的時(shí)候也會更具說服力。缺點(diǎn)也同樣明顯，同樣一個(gè)原型需要投入更多的時(shí)間，一旦設(shè)計(jì)變更投入的時(shí)間就更多；而且在項(xiàng)目前期，一般很難做一個(gè)視覺保真度很高的原型，所以在整個(gè)設(shè)計(jì)流程中的應(yīng)用也有局限。

所以如果不是需要向外部客戶提案，只是用于內(nèi)部溝通、檢驗(yàn)交互問題的話，視覺的保真度可以退而求其次，以交互的保真度作為主要維度。應(yīng)該追求速度和數(shù)量，盡可能在產(chǎn)品早期多嘗試，多迭代，以求發(fā)現(xiàn)新想法并降低項(xiàng)目后期風(fēng)險(xiǎn)。

于是我對快速原型是這么定義的：項(xiàng)目前期，以發(fā)現(xiàn)新想法和檢驗(yàn)設(shè)計(jì)為主要目的的原型設(shè)計(jì)行為。

關(guān)于追求數(shù)量，插播一個(gè)小故事，從Bill buxton的sketching user experience書里看到的：

陶藝?yán)蠋熢诘谝惶煺f要將學(xué)生分成兩組，工作室里坐在左邊的學(xué)生將只以他們制作的陶器數(shù)量進(jìn)行評分，而右邊的學(xué)生只以他們制作的陶器的質(zhì)量對其進(jìn)行考核。進(jìn)程很簡單，最后上課那天，老師把家中盥洗室里的體重秤帶來稱數(shù)量評定組學(xué)生的作業(yè)，瓦罐總重量達(dá)到五十磅給“A”，四十磅的評“B”，以此類推。質(zhì)量評定組學(xué)生只要做一個(gè)罐子，但只要很完美就能得“A”。到了最終評判的時(shí)候出現(xiàn)了一個(gè)奇怪的現(xiàn)象：最好的作品都出自于數(shù)量評定組的學(xué)生?？磥碓跀?shù)量評定組學(xué)生辛苦地盡力做出更多陶藝作品時(shí)，他們從錯(cuò)誤中不斷地學(xué)到新的東西，而質(zhì)量評定組的學(xué)生坐在那里思考如何運(yùn)用理論做出“完美”作品，最終看不到他們努力的成果，只留下一大堆空泛的理論和死氣沉沉的黏土。

追求質(zhì)量的那組，結(jié)果卻在質(zhì)量上敗給了追求數(shù)量的那組，詫異之余，仔細(xì)一想，確實(shí)是那么回事兒?；仡欉^往的設(shè)計(jì)經(jīng)歷很容易發(fā)現(xiàn)，當(dāng)我們反復(fù)打磨一個(gè)設(shè)計(jì)的時(shí)候，思路已經(jīng)落入了窠臼，跳出來的最好辦法就是打破重來。但是拋棄一個(gè)已經(jīng)花了很多時(shí)間在上面的設(shè)計(jì)對于設(shè)計(jì)師來說一般很艱難；設(shè)計(jì)的完成度越高，設(shè)計(jì)師就越傾向于去完善或者改進(jìn)這個(gè)設(shè)計(jì)，而不是從零開始重新做另一個(gè)設(shè)計(jì)。

所以快速原型中的“快”字很重要，快了才能追求數(shù)量。俗話說得好：天下武功，無堅(jiān)不破，唯快不破^_^

設(shè)計(jì)前期最常采用的工具就是紙和筆，輸出稿就是草圖（紙面線框圖）。草圖的好處在于快速，廉價(jià)，不受拘束（相對于軟件來說，紙筆的獲得成本比計(jì)算機(jī)低很多，而且設(shè)計(jì)師想表達(dá)的東西往往受到軟件本身的功能或者設(shè)計(jì)師對軟件技能的掌握所限制），容易拋棄。紙筆作為工具來說，確實(shí)是概念設(shè)計(jì)階段首選。

那快速原型的首選工具是什么呢？我想了下，應(yīng)該有這么幾點(diǎn)要求：

1. 很低的學(xué)習(xí)和上手成本

2. 快速而高效的繪圖功能

3. 可以實(shí)現(xiàn)交互動(dòng)作

可以實(shí)現(xiàn)以上幾個(gè)目的的工具不在少數(shù)。Axure RP或者omni graffle雖然學(xué)習(xí)曲線有點(diǎn)陡，但對于用慣了的人來說，完全可以勝任快速原型的工作。尤其是基于omni graffle大量的stencil，可以非常快速地出原型。不過我還是想推一下ppt/keynote作為快速原型工具，雖然相比之下，它們看起來業(yè)余很多。（原諒我，作為一個(gè)工具控，我太糾結(jié)了T T）

首先，ppt/keynote是絕大多數(shù)win/mac機(jī)器上的標(biāo)配，從可達(dá)到程度上來說，他們是最高的，可以不用單獨(dú)安裝一個(gè)巨大的軟件了。好吧，這點(diǎn)大多數(shù)人不care。

以輸出稿來看，為了確保最終的結(jié)果在客戶或別的同事的機(jī)器上可以完美的運(yùn)行，大多數(shù)設(shè)計(jì)師會選擇會以pdf/swf等作為最終的輸出格式。但這帶來一個(gè)弊端就是，源文件和最終輸出是兩個(gè)東西（其實(shí)ps/ai什么的也有同樣的問題）。再換句話來說，修改設(shè)計(jì)，一定要打開做源文件的那個(gè)程序才可以！然后還要重新再導(dǎo)出一次設(shè)計(jì)稿才能用來展示?？赡艽蠖鄶?shù)設(shè)計(jì)師已經(jīng)習(xí)慣如此了，所以沒有覺得這是個(gè)問題（但這卻是我喜歡用fw的一大原因，fw源文件即設(shè)計(jì)稿，不用再次導(dǎo)出；fw的另一個(gè)優(yōu)點(diǎn)是源文件巨?。？墒莗pt/keynote的好處就是，你可以選擇不導(dǎo)出pdf，而是直接給對方展示源文件，按播放就可以了。然后退出播放模式就可以立馬修改，試問哪個(gè)同類軟件可以做到。

也許有人要挑戰(zhàn)一下，就算它們可以即時(shí)修改，但是ppt/keynote可以完成的事情有限，很多事情我還是要在ps里完成的啊。于是我推薦以下這兩個(gè)網(wǎng)站，都是基于keynote的模版，注意咯，所有模版都是在keynote里繪制的。

Keynotopia??? Keynote kungfu

所以，以keynote來舉例的話，它擁有了超過大多數(shù)只是把它用來做presention的設(shè)計(jì)師的預(yù)期的強(qiáng)大的繪圖能力（好長= =?。?。此外，它還具有像母板這樣的特性，能夠?yàn)槲覀児?jié)省很多時(shí)間，這也符合“快”的奧義。

最后，ppt/keynote還有動(dòng)畫效果，包括場景切換動(dòng)畫和物體動(dòng)畫。能用來干嗎？一個(gè)控件的放大縮小，完全可以用keynote中的magic move來模擬！包括iphone上的設(shè)置界面一般是翻轉(zhuǎn)到背面，這個(gè)效果也可以完全地用flip來實(shí)現(xiàn)。對于一個(gè)以追求快速為目的的原型工具來說，這可以算是意外的驚喜了。

說完了優(yōu)點(diǎn)，再來說缺點(diǎn)。最大的缺點(diǎn)就是免費(fèi)的模版太少，上面那兩個(gè)鏈接里的keynote模版都是要錢的，而免費(fèi)的在效果上就差強(qiáng)人意了。另外免費(fèi)模版的適用范圍也有限，所以在這塊上還需要設(shè)計(jì)師自己花很多精力。不過國外用keynote做原型的設(shè)計(jì)師正越來越多，前兩天正好看pixelmator的一個(gè)專訪，他們的設(shè)計(jì)師也是用keynote做原型的。

連一個(gè)繪圖軟件的原型都可以用keynote實(shí)現(xiàn)，那還有什么是不可以的呢？

• (本文出自Tencent CDC Blog，轉(zhuǎn)載時(shí)請注明出處)