Balsamiq 教程

Xuan Xuan

INTRODUCTION

An Easy Introduction to Balsamiq Wireframe

INTRODUCTION

01 ApplicationOverview

控件监视器 Property Inspector

UI 库 UI Library

工具栏 Tool Bar

导航栏 Navigator Panel

画布 CAnvas

INTRODUCTION

02 Moving and Arranging Controls

ExercisE

INTRODUCTION

03 Using Text to Add Content

INTRODUCTION

04 Linking, Presenting and Sharing

INTRODUCTION

05 Symbols and Assets

Xuan Xuan

INTRODUCTION

Thank You

对齐控件

• 单击鼠标右键选择对齐方式
• 右侧控件监视器选择对齐方式

快速添加控件

• 要使用快速添加，请在快速添加输入框内部单击（或着按“+”或“/”快速输入）。
• 输入 UI 控件或图标名称中的几个字母，“快速添加”下拉框将显示相关搜索结果。使用鼠标或箭头键向下滚动列表，然后单击或按下以在画布上添加控件或图标。

• 尺寸
• 位置
• 图层
• 颜色
• 字体属性

选中控件后，可在右侧的控件监视器调整控件的属性

可调整的属性包括：

调整列表/表格样式

同样可通过双击进入文本编辑框的方式，了解更多关于列表/表格的编辑方式。

工具栏左侧图标

1. 显示/隐藏左侧⾯板 2. 创建⼀个新的线框 3. 线框操作（重命名等）并在线框之间导航（隐藏左侧⾯板时显示） 4. 转到下⼀个或上⼀个线框（隐藏左侧⾯板时显示）

选中被遮挡的的控件

如果想要选中被上层控件遮挡的下层控件，可在目标区域单击鼠标右键，选择【Select Button】，即可选中下层控件。

两种添加UI控件到画布的方法

1. 直接单击拖至画布上2. 在UI库内双击控件

添加素材为asset

添加图片等素材之后，便可添加为asset，存放在asset库中，后续可直接在库中双击复用该asset。

锁定控件

在编辑控件时，可能会不小心一起选中其他控件，此时可以单击上方工具栏的锁定按钮，固定某些不需要移动或修改的控件。

通过链接跳转页面

可以给按钮加上跳转设置，以实现更好的交互效果并展示业务逻辑。

添加控件为symbol

选中控件之后，在控件监视器给其命名后便可添加为symbol，存放在symbol库中，后续可直接在库中双击复用该symbol。

• PNG
• JSON
• PDF（可导出跟Balsamiq软件内一样可点击跳转的PDF文件）

导出

Balsamiq支持多种导出格式：

工具栏中间图标

⼯具栏中央的图标组⽤于常⽤的调整。这些按钮允许您撤消、重做和调整缩放级别。如 果您要隐藏标记（有关标记的更多信息，请参⻅此处），您还会在此处看到“显示标记” 按钮。

控制复制间距

通过“Ctrl”+“C” / “Ctrl”+“V”实现的复制组件都是默认堆叠在一起的，然而只需将组件拖至一定的间隔处，再次复制，便可以保留间距进行复制粘贴。

调整控件属性

右侧的控件监视器内可以调整许多控件属性，让线框图看起来更完整

调整标签文本

UI库中的控件大多可以调整标签中的文本，通过双击控件可以进入编辑界面，从而了解标签的命名与修改方式。

工具栏右侧图标

最右侧⼯具栏的最后部分包含快速添加⼯具、 UI 库的切换图标、注释⾯板、属性检查 器以及⽤于进⼊全屏演示模式的图标。

移动控件

• 鼠标直接拖动
• 键盘方向键向四个方向水平垂直移动（一次移动1px）
• 键盘方向键+Shift键向四个方向水平垂直移动（一次移动10px）

对齐指示

• 拖动控件靠近另一个（多个）控件时，会自动出现对齐指示线
• 还可以通过右侧的控件监视器，输入具体数值，精确调整控件在画布上的位置