天天看點

Balsamiq Mockups

  Balsamiq Mockups是一種軟體工程中快速原型的建立軟體,可以做為與使用者互動的一個界面草圖,一旦客戶認可可以做為美工開發HTML的原型使用。

認識Balsamiq Mockup

Balsamiq Mockups是美國加利福利亞的Balsamiq工作室(2008年3月建立)推出的原型圖繪制軟體。于2008年6月發行了第一個版本。它的使命是幫助人們更好、更容易的設計軟體産品。下面是Balsamiq官方的說明:

  Founded in March 2008, Balsamiq Studios aims to make the world a better place by helping people create software that is easier to use. Balsamiq is a fast-growing but still-very-personable software company. We like to compete on usability and customer service. Our first product is Balsamiq Mockups. Launched in June 2008, Mockups helps software designers and developers build great software by letting them easily sketch out their ideas, then quickly collaborate and iterate over them. Balsamiq Mockups has netted over $2,000,000 in sales in first 18 months of business and is gathering rave reviews.

  Balsamiq Mockups是一款共享軟體,每個lisence授權是79美刀,對個人使用者來說,價格不菲。它推出之後如此受歡迎的原因是在軟體産品原型圖設計領域,特别是web原型圖設計領域,還沒有哪款産品有如此豐富的表現形式。使用Balsamiq Mockups畫出的原型圖都是手繪風格的圖像,看上去非常美觀、清爽(當然,跟使用者的設計水準也有關系)。它支援幾乎所有的HTML控件原型圖,比如按鈕(基本按鈕、單選按鈕等)、文本框、下拉菜單、樹形菜單、進度條、多頁籤、月曆控件、顔色控件、表格、Windows窗體等。除此以外,它還支援目前如火如荼的iPhone手機元素原型圖,這為開發iPhone應用程式的軟體工程師提供了非常好的設計圖。

  先來看看Balsamiq Mockups繪制的原型圖。

Balsamiq Mockups

Balsamiq Mockups原型圖

[1]

  嗯,還不錯吧?讓我們認識一下Balsamiq Mockups的主界面。

Balsamiq Mockups

Balsamiq Mockups主界面

[2]

  Balsamiq Mockups主界面大緻分為菜單區域、原型圖分類區、原型圖選擇區和原型圖繪制區。

  在菜單區域,除了軟體主菜單外,該區域還包括Quick Add(其實是一個搜尋欄)和基本操作按鈕區域。在我使用該軟體的過程中,很多時候都會用到Quick Add,因為想在近一百個原型圖中找到您想要的那一款,使用它提供的快速搜尋功能是不錯的做法。

  在原型圖分類區,Balsamiq Mockups為所有原型圖分為9種不同的類别(有些原型圖會出現在多個分類下)。比如,如果您想放一段文字在設計圖上,您可以直接選擇“Text”分類,在這個分類下很快就能找到所有關于文字的原型圖。如果您是做web頁面相關的設計圖,“Buttons”和“Common”分類下的原型圖應該符合您的需求。需要指出的是,原型圖分類區的第一個分類是“All”,它下面包含了Balsamiq Mockups所有原型圖(預設有76個)。

  在原型圖選擇區,羅列了每個分類下的各個原型圖。大家自己點一下每個分類就可以看到它下面的原型圖了,不再贅述。

  原型圖繪制區,是我們進行産品設計的地方,也就是畫草圖的地方,它就相當于一塊白闆。您隻需要把原型圖選擇區的原型圖拖到這個區域來就行了。如果需要進行進一步設定,選中該原型圖,然後,在其對應的彈出菜單中,進行相關屬性的設定。如下圖所示:

Balsamiq Mockups

Balsamiq Mockups原型圖屬性設定

  不同的原型圖支援不同的屬性。我總結了一下,屬性設定基本上包括顔色(背景色)、文字大小、文字屬性(加粗、斜體、下劃線)、層次結構、是否可用、目前數值等方面的設定。當一個區域的原型圖太多時,為了避免滑鼠點選到我們不想選擇的原型圖,可以對原型圖進行鎖定(當然,如果我們想選擇它時,可以對其進行解鎖操作)。

  關于每種原型圖的使用方法或技巧,并非本文的重點。本文的重點是引導您認識Balsamiq Mockups,更多的使用方法或技巧,需要您在使用過程中自己摸索、學習,相信您也會喜歡上這款具有手繪風格的原型圖繪制工具的。

編輯本段更廣泛的應用

  我上面所介紹的是Balsamiq Mockups桌面版應用程式(需要安裝Adobe Air運作環境)。其實,除了桌面版Balsamiq Mockups,它還提供了網頁版的Balsamiq Mockups。網頁版的Balsamiq Mockups是基于flash技術開發的,有興趣的童鞋可以通路官方網站進行體驗。網頁版Balsamiq Mockups會每隔5分鐘彈出一個提示框,提示你付費購買他們的産品(如果你不買他的軟體,就不會讓你舒舒服服的使用)。

  網頁版的Balsamiq Mockups和桌面版的Balsamiq Mockups在使用體驗上沒有任何差別。不外乎也是擺放原型圖,設定原型圖屬性等等操作。其實,在我看來,這些都是非常基礎的功能。Balsamiq Mockups的牛B之處在于,它所提供的原型圖是基于XML格式的(用記事本打開bmml檔案就可以看到),是以,跨平台使用不是什麼問題。另外,除了以應用程式的形式提供給使用者使用外,它還能內建在Confluence、JIRA、FogBugz、XWiki中。

編輯本段總結

  我目前從事的工作,很多時候都要用到Balsamiq Mockups。在設計原型圖的時候,我會配合使用圖檔處理軟體(比如Fireworks)來幫助我設計,這樣,可各取所長。由于Balsamiq Mockups是基于Adobe Air技術開發的軟體,給我的總體感覺是運作速度較慢,有時候拖動原型圖會比較“卡”。另外,由于官方沒有出中文版本的Balsamiq Mockups,這也讓它在國内的推廣受到一些阻力。不過,這些并不能妨礙Balsamiq Mockups成為一款優秀的原型圖繪制工具。目前國内許多知名的網際網路公司都推薦使用它進行原型設計(據我所知,這些公司包括騰訊、網易、搜狐)。是以,掌握好它,說明定您什麼時候就去這些公司工作了。

繼續閱讀