产品原型设计工具-Balsamiq Mockups

Balsamiq Mockups是一种软件工程中快速原型的建立软件，可以做为与用户交互的一个界面草图，一旦客户认可可以做为美工开发HTML的原型使用。

1认识Balsamiq Mockups编辑

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原型图[1]

嗯，还不错吧？让我们认识一下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，更多的使用方法或技巧，需要您在使用过程中自己摸索、学习，相信您也会喜欢上这款具有手绘风格的原型图绘制工具的。

2更广泛的应用编辑

我上面所介绍的是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中。

3总结编辑

我目前从事的工作，很多时候都要用到Balsamiq Mockups。在设计原型图的时候，我会配合使用图片处理软件（比如Fireworks）来帮助我设计，这样，可各取所长。由于Balsamiq Mockups是基于Adobe Air技术开发的软件，给我的总体感觉是运行速度较慢，有时候拖动原型图会比较“卡”。另外，由于官方没有出中文版本的Balsamiq Mockups，这也让它在国内的推广受到一些阻力。不过，这些并不能妨碍Balsamiq Mockups成为一款优秀的原型图绘制工具。目前国内许多知名的互联网公司都推荐使用它进行原型设计（据我所知，这些公司包括腾讯、网易、搜狐）。因此，掌握好它，说不定您什么时候就去这些公司工作了。

 

Balsamiq Mockups注册码（有效中）

Name: personal
Key: eJzzzU/OLi0odswsqilILSrOz0vMqbFEAjXONYY1fu6ufgA/CA4X

Name: helloWorld
Key: eJzzzU/OLi0odswsqslIzcnJD88vykmpsUQCNc41hjV+7q5+AF74Ds8=

Name: china
Key: eJzzzU/OLi0odswsqknOyMxLrLFEAjXONYY1fu6ufgAJ5gy2

Name: ketty
Key: eJzzzU/OLi0odswsqslOLSmprLFEAjXONYY1fu6ufgAOOwzk

 

 

参考资料

• 1．  来自iCodon.com的图片  ．

• 2．  来自  ．