# 推荐一款界面设计工具 Balsamiq Mockups
平时工作中在界面设计的时候，我总是要求工程师先在纸上画图，初步确定后，仅仅用HTML+CSS做出静态的界面再次与用户（主要是其他业务部门）确认后，再动手写实际的代码。
纸上的原型设计是经常使用（至少我自己）的初期设计方式，办公室里用白板（空间大，而且环保些）和马克笔。这种办法不仅快，能尽早发现在文字和口头的沟通上理解不一致的地方，同时也尽可能减少开发成本和因为理解不一致导致返工的情况。纸上的原型设计在可用性上能起到很大作用，也有专门一本书介绍和探讨，这就不多说了。
但是这也有它们本身的不足。首先是没法很好地保留设计和讨论的内容，我曾经尝试用数码相机把白板上的内容拍下来，但仅仅是为了保留，没法有效地在后续的讨论和工作中继续使用。
几年前发现过一个做网站的设计草图的工具软件，Denim，这是一个大学的项目，学术性和尝试性的味道强了些，界面设计上有很多新颖的地方，但毕竟不是从每天蹲在“战壕”中的工程师的角度出发，玩玩可以，实际工作上还是不大可能用上。（附：Denim的截图）。
前阵子发现了一个新软件：Balsamiq Mockups，用下来发现它真正抓住了原型设计的核心与平衡点，既能快速设计草图，又能比较好地进入到平时团队工作的流程和工具中，可以说是击中了原型设计的Sweet Spot，强烈推荐。
先看看截图：
再说说功能和亮点：
- 操作方面，拖拽，控件分组，甚至元素之间的对齐都做得很贴心；
- 预制了很多界面元素，从简单的输入框，下拉框，浏览器主要元素，到经常用得到的导航条，日历，表格，到复杂的Tag Cloud，Cover Flow, 地图，WYSWYG的格式工具栏等，有了这些不用从头画起，往往比用白板都快；
- 界面元素的修改很简单，比如导航条的几个标签页的label，就是用逗号分隔的文字，下拉框的选项就是分行的文字；
- 使用xml语言来记录和保存界面元素和布局，
- 这使得每个设计都能被很好得放进SVN，Git，和CVS等工具中进行管理和跟踪；
- 可以设计复杂的界面元素，保存后，以后可以重复使用（包括修改）；
- 可以将设计导出成PNG格式的图片；
- 可以用命令行进行导出操作，这样就能让我写个脚本，从svn里checkout某个目录下的所有设计文件后，导出图片，打包后用邮件发到项目经理，工程师甚至客户那；
- 跨平台，Balsamiq Mokups是用Flex和Air实现的，所以在Mac OS, Linux和Windows下都能使用；
- 不仅仅有桌面版本，还有能集成在Confluence，JIRA，和XWiki中的版本，使得异地在线协作更方便有效；
据作者说，现在这款软件的设计就是用它自己来设计的，经典的“吃自己的狗粮”，这也让我对其更有信心，因为它是开发者为开发者写的软件。
更多信息，大家可以到它的网站上了解。
还有值得一提的是Balsamiq Mokups的在GetSatisfaction上的用户支持和服务，作者Peldi对问题报告，新需求的回应很积极和及时。而且根据这个讨论上看，到月底就会有一个专门用来分享界面控件设计的社区网站了，很期待。
再要说的一点是这款软件是要付费的，79美元（也可以免费，具体如何免费，请看网站上的说明），相对于它能节省下来的时间和提高的效率，是很值得的。Peldi说在2008年，这款软件就从1,322位付费用户那获得了162,302美元的收入（其中仅12月份就有39,000美元），这令人鼓舞地证明了只要是提供真正价值的服务和软件，就能够创造很好的收入，即使在经济萧条的寒冬里。
另外说一句, GetSatisfaction也是一个很不错的服务。
Reddit
Delicious
Twitter
January 10th, 2009 at 10:39 pm
越看越有兴趣，待会儿找来试试先~~
3X for SHARE,HAHAA
January 10th, 2009 at 11:08 pm
Axure RP Pro
January 11th, 2009 at 12:07 am
Hi Cosnis,
谢谢分享，Axure RP Pro很好很强大。但只能在Windows下运行。
我觉得这样的工具只要*足够*好就行，太强大了可能会让我把太多时间花在做Wireframe而不是实际开发上。
January 11th, 2009 at 6:10 pm
呵呵 我也是看到 你这篇文章后 才找到的 Axure RP Pro
试用了一下 感觉功能很强大 就推荐上了
我做原型的时候 一直都是白纸+铅笔 哈哈~~
January 12th, 2009 at 1:22 pm
现在在用 Axure, 完了试试这玩意去
January 12th, 2009 at 1:49 pm
有个问题，air还不支持中文……
不过确实是个好工具，看好！
January 12th, 2009 at 3:14 pm
Shark:
中文是可以的，你看上面的截图里就有中文 :-)
在Balsamiq Mockups的菜单里选择 View -> Use System Font 应该就可以了，你试试看？
January 13th, 2009 at 6:29 pm
一直用OmniGraffle下的原型库，试试这个。
January 15th, 2009 at 9:46 am
看起来不错~~
January 17th, 2009 at 3:21 am
非常不错的软件
不过我发现他的在线版本和桌面版本似乎没什么区别啊…
February 27th, 2009 at 12:08 pm
尝试一下，
你blog又不更新了！~
March 30th, 2009 at 12:19 pm
只是说运行起来速度有点慢
March 31st, 2009 at 1:37 am
运行速度还可以呀，至少在我这里不慢
April 9th, 2009 at 5:15 pm
[...] Balsamiq Mockups——在电脑上手绘原型 推荐一款界面设计工具 Balsamiq Mockups 也许你会感兴趣： [...]
July 7th, 2009 at 6:09 pm
最近要设计一款在线版的管理软件界面，这个正是及时雨。
October 15th, 2009 at 12:59 pm
好东西，准备尝试一下。
March 16th, 2010 at 7:58 pm
这个软件不错的说。
March 18th, 2010 at 1:15 pm
的确很方便，在做线框图及草图时还是很有用的。
April 7th, 2010 at 9:29 pm
[...] via 推荐一款界面设计工具 Balsamiq Mockups [...]
December 21st, 2010 at 3:38 pm
[...] 查看更详细介绍 [...]
April 18th, 2011 at 11:39 am
当前主流的应该是Axure吧
April 18th, 2011 at 6:10 pm
小试一下，的确很方便，很灵活的控制元素。
August 5th, 2011 at 1:22 pm
谢谢了，之前还以为不能用中文呢~
December 18th, 2011 at 7:47 pm
[...] http://www.yining.org/2009/01/09/balsamiq-mockups-review/ [...]
February 20th, 2012 at 1:36 am
[...] P.s. 1、关于该软件的详细介绍，看此文足矣； 2、扩展阅读：1，2。 [...]