如何用balsamiq mockups製作軟件的界面原型

我們進行軟件開發的時候首先需要做的就是製作界面原型圖,然後開發人員根據原型圖進行代碼的編寫。那麼如何製作界面原型圖呢?下面小編就給大家分享一下用balsamiq mockups製作原型圖的方法。

如何用balsamiq mockups製作軟件的界面原型

工具/材料

balsamiq mockups

操作方法

首先設計原型圖之前我們需要先更新一下AIR,因爲balsamiq mockups依賴AIR的環境,所以要確保AIR環境是最新的,如下圖所示,一般打開軟件的時候會自動提示更新

如何用balsamiq mockups製作軟件的界面原型 第2張

接下來打開balsamiq mockups軟件,我們會看到如下圖所示的界面,設計原型圖的時候直接從原型組件裏面拖拽即可

如何用balsamiq mockups製作軟件的界面原型 第3張

大家在選擇原型組件的時候可以根據組件頂部的分類進行篩選,如下圖所示

如何用balsamiq mockups製作軟件的界面原型 第4張

然後我們拖動幾個組件到畫布上,你會發現很簡單的幾步就能繪製出一個軟件的基本界面,如下圖所示

如何用balsamiq mockups製作軟件的界面原型 第5張

如果你想更改某一個組件的屬性,比如更改左側菜單的選中狀態,只需要選中組件,在右側屬性界面修改即可,如下圖所示

如何用balsamiq mockups製作軟件的界面原型 第6張

最後設計完了原型圖一定要保存文件,balsamiq mockups設計的原型文件的後綴名統一都是bmpr,如下圖所示

如何用balsamiq mockups製作軟件的界面原型 第7張

另外很多的公司要求將設計好的原型圖直接導出圖片,在balsamiq mockups中只需要點擊Project菜單下面的Export選項即可,如下圖所示

如何用balsamiq mockups製作軟件的界面原型 第8張