使用 Balsamiq 开始使用线框图

理想情况下，线框图可以定义为可视化屏幕布局的活动。 当今市场上有许多线框图工具，但最简单且使用最广泛的是 Balsamiq——我们今天的主题。 但是，在此之前，让我们先了解为什么我们需要线框？
在软件开发方面，了解最终产品的外观至关重要，甚至在开发开始之前。 产品的这种初始可视化可作为所有利益相关者的指导方针，并有助于避免未来可能出现的任何歧义。
在过去，使用文本段落来引出软件需求。

然而，这些文本块不足以让可视化继续进行——因为每个阅读需求的人都会以某种可能与其他人不同的方式对其进行可视化。 这种模棱两可会导致很多混淆，并导致浪费时间、金钱和精力。 为了帮助这一事业，线框图出现了。 由于它为整个开发过程带来了便利。

在本文中，我们将帮助您理解以下问题：

• • 什么是香脂？

• • 如何开始使用它？

• 如何导出最终的线框/模型？

什么是香脂？

本质上，线框图可以用笔在餐巾纸上进行。 归根结底，这毕竟只是一个草图。 但是，在与专业人士协作和共享时，最好切换到当今市场上存在的众多工具之一。 Balsamiq 就是一个这样的工具——它使用简单，并提供了许多功能来构建有用的线框。
Balsamiq 是一款出色的工具，可满足线框图和协作的所有要求。 它具有一组独特的功能，使您能够进行快速线框图、获取实时反馈、合并这些反馈并改进线框图。 这最终使整个团队与应用程序的布局功能保持一致。
使用 Balsamiq，与位于远程的团队成员协作也变得轻而易举，因为它可以以 PNG 或 PDF 格式导出线框，从而在共享线框的同时提供灵活性。
10 种最有效的线框图工具

开始使用 Balsamiq

Balsamiq 适用于 Windows 和 Mac OS，并可在线下载。 下载并打开该工具后，您将看到如下屏幕：

如上图所示，Balsamiq 的用户界面分为以下四个部分。

• • 航海家

• • 用户界面库

• • 督察

• 线框空间/面积

以红色突出显示的部分用于在部分检查器和项目信息之间切换。 这些功能都包含在 UI 库中，让我们深入了解一下。

用户界面库

UI 库根据不同的屏幕元素进行分类。
让我们熟悉 Balsamiq 中可用的不同屏幕元素类别。

• • All - 单击此按钮将显示 Balsamiq 提供的所有 UI 元素。 水平滚动将允许您查看或使用它们。

• • 资产- 此部分包括您可以上传并稍后在您的线框中使用的内容。

• • Big - 这包括相当大的屏幕元素，如占位符、浏览器窗口、iPhone 和 iPad。

• • Buttons - 此部分包括线框中所需的所有按钮控件，例如 - 操作按钮、复选框等。

• • Common - 本节包含用于表示最常见交互的形状。

• • Containers - 它包括 Window、FieldSet、Browser 等选项。顾名思义，它包括 Window、FieldSet、浏览器等。

• • Forms - 此类别包含与表单相关的所有控件，例如输入元素、单选按钮、提交按钮等。

• • Icons - 这包含一组可用于表示特定操作的图标。 例如，一个软盘图标而不是保存按钮等。Balsamiq 提供了大量免费图标，可用于各种操作。

• • iOS - 这包含特定于 iOS 的 UI 控件。

• • 布局- 当您需要表示基本页面/功能时，布局非常重要。 此类别包括大多数布局，如垂直/水平选项卡、手风琴等。

• • Markup - 这用于在线框中添加对特定控件的注释。 它还包含用于在许多场景中显示连接性的标注。

• • 媒体- 本节中提供了所有与媒体相关的 UI 控件，有助于在线框中显示图像/视频/声音。

• • Symbols - 这是可重用组件的集合，可以减少创建通用组件的时间。

• Text - 顾名思义，它包含与文本相关的所有 UI 控件。 此类别下提供文本块、组合框、链接栏等功能。

这些组件的知识加上 Balsamiq 允许您轻松拖放组件的事实将帮助您快速有效地创建您选择的线框。
您已经在使用以下哪些产品管理工具？

现在，假设对于您的网站，您已经创建了这四个页面的线框 - 主页、产品和服务、联系我们和关于我们。 现在，我们需要执行另一项基本任务，让我们的线框看起来更像一个成熟的网站，而不是草图。 为此，我们需要链接我们的页面，因为理想情况下它们会在网站中链接。 链接还可以帮助您轻松地在线框之间来回切换。

链接页面

此步骤将帮助您的线框按顺序显示 - 就像它们在任何网站上一样。 要实现此导航，请单击右上角的链接栏。
首先，让我们首先将主页连接到产品和服务页面：

• • 转到主页

• 点击右上角的链接栏

请参阅属性窗格

绿色突出显示的部分显示了您迄今为止创建的各种线框。 让我们从链接主页开始。 单击下拉列表以查看可用模型的列表。 它将显示如下列表：

从显示的下拉列表中，选择产品和服务以创建从主页到产品和服务的链接。 同样，对其他页面重复相同的过程。
决策的艺术：对于经理、领导者和产品人员

导出线框

如果您不能以更常见的格式（如 PDF 或 PNG）将其呈现给您的客户/最终用户，那么您刚刚创建的线框将毫无用处。 为此，Balsamiq 允许您轻松地以这些格式中的任何一种导出模型。
在此示例中，我们以 PDF 格式导出模型。 为此，单击项目菜单，然后单击导出为 PDF。
您将看到如下所示的屏幕：

选中复选框 - “显示链接提示”。
然后，单击导出为 PDF 。 它将显示一个弹出窗口，您可以在其中指定要导出 PDF 的本地位置。 进度将显示在如下进度条中。

导出完成后，会出现一个确认框。 单击该框后，您将能够查看 PDF 以及您设置的所有导航。
构建最小可行产品——多少才算太多？

包起来…
不可否认线框图在当今应用程序开发领域的重要性。 它们提供了许多功能，最终减轻了您的整体工作量 - 绝对不缺少线框图工具，但 Balsamiq 是为数不多的满足您全方位需求的工具之一！

从世界顶级大学学习在线 MBA 课程。 获得硕士、Executive PGP 或高级证书课程以加快您的职业生涯。