balsamiq mockups 3如何创建线框？balsamiq mockups 3 mac版使用教程
时间：2018-08-09 浏览次数：357 编辑：user02
Balsamiq Mockups 3 Mac版是一款功能很齐全的产品原型UI设计软件，这里带来Balsamiq Mockups 3 mac版使用教程，主要教大家使用Balsamiq Mockups 3 for mac创建您的第一个线框，赶紧来学习一下吧！
本教程旨在指导您创建第一个 Wireframe。它将涵盖产品的基本概述以及一些功能和UI 控件。
以下是您将在本教程中创建的Wireframe：
基本概念和术语
以下是Balsamiq的一些基本组件：
UI控件 - 标准用户界面“小部件”（例如，按钮，图像，对话窗口）。任何线框的构建块。
画布 - 放置UI控件的网格区域。
UI库 - 可以拖动到“画布”上的一行UI控件。
property Inspector - 一个配置面板，包含特定于每个UI控件的常用操作（例如，对齐，分层）和属性。
添加前几个控件
要创建上面显示的线框，首先将浏览器 UI控件拖到画布上。
Balsamiq中几乎所有控件的内容都是由简单文本定义的。当控件首次添加到画布时，它将以编辑模式显示，通常带有关于如何使用它的提示。对于Browser控件，您可以指定标题栏和URL文本，或者只使用默认值。
| 提示：要随时编辑控件，请双击它，或者在选中控件时按Enter键。 |
接下来，使用控件边缘和角落处的调整大小光标控件将控件的大小调整为所需大小。
继续将以下控件添加到画布：标题，文本和图像，如下所示。请注意，当您将边缘移动到边缘时，对齐参考线会出现在浏览器窗口控件的边缘内部，并且控件会“捕捉”到这些参考线。
| 提示：也可以使用“ 快速添加”框添加控件，方法是键入控件名称的前几个字母，然后按Enter键。 |
要更改产品名称标签的文本大小，请选择“ 标题”控件并使用“ 属性”检查器更改字体大小。
对于Text控件中的产品描述占位符文本，输入您自己的占位符文本，或者开始键入“lorem”，将自动生成Lorem Ipsum文本。
调整Image控件的大小后，您的线框应如下所示：
| 提示：如果在选择另一个控件前面的控件时遇到问题，请尝试使用工具栏中的锁定图标“锁定”后台控件，以防止选中该控件。 |
创建和对齐图像寻呼机控件
下一步是在图像下方添加指示旋转内容或图像控件的小点。
在本教程的这一部分中，您将学习如何添加图标以及分组和对齐控件。
首先将Icon控件添加到画布。
接下来，单击“图标搜索”框内的箭头以打开图标库。
此窗口显示Balsamiq中包含的所有图标的列表。您可以按类别过滤它们或按名称搜索。选择图标后，您可以从六种尺寸中选择一种。在本教程中，选择Circle图标并将大小设置为“XS”并单击“Select”。
| 提示：图标属性检查器中的“图标搜索”框的行为类似于“快速添加”框，并显示与您输入的文本匹配的图标（例如，尝试键入“箭头”）。 |
在Circle图标的右侧添加三个图标（这次使用Circle Outlined）。添加第二个图标后，您还可以复制和粘贴。使用鼠标将图标放在彼此旁边。您可以看到对齐参考线水平和垂直显示，帮助您正确放置它们。
| 提示：使用重复键盘快捷键（Windows上为CTRL + D; Mac上为CMD + D）可快速复制画布上的项目。 |
缩小，您的线框现在看起来应该是这样的。
下一步是将Image控件下方的四个图标居中对齐。执行此操作的过程是首先对图标进行分组，然后将图标组与图像控件对齐。
要对一组控件进行分组，请使用光标在其周围绘制边界或按住SHIFT并使用鼠标选择每个控件来选择它们。然后单击工具栏中的“ 组”命令或按CTRL + G（在Windows上;在Mac上为CMD + G）。
| 提示：另一种仅选择前景中控件的方法（除了“锁定”背景控件之外）是在拖动鼠标时按住ALT / OPTION键。这将阻止选择后台控件。 |
分组控件可以用浅紫色标识，并保持分组直到Ungrouped（快捷键：CTRL / CMD + SHIFT + G）。要将分组图标与图像控件对齐，请同时选择它们并使用“属性”检查器中的“ 对齐中心”图标。
您可以使用键盘箭头键或使用鼠标和对齐参考线将寻呼机控件移近图像控件。
| 提示：在使用箭头键移动控件的同时按住SHIFT将一次移动10个像素（而不是通常的1个像素）。 |
到目前为止，线框已添加了寻呼机控件。
完成线框
线框的其余部分由一组选项卡，更多文本和图表组成。
添加Tabs Bar控件并将其放在线框的下半部分。
逗号用于在此控件中创建选项卡，因此您只需输入以逗号分隔的其他文本即可创建任意数量的选项卡。例如，输入文本“概述，功能，设计，规格”将创建如下所示的选项卡。
要将“概述”选项卡显示为选中或突出显示，请使用Selection属性，如下所示。
调整Tabs Bar控件的大小以匹配页面的宽度后，添加Label和Text控件以创建如下内容：
您可以通过将特殊字符文本括起来将文本格式设置为多个控件中的粗体，斜体或超链接。使用* Text *表示Bold，_text_表示斜体，或[Text]表示超链接。
最后，将Chart：Column控件拖动到Tabs Bar内的空白区域作为完成触摸以完成线框。
导出和后续步骤
现在线框已经完成，您可以通过project> Export> Wireframe to PNG ...（快捷键：CTRL / CMD + R）菜单轻松地将其导出为图像。“ 导出您的线框”一文中介绍了其他导出选项。
小编点评
以上就是关于“Balsamiq Mockups 3如何创建线框？Balsamiq Mockups 3 mac版使用教程”的全部功能了，希望能对你有所帮助。
推荐软件
客服QQ：
客服微信