uidesigner是由騰訊推出的一款UI原型設(shè)計工具，UIDesigner 2.5官方版可以快速搭建iOS平臺產(chǎn)品原型的設(shè)計，目標(biāo)用戶是設(shè)計師和產(chǎn)品經(jīng)理。uidesigner具有快速設(shè)計軟件原型、項目管理等特色，有了他產(chǎn)品經(jīng)理就可以輕松地制作出某個產(chǎn)品的UI，非常的簡單方便。

Uidesigner官方下載使用教學(xué)圖1

1、這次通過UIDesigner來做個常用的對話框設(shè)計 ，包含提示信息，選擇信息，以及按鈕功能。

Uidesigner官方下載使用教學(xué)圖2

2、先看這個對話框的布局界面

（1） 標(biāo)題信息: 標(biāo)題信息 關(guān)閉的X按鈕

（2）提示信息內(nèi)容 : 圖片 、文本內(nèi)容、單選項

（3）按鈕功能： 確定 取消按鈕

Uidesigner官方下載使用教學(xué)圖3

3、好的，下面我們就來實現(xiàn)這個：

4、單擊菜單中“文件”--》“新建”，出現(xiàn)一個新建的窗口

5、新建窗口后，將在設(shè)計區(qū)里會出現(xiàn)一個可編輯的窗體，如題所示

Uidesigner官方下載使用教學(xué)圖4

6、繪制界面布局

（1）對窗體雙擊后彈出“窗體屬性”的框，在此框的“大小”的信息中輸入合

（2）適的尺寸，這里輸入寬度為 220，高度為 150。

（3）然后“確定”，就完成尺寸的確定

Uidesigner官方下載使用教學(xué)圖5

7、繪制標(biāo)題信息欄

（1）雙擊窗體，彈出“窗體屬性”框。

（2）然后在對話框的“標(biāo)題”中填寫上標(biāo)題;

（3）再然后屬性對話框的下方進(jìn)行設(shè)置 顯示圖標(biāo)信息，最后 點擊確定按鈕。

（4）這樣就完成了對界面的設(shè)計，那么現(xiàn)在可以點擊菜單“預(yù)覽”選項進(jìn)行設(shè)計預(yù)覽，或者可以直接按鍵盤按鈕“F10”。反正我是習(xí)慣按F10了，作為一名程序猿，操作電腦一定要快~ 體現(xiàn)專業(yè)哇~

Uidesigner官方下載使用教學(xué)圖6

8、繪制信息提示區(qū)里添加一個提示圖片的圖

9、另外在繪制添加描述文字拿到文本標(biāo)簽圖標(biāo)，然后拖到編輯區(qū)域內(nèi)，則直接可以在‘文本’錄入框中增加文字描述信息

Uidesigner官方下載使用教學(xué)圖7

10、配置單選框，在設(shè)計界面工具中點擊選擇'單選按鈕'的圖標(biāo)功能，就拖到窗體內(nèi)，然后在‘文本’錄入框中為別錄入該選項信息，然后移動到合適的地方。

Uidesigner官方下載使用教學(xué)圖8

11、預(yù)覽剛才我們設(shè)計的界面

12、鼠標(biāo)點‘預(yù)覽’功能圖標(biāo)， 或你也可以直接按鍵盤按鈕“F10” 進(jìn)行迅速的預(yù)覽效果

Uidesigner官方下載使用教學(xué)圖9

13、最后就是保存我們的設(shè)計文件然后導(dǎo)出exe

14、查找菜單那邊的'生成' 的下拉后里有個'導(dǎo)出 exe'的功能，或你可以直

15、接按鍵盤的快捷鍵的'F12' 就導(dǎo)出了。