在軟體設計階段，互動設計師或者產品經理等常常需要使用一些工具（比如Visio、Axure RP等）製作出靜態稿或者原型來表達設計思想。這些工具是各有各的優勢，當然也各有各的缺點啦。
這裡簡單的給大家分享下 uidesigner 這款怎麼來設計介面原型
工具/原料
uidesigner
方法/步驟
這裡我們做一個提示對話方塊。現在來使用 UIDesigner 做出這樣的介面，並
實現相關的互動功能。
當點選一個軟體的關閉按鈕後，彈出一個這樣的對話方塊進行詢問；
1 選擇“退出程式”並按“確定”則關閉本軟體；
2 選擇“最小化到系統托盤” 並按“確定”，則不關閉本軟體，而只是最
小化到系統托盤；
3選擇“不再提醒”並按“確定”則下次點選軟體關閉按鈕時，不再彈出
該對話方塊，依照本次的選擇去執行；
4 選擇“確定”按鈕，執行命令並關閉對話方塊；
5 選擇“取消”按鈕，取消該命令並關閉對話方塊。
下面將開始講解如何製作該稿件。所有稿件的製作方法都可概括為：設計布
局，將控制元件拖入窗體，定義控制元件屬性，為控制元件定義“響應”，儲存並匯出。
分析介面功能及佈局
這個案例的佈局很簡單，很清晰，並且已經給出，當前步驟便會比較容易完
成了。
介面功能分為如圖三個區域：
各個區域包含的控制元件如下：
1 標題欄
標題、關閉按鈕
2 資訊提示區
圖示、文字、單選項
3 命令按鈕區
複選項、確定按鈕、取消按鈕
注：該對話方塊的尺寸是固定的，不可拖拽變大變小的。
好的，下面我們就來實現這個：
新建檔案
單擊選單欄中“檔案”-“新建”，得到一個新建的視窗
新建後，將在設計區得到一個可編輯窗體：
設計介面佈局
由於介面簡單，這裡需要做的只是調整窗體的尺寸（當然也可以放入“容器”
配合停靠命令，對介面進行區域劃分）。
雙擊窗體主體，彈出“窗體屬性”框，在此對話方塊的“大小”一欄下輸入合
適的尺寸，這裡輸入寬度為 320，高度為 170。
點選屬性對話方塊的“確定”按鈕，完成尺寸修改
填充控制元件
這裡按照區域進行設計。
設計標題欄
首先，雙擊窗體主體，彈出“窗體屬性”框。
其次，在屬性對話方塊的“標題”中輸入標題。
然後，在屬性對話方塊的下方進行設定：
1 在“其他”中去除“顯示圖示”、“帶最大化按鈕”、“帶最小化按鈕”，其
目的是保證標題欄上不出現圖示以及“最大化”、“最小化”按鈕；
2 在“視窗邊框”中選擇“不可調整大小”，以保證介面不出現“大小調整
柄”，不可隨意調整大小。
最後，點選屬性對話方塊的“確定”按鈕，完成標題欄設計。
可以點選選單欄的“生成”下的“預覽”選項進行預覽，亦或者可以直接按
快捷鍵“F10”。反正我是習慣按F10了，作為一名程式猿，操作電腦一定要快~ 體現專業哇~
設計資訊提示區
新增一個提示圖片
在介面右側的工具箱中選擇“圖片框”，並拖拽到窗體內。
雙擊窗體中的圖片框，在彈出的“圖片框屬性”對話方塊的“影象”欄中進行
編輯。點選“瀏覽”按鈕，彈出“圖片庫”，在圖片庫中選擇適合的圖片。
另外，可以使用任何截圖功能獲得一個圖片，然後直接貼上在窗體區域內。
可以通過鍵盤的方向鍵來控制任一控制元件的精細位置。
新增描述文字
在介面右側的工具箱中選擇“標籤”，並拖拽到窗體內。雙擊“標籤”本身，
彈出的“標籤屬性框”，在其“文字”輸入框中新增描述性文字“您點選了關閉
按鈕，您是想：”。
新增單選項
在介面右側的工具箱中選擇“單選按鈕”，並拖拽到窗體內，雙擊其彈出屬
性對話方塊，在其“文字”輸入框中為別輸入對應選項文字，並放置合適的位置。
UID 已經設定了預設距離，這使控制元件放置很方便，介面也很標準。
由於“退出程式”為預設選擇項，所以需要勾選上“選中狀態”
預覽
UID 提供了方便的預覽功能，以幫助檢視稿件是否正確，各個互動點是否符
合要求。對照預覽，及時對稿件進行修改或優化。
在“工具欄”或者選單欄的“生成”下尋找“預覽”選項， 或者可以直接
按快捷鍵“F10” 。
最後就是，儲存原始檔、匯出exe
將設計稿原始檔儲存，以便下次進行修改或呼叫。在“工具欄”或者選單欄
的“檔案”下尋找“儲存”選項，或者可以直接按快捷鍵“Ctrl+S”。
將完成稿匯出成 exe 格式檔案，以便向他人演示。該檔案在所有安裝了
DotNet Framework 程式電腦上都可以直接執行。
在“工具欄”或者選單欄的“生成”下尋找“匯出 exe”選項，或者可以直
接按快捷鍵“F12”。
