BalsamiqMockups3 原型制作工具使用笔记

今天研究了原型制作工具 - Balsamiq Mockups 3,在这里总结一下我的学习笔记。

我的操作系统版本为Win7,balsamiq版本为3.3.14,AdobeAirPlayer版本为WIN 21,0,0,174

1、注册码

这里还是要虚伪地说一下,如果支持这款软件,请购买正版。

注册码在网上百度一下可以找到很多,比如这里:

http://www.cnblogs.com/zhw511006/archive/2012/06/01/2531105.html

2、官方文档

官方文档地址:https://docs.balsamiq.com/desktop/

在该页面上可找到balsamiq完整的帮助信息

3、balsamiq的程序界面

上边是UI库,有很多个分类,拉到主界面就能用。

左边是原型列表,在同一项目(Project)下你建立的所有的原型都会放在左边像PPT展示幻灯片一样列表展示。

右边是属性列表,可以显示项目的属性,也可以显示某一指定控件的属性,用于一些诸如控件样式的编辑。

正中是编辑区,用户在这里进行可见即所得式的编辑。

BalsamiqMockups3 原型制作工具使用笔记_第1张图片

4、原型图的导出与导入

balsamiq可以将项目导出到扩展名为bmpr的文件中,并从该类型的项目中导入。

balsamiq可以将项目导出到一个zip压缩包中,该压缩包中包括一个扩展名为bmml的文件,它是一种基于xml的文件格式。balsamiq可以直接导入该zip文件或该zip文件解压缩后的文件夹。

balsamiq可以将项目中的原型图输出为PNG格式的图片。

balsamiq可以将项目中的原型图生成一个对应的JSON格式到剪贴板,并通过读取一个JSON串加载一个工程。

5、候补原型

如果你只想创建一个原型,但又有很多个想法,你可以创建候补原型(alternate version)实现。即从一个原型中派生出一些其他的版本,并在该原型基础上继续编辑。在程序界面左侧原型列表中,这些原型都显示为一个原型,缩略图则显示其中正式版本(official version)的图像。

更详细的介绍参见:https://docs.balsamiq.com/desktop/alternates/

6、原型图的风格 - Sketch 和 Wireframe

在项目属性界面可以设置原型图的风格,项目属性界面进入方法为点击程序右上角的“目”字图标。

BalsamiqMockups3 原型制作工具使用笔记_第2张图片

balsamiq工具最吸引我的就是其中的原型图素描风格 - Sketch

BalsamiqMockups3 原型制作工具使用笔记_第3张图片

当然用户根据需要也可以将原型图的风格设置成线框风格 - Wireframe

BalsamiqMockups3 原型制作工具使用笔记_第4张图片

7、默认字体

balsamiq的默认字体可在项目属性界面设置,默认字体一般为“Balsamiq Sans”,也可以将字体换为其他的手写体或印刷体。

8、文本编辑规则

文字加斜,则在文字两旁添加“_”符号,如 _this notation_

文字加链接,则在文字两旁添加“[”、“]”符号,如 [this notation]

文字加粗,则在文字两旁添加“*”符号,如 *this notation*

文字因失效变灰,则在文字两旁添加“-”符号,如 -this notation-

文字加下划线,则在文字两旁添加“&”符号,如 &this notation&

文字加删除线,则在文字两旁添加“~”符号,如 ~this notation~

文字加颜色,则在文字两旁添加“{color}”标签,如 {color:#FF0000}this notation{color} 其中#FF0000是十六进制颜色代码

文字改变大小,则在文字两旁添加“{size}”标签,如 {size:16}this notation{size}

BalsamiqMockups3 原型制作工具使用笔记_第5张图片

9、Lorem ipsum

输入lorem后,程序会自动带出文章《Lorem ipsum》,该文章常用于排版设计领域的拉丁文文章,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。更详细的内容可参考相关维基百科页面:https://zh.wikipedia.org/wiki/Lorem_ipsum

附文章全文:

lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

10、表格控件编辑规则

表格控件 Data Grid 是用文本进行编辑的,基本规则是编辑时每一行代表控件中的一行,每一列之间用逗号隔开。

BalsamiqMockups3 原型制作工具使用笔记_第6张图片

需注意的内容:

标题列排序规则,升序用“^”,降序用“v”

复选框使用方括号,单选框使用圆括号

选中的复选框可用如下字符串表示:[x] or [v] or [o] or [*] or [X] or [V] or [O]

选中的单选框可用如下字符串表示:(x) or (v) or (o) or (*) or (X) or (V) or (O)

半选中状态的复选框用 [-]表示,半选中状态的单选框用(-)表示

如用到逗号,需在前添加转义字符“\”

11、树形图控件

树形图控件在balsamiq中唤作站点地图(Site Map)。该树可以纵向显示(根在上侧),也可以横向显示(根在左侧)。每个节点都可以设置链接。语法也很简单,详见下图:

BalsamiqMockups3 原型制作工具使用笔记_第7张图片

12、菜单控件

编辑菜单(Menu)时,每行文本代表菜单的一个选项。

BalsamiqMockups3 原型制作工具使用笔记_第8张图片

13、大型的花括号

大型的花括号,可以朝向四个方向,如下图所示:

BalsamiqMockups3 原型制作工具使用笔记_第9张图片

这类花括号适合于绘制一些具有总结意义的图像:

BalsamiqMockups3 原型制作工具使用笔记_第10张图片

14、全屏预览

点击右上角的“全屏”键可以对原型图进行全屏预览,快捷键是Ctrl+F

BalsamiqMockups3 原型制作工具使用笔记_第11张图片

15、快捷键

balsamiq的快捷键可参考官网的详细介绍页面:

https://docs.balsamiq.com/desktop/shortcuts/

END

你可能感兴趣的:(使用笔记,Balsamiq,原型制作,Mockup)