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

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

1、 界面區域的劃分

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

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

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

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

2、功能區域的規劃

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

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

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

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

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

3、作業區的分類

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

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

（3）設計(ji)原(yuan)則(ze)：盡量(liang)不要(yao)采用切(qie)換的(de)方式，在(zai)一個界(jie)(jie)面(mian)(mian)上布置復(fu)(fu)(fu)數(shu)不同表單(dan)(dan)的(de)數(shu)據(ju)輸入(ru)，這(zhe)樣界(jie)(jie)面(mian)(mian)的(de)邏(luo)輯非常復(fu)(fu)(fu)雜(za)，不利于后面(mian)(mian)對界(jie)(jie)面(mian)(mian)的(de)維護；在(zai)不影響用戶的(de)工作分(fen)配情況(kuang)下，盡量(liang)采用將(jiang)復(fu)(fu)(fu)雜(za)的(de)原(yuan)始表單(dan)(dan)拆(chai)開，用幾個相對簡單(dan)(dan)的(de)界(jie)(jie)面(mian)(mian)來支持數(shu)據(ju)的(de)輸入(ru)，然后用看板、表單(dan)(dan)等(deng)功能將(jiang)這(zhe)些數(shu)據(ju)組合起來。這(zhe)樣的(de)設計(ji)有利于日后的(de)界(jie)(jie)面(mian)(mian)維護。

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

原(yuan)型圖是產品(pin)成型前的(de)簡單框架，界面原(yuan)型圖就是從文字需求轉化成圖形的(de)界面設計，主要(yao)(yao)用(yong)(yong)于(yu)展示(shi)頁面的(de)布局和(he)各個功能鍵的(de)交互，它(ta)的(de)作用(yong)(yong)主要(yao)(yao)有(you)：

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

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

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

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

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

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

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

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

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