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

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

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

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

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

2、先看這個(gè)對(duì)話框的布局界面

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

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

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

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

3、好的，下面我們就來(lái)實(shí)現(xiàn)這個(gè)：

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

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

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

6、繪制界面布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11、預(yù)覽剛才我們?cè)O(shè)計(jì)的界面

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

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

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

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

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