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

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

1、 界面區域的劃分

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

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

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

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

2、功能區域的規劃

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

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

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

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

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

3、作業區的分類

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

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

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

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

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

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

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

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

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

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

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

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

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

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