Balsamiq Mockups的使用

【今天学习了mockups软件，发现自己不能很好的概括它，在网上找了点资料，大家共勉！！】

1 引言
制作软件使用原型法已经成为业界通行的做法，笔者使用过Visio，AxureRP或者Html编辑器绘制过软件系统的原型。对于大型项目一般使用AxureRP或者Html编辑器制作高逼真度的原型；对于小型项目一般使用Visio制作。
但是不论是大项目还是小项目，软件是什么样子？从脑海中落到逼真的样子中间会经过一个什么样的步骤？我想大家都会记起一个工具“白板”！大家在会议室讨论，然后把界面画到白板上，然后热烈的讨论，散会前用相机把白板内容拍下来。然后再不辞劳苦的将界面画到AxureRP或者Html中。

自从有了Balsamiq Mockups这款原型设计工具，确切的说是一个草图原型设计工具，大家可以从这种痛苦种解脱，而且可以把这个工具作为一个快速交流的工具。甚至可以作为和客户交流的基础。

但是不论是大项目还是小项目，软件是什么样子？从脑海中落到逼真的样子中间会经过一个什么样的步骤？我想大家都会记起一个工具“白板”！大家在会议室讨论，然后把界面画到白板上，然后热烈的讨论，散会前用相机把白板内容拍下来。然后再不辞劳苦的将界面画到AxureRP或者Html中。
自从有了Balsamiq Mockups这款原型设计工具，确切的说是一个草图原型设计工具，大家可以从这种痛苦种解脱，而且可以把这个工具作为一个快速交流的工具。甚至可以作为和客户交流的基础。
Balsamiq Mockups有哪些特点？让我们了解一下：

 可存储：告别那一堆堆的纸质线框图吧！

 易使用：只能说在某种程度上容易使用。

 手绘风格：简约清爽，属于讨论型风格。

 丰富：从按钮到输入框，从导航条到页面、表格，甚至包括了最潮的Iphone元素。

 易扩展：可使用XML语言保存元素，也可以导出PNG图片，可以插入到任何项目。

 跨平台：Windows、Mac OS、Linux下都可以使用
除了上述特点之外， Balsamiq Mockups的一个绘制特性给笔者留下了非常深刻的印象，因此单独拿出来介绍：提供Wiki 风格的代码规则，画图时可以「偷懒」，输入文本符号则能生成图标。因此相比其它繁琐的软件操作，Balsamiq Mockups 也能更快地完成画图任务。
大部分的原型制作人员有过编程经验，也对在Html编辑器或AxureRP上绘制表格深感头痛，而Balsamiq Mockups除了提供手绘自由式风格的界面，而且通过符号的方式快速修改界面元素的确节约了我们很多的时间。
注：在菜单栏 View 里将 Use System Fonts 勾上，就能完美支持中文输入。如何获取Balsamiq Mockups不在本文讨论范围。

2 morckups的构架

Balsamiq Mockups 主要由三块组成。从上至下是: Application Bar、UI library和Mockup Canvas。分别详述如下

应用程序栏（The Application Bar）
Application Bar包含了Menus、Quick Add和Toolbar。

Quick Add工具是添加UI控件最快的方式。使用Quick Add，首先点击Quick Add的输入框(也可使用快捷键/或+跳转)，然后输入待添加的UI控件名称的些许字母，Quick Add会弹出一个建议列表。使用鼠标或者键盘的方向键上下滚动列表，找到希望添加的UI控件，按下Enter键。一个新的UI控件已经为你添加在画布上。例如，输入“bu”，列表会呈现包括“Button”、“Button Bar”、“Help Button”、“Radio Button”和“Round Button”。输入 “hel”，则仅呈现“Help Button”。同标准操作一样，按下ESC键取消列表。

Toolbar包含了大部分Edit 菜单中的命令。例如：Undo、Redo、Duplicate（复制副本）Cut、Copy、Paste和Delete。另外，在Property Inspector中你也会发现相同的命令按钮。

UI库（The UI Library）
UI Library或者UI控件库，是在Application Bar下面长条形的UI控件集。它按照字母顺序列出了Mockups支持的各种UI控件类型。UI Library的主要目的是让你添加UI控件到Mockup画布，但你也可以随意尝试以获得一些灵感。
想要添加一个新的UI控件到画布，仅需要选中你希望添加的控件，然后拖放它到Mockup画布中。或者仅需要双击控件，Balsamiq Mockups便会为你放置在画布上。
Mockup画布（The Mockup Canvas）
画布是Balsamiq Mockups的主工作区。只要在画布上添加了UI控件，就可以移动、调整大小，直到符合你的想法。
只要使用过Visio等绘图软件，就应该能知道该软件的最基本操作，这里就不浪费时间说这些了。

3 属性窗口（The Property Inspector）

属性窗口是该软件一个设计比较贴心的地方，有点像Word2007，属性框紧紧跟随被选元素，它允许你执行一些常用功能比如复制/粘贴、分层、对齐控件，以及某些控件的特有选项。节约了我们找属性框的时间。下图是一个属性框的图例

Editing Inspector 编辑选项

总是呈现在最顶部。从左到右依次是：Undo、Redo、Duplicate、Cut, Copy、Paste、Delete、Group、 Ungroup、Lock。

Layering and Position & Size

图层、位置和大小

Layering and Position & Size

图层、位置和大小

Layering and Position & Size 图层、位置和大小

总是呈现在第二行，编辑选项的下面。 Layering选项从左到右依次是：bring to front、send to back、bring forward、 send backward。
Position and size是选中项的位置和大小。点击数值切换编辑。格式是“X,Y WxH”，X表示横线坐标，Y表示纵向坐标。(0,0是最左上角的原点，控件向右和向下延伸。)W和H分别表示选中项的宽和高

Align 对齐

选中的控件超过一个时就会出现。你可以将选中的元素水平居左、居中、居右对齐。垂直向上、居中、项下对齐。最后的两个icon分别是水平分布和垂直分布。

Links （链接）

Links让你可以把Mockup彼此链接。从1.6版本开始，Mockups支持把Mockup彼此链接到一起。这样可以建立一个简单的网站或者软件原型。当前链接功能仅仅支持桌面版和Confluence版本。
只需在下拉菜单中选择一个文件名，两个Mockup链接在一起就是这样简单。选择支持链接的控件，Property Inspector就会看到“Link”下拉菜单。

如果你没有看到下拉菜单，你可以点击“Show Link Inspector”链接

如果下拉菜单不可用，请保存你的Mockup后再点击想添加链接的控件。

List and DataGrid （列表和数据表格）

允许你指定List和DataGrid是否有表头、表格行是否交错颜色、行高以及当前选中行。DataGrid控件还允许你为表格添加纵向的滚动条。

Progress Bar Type （进度条）

4 创建Symbols

在Mockups中，Symbol是简单命名转化为Symbol形态的Group。现在，让我们先创建一个Symbol！
你可以创建一个新的Group或者选择一个已经创建好的组来转化为Symbol。下列步骤假设从创建一个新的Group开始。

1. 选择想要群组的控件

2. 群组选中控件。（选择Edit菜单下的Group命令，Group后会呈蓝色。）

3. 为Group命名。（比如login form）

4. 带有这个新Group的文件。（转化Group为Symbol之前文件必须要保存。）

5. 在Property Inspector点击Convert to Symbol按钮转化为Symbol。

你会注意到Group选择变为了亮绿色。这表示选中的是Symbol的一个实例。你现在就有了一个名为“login form”的Symbol，它会显示在UI Library的Project Assets标签里。（同样也可通过Quick Add添加它。）

Symbols原理
一旦点击“Convert to Symbol”，Mockups桌面版会将选中的已命名Group添加到你BMML文件旁assets文件夹下symbols.bmml 文件中。
存放目录在C:\Users\你的登录名\Documents\Balsamiq Mockups\assets。理解Symbol的关键是，Symbol是存放在项目assets文件夹BMML文件中的已命名Group。

重定义Symbol属性
创建了Symbol后，每次使用时常常需要做一些小调整。假设你创建了一个Symbol作为Master Page/Temple，它包含了一个网页的标题和导航。

整个网站的Page Title具有相同大小的字体和位置，但是每一个页面Title文本都有所不同。同样道理，导航栏标识某一个页面的当前地址也有所不同。
Symbol允许每一次使用时重定义属性达到这个目的。需要的时候，请在Symbol上双击、Enter或者按快捷键F2 “进入内部”。

这很像编辑Group内容，但你会注意到一个提示，是否真的需要重新定义Symbol的属性。
如同编辑Group一样，你可以随意调整Symbols里面每一个控件。超过Symbol属性的操作不被允许，比如添加、删除或者群组控件。
如果做了误操作，你可以一直撤销返回。如果只想撤销Pos. & Size恢复为Symbol默认数值，可以点击Property Inspector中（Pos. & Size右边）绿色的“x”icon。

通过Property Inspector中（Symbol一栏最右边）的“x”icon，也可以一次性撤销全部操作（Pos. & Size和内容），恢复为Symbol实例

Symbol 库
Symbol Library是Symbol集合。你可以创建Symbol Library共享控件给你的团队，或者通过社区Mockups To Go分享它们。
创建一个Symbol Library，必须创建一个BMML文件以及一些Group(每一个是一个Symbol)，并且Group有各自的名字。
只要有BMML文件存到asset文件夹，其中的Group就会转化为在这个项目任何Mockup中都可以使用的Symbol。
这里还有一个方式可以在Mockups中创建Symbol：创建一个没有Group的Mockup到assets文件夹。Mockups把将整个Mockup作为一个Symbol，名称跟随Mockup的文件名称。

Balsamiq Mockups的使用相关推荐

Working with Symbols （在Balsamiq Mockups中复用自定义控件和页面模板）
这篇文章是Balsamiq Mockups网站<Working with Symbols>的译文. 原文在这里:Working with Symbols Symbol是Balsamiq M ...
Balsamiq Mockups --- 产品设计的利器
产品人员,经常需要与leader以及各部门(技术.UED)讲解自己的功能设计,常有一些功能用原型或者草图方式更加容易让人理解.用过Visio.Axure,都觉得比较复杂,因为产品人员主要展示功能点,交 ...
超好用Web草图工具Balsamiq Mockups
Balsamiq Mockups是一款另人爱不释手的Web草图绘制工具,简单易用,能轻松地绘制出Web界面原型,托托拽拽就能搞出可爱的界面来,不说那么多,看看截图就知道了. 就是这么爽! 软件虽好但不 ...
超酷的界面原型设计工具Balsamiq Mockups
Balsamiq Mockups是一个Flash应用程序,你可以通过这里进行在线试用,也可以下载到本地计算机上进行使用. 在线试用的地址:http://www.balsamiq.com/demos/m ...
注册Balsamiq Mockups
注册Balsamiq Mockups 工具下载链接: https://pan.baidu.com/s/1x5VTe16LYYD-DqdQ7b9K2Q 提取码:fi0o [注册码](任选其一) Name ...
Balsamiq mockups
今天在掘金上看到一篇文章,发现他用的图不错找了下出处,developer-roadmap 使用的Balsamiq Balsamiq Mockups是一种软件工程中快速原型的建立软件,一个手绘风格的. ...
Balsamiq Mockups完全手册
Balsamiq Mockups出自加利福尼亚州的Balsamiq工作室,创始人Peldi在 2008年6月推出了这款手绘风格的产品原型设计工具,并广受好评.2年多来,Balsamiq工作作为一个微型 ...
Balsamiq Mockups 入门教程
软工老师上课提到了一个非常神奇的作图软件叫Balsamiq Mockups,用于展示软件项目的UI界面,整体上来说作图过程和PPT十分类似,很容易就能学会,今天我们就来熟悉一下这个软件吧~ ~ 1.软 ...
Balsamiq Mockups 产品原型图绘制工具的破解和使用教程
说实话作为一个前端,会不会这个软件都是没事的,毕竟这个是经理才可以用到的软件,科普一下,Balsamiq Mockups是一款美国加利福尼亚一个工作室在2008年开发出来的一款很好用的产品原型绘制软件 ...

Balsamiq Mockups的使用

Balsamiq Mockups的使用相关推荐

最新文章

热门文章