一、界面原型設計工具怎么布局界面

為了滿足客戶的需求，軟件界面的表達形式千差萬別，一般是在設計軟件界面的時候，需要先通過原型設計工具設計出(chu)界面原(yuan)型。界面布(bu)局(ju)是界面原(yuan)型設計的重要工作之一，布(bu)局(ju)就是在規定的界面范圍內考慮如(ru)何布(bu)置這些控件(jian)可以獲得最佳(jia)的效(xiao)果，一般(ban)主要是以下幾(ji)點：

1、 界面區域的劃分

使用(yong)界(jie)面原(yuan)(yuan)型(xing)設計工具設計界(jie)面原(yuan)(yuan)型(xing)時，為(wei)了溝(gou)通和理解(jie)的方便，同時也是為(wei)了使設計結果符合人(ren)體工程(cheng)學的基本要(yao)(yao)求，對界(jie)面的定位(wei)坐標和區域劃分需要(yao)(yao)滿足以(yi)下原(yuan)(yuan)則：

（1）坐(zuo)標原(yuan)點(dian)的(de)設定：通常會將(jiang)電(dian)腦(nao)屏幕(mu)的(de)左上(shang)角定為坐(zuo)標原(yuan)點(dian)（XY軸的(de)交(jiao)叉點(dian)0），因此，界(jie)面的(de)內容擴展(zhan)或是(shi)面積增大時(shi)都是(shi)由(you)左向右、由(you)上(shang)向下進行延伸(shen)。

（2）區(qu)(qu)域(yu)(yu)的(de)(de)(de)劃分：根(gen)據(ju)配(pei)置(zhi)(zhi)控件的(de)(de)(de)使用(yong)目(mu)的(de)(de)(de)不同，將界面(mian)分成兩個大的(de)(de)(de)區(qu)(qu)域(yu)(yu)：功(gong)能(neng)(neng)區(qu)(qu)域(yu)(yu)和(he)作業(ye)區(qu)(qu)域(yu)(yu)。功(gong)能(neng)(neng)區(qu)(qu)域(yu)(yu)通常放(fang)在界面(mian)的(de)(de)(de)四周(zhou)，主(zhu)要布置(zhi)(zhi)導航欄(lan)、工具欄(lan)、主(zhu)菜(cai)單等；界面(mian)區(qu)(qu)域(yu)(yu)通常放(fang)在界面(mian)的(de)(de)(de)中間部分，或是偏右下方(fang)的(de)(de)(de)區(qu)(qu)域(yu)(yu)，這個區(qu)(qu)域(yu)(yu)是業(ye)務(wu)數據(ju)處理的(de)(de)(de)核(he)心區(qu)(qu)域(yu)(yu)，主(zhu)要用(yong)來(lai)布置(zhi)(zhi)各類數據(ju)顯示(shi)的(de)(de)(de)窗口(kou)、字段(duan)框(kuang)等。

該圖片由注冊用戶"荊湖酒徒"提供，版權聲明反饋

2、功能區域的規劃

（1）導航(hang)欄區域(yu)：導航(hang)欄區域(yu)，通(tong)常可以分別在欄的(de)(de)左右兩側(ce)顯(xian)示兩類信(xin)息（不(bu)限于此），比如：左端顯(xian)示本界面/本組件的(de)(de)打開路徑，系統名(ming)(ming)稱(cheng)>子系統名(ming)(ming)稱(cheng)>模(mo)塊名(ming)(ming)稱(cheng)>本組件名(ming)(ming)稱(cheng)。右端顯(xian)示本組件的(de)(de)用戶所屬的(de)(de)部門(men)、姓名(ming)(ming)、登錄日期等(deng)信(xin)息。

（2）工具(ju)欄區(qu)(qu)(qu)域（上）— 基(ji)本操作按鈕區(qu)(qu)(qu)：這個區(qu)(qu)(qu)域用來布置(zhi)基(ji)本操作按鈕，一般放在導(dao)航(hang)欄與作業區(qu)(qu)(qu)域之間(jian)；所謂的(de)(de)基(ji)本操作按鈕，指的(de)(de)是用來對本界面(mian)上屬(shu)于主表(biao)(biao)區(qu)(qu)(qu)內數(shu)據進行操作的(de)(de)功能，對于細表(biao)(biao)區(qu)(qu)(qu)內數(shu)據的(de)(de)操作按鈕通(tong)常布置(zhi)在距離細表(biao)(biao)區(qu)(qu)(qu)的(de)(de)最近處(chu)（上邊或是下邊）。

（3）工(gong)具(ju)欄區(qu)域（下）— 其他(ta)窗體(ti)調用按鈕(niu)區(qu)：當界面(mian)的上端(duan)工(gong)具(ju)的按鈕(niu)過多不好安排時，可以將一(yi)部分按鈕(niu)安排在(zai)界面(mian)的下端(duan)，比如：主要用來(lai)調用其它組件、功能的按鈕(niu)。

（4）菜單(dan)欄(lan)區(qu)域：通(tong)常設置在界面(mian)的(de)(de)最左側，所(suo)謂的(de)(de)“菜單(dan)”就是一個(ge)樹形(xing)結構體，結構的(de)(de)節點上是按照父子的(de)(de)關(guan)系(xi)(xi)布置了以下要素的(de)(de)名稱(cheng)：系(xi)(xi)統、子系(xi)(xi)統、模塊和組件，通(tong)過菜單(dan)欄(lan)內可以找(zhao)到系(xi)(xi)統中所(suo)有的(de)(de)功能，菜單(dan)的(de)(de)結構關(guan)系(xi)(xi)是參考下面(mian)的(de)(de)兩個(ge)架(jia)構圖設計(ji)而成的(de)(de)。

（5）作業(ye)區(qu)域的(de)(de)規(gui)劃：作業(ye)區(qu)域是布置業(ye)務(wu)功能(neng)設計成果(guo)的(de)(de)位置，一(yi)般(ban)將作業(ye)區(qu)域劃分為主次(ci)(ci)(ci)區(qu)域，主要區(qu)域：界(jie)(jie)面(mian)(mian)的(de)(de)左上角為“主”，重要信(xin)息(xi)(xi)在此顯示；次(ci)(ci)(ci)要區(qu)域：界(jie)(jie)面(mian)(mian)的(de)(de)右下角為“次(ci)(ci)(ci)”，次(ci)(ci)(ci)要的(de)(de)或是輔助類信(xin)息(xi)(xi)在此顯示。

3、作業區的分類

（1）原(yuan)型形式(shi)(shi)：作業(ye)區域的(de)(de)范圍內就是(shi)通(tong)常所(suo)說(shuo)的(de)(de)“界面原(yuan)型”，這個原(yuan)型常見的(de)(de)形式(shi)(shi)有5種：卡片式(shi)(shi)、列表式(shi)(shi)、主細表式(shi)(shi)、樹(shu)表式(shi)(shi)和頁簽式(shi)(shi)。

（2）原型(xing)形式的(de)(de)選擇(ze)：不(bu)同(tong)的(de)(de)數據結構需要采用(yong)不(bu)同(tong)界面形式，采用(yong)哪種形式最佳(jia)由設(she)計師參考業務(wu)內(nei)容、以及未(wei)來的(de)(de)應用(yong)方法（實際系統的(de)(de)界面）綜合(he)考慮決(jue)定；收集到原始實體表單與業務(wu)原型(xing)的(de)(de)界面可以不(bu)是一一對(dui)應的(de)(de)關系。

（3）設計原則：盡量(liang)不(bu)要采(cai)用(yong)切換的(de)(de)(de)(de)方式，在一(yi)個(ge)界(jie)面(mian)(mian)(mian)上布(bu)置復(fu)數(shu)(shu)(shu)不(bu)同表單(dan)的(de)(de)(de)(de)數(shu)(shu)(shu)據(ju)(ju)輸入，這樣界(jie)面(mian)(mian)(mian)的(de)(de)(de)(de)邏輯非(fei)常復(fu)雜，不(bu)利(li)于(yu)后面(mian)(mian)(mian)對(dui)(dui)界(jie)面(mian)(mian)(mian)的(de)(de)(de)(de)維護；在不(bu)影(ying)響用(yong)戶的(de)(de)(de)(de)工作分配情況下(xia)，盡量(liang)采(cai)用(yong)將復(fu)雜的(de)(de)(de)(de)原始表單(dan)拆開，用(yong)幾個(ge)相對(dui)(dui)簡單(dan)的(de)(de)(de)(de)界(jie)面(mian)(mian)(mian)來支持數(shu)(shu)(shu)據(ju)(ju)的(de)(de)(de)(de)輸入，然后用(yong)看板、表單(dan)等功能(neng)將這些數(shu)(shu)(shu)據(ju)(ju)組合起來。這樣的(de)(de)(de)(de)設計有(you)利(li)于(yu)日后的(de)(de)(de)(de)界(jie)面(mian)(mian)(mian)維護。

二、設計界面原型圖的作用

原型圖是產品成(cheng)型前(qian)的(de)(de)簡(jian)單框架(jia)，界(jie)面原型圖就是從文字(zi)需求轉化(hua)成(cheng)圖形的(de)(de)界(jie)面設計，主要用(yong)于展示頁面的(de)(de)布局和各個功能鍵的(de)(de)交互，它的(de)(de)作用(yong)主要有：

1、幫助(zhu)設(she)(she)計(ji)師將抽(chou)象的界面(mian)具體地展現，輔助(zhu)設(she)(she)計(ji)。

2、幫助(zhu)開發工程師了解(jie)界面在系統中的(de)作(zuo)用，輔助(zhu)開發。

3、輔助產品測(ce)試(shi)員制定產品測(ce)試(shi)計(ji)劃(hua)。

4、作為產品經理、設(she)計(ji)(ji)師(shi)、開發工程師(shi)等群(qun)體(ti)在(zai)產品設(she)計(ji)(ji)與開發的溝通(tong)工具。

5、簡單體現(xian)(xian)產品頁面的元素、模塊及交互(hu)等信息，直觀體現(xian)(xian)產品設計的原(yuan)型內容。

三、界面原型設計工具如何畫界面原型圖

繪制界面(mian)原型圖的(de)方法并不(bu)難，一般使用界面(mian)原型設計工(gong)具即可(ke)畫，具體的(de)畫法是：

1、畫草圖：首先可以簡(jian)答繪制(zhi)(zhi)一(yi)份原型設(she)計(ji)內容的草圖，確(que)定繪制(zhi)(zhi)思路。

2、做原型：接著根據原型設計的內容正式繪制圖示，打開界面原型設計工具，結合原型(xing)設計思路(lu)將所需的圖形符號添(tian)加至(zhi)編輯區域，利用樣式、文本、調(diao)整圖形等編輯功(gong)能進一(yi)步完善內容，再(zai)將繪制好(hao)的界(jie)面(mian)原型(xing)圖保存導出即可(ke)。