在最近的一次项目进行过程中，我体会到UI前期Demo设计的重要性，为此付出了惨痛的代价，痛定思痛，我决定以后一定要通过一个完整的页面对界面进行描述，这里隆重 介绍Mockups。

之前很多次接触过Balsamiq Mockups 这款界面设计利器（delicious最早收藏是在09年5月），也曾经试用过Demo版本，因为我本身是后台码 代码的，所以用到UI设计的机会并不多，也没有特意去申请Mockups的许可证。

介绍

image

Balsamiq Mockups 提供了 9 大类共 50 多个控件，涵盖了几乎所有常用的 UI 控件。不管是桌面软件、手机软件还是 Web 站点，都能搞定。且软件极易上手，如上图的豆瓣新主页，是我首次使用 Balsamiq Mockups 时随手画的，仅用 15 分钟。另外必须一提的是，Balsamiq Mockups 涂鸦式的手绘风格，能使人集中注意力，专注到于原型的原始目的，而不是对外观挑三拣四。

via Balsamiq Mockups - 产品原型设计工具

功能

  1. 操作方面，拖拽，控件分组，甚至元素之间的对齐都做得很贴心；
  1. 预制了很多界面元素，从简单的输入框，下拉框，浏览器主要元素，到经常用得到的导航条，日历，表格，到复杂的Tag Cloud，Cover Flow, 地图，WYSWYG的格式工具栏等，有了这些不用从头画起，往往比用白板都快；
  1. 界面元素的修改很简单，比如导航条的几个标签页的label，就是用逗号分隔的文字，下拉框的选项就是分行的文字；
  1. 使用xml语言来记录和保存界面元素和布局，
1. 这使得每个设计都能被很好得放进SVN，Git，和CVS等工具中进行管理和跟踪；

2. 可以设计复杂的界面元素，保存后，以后可以重复使用（包括修改）；
  1. 可以将设计导出成PNG格式的图片；

balsamiq markup exported to png

  1. 可以用命令行进行导出操作，这样就能让我写个脚本，从svn里checkout某个目录下的所有设计文件后，导出图片，打包后用邮件发到项目经 理，工程师甚至客户那；
  1. 跨平台，Balsamiq Mokups是用Flex和Air实现的，所以在Mac OS, Linux和Windows下都能使用；
  1. 不仅仅有桌面版本，还有能集成在Confluence，JIRA，和XWiki中的版本，使得异地在线协作更方便有效；

via [推荐一款界面设计工具 Balsamiq Mockups](http://www.yining.org/2009/01/09/balsamiq- mockups-review/)

试用

点击myBalsamiq, the Balsamiq Mockups Web App | Balsamiq 即可尝试一下在线版本，看看它合不合你胃口。

点击Balsamiq Mockups For Desktop | Balsamiq 可以下载桌面Demo版本。这是AIR下的软件，需要AIR环境支持。

获取免费的版本

不过让国内用户不习惯的是，这款软件定价为 $79 ，偏高。当然Balsamiq&nbsp_place_holder ;Studios也为用户提供了 5 种免费获得license key 的机会，其中之一就是针对科技/软件 Blogger 或媒体从业者，鼓励这类用户通过写 Blog 口碑传播的方式帮助Balsamiq Mockups 营销。写完本文，我也会尝试向作者申请一个license key。

via 产品原型设计软件Balsamiq Mockups | 黄海均的互联网志

PS：我对作者这种做法表示很欣赏，通过一些可行的手段支持正版，同时提高了产品的口碑。

更多

使用Napkee插件可以将设计导出为Html+CSS+JS或者Flex格式，详情请参见Napkee - 导出Balsamiq Mockups网页原型

2010-04-14 Update:

已拿到作者发送注册码～～～终于到了。。。

原文链接: 界面设计利器-Balsamiq Mockups | Log4D

3a1ff193cee606bd1e2ea554a16353ee

欢迎关注我的微信公众号：窥豹

窥豹