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

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

1、 界面區域的劃分

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

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

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

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

2、功能區域的規劃

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

（2）工具欄(lan)區(qu)(qu)域(yu)（上(shang)）— 基本操作按(an)鈕(niu)區(qu)(qu)：這個區(qu)(qu)域(yu)用來(lai)布(bu)置基本操作按(an)鈕(niu)，一(yi)般放在(zai)導航欄(lan)與作業區(qu)(qu)域(yu)之間；所謂(wei)的基本操作按(an)鈕(niu)，指的是用來(lai)對(dui)本界面(mian)上(shang)屬于主表(biao)區(qu)(qu)內(nei)數(shu)據進行(xing)操作的功能，對(dui)于細表(biao)區(qu)(qu)內(nei)數(shu)據的操作按(an)鈕(niu)通(tong)常布(bu)置在(zai)距離細表(biao)區(qu)(qu)的最近(jin)處(chu)（上(shang)邊或是下邊）。

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

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

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

3、作業區的分類

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

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

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

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

原型圖(tu)是(shi)產品成(cheng)型前(qian)的(de)簡(jian)單框架(jia)，界面(mian)原型圖(tu)就是(shi)從文字需求轉化成(cheng)圖(tu)形(xing)的(de)界面(mian)設計(ji)，主(zhu)要用(yong)于展示(shi)頁面(mian)的(de)布(bu)局和各個(ge)功能鍵的(de)交互，它(ta)的(de)作(zuo)用(yong)主(zhu)要有(you)：

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

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

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

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

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

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

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

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

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