軟件原型設計DIY——揭秘利器UIDesigner

亨利 [ 交互設計 ]

2008.11.25

（編者注：UIDesigner目前還在內測階段，如果您對UIDesigner感興趣，歡迎到UIDesigner官方吧了解內測版使用申請活動。）

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

　　首先，先讓我們來體驗一下UIDesigner制作出來的原型效果。這個原型是一個設置窗體，主要由按鈕、復選框、分組框和文本框等控件構成，其中一些按鈕還具有響應的動作（如打開另一個界面，關閉窗體等）。如圖一所示，這是使用Firework制作出來的交互圖。

圖一、使用Firework制作出來的設計稿

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

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

圖二、使用UIDesinger制作出來的原型

圖三、點擊“設置…”按鈕后彈出的另一窗體

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

　　接下來，我們看看這個原型是如何制作出來的。

　　第一步：建立空白窗體，調整它的大小、風格、標題和Icon

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

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

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

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

圖六、使用UIDesigner制作原型—自動對齊功能

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

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

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

圖八、使用UIDesigner制作原型—設置控件的響應動作

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

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

　　如果你還想更真實地UIDesigner的制作過程，可以看這個視頻：用UIDesigner制作登錄面板（點擊查看視頻）。