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

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

1、 界面區域的劃分

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

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

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

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

2、功能區域的規劃

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

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

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

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

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

3、作業區的分類

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

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

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

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

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

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

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

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

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

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

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

繪(hui)制界面(mian)原(yuan)型圖的方法并(bing)不難(nan)，一(yi)般使用界面(mian)原(yuan)型設(she)計(ji)工具即可畫，具體的畫法是：

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

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