一、界面原型設(shè)計工具怎么布局界面

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

1、 界面區(qū)域的劃分

使用界面原型設(shè)計工具設(shè)計界面原型時，為了溝通和理解的方便，同時也是為了使設(shè)計結(jié)果符合人體工程學(xué)的基本要求，對界面的定位坐標(biāo)和區(qū)域劃分需要滿足以下原則：

（1）坐標(biāo)原點的設(shè)定：通常會將電腦屏幕的左上角定為坐標(biāo)原點（XY軸的交叉點0），因此，界面的內(nèi)容擴(kuò)展或是面積增大時都是由左向右、由上向下進(jìn)行延伸。

（2）區(qū)域的劃分：根據(jù)配置控件的使用目的不同，將界面分成兩個大的區(qū)域：功能區(qū)域和作業(yè)區(qū)域。功能區(qū)域通常放在界面的四周，主要布置導(dǎo)航欄、工具欄、主菜單等；界面區(qū)域通常放在界面的中間部分，或是偏右下方的區(qū)域，這個區(qū)域是業(yè)務(wù)數(shù)據(jù)處理的核心區(qū)域，主要用來布置各類數(shù)據(jù)顯示的窗口、字段框等。

2、功能區(qū)域的規(guī)劃

（1）導(dǎo)航欄區(qū)域：導(dǎo)航欄區(qū)域，通常可以分別在欄的左右兩側(cè)顯示兩類信息（不限于此），比如：左端顯示本界面/本組件的打開路徑，系統(tǒng)名稱>子系統(tǒng)名稱>模塊名稱>本組件名稱。右端顯示本組件的用戶所屬的部門、姓名、登錄日期等信息。

（2）工具欄區(qū)域（上）— 基本操作按鈕區(qū)：這個區(qū)域用來布置基本操作按鈕，一般放在導(dǎo)航欄與作業(yè)區(qū)域之間；所謂的基本操作按鈕，指的是用來對本界面上屬于主表區(qū)內(nèi)數(shù)據(jù)進(jìn)行操作的功能，對于細(xì)表區(qū)內(nèi)數(shù)據(jù)的操作按鈕通常布置在距離細(xì)表區(qū)的最近處（上邊或是下邊）。

（3）工具欄區(qū)域（下）— 其他窗體調(diào)用按鈕區(qū)：當(dāng)界面的上端工具的按鈕過多不好安排時，可以將一部分按鈕安排在界面的下端，比如：主要用來調(diào)用其它組件、功能的按鈕。

（4）菜單欄區(qū)域：通常設(shè)置在界面的最左側(cè)，所謂的“菜單”就是一個樹形結(jié)構(gòu)體，結(jié)構(gòu)的節(jié)點上是按照父子的關(guān)系布置了以下要素的名稱：系統(tǒng)、子系統(tǒng)、模塊和組件，通過菜單欄內(nèi)可以找到系統(tǒng)中所有的功能，菜單的結(jié)構(gòu)關(guān)系是參考下面的兩個架構(gòu)圖設(shè)計而成的。

（5）作業(yè)區(qū)域的規(guī)劃：作業(yè)區(qū)域是布置業(yè)務(wù)功能設(shè)計成果的位置，一般將作業(yè)區(qū)域劃分為主次區(qū)域，主要區(qū)域：界面的左上角為“主”，重要信息在此顯示；次要區(qū)域：界面的右下角為“次”，次要的或是輔助類信息在此顯示。

3、作業(yè)區(qū)的分類

（1）原型形式：作業(yè)區(qū)域的范圍內(nèi)就是通常所說的“界面原型”，這個原型常見的形式有5種：卡片式、列表式、主細(xì)表式、樹表式和頁簽式。

（2）原型形式的選擇：不同的數(shù)據(jù)結(jié)構(gòu)需要采用不同界面形式，采用哪種形式最佳由設(shè)計師參考業(yè)務(wù)內(nèi)容、以及未來的應(yīng)用方法（實際系統(tǒng)的界面）綜合考慮決定；收集到原始實體表單與業(yè)務(wù)原型的界面可以不是一一對應(yīng)的關(guān)系。

（3）設(shè)計原則：盡量不要采用切換的方式，在一個界面上布置復(fù)數(shù)不同表單的數(shù)據(jù)輸入，這樣界面的邏輯非常復(fù)雜，不利于后面對界面的維護(hù)；在不影響用戶的工作分配情況下，盡量采用將復(fù)雜的原始表單拆開，用幾個相對簡單的界面來支持?jǐn)?shù)據(jù)的輸入，然后用看板、表單等功能將這些數(shù)據(jù)組合起來。這樣的設(shè)計有利于日后的界面維護(hù)。

二、設(shè)計界面原型圖的作用

原型圖是產(chǎn)品成型前的簡單框架，界面原型圖就是從文字需求轉(zhuǎn)化成圖形的界面設(shè)計，主要用于展示頁面的布局和各個功能鍵的交互，它的作用主要有：

1、幫助設(shè)計師將抽象的界面具體地展現(xiàn)，輔助設(shè)計。

2、幫助開發(fā)工程師了解界面在系統(tǒng)中的作用，輔助開發(fā)。

3、輔助產(chǎn)品測試員制定產(chǎn)品測試計劃。

4、作為產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)工程師等群體在產(chǎn)品設(shè)計與開發(fā)的溝通工具。

5、簡單體現(xiàn)產(chǎn)品頁面的元素、模塊及交互等信息，直觀體現(xiàn)產(chǎn)品設(shè)計的原型內(nèi)容。

三、界面原型設(shè)計工具如何畫界面原型圖

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

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

2、做原型：接著根據(jù)原型設(shè)計的內(nèi)容正式繪制圖示，打開界面原型設(shè)計工具，結(jié)合原型設(shè)計思路將所需的圖形符號添加至編輯區(qū)域，利用樣式、文本、調(diào)整圖形等編輯功能進(jìn)一步完善內(nèi)容，再將繪制好的界面原型圖保存導(dǎo)出即可。