作為一個交互設(shè)計師和工具控，我對原型設(shè)計應(yīng)該用什么工具這個話題一直很感興趣。工作至今，陸續(xù)使用過很多不同類型的原型工具，從最基本的紙筆，到Axure RP/Omni graffle，在不斷地嘗試和比較中，也一直在思考到底什么原型工具最適合做交互設(shè)計。后來發(fā)現(xiàn)其實(shí)這個問題無解。脫離了目的，單純地討論工具是沒有價值的。所以想到寫一下快速原型的目的和工具選擇。 先來對原型（prototype）做個定義，這里的關(guān)鍵點(diǎn)是要區(qū)分wireframe，prototype和mockup三個概念。 Wireframe，直譯的話是線框圖。由線條構(gòu)成的草圖或示意圖，都屬于wireframe。當(dāng)然如果有簡單的陰影表現(xiàn)或者上色的話，一般也歸到wireframe。

Mockup，模型，工業(yè)設(shè)計中用mockup會比較多，比如1：1的汽車油泥模型。但在ui設(shè)計中，mockup的概念和wireframe有時分得不是很清楚。如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)頁就叫原型了，如下圖是蘋果的一個原型機(jī)。

在flicrk上搜了很久，發(fā)現(xiàn)原型很難用圖片表現(xiàn)，所以找了個youtube上的紙面原型的視頻。我一直對紙面原型不感冒，看了之后就更覺得如此了。視頻地址 原型一般又有低保真原型（low-fidelity prototype）和高保真原型（high-fidelity prototype）之說，像上面這個紙面原型就屬于低保真原型。不過糾結(jié)一下的話，這個分法又是有問題的。因為保真度至少有兩個維度。視覺的保真度和交互的保真度（功能實(shí)現(xiàn)的完善程度）。另一個維度是內(nèi)容的保真度，在內(nèi)容性產(chǎn)品上，這也是一個很重要的維度。

在上面這張坐標(biāo)圖中，有個重要的因素是技術(shù)或者說代碼是否可以復(fù)用。這里先做個撇清，這不是本文所關(guān)注的主要內(nèi)容，在快速原型中考慮代碼復(fù)用，會無端帶來很多限制。就我見到的，一般說來web或者blend以外的項目，原型代碼的復(fù)用比較少見。而且追求代碼復(fù)用的原型，一定已經(jīng)處于保真度比較高的階段了，本身已經(jīng)不符合快速原型要追求數(shù)量和迭代的目的了，下面會提到。 在面對外部客戶的時候，原型的視覺保真度會比較重要，它能夠更好地幫助客戶理解設(shè)計，而且一個視覺保真度高的原型，在提案的時候也會更具說服力。缺點(diǎn)也同樣明顯，同樣一個原型需要投入更多的時間，一旦設(shè)計變更投入的時間就更多；而且在項目前期，一般很難做一個視覺保真度很高的原型，所以在整個設(shè)計流程中的應(yīng)用也有局限。 所以如果不是需要向外部客戶提案，只是用于內(nèi)部溝通、檢驗交互問題的話，視覺的保真度可以退而求其次，以交互的保真度作為主要維度。應(yīng)該追求速度和數(shù)量，盡可能在產(chǎn)品早期多嘗試，多迭代，以求發(fā)現(xiàn)新想法并降低項目后期風(fēng)險。 于是我對快速原型是這么定義的：項目前期，以發(fā)現(xiàn)新想法和檢驗設(shè)計為主要目的的原型設(shè)計行為。

關(guān)于追求數(shù)量，插播一個小故事，從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é)生只要做一個罐子，但只要很完美就能得“A”。到了最終評判的時候出現(xiàn)了一個奇怪的現(xiàn)象：最好的作品都出自于數(shù)量評定組的學(xué)生?？磥碓跀?shù)量評定組學(xué)生辛苦地盡力做出更多陶藝作品時，他們從錯誤中不斷地學(xué)到新的東西，而質(zhì)量評定組的學(xué)生坐在那里思考如何運(yùn)用理論做出“完美”作品，最終看不到他們努力的成果，只留下一大堆空泛的理論和死氣沉沉的黏土。 追求質(zhì)量的那組，結(jié)果卻在質(zhì)量上敗給了追求數(shù)量的那組，詫異之余，仔細(xì)一想，確實(shí)是那么回事兒。回顧過往的設(shè)計經(jīng)歷很容易發(fā)現(xiàn)，當(dāng)我們反復(fù)打磨一個設(shè)計的時候，思路已經(jīng)落入了窠臼，跳出來的最好辦法就是打破重來。但是拋棄一個已經(jīng)花了很多時間在上面的設(shè)計對于設(shè)計師來說一般很艱難；設(shè)計的完成度越高，設(shè)計師就越傾向于去完善或者改進(jìn)這個設(shè)計，而不是從零開始重新做另一個設(shè)計。 所以快速原型中的“快”字很重要，快了才能追求數(shù)量。俗話說得好：天下武功，無堅不破，唯快不破^_^ 設(shè)計前期最常采用的工具就是紙和筆，輸出稿就是草圖（紙面線框圖）。

草圖的好處在于快速，廉價，不受拘束（相對于軟件來說，紙筆的獲得成本比計算機(jī)低很多，而且設(shè)計師想表達(dá)的東西往往受到軟件本身的功能或者設(shè)計師對軟件技能的掌握所限制），容易拋棄。紙筆作為工具來說，確實(shí)是概念設(shè)計階段首選。 那快速原型的首選工具是什么呢？我想了下，應(yīng)該有這么幾點(diǎn)要求： 1. 很低的學(xué)習(xí)和上手成本 2. 快速而高效的繪圖功能 3. 可以實(shí)現(xiàn)交互動作 可以實(shí)現(xiàn)以上幾個目的的工具不在少數(shù)。Axure RP或者omni graffle雖然學(xué)習(xí)曲線有點(diǎn)陡，但對于用慣了的人來說，完全可以勝任快速原型的工作。尤其是基于omni graffle大量的stencil，可以非?？焖俚爻鲈汀２贿^我還是想推一下ppt/keynote作為快速原型工具，雖然相比之下，它們看起來業(yè)余很多。（原諒我，作為一個工具控，我太糾結(jié)了T T）

首先，ppt/keynote是絕大多數(shù)win/mac機(jī)器上的標(biāo)配，從可達(dá)到程度上來說，他們是最高的，可以不用單獨(dú)安裝一個巨大的軟件了。好吧，這點(diǎn)大多數(shù)人不care。 以輸出稿來看，為了確保最終的結(jié)果在客戶或別的同事的機(jī)器上可以完美的運(yùn)行，大多數(shù)設(shè)計師會選擇會以pdf/swf等作為最終的輸出格式。但這帶來一個弊端就是，源文件和最終輸出是兩個東西（其實(shí)ps/ai什么的也有同樣的問題）。再換句話來說，修改設(shè)計，一定要打開做源文件的那個程序才可以！然后還要重新再導(dǎo)出一次設(shè)計稿才能用來展示?？赡艽蠖鄶?shù)設(shè)計師已經(jīng)習(xí)慣如此了，所以沒有覺得這是個問題（但這卻是我喜歡用fw的一大原因，fw源文件即設(shè)計稿，不用再次導(dǎo)出；fw的另一個優(yōu)點(diǎn)是源文件巨小）?？墒莗pt/keynote的好處就是，你可以選擇不導(dǎo)出pdf，而是直接給對方展示源文件，按播放就可以了。然后退出播放模式就可以立馬修改，試問哪個同類軟件可以做到。 也許有人要挑戰(zhàn)一下，就算它們可以即時修改，但是ppt/keynote可以完成的事情有限，很多事情我還是要在ps里完成的啊。于是我推薦以下這兩個網(wǎng)站，都是基于keynote的模版，注意咯，所有模版都是在keynote里繪制的。

Keynotopia Keynote kungfu 所以，以keynote來舉例的話，它擁有了超過大多數(shù)只是把它用來做presention的設(shè)計師的預(yù)期的強(qiáng)大的繪圖能力（好長= =！）。此外，它還具有像母板這樣的特性，能夠為我們節(jié)省很多時間，這也符合“快”的奧義。 最后，ppt/keynote還有動畫效果，包括場景切換動畫和物體動畫。能用來干嗎？一個控件的放大縮小，完全可以用keynote中的magic move來模擬！包括iphone上的設(shè)置界面一般是翻轉(zhuǎn)到背面，這個效果也可以完全地用flip來實(shí)現(xiàn)。對于一個以追求快速為目的的原型工具來說，這可以算是意外的驚喜了。 說完了優(yōu)點(diǎn)，再來說缺點(diǎn)。最大的缺點(diǎn)就是免費(fèi)的模版太少，上面那兩個鏈接里的keynote模版都是要錢的，而免費(fèi)的在效果上就差強(qiáng)人意了。另外免費(fèi)模版的適用范圍也有限，所以在這塊上還需要設(shè)計師自己花很多精力。不過國外用keynote做原型的設(shè)計師正越來越多，前兩天正好看pixelmator的一個專訪，他們的設(shè)計師也是用keynote做原型的。

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

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