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

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

1、 界面區域的劃分

使用界面原型設(she)計(ji)(ji)工具(ju)設(she)計(ji)(ji)界面原型時，為(wei)了溝通(tong)和理解的(de)方便，同時也是為(wei)了使設(she)計(ji)(ji)結(jie)果符合人體工程學的(de)基(ji)本(ben)要(yao)求，對界面的(de)定位(wei)坐(zuo)標(biao)和區域(yu)劃(hua)分(fen)需要(yao)滿足(zu)以下(xia)原則：

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

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

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

2、功能區域的規劃

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

（2）工具欄區域(yu)（上(shang)）— 基(ji)(ji)本(ben)操作(zuo)(zuo)按鈕(niu)(niu)區：這個(ge)區域(yu)用來布置(zhi)基(ji)(ji)本(ben)操作(zuo)(zuo)按鈕(niu)(niu)，一般放在導航(hang)欄與作(zuo)(zuo)業區域(yu)之間；所(suo)謂的(de)基(ji)(ji)本(ben)操作(zuo)(zuo)按鈕(niu)(niu)，指(zhi)的(de)是(shi)用來對(dui)本(ben)界面(mian)上(shang)屬于主表(biao)區內(nei)(nei)數(shu)據進行(xing)操作(zuo)(zuo)的(de)功能，對(dui)于細(xi)表(biao)區內(nei)(nei)數(shu)據的(de)操作(zuo)(zuo)按鈕(niu)(niu)通(tong)常布置(zhi)在距離(li)細(xi)表(biao)區的(de)最近處(chu)（上(shang)邊或是(shi)下邊）。

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

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

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

3、作業區的分類

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

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

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

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

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

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

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

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

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

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

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

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

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

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