没有合适的资源?快使用搜索试试~ 我知道了~
Balsamiq Mockups使用手册
5星 · 超过95%的资源 需积分: 50 75 下载量 83 浏览量
2012-02-17
17:27:12
上传
评论
收藏 1.08MB PDF 举报
温馨提示
试读
21页
Balsamiq Mockups的用途和价值 在Web产品设计中,Balsamiq Mockups是产品设计师绘制线框图或产品原型界面的利器。
资源推荐
资源详情
资源评论
1
Balsamiq Mockups 使用手册
目录
1 引言 .............................................................................................................................. 2
1.1 预期读者 ............................................................................................................... 2
2 程序架构总览 ............................................................................................................... 2
3 属性窗口(The Property Inspector) ........................................................................ 4
3.1 通用属性项 ............................................................................................................ 4
3.2 其他属性项 ............................................................................................................ 5
4 使用文本及符号 ......................................................................................................... 10
4.1 基本格式 ............................................................................................................. 10
4.2 使用 Date Grid / Table .......................................................................................... 11
4.3 使用 Tree ............................................................................................................. 11
4.4 使用 Menu ........................................................................................................... 13
4.5 从 Excel 粘贴数据 ................................................................................................ 13
5 使用 Symbols,制作共享部件 .................................................................................. 14
5.1 创建 Symbols ....................................................................................................... 14
5.2 Symbols 原理 ....................................................................................................... 15
5.3 重定义 Symbol 属性 ............................................................................................ 15
5.4 编辑 Symbol 源文件 ............................................................................................ 18
5.5 Symbol 库............................................................................................................ 19
6 全屏演示 .................................................................................................................... 19
7 BalsamiqMockups.cfg 配置文件 ............................................................................. 20
2
1 引言
制作软件使用原型法已经成为业界通行的做法,笔者使用过 Visio,AxureRP 或者 Html
编辑器绘制过软件系统的原型。对于大型项目一般使用 AxureRP 或者 Html 编辑器制作高逼
真度的原型;对于小型项目一般使用 Visio 制作。
但是不论是大项目还是小项目,软件是什么样子?从脑海中落到逼真的样子中间会经过
一个什么样的步骤?我想大家都会记起一个工具“白板”!大家在会议室讨论,然后把界面
画到白板上,然后热烈的讨论,散会前用相机把白板内容拍下来。然后再不辞劳苦的将界面
画到 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 不在本文讨论范围。
1.1 预期读者
1、原型制作人员:使用 Html 编辑器,AxureRP 等进行应用系统原型开发的工程人员。
2 程序架构总览
Balsamiq Mockups 主要由三块组成。从上至下是: Application Bar、UI library 和 Mockup
Canvas。分别详述如下。
3
应用程序栏(The Application Bar)
Application Bar 包含了 Menus、Quick Add 和 Toolbar。
Mockups 菜单非常一目了然。
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 键取消列表。
马上试试 Quick Add!一旦你熟悉它,就可以隐藏 UI Library(通过 View 菜单),直接用 Quick
Add 添加 UI 元素到 Mockup。这样会最大化你的画布区域和速度。
Toolbar 包含了大部分 Edit 菜单中的命令。例如:Undo、Redo、Duplicate(复制副本)、
4
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,属性框紧紧跟随被选
元素,它允许你执行一些常用功能比如复制/粘贴、分层、对齐控件,以及某些控件的特有
选项。节约了我们找属性框的时间。下图是一个属性框的图例:
3.1 通用属性项
Editing Inspector 编辑选项
总是呈现在最顶部。从左到右依次是:Undo、Redo、Duplicate、Cut, Copy、Paste、Delete、
Group、 Ungroup、Lock。
Layering and Position & Size 图层、位置和大小
5
总是呈现在第二行,编辑选项的下面。
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 分别是水平分布和垂直分布。
3.2 其他属性项
Arrow(箭头)
选择箭头的方向和弧度,以及是否显示箭头。
Auto-Size(自适应尺寸)
点击 Auto-Size 将会调整控件为自然尺寸,也就是适合内容的最小尺寸。
Border(边框)
显示或者隐藏选中控件的边框。
Color(颜色)
设置选中控件的前景、背景颜色(取决于控件类型)以及透明度(仅在部分控件提供)。
Icon (图标)
剩余20页未读,继续阅读
Skywq
- 粉丝: 3
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页