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

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

1、 界面區域的劃分

使(shi)用界面(mian)原(yuan)型設計(ji)工具設計(ji)界面(mian)原(yuan)型時，為(wei)了(le)溝通和理解的方便，同(tong)時也是為(wei)了(le)使(shi)設計(ji)結果符合人體工程(cheng)學的基本要求，對界面(mian)的定位坐標和區(qu)域劃(hua)分需(xu)要滿足以下原(yuan)則(ze)：

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

（2）區(qu)域(yu)(yu)(yu)的(de)(de)(de)劃分：根據(ju)配置(zhi)控件(jian)的(de)(de)(de)使用(yong)目的(de)(de)(de)不(bu)同，將(jiang)界(jie)面分成兩個大(da)的(de)(de)(de)區(qu)域(yu)(yu)(yu)：功(gong)能區(qu)域(yu)(yu)(yu)和作業區(qu)域(yu)(yu)(yu)。功(gong)能區(qu)域(yu)(yu)(yu)通(tong)(tong)常(chang)放在(zai)界(jie)面的(de)(de)(de)四周，主要布(bu)置(zhi)導航欄、工具欄、主菜單(dan)等(deng)；界(jie)面區(qu)域(yu)(yu)(yu)通(tong)(tong)常(chang)放在(zai)界(jie)面的(de)(de)(de)中間部分，或(huo)是偏右下方的(de)(de)(de)區(qu)域(yu)(yu)(yu)，這個區(qu)域(yu)(yu)(yu)是業務數據(ju)處(chu)理的(de)(de)(de)核心區(qu)域(yu)(yu)(yu)，主要用(yong)來布(bu)置(zhi)各類數據(ju)顯示的(de)(de)(de)窗(chuang)口(kou)、字段框等(deng)。

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

2、功能區域的規劃

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

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

（3）工具欄區域（下）— 其他窗體調用按(an)(an)鈕區：當界(jie)面的(de)上端工具的(de)按(an)(an)鈕過多不好安(an)排時，可以將一部分(fen)按(an)(an)鈕安(an)排在界(jie)面的(de)下端，比如(ru)：主要(yao)用來(lai)調用其它組件、功能的(de)按(an)(an)鈕。

（4）菜(cai)單(dan)(dan)(dan)欄區域：通常設置(zhi)在界面的(de)(de)(de)(de)最(zui)左側(ce)，所謂(wei)的(de)(de)(de)(de)“菜(cai)單(dan)(dan)(dan)”就是(shi)一個(ge)樹形結(jie)構(gou)體，結(jie)構(gou)的(de)(de)(de)(de)節點上(shang)是(shi)按(an)照父子的(de)(de)(de)(de)關系(xi)布置(zhi)了以(yi)下要素的(de)(de)(de)(de)名稱(cheng)：系(xi)統(tong)(tong)、子系(xi)統(tong)(tong)、模(mo)塊(kuai)和組件(jian)，通過菜(cai)單(dan)(dan)(dan)欄內可(ke)以(yi)找到系(xi)統(tong)(tong)中(zhong)所有的(de)(de)(de)(de)功能，菜(cai)單(dan)(dan)(dan)的(de)(de)(de)(de)結(jie)構(gou)關系(xi)是(shi)參考下面的(de)(de)(de)(de)兩個(ge)架構(gou)圖(tu)設計而成的(de)(de)(de)(de)。

（5）作業區域(yu)的(de)規劃：作業區域(yu)是布置(zhi)業務功能設計(ji)成果的(de)位置(zhi)，一般將作業區域(yu)劃分為(wei)主次(ci)區域(yu)，主要區域(yu)：界面的(de)左上角為(wei)“主”，重要信息(xi)在(zai)此顯示；次(ci)要區域(yu)：界面的(de)右下角為(wei)“次(ci)”，次(ci)要的(de)或是輔助(zhu)類(lei)信息(xi)在(zai)此顯示。

3、作業區的分類

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

（2）原(yuan)型(xing)形式的選擇：不同(tong)的數據(ju)結構(gou)需(xu)要采用不同(tong)界面形式，采用哪種形式最佳由(you)設計師參考(kao)業(ye)務內(nei)容、以及(ji)未來的應用方法（實(shi)際系統的界面）綜合考(kao)慮決定；收集(ji)到(dao)原(yuan)始實(shi)體(ti)表單與(yu)業(ye)務原(yuan)型(xing)的界面可(ke)以不是一一對應的關系。

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

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

原型圖是(shi)產品(pin)成型前的(de)(de)簡單框(kuang)架，界面原型圖就是(shi)從文(wen)字(zi)需(xu)求(qiu)轉化成圖形的(de)(de)界面設(she)計(ji)，主要用于展示頁面的(de)(de)布局(ju)和各個功能鍵的(de)(de)交互(hu)，它的(de)(de)作用主要有：

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

2、幫(bang)助開(kai)發工程師(shi)了解界(jie)面在系統中的作用(yong)，輔助開(kai)發。

3、輔助產品(pin)測試員制定產品(pin)測試計劃。

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

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

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

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

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

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