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

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

1、 界面區域的劃分

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

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

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

2、功能區域的規劃

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

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

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

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

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

3、作業區的分類

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

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

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

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

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

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

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

3、輔助產品測試員制定產品測試計劃。

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

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

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

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

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

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