Balsamiq Mockups

認(rèn)識Balsamiq Mockups

Balsamiq Mockups是 美國 加利 福利亞的Balsamiq工作室（2008年3月創(chuàng)建）推出的原型圖繪制 軟件。于2008年6月發(fā)行了第一個版本。它的使命是幫助人們更好、更容易的設(shè)計 軟件產(chǎn)品。下面是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授權(quán)是79美刀，對個人用戶來說，價格不菲。它推出之后如此受歡迎的原因是在 軟件產(chǎn)品原型圖設(shè)計領(lǐng)域，特別是web原型圖設(shè)計領(lǐng)域，還沒有哪款產(chǎn)品有如此豐富的表現(xiàn)形式。使用Balsamiq Mockups畫出的原型圖都是手繪風(fēng)格的圖像，看上去非常美觀、清爽（當(dāng)然，跟使用者的設(shè)計水平也有關(guān)系）。它支持幾乎所有的HTML控件原型圖， 比如按鈕（基本按鈕、單選按鈕等）、 文本框、 下拉菜單、樹形菜單、進(jìn)度條、多選項卡、日歷控件、顏色控件、 表格、Windows 窗體等。除此以外，它還支持目前如火如荼的iPhone手機(jī)元素原型圖，這為開發(fā)iPhone 應(yīng)用程序的 軟件工程師提供了非常好的設(shè)計圖。

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

嗯，還不錯吧？讓我們認(rèn)識一下Balsamiq Mockups的主界面。

Balsamiq Mockups主界面大致分為菜單區(qū)域、原型圖分類區(qū)、原型圖選擇區(qū)和原型圖繪制區(qū)。

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

在原型圖分類區(qū)，Balsamiq Mockups為所有原型圖分為9種不同的類別（有些原型圖會出現(xiàn)在多個分類下）。 比如，如果您想放一段文字在設(shè)計圖上，您可以直接選擇“Text”分類，在這個分類下很快就能找到所有關(guān)于文字的原型圖。如果您是做web頁面相關(guān)的設(shè)計圖，“Buttons”和“Common”分類下的原型圖應(yīng)該符合您的需求。需要指出的是，原型圖分類區(qū)的第一個分類是“All”，它下面包含了Balsamiq Mockups所有原型圖（默認(rèn)有76個）。

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

原型圖繪制區(qū)，是我們進(jìn)行產(chǎn)品設(shè)計的地方，也就是畫草圖的地方，它就相當(dāng)于一塊白板。您只需要把原型圖選擇區(qū)的原型圖拖到這個區(qū)域來就行了。如果需要進(jìn)行進(jìn)一步設(shè)置，選中該原型圖，然后，在其對應(yīng)的彈出菜單中，進(jìn)行相關(guān)屬性的設(shè)置。如下圖所示：

不同的原型圖支持不同的屬性。我總結(jié)了一下，屬性設(shè)置基本上包括顏色（背景色）、文字大小、文字屬性（ 加粗、斜體、下劃線）、 層次結(jié)構(gòu)、是否可用、當(dāng)前數(shù)值等方面的設(shè)置。當(dāng)一個區(qū)域的原型圖太多時，為了避免鼠標(biāo)點擊到我們不想選擇的原型圖，可以對原型圖進(jìn)行鎖定（當(dāng)然，如果我們想選擇它時，可以對其進(jìn)行解鎖操作）。

關(guān)于每種原型圖的使用方法或技巧，并非本文的重點。本文的重點是引導(dǎo)您認(rèn)識Balsamiq Mockups，更多的使用方法或技巧，需要您在使用過程中自己摸索、學(xué)習(xí)，相信您也會喜歡上這款具有手繪風(fēng)格的原型圖繪制工具的。

更廣泛的應(yīng)用

我上面所介紹的是Balsamiq Mockups 桌面版 應(yīng)用程序（需要安裝Adobe Air運行環(huán)境）。其實，除了 桌面版Balsamiq Mockups，它還提供了網(wǎng)頁版的Balsamiq Mockups。網(wǎng)頁版的Balsamiq Mockups是基于flash技術(shù)開發(fā)的，有興趣的童鞋可以訪問官方網(wǎng)站進(jìn)行體驗。網(wǎng)頁版Balsamiq Mockups會每隔5分鐘彈出一個提示框，提示你付費購買他們的產(chǎn)品（如果你不買他的 軟件，就不會讓你舒舒服服的使用）。

網(wǎng)頁版的Balsamiq Mockups和 桌面版的Balsamiq Mockups在使用體驗上沒有任何區(qū)別。不外乎也是擺放原型圖，設(shè)置原型圖屬性等等操作。其實，在我看來，這些都是非?；A(chǔ)的功能。Balsamiq Mockups的牛B之處在于，它所提供的原型圖是基于XML格式的（用 記事本打開bmml文件就可以看到），因此，跨平臺使用不是什么問題。另外，除了以 應(yīng)用程序的形式提供給用戶使用外，它還能集成在Confluence、JIRA、FogBugz、XWiki中。

總結(jié)

我目前從事的工作，很多時候都要用到Balsamiq Mockups。在設(shè)計原型圖的時候，我會配合使用 圖片處理軟件（ 比如Fireworks）來幫助我設(shè)計，這樣，可各取所長。由于Balsamiq Mockups是基于Adobe Air技術(shù)開發(fā)的 軟件，給我的總體感覺是運行速度較慢，有時候拖動原型圖會比較“卡”。另外，由于官方?jīng)]有出中文版本的Balsamiq Mockups，這也讓它在國內(nèi)的推廣受到一些阻力。不過，這些并不能妨礙Balsamiq Mockups成為一款優(yōu)秀的原型圖繪制工具。目前國內(nèi)許多知名的互聯(lián)網(wǎng)公司都推薦使用它進(jìn)行 原型設(shè)計（據(jù)我所知，這些公司包括騰訊、網(wǎng)易、搜狐）。因此，掌握好它，說不定您什么時候就去這些公司工作了。