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

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

1、 界面區域的劃分

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

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

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

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

2、功能區域的規劃

（1）導航欄(lan)區域(yu)(yu)：導航欄(lan)區域(yu)(yu)，通常可以分(fen)別(bie)在欄(lan)的(de)左右兩側顯示(shi)兩類信息（不限(xian)于此），比(bi)如：左端顯示(shi)本界面/本組件(jian)的(de)打(da)開路(lu)徑(jing)，系統名稱>子系統名稱>模塊名稱>本組件(jian)名稱。右端顯示(shi)本組件(jian)的(de)用(yong)戶所(suo)屬的(de)部門、姓名、登(deng)錄日期等信息。

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

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

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

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

3、作業區的分類

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

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

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

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

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

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

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

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

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

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

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

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

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

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