軟件原型設(shè)計(jì)DIY——揭秘利器UIDesigner

亨利 [ 交互設(shè)計(jì) ]

2008.11.25

（編者注：UIDesigner目前還在內(nèi)測(cè)階段，如果您對(duì)UIDesigner感興趣，歡迎到UIDesigner官方吧了解內(nèi)測(cè)版使用申請(qǐng)活動(dòng)。）

　
在軟件設(shè)計(jì)階段，交互設(shè)計(jì)師或者產(chǎn)品經(jīng)理等常常需要使用一些工具（比如Visio、Axure RP、Flash或者OmniGraffle等）制作出靜態(tài)稿或者原型來(lái)表達(dá)設(shè)計(jì)思想。這些工具是各有各的優(yōu)勢(shì)，當(dāng)然也各有各的缺點(diǎn)啦。那么騰訊CDC是 如何設(shè)計(jì)軟件原型的呢？這里向大家介紹我們正在研發(fā)的原型設(shè)計(jì)利器UIDesigner。

　　首先，先讓我們來(lái)體驗(yàn)一下UIDesigner制作出來(lái)的原型效果。這個(gè)原型是一個(gè)設(shè)置窗體，主要由按鈕、復(fù)選框、分組框和文本框等控件構(gòu)成，其中一些按鈕還具有響應(yīng)的動(dòng)作（如打開(kāi)另一個(gè)界面，關(guān)閉窗體等）。如圖一所示，這是使用Firework制作出來(lái)的交互圖。

圖一、使用Firework制作出來(lái)的設(shè)計(jì)稿

　　這種交互圖的特點(diǎn)是簡(jiǎn)單明了，能夠表示出各種控件的基本屬性（如文本、位置和選中狀態(tài)等），但它只是一個(gè)靜態(tài)的圖片，不能真實(shí)表現(xiàn)出每個(gè)控件的響應(yīng)動(dòng)作，如僅看這張圖，是不清楚點(diǎn)擊代理服務(wù)器設(shè)置分組框上的“設(shè)置…”按鈕會(huì)有什么響應(yīng)的。

　　那再看看你若使用UIDesigner制作出來(lái)的效果：最終輸出的是一個(gè)EXE可執(zhí)行文件（見(jiàn)圖二左上角），雙擊運(yùn)行后就會(huì)出現(xiàn)一個(gè)與最終實(shí)現(xiàn) 效果完全一致的窗體（見(jiàn)圖二右）。另外，它還是一個(gè)具有響應(yīng)動(dòng)作的真實(shí)原型，例如你若點(diǎn)擊了“設(shè)置…”按鈕，那就會(huì)彈出一個(gè)新的窗體（見(jiàn)圖三）。

圖二、使用UIDesinger制作出來(lái)的原型

圖三、點(diǎn)擊“設(shè)置…”按鈕后彈出的另一窗體

　　實(shí)際上，這個(gè)新彈出的窗體都是一個(gè)獨(dú)立的原型，也是由UIDesigner制作出來(lái)的。由于它里面的控件同樣可以設(shè)置下一步的響應(yīng)動(dòng)作，所以從 總體上來(lái)看，眾多原型就像一個(gè)樹(shù)狀結(jié)構(gòu)，而其中的父節(jié)點(diǎn)就是圖二中的設(shè)置窗體了。這種結(jié)構(gòu)具有一個(gè)很大的好處：無(wú)論你完成了多個(gè)界面的原型，只需要它們之 間有鏈接關(guān)系，最后輸出的只是一個(gè)EXE可執(zhí)行文件。這樣，你可以很方便地與其它人員表達(dá)自己的設(shè)計(jì)思路，讓溝通變得更加快捷。

　　接下來(lái)，我們看看這個(gè)原型是如何制作出來(lái)的。

　　第一步：建立空白窗體，調(diào)整它的大小、風(fēng)格、標(biāo)題和Icon

圖四、使用UIDesigner制作原型—建立窗體

　　第二步：從工具箱中拖曳控件到窗體上，修改這些控件的屬性（如Text等）

圖五、使用UIDesigner制作原型—加入控件

　　由于UIDesigner具有自動(dòng)對(duì)齊的功能，所以在拖動(dòng)控件到窗體時(shí)就可以完成排版工作，不需要再逐個(gè)像素去調(diào)整。另外，不單單在加入控件到 窗體時(shí)，在改變已存在于窗體內(nèi)的控件的位置或者大小時(shí)，自動(dòng)對(duì)齊功能一樣會(huì)生效。這樣，設(shè)計(jì)者在調(diào)整控件大小或者位置時(shí)（包括控件與控件，控件與窗體邊緣 等的距離等情況），工作變得很簡(jiǎn)單。

圖六、使用UIDesigner制作原型—自動(dòng)對(duì)齊功能

　　第三步：幾分鐘后，所有的控件都放到窗體并設(shè)置好屬性了，如下圖。

圖七、使用UIDesigner制作原型—整體界面效果

　　此時(shí)，設(shè)計(jì)者就可以使用軟件的導(dǎo)出圖片或者導(dǎo)出原型功能分享你的設(shè)計(jì)成果了。當(dāng)然，現(xiàn)在這種效果還只是一個(gè)沒(méi)有響應(yīng)動(dòng)作效果的原型。接下來(lái)，我 們?cè)俳o“設(shè)置…”按鈕加入響應(yīng)動(dòng)作。首先，選中“設(shè)置…”按鈕，然后點(diǎn)擊工具欄的“響應(yīng)”按鈕，你將會(huì)看到如圖八的響應(yīng)設(shè)置窗口。此時(shí)，你可以選擇打開(kāi)窗 體、打開(kāi)網(wǎng)頁(yè)、彈出對(duì)話(huà)框、修改屬性值和關(guān)閉本身窗體等五種效果，這里我們選擇“打開(kāi)窗體”，然后在彈出的對(duì)話(huà)框里指向彈出窗體的文件。最后，點(diǎn)擊“完 成”按鈕即可。

圖八、使用UIDesigner制作原型—設(shè)置控件的響應(yīng)動(dòng)作

　　到此為止，你就完成了一個(gè)與最終實(shí)現(xiàn)效果完全一致的高保真原型了。產(chǎn)品經(jīng)理和開(kāi)發(fā)人員等若想了解你的設(shè)計(jì)思想就不需要看著長(zhǎng)長(zhǎng)幾頁(yè)的說(shuō)明文檔了，而只需要運(yùn)行你輸出的原型文件，就可以對(duì)你的設(shè)計(jì)思路一目了然。

　　UIDesigner除了能讓使用者能夠快速地搭建起軟件界面的高保真原型外，還提供了項(xiàng)目管理，讓使用者能夠方便地管理工程文件；提供了圖片 庫(kù)和模板庫(kù)功能，讓使用者可以方便地重用以前的設(shè)計(jì)資源；提供了32個(gè)Windows客戶(hù)端軟件常用控件，滿(mǎn)足使用者的設(shè)計(jì)需求；提供了多個(gè)屬性設(shè)置入 口，分別實(shí)現(xiàn)最常用屬性設(shè)置、一般屬性設(shè)置和高級(jí)屬性設(shè)置功能。當(dāng)然，UIDesigner不是專(zhuān)用來(lái)設(shè)計(jì)QQ的，其它的Windows客戶(hù)端產(chǎn)品都在它 的工作范圍之內(nèi)。總的來(lái)說(shuō)呢，使用UIDesigner來(lái)制作原型是很高效的，而制作出來(lái)的原型也能夠?qū)崿F(xiàn)設(shè)計(jì)師、產(chǎn)品經(jīng)理和程序開(kāi)發(fā)工程師三者間的快速 溝通，減少不必要的工作內(nèi)耗。

　　如果你還想更真實(shí)地UIDesigner的制作過(guò)程，可以看這個(gè)視頻：用UIDesigner制作登錄面板（點(diǎn)擊查看視頻）。