最近发现了这款优秀的界面原型设计软件alsamiq Mockups,它是一个Flash应用程序,你可以通过官网在线试用,也可以下载到本地计算机上进行使用。
在线试用的地址:http://builds.balsamiq.com/b/mockups-web-demo
本地下载安装方法如下:
1、先安装 Adobe AIR;
2、点击下载MockupsForDesktop;
3、双击MockupsForDesktop.air,根据提示进行安装,完毕。
特色:
1、控件丰富
2、动态预览
3、XML格式的设计
4、配合Napkee工具可以导出html或Flex3代码
5、最终设计可以发布成pdf格式,可以点击
操作方面,拖拽,控件分组,甚至元素之间的对齐都做得很贴心;
预制了很多界面元素,从简单的输入框,下拉框,浏览器主要元素,到经常用得到的导航条,日历,表格,到复杂的Tag Cloud,Cover Flow, 地图,WYSWYG的格式工具栏等,有了这些不用从头画起,往往比用白板都快;
界面元素的修改很简单,比如导航条的几个标签页的label,就是用逗号分隔的文字,下拉框的选项就是分行的文字;
使用xml语言来记录和保存界面元素和布局,
这使得每个设计都能被很好得放进SVN,Git,和CVS等工具中进行管理和跟踪;
可以设计复杂的界面元素,保存后,以后可以重复使用(包括修改);
可以将设计导出成PNG格式的图片;
可以用命令行进行导出操作,这样就能让我写个脚本,从svn里checkout某个目录下的所有设计文件后,导出图片,打包后用邮件发到项目经 理,工程师甚至客户那;
跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用;
不仅仅有桌面版本,还有能集成在JIRA,使得异地在线协作更方便有效;
设计步骤:
1、设计导航菜单
2、设计每个模块的界面
3、在导航菜单上加链接,链接目标为相应的模块(注:许多控件都带link功能)
4、设计评审->修改设计->复审直到通过
5、合成多人的设计到一起并导出到一个bmml中作为设计代码并提交到各项目vss的设计文件夹下
4、导出PDF給开发人员。
常用快捷键
编辑选中控件的文本 回车 或 F2
微调移动控件位置2px 方向键
快速移动控件位置20px SHIFT+方向键
微调调整控件大小2px CTRL+ALT+方向键
快速调整控件大小20px CTRL+ALT+SHIFT+方向键
快速置顶 CTRL+SHIFT+向上方向键
快速置底 CTRL+SHIFT+向下方向键
向上一层 CTRL+向上方向键
向下一层 CTRL+向下方向键
克隆控件 ALT+drag
撤销 CTRL+Z
重做 CTRL+Y
剪切 CTRL+X
拷贝 CTRL+C
粘贴 CTRL+V
原位粘贴 CTRL+SHIFT+V
删除 DELETE or BACKSPACE
快速克隆 CTRL+D
全选 CTRL+A
组合选中 CTRL+G
取消组合 CTRL+SHIFT+G
锁定 CTRL+2
解锁 CTRL+ALT+2
左对齐选中控件 CTRL+ALT+1
左右居中对齐选中控件 CTRL+ALT+SHIFT+2
右对齐选中控件 CTRL+ALT+3
顶对齐选中控件 CTRL+ALT+4
上下居中对齐选中控件 CTRL+ALT+5
底对齐对齐选中控件 CTRL+ALT+6
放大 CTRL +
缩小 CTRL -
快速增加控件
切换输入焦点到Quick Add输入框 /或+
切换输入焦点到回画布 ESCAPE
与图标相关的快捷键
切换图标 方向键
使用选中的图标 ENTER
关闭图标库 ESCAPE
编辑文本相关快捷键
提交当前控件的文本 ENTER (单行), CTRL+ENTER (多行) 或 点击其他地方
忽略当前编辑内容 ESCAPE
与模型文件相关的快捷键
新建模型 CTRL+N
克隆当前模型 CTRL+SHIFT+N
打开模型文件 CTRL+O
保存当前模型 CTRL+S
保存全部打开的模型 CTRL+SHIFT+S
关闭当前模型 CTRL+W
全部关闭 CTRL+SHIFT+W
导出模型 CTRL+E
导入模型 CTRL+SHIFT+E
导出模型快照到粘贴板 CTRL+SHIFT+C
导出模型快照到PNG CTRL+R
导出全部模型快照到PNG CTRL+SHIFT+R
打印 CTRL+P
退出 CTRL+Q
快速循环遍历打开的模型 CTRL+TAB and CTRL+SHIFT+TAB
其它
显示/隐藏控件面板 CTRL+L
全屏预览 CTRL+F
退出全屏预览 ESC
全屏模式下隐藏“大箭头” 按L或l键即可
全屏模式下隐藏“标注”内容 按M或m键即可,这样可以快速在最终用户看到的界面和程序员看到的界面之间方便切换
注:
全屏模式下右下角有三个图标,点击后也可方便切换预览模式
在全屏模式下可以点击你设定的连接。导出pdf后也可以