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

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

1、 界面區域的劃分

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

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

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

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

2、功能區域的規劃

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

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

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

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

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

3、作業區的分類

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

（2）原(yuan)型形(xing)式的(de)(de)選擇：不同的(de)(de)數(shu)據結(jie)構需(xu)要采用不同界面形(xing)式，采用哪(na)種(zhong)形(xing)式最佳由(you)設計師參考業(ye)務(wu)內容、以及未來(lai)的(de)(de)應用方法(fa)（實際系(xi)統的(de)(de)界面）綜(zong)合考慮決定；收集到原(yuan)始實體表單(dan)與(yu)業(ye)務(wu)原(yuan)型的(de)(de)界面可以不是一一對應的(de)(de)關(guan)系(xi)。

（3）設計原則：盡量(liang)不要采用(yong)切(qie)換(huan)的(de)方式，在一(yi)個界面上(shang)布置復(fu)(fu)數(shu)(shu)(shu)不同表(biao)單的(de)數(shu)(shu)(shu)據輸入(ru)，這樣界面的(de)邏輯(ji)非常復(fu)(fu)雜，不利于(yu)后(hou)面對界面的(de)維(wei)(wei)護(hu)；在不影響(xiang)用(yong)戶的(de)工作分配情況下，盡量(liang)采用(yong)將復(fu)(fu)雜的(de)原始表(biao)單拆開，用(yong)幾(ji)個相對簡單的(de)界面來支(zhi)持數(shu)(shu)(shu)據的(de)輸入(ru)，然(ran)后(hou)用(yong)看板(ban)、表(biao)單等功能將這些(xie)數(shu)(shu)(shu)據組(zu)合(he)起來。這樣的(de)設計有利于(yu)日后(hou)的(de)界面維(wei)(wei)護(hu)。

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

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

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

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

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

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

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

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

繪制界(jie)面原型(xing)圖(tu)的方法并(bing)不(bu)難，一般使用界(jie)面原型(xing)設計工具(ju)即可畫，具(ju)體的畫法是：

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

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