簡介

中文名: 騰訊內部用於軟件原型設計的專用工具
英文名: UIDesigner
資源格式: 安裝包
版本: v1.1.1.0 Alpha （附 Axure RP Pro v5.6.0.2097 漢化版）
發行時間: 2010年
制作發行: 騰訊地區: 大陸
語言: 簡體中文
簡介:
軟件介紹

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

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

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


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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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