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

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

1、 界面區域的劃分

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

（1）坐(zuo)標(biao)原點的設(she)定(ding)：通常會將電腦(nao)屏幕的左(zuo)上角(jiao)定(ding)為坐(zuo)標(biao)原點（XY軸的交叉(cha)點0），因此，界面的內容擴(kuo)展或(huo)是(shi)面積增(zeng)大時都是(shi)由左(zuo)向(xiang)右、由上向(xiang)下進行延伸。

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

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

2、功能區域的規劃

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

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

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

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

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

3、作業區的分類

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

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

（3）設計(ji)原則(ze)：盡(jin)量不要(yao)采用(yong)切換的(de)(de)方(fang)式，在一個界(jie)面(mian)上布(bu)置復數(shu)不同表(biao)(biao)單的(de)(de)數(shu)據輸入，這(zhe)樣(yang)界(jie)面(mian)的(de)(de)邏(luo)輯非常復雜(za)，不利于后面(mian)對(dui)界(jie)面(mian)的(de)(de)維護；在不影響用(yong)戶(hu)的(de)(de)工作分配情況下(xia)，盡(jin)量采用(yong)將復雜(za)的(de)(de)原始表(biao)(biao)單拆開，用(yong)幾個相對(dui)簡單的(de)(de)界(jie)面(mian)來支持數(shu)據的(de)(de)輸入，然后用(yong)看(kan)板、表(biao)(biao)單等功能(neng)將這(zhe)些數(shu)據組合(he)起來。這(zhe)樣(yang)的(de)(de)設計(ji)有利于日后的(de)(de)界(jie)面(mian)維護。

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

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

1、幫助設計師將抽象的界面具體地(di)展(zhan)現，輔助設計。

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

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

4、作為(wei)產品(pin)(pin)經理、設計師、開(kai)發工程師等群體在產品(pin)(pin)設計與開(kai)發的(de)溝(gou)通工具。

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

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

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

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

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