在風(fēng)起云涌的互聯(lián)網(wǎng)浪潮中，產(chǎn)品迭代的速度越來越快。隨著用戶需求的激增，也不斷帶來了對(duì)設(shè)計(jì)師能力要求的提高。初入交互設(shè)計(jì)領(lǐng)域幾年來，明顯發(fā)現(xiàn)可視化的內(nèi)容遠(yuǎn)比文檔的更易于被用戶（以至我們的客戶）所接受，就像用戶研究項(xiàng)目中常說的一句話：“用戶怎么說的，并不代表他們?cè)趺聪搿！苯裉煲浴霸驮O(shè)計(jì)”為基點(diǎn)，與大家展開幾點(diǎn)做簡(jiǎn)要的分析。

　　一、什么是原型設(shè)計(jì)？

　　首先，讓我們看看在體驗(yàn)設(shè)計(jì)的過程中的“原型設(shè)計(jì)”。

　　以下結(jié)合個(gè)人對(duì)UCD理解和項(xiàng)目經(jīng)驗(yàn)，梳理和簡(jiǎn)化的傳統(tǒng)體驗(yàn)設(shè)計(jì)的流程。（流程是每個(gè)群體的工作方式，好像我們的長(zhǎng)相，很難完全一樣，并且時(shí)常改變，不能蓋棺定論。）

　　簡(jiǎn)而言之，傳統(tǒng)的原型設(shè)計(jì)往往是定位于概念設(shè)計(jì)或整個(gè)設(shè)計(jì)流程初期的一個(gè)過程。隨著項(xiàng)目大小、時(shí)間周期等，UED人員往往會(huì)根據(jù)需求確定紙?jiān)汀⒌捅Ｕ嬖?、高保真原型等不同質(zhì)量的內(nèi)容作為輸出。具體來講可以將原型劃分為3類：

　　● 紙?jiān)停侯櫭剂x，就是畫在文檔紙、白板上的設(shè)計(jì)原型、示意圖。便于修改和繪制，不便于保存和展示。因此想有效的利用紙?jiān)?，我們就需要注意紙?jiān)偷某休d。
　　● 低保真原型：通常是基于現(xiàn)有的界面或系統(tǒng)，通過電腦進(jìn)行一定的加工后的設(shè)計(jì)稿，示意更加明確，能夠包含設(shè)計(jì)的交互和反饋，美觀、效果等欠佳?？梢岳斫鉃榻橛诩埫嬖秃透弑Ｕ嬖椭g的輸出的統(tǒng)稱，往往也可以作為需求設(shè)計(jì)稿輸出。
　　● 高保真原型：屬于原型設(shè)計(jì)的終極武器。包括產(chǎn)品演示Demo或概念設(shè)計(jì)展示。視覺上與實(shí)際產(chǎn)品等效，體驗(yàn)上也與真實(shí)產(chǎn)品接近。而為了達(dá)到完整的效果，很大程度上就要求交互設(shè)計(jì)師對(duì)視覺審美的能力。只有從視覺、體驗(yàn)兩方面同時(shí)打動(dòng)客戶，在能最終贏得客戶的信賴。

　　在我們不斷按圖索驥的去設(shè)計(jì)原型時(shí)，會(huì)不會(huì)發(fā)現(xiàn)有時(shí)原型并沒有起到它的作用呢？又或者會(huì)不會(huì)發(fā)現(xiàn)抽不出時(shí)間做原型？做出的原型只用于展示特性和效果，沒能物盡其用？下面，讓我們進(jìn)一步看看，如何將原型設(shè)計(jì)結(jié)合在體驗(yàn)設(shè)計(jì)過程中。

　　二、Why & How？

　　我們熱愛動(dòng)手、創(chuàng)新，也喜歡評(píng)論、思考。而在實(shí)踐中往往是如下情況：

　　回頭看看，我們多數(shù)時(shí)候輸出的低保真設(shè)計(jì)稿，傳遞的信息是完全可以通過上圖的紙面原型去表達(dá)的，而紙面原型所花費(fèi)的時(shí)間和成本可能只有一半或更少。放眼整個(gè)產(chǎn)品設(shè)計(jì)過程，一個(gè)導(dǎo)航、對(duì)話框、窗口，也依然可行。試著在“需求討論”的時(shí)候，去用手討論，動(dòng)上幾筆可能就能幫我們?cè)诤芏痰臅r(shí)間內(nèi)梳理清楚交互設(shè)計(jì)所需的“流程、布局、控件”等等。而且在畫圖過程中，還能以較低的門檻（可能需要另一只筆）就能讓所有人參與其中，創(chuàng)造很多附加信息和價(jià)值。而或許更好的是，通過繪制白板的過程，你可以更清晰的傳遞出窗口的布局和邏輯；而通過在真實(shí)介質(zhì)是低成本的交流，將會(huì)更容易打動(dòng)你的產(chǎn)品經(jīng)理和客戶。在創(chuàng)建紙?jiān)蜁r(shí)，僅需要注意幾點(diǎn)：

　　● 試著同時(shí)準(zhǔn)備2支筆，讓更多人參與設(shè)計(jì)
　　● 試著準(zhǔn)備一支紅筆，在討論結(jié)束時(shí)，把所有內(nèi)容進(jìn)行梳理和總結(jié)
　　● 記得給白板拍照，或在輸出之前保留好繪圖紙

　　如果你有豐富大膽的想象力和一定的手繪基礎(chǔ)，甚至可以將整個(gè)設(shè)計(jì)過程通過手繪的形式記錄和展示，現(xiàn)在類似的產(chǎn)品宣傳也隨處可見，比如著名的寶馬轎車。再順便推薦一本關(guān)于視覺化思考的書《The Back Of The Napkin》與各位共勉。

　　上面我們只看到了天平的一端，我稱之為“敏捷化原型”，就是鼓勵(lì)大家在最初的設(shè)計(jì)時(shí)，動(dòng)嘴的同時(shí)勤動(dòng)手。大膽的把筆交給產(chǎn)品經(jīng)理和團(tuán)隊(duì)的其他人，來幫助設(shè)計(jì)師完善和豐富你的稿件，這樣才能激發(fā)和節(jié)省更多的時(shí)間去產(chǎn)生Idea。 更進(jìn)一步說，甚至在專業(yè)能力和環(huán)境允許的情況下，完全可以采用在需求開始時(shí)由設(shè)計(jì)師與團(tuán)隊(duì)一起進(jìn)行紙面原型的繪制，之后由產(chǎn)品經(jīng)理給出相關(guān)的設(shè)計(jì)稿或低保真原型。

　　在天平的另一端，是應(yīng)當(dāng)走向“精細(xì)化原型”時(shí)代。盡可能的將設(shè)計(jì)創(chuàng)意完善并融入到真實(shí)的場(chǎng)景中，不論是軟件界面還是Web體驗(yàn)，都可以真實(shí)點(diǎn)擊和拖拽。通過高保真原型的輸出，用戶更容易被整個(gè)產(chǎn)品而不是某個(gè)圖案或體驗(yàn)特性所吸引。這不僅有助于單一方案的認(rèn)可機(jī)會(huì)，還可以從側(cè)面樹立起設(shè)計(jì)師的專業(yè)形象，提升客戶的認(rèn)可，甚至可以大膽的提出流程的假設(shè)：“以原型為中心的設(shè)計(jì)”。

　　三、動(dòng)手做原型設(shè)計(jì)

　　以下推薦并簡(jiǎn)單分析幾個(gè)原型設(shè)計(jì)的途徑。

　　前面說的紙面原型，最基礎(chǔ)的就是需要紙和筆，我們可以簡(jiǎn)單快捷的描繪出一個(gè)窗口面板，從中點(diǎn)擊彈出一個(gè)對(duì)話框，進(jìn)行設(shè)置并保存，在旁邊補(bǔ)充出對(duì)應(yīng)的出錯(cuò)和分之流程。另外，為了解決不易保存的缺陷，除了自己親自動(dòng)筆，再推薦幾款軟件作為紙?jiān)偷妮敵觥?/P>

　　1.　Balsamiq Mockups 演示地址

　　這是一款幫助你最快速、直觀的繪制用戶界面原型的軟件。其中包括了75個(gè)現(xiàn)成的控件，并且可以輕松的以頗具親和力的手繪風(fēng)格完成界面框架的設(shè)計(jì)。上手非常容易，可以進(jìn)行反復(fù)編輯并支持調(diào)整圖層和控件狀態(tài)，是不可多得的紙面原型繪制軟件。不過真的只能取代紙面原型，不易表現(xiàn)交互過程和效果，對(duì)中文的支持也比較差。

　　2. Microsoft Expression Blend + SketchFlow

　　Microsoft Expression Blend 包含一組新功能，它們專門設(shè)計(jì)為讓用戶更輕松快速地創(chuàng)建、傳達(dá)和審閱交互式應(yīng)用程序及交互式內(nèi)容的原型。這組功能稱為 SketchFlow。它是實(shí)際的 Windows Presentation Foundation (WPF) 或 Microsoft Silverlight 應(yīng)用程序。您可以生成原型項(xiàng)目，運(yùn)行它，然后在原型中進(jìn)行瀏覽（即使您只有原型的初始草圖）。

　　SketchFlow和Balsamiq Mockups相比，不僅可以繪制出具有親和力的手繪原型，更可以實(shí)現(xiàn)交互所需的響應(yīng)和效果，使得低保真原型賦予了高保真的內(nèi)涵，算是給人意外的驚喜。不過由于短期內(nèi)MS Silverlight技術(shù)的普及率較低，可能大家上手成本較高，可以作為長(zhǎng)期關(guān)注和研究的方法。

　　同時(shí)，為了便于在低保真模型上梳理產(chǎn)品邏輯和流程，Visio和Mind Manger也是不錯(cuò)的選擇。對(duì)于原型設(shè)計(jì)（主要適用于低保真原型），大家都很熟悉的Axure，最新官方版本5.6，訪問官網(wǎng)>>

　　能夠很快實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)和變化，完成流程性的演示。并推薦大家與產(chǎn)品經(jīng)理一起來使用。然而，身為設(shè)計(jì)師，怎能滿足于只輸出低保真原型作為討論素材呢？

　　當(dāng)大家深諳如何基于紙面原型的討論，又可以放心大膽的將手中的槍交給熱心的產(chǎn)品經(jīng)理去進(jìn)行低保真原型的設(shè)計(jì)，在這種如此理想的情況下，我們不得不花費(fèi)心思在如何實(shí)現(xiàn)我們的“大絕”—高保真原型上。談到高保真原型，其實(shí)還是非常需要實(shí)力和鍛煉的。此時(shí)，不得不祭出設(shè)計(jì)師的最愛，Adobe 公司的Flash Platform：Flash CS4，F(xiàn)lex/Flash Builder，F(xiàn)lash Player和Adobe AIR。

　　關(guān)于Flash的學(xué)習(xí)，結(jié)合Action Script 3.0、XML和Adobe的AIR技術(shù)，可以很完整、逼真的實(shí)現(xiàn)我們想要的任何界面效果，學(xué)習(xí)過程不再贅述。從Adobe的產(chǎn)品線發(fā)展不難看出，最終原型制作的最高境界就是可以和實(shí)際產(chǎn)品相結(jié)合，讓設(shè)計(jì)師的輸出和開發(fā)人員能夠直接結(jié)合，使原型得以100%保真。對(duì)于客戶端的原型，大可通過VC去動(dòng)手寫寫程序代碼，或者在Win7下用Blend接口，便能大大降低“這個(gè)效果做不了”的尷尬。

　　3.UIDesigner

　　說到高保真原型，不能不提的是CDC出品的原型制作秘密武器UIDesigner，這本是CDC專用武器，現(xiàn)在已經(jīng)分享給大家了。UIDesigner能讓你輕松實(shí)現(xiàn)豐富的各種交互效果，基本可以控制到Windows標(biāo)準(zhǔn)空間所包含的所有屬性，但這一切不需要你有任何編程能力基礎(chǔ)。感興趣的朋友可以到 http://cdc.tencent.com/?p=424 了解一下。

　　而對(duì)于網(wǎng)頁(yè)產(chǎn)品，只要設(shè)計(jì)師能主動(dòng)提高動(dòng)手能力，通過使用HTML甚至Ajax、jquery等也能很快實(shí)現(xiàn)網(wǎng)頁(yè)產(chǎn)品的高保真模型，也需要隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展不斷學(xué)習(xí)，與時(shí)俱進(jìn)。

　　總而言之，平時(shí)多動(dòng)手，戰(zhàn)時(shí)少流汗（客戶不滿意、老板不滿意，換誰都要渾身冒冷汗……）。在設(shè)計(jì)過程中，還可以通過設(shè)計(jì)公用組件不斷提高效率，不斷發(fā)掘新的、好的原型設(shè)計(jì)方法。將整個(gè)設(shè)計(jì)過程與原型設(shè)計(jì)相結(jié)合，總結(jié)起來有以下幾點(diǎn)好處：

　　● 最真實(shí)進(jìn)行設(shè)計(jì)傳達(dá)，并影響整個(gè)團(tuán)隊(duì)（開發(fā)、產(chǎn)品經(jīng)理、用戶）
　　● 樹立設(shè)計(jì)師的專業(yè)影響力（用實(shí)力說話，用產(chǎn)品說服別人）
　　● 技不壓身，擴(kuò)寬專業(yè)知識(shí)領(lǐng)域有助于向更高層次的發(fā)展:-)

　　與大家共勉，希望對(duì)各位平時(shí)的工作有所幫助，Thx。

　　原文：http://cdc.tencent.com/?p=2146