Balsamiq Mockups Desktop 使用小心得 (1)

Balsamiq Mockups For Desktop - * New Mockup-1

上一篇介紹這套軟體的Web版本,這次,就要來試試Desktop版本了。

安裝很簡單,到他們官網,會有下面那個圖,點下Install Now,就可以開始安裝了。

Balsamiq Mockups For Desktop | Balsamiq

因為他們使用了Adobe的AIR開發。所以,必須先安裝Adobe的AIR。然候再安裝Mockups。不過,也因為有AIR當介面,所以,這系統不僅僅只能在MAC上執行,也可以在Windows、Linux等平台執行。(所以web跟desktop做得這樣像也是因為這介面的關係嗎???)

他的Icon還滿有趣的。還兩團揉掉的紙。

Balsamiq Mockups For Desktop - _Users_dennyliu_Desktop_得順訂貨系統_客戶選單.bmml

先看一下他的介面編排,從最上面的編輯用工具,再來是可選用的物件組。當點選了分類,則會出現對應可用的介面物件。最底下則是工作區。

Balsamiq Mockups For Desktop - _Users_dennyliu_Desktop_得順訂貨系統_客戶選單.bmml

除此,還可以透過搜尋找到想要的元件來使用。比如我們找iphone的。就會出現這些可以選項。

Balsamiq Mockups For Desktop - * _Users_dennyliu_Desktop_得順訂貨系統_客戶選單.bmml

像可以叫出一個iphone,接著透過右邊的設定,就可以選擇橫放。及是否全營幕操作。

Balsamiq Mockups For Desktop - * New Mockup

看~ 這樣就出現了一個全螢幕橫擺的iphone 。

Balsamiq Mockups For Desktop - * New Mockup-1

接著,我們可以叫出iphone的套件。選我們要的介面元件。我們叫了一個Alert Box。

Balsamiq Mockups For Desktop - * New Mockup-2

跳出一個畫面。這畫面跟iphone中的很相近。雖然很卡通。

Balsamiq Mockups For Desktop - * New Mockup-3

對該元件點兩下。就可以跳出一個設定用的畫面,照給的範例填入我們要的文字。就可以有不同的顯示唷。

Balsamiq Mockups For Desktop - * New Mockup-4

看~ 就會這樣子~

Balsamiq Mockups For Desktop - * New Mockup-5

先介紹這樣。下一次來介紹我現在在用的WEB UI的設計。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *