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

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

1、 界面區域的劃分

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

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

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

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

2、功能區域的規劃

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

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

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

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

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

3、作業區的分類

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

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

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

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

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

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

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

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

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

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

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

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

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

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