Balsamiq Mockups是一款手绘风格的、轻量级的界面原型设计工具,用下来发现它真正抓住了原型设计的核心与平衡点,既能快速设计草图,又能比较好地进入到平时团队工作的流程和工具中,可以说是击中了原型设计的Sweet Spot,强烈推荐。

Balsamiq Mockups3功能:
1、操作方面,拖拽,控件分组,甚至元素之间的对齐都做得很贴心;
2、预制了很多界面元素,从简单的输入框,下拉框,浏览器主要元素,到经常用得到的导航条,日历,表格,到复杂的Tag Cloud,Cover Flow, 地图,WYSWYG的格式工具栏等,有了这些不用从头画起,往往比用白板都快;
3、界面元素的修改很简单,比如导航条的几个标签页的label,就是用逗号分隔的文字,下拉框的选项就是分行的文字;
4、使用xml语言来记录和保存界面元素和布局,这使得每个设计都能被很好得放进SVN,Git,和CVS等工具中进行管理和跟踪;
5、可以设计复杂的界面元素,保存后,以后可以重复使用(包括修改);
6、可以将设计导出成PNG格式的图片;
7、可以用命令行进行导出操作,这样就能让我写个脚本,从svn里checkout某个目录下的所有设计文件后,导出图片,打包后用邮件发到项目经理,工程师甚至客户那;
8、跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用;
9、不仅仅有桌面版本,还有能集成在Confluence,JIRA,和XWiki中的版本,使得异地在线协作更方便有效;

Balsamiq Mockups3特色
1.可存
告别那一堆堆的纸质线框图吧
2.易用
UI控件支持自动拖拽,并且可以实现自动对齐;
3.美观
手绘风格,简约清爽;
4.丰富
从按钮到输入框,从导航条到页面、表格,甚至包括了最潮的Iphone元素;
5.方便
对元素的修改除了工具栏外,还可以使用隐藏编辑框,支持快捷键;
6.兼容
可使用XML语言保存元素,也可以导出PNG图片,可以插入到任何项目;
7.跨平台
Windows、Mac OS、Linux下都可以使用,还有能集成在Confluence,JIRA,和XWiki中的版本,对了,如果你没时间下载桌面版,还可以直接使用网页版的Balsamiq Mockups…
Balsamiq Mockups使用教程
在 Mockups 视图中添加图像
正如上面提到的,从你的电脑上拖拽一个图像到 Balsamiq Mockups 会把它添加到你的画布上。这样做会将图片放在你选中的 Mockups 中并拷贝图像文件到你的 Assets 目录中,所以你可以很轻松的在其他 Mockups 上重复使用它。
你可以在属性检视视图中修改图片属性,和其他 UI 控制一样。
图像的特定属性如下:
下拉菜单显示你当前图片的名字。打开它会允许你选择一个其他的你已经上传到 Assets 目录中的图像。
在下拉菜单旁边的"+" 图标允许你从你的电脑里添加一个图像。这与你拖拽一个图片进来效果相同。
单击下载图标打开一个对话框可以通过输入 URL 来从网络上直接或者从网络相册上搜索并添加图像。Mockups 支持 GIF, JPG/JPEG, 和 PNG 图像格式。文件将从网上下载并复制到你的工程中。
单击下拉菜单下面的旋转图标每次让你的图像旋转 90 度。
单击方框中有一个 "x" 的图标将会还原你的图像成为一个默认的占位符图像。
素描!复选框将转换你的图像成为一个仅使用黑白线条描绘的版本。
如果你还没有准备好一个图像文件或者你想使用一个占位符图像来保证你的 mockup 低保真度,你可以从 UI 库中添加一个图像控制,然后它就会显示一个方框里面有一个 "x"。你可以稍后再使用上面提到的图像属性来用一张图像代替它。
只要图像添加到你的项目中,它将在 UI 库中显示,然后你就可以轻松的将它应用在你项目中的任何 mockup 中。"Assets" 分类下将显示所有你添加到项目中的图像。
这也意味着你可以从 Quick Add 中给你的 mockups 添加图片。只需要输入图像名的前几个字母它就会出现在列表之中。
注释:你可以通过在 UI 库中在图像上单击右键并选择 "Move Image to Trash" 或者从Assets 视图的上下文菜单中删除图像。
图片属性面板还允许你修剪或掩盖图片使得只显示它们的一部分。你可以在这里看一个修剪图像的指导。已经修剪过的图像会在属性面板上显示移除修剪的图标。
除了图像控件,你也可以在 Cover Flow 控制中嵌入图像。
在 Assets 视图中添加图像
Balsamiq Mockups 3 有一个专用的用户接口区域来管理图像,称为 Assets 视图。
assets 视图显示所有已经添加到项目中的图像和常用图标。你可以选择 assets 中的导航视图来看到它。
你可以通过从你的电脑里拖拽的方式或者使用工具栏的图标来在 Assets 视图中添加图像。
"Import Asset..."图标允许你从你的电脑里选择一个或多个图像,同时可以在 Mockups 视图里使用 "Download Asset..."得到相同的对话框输入 URL 从网络相册上获得图像。
只要你添加了图像,就可以以缩略图或者是列表的形式查看它们,在缩略图视图也一样。
右侧的属性面板显示了选中图像边框的像素,并且允许你在上面添加注释。面板的下面显示了这个图片被应用在了哪些 Mockups 中(如果有的话)。举个例子,这一般常常用来管理图像,你可以删除一些没有被使用的图像。点击一个 mockup 的名字将跳转至它的 Mockups 视图。
图像管理
像在 Mockups 视图中那样,在 Assets 视图中有一个上下文菜单,你可以在导航栏或者下拉菜单中右键单击来打开。这样你可以重命名、克隆、丢弃或者下载你的图像。
重命名图像
在上下文菜单中使用重命名图像会改变你的项目中资源的名字。这不会影响到你的本地文件,因为图像是添加到项目中的一个副本。重命名图像会在你的 mockups 中更新,所以并不需要手动的更新它们。
删除图像
你同样可以使用上下文菜单来从项目中删除图像。正如你的 mockups,删除将会把图像移至回收站,从那里你可以永久地删除或者是还原它们。值得注意的是从 mockups 画布上删除它们并不意味着从工程中删除它们。
将图像从工程保存到本地
你可以在上下文菜单中使用 "Download" 选项来将图像从工程保存到本地,这样你可以从工程中提取出图像来做其他事情。