Table of Contents

前言

第 1 章 概览

Balsamiq Mockups 3 简介

版本过渡指南

Mockups 应用概述

使用 UI 视图

属性检视视图

使用Alternates分支

项目信息面板

快捷键

第 2 章 控件的使用

使用文本控件

使用数据网格／表格

使用图标

使用图像

使用标记

使用符号

使用站点地图

第 3 章 进阶

导出Mockups

导入 Mockups 和符号

将 Mockups 链接起来

使用皮肤（sketch vs. wireframe）

全屏演示模式

Balsamiq Mockups 延伸内容

第 4 章 常见问题解答（FAQ）

Mockups 是否自动保存已打开的文件？

Mockups 是否可以将我的原型图分享给客户端？

我能导出 Mockup 笔记吗？

Mockups 能导出为 HTML/CSS/JS，XAML，Ruby等格式吗？

我可以跨项目使用符号和资源吗？

我可以添加自定义控件或图标吗?

我可以在不同的 mockups 之间重用已有的元素吗？

Mockups 有比较正式的皮肤吗？

我的屏幕较小，如何能够看到更大的画布？

我可以在微软 Sharepoint 服务器上保存 Mockups 文件吗？

什么是自定义属性？

我可以使用命令行安装 Mockups 吗？

对于某一个Mockup，最大的画布大小是多少？

如何找到你的本地数据存储文件夹？

前言

Balsamiq Mockups 是美国加利福利亚的 Balsamiq 工作室（ 2008 年 3 月创建）推出的原型图绘制软件。于 2008 年 6 月发行了第一个版本。Balsamiq Mockups 如此受欢迎的原因是在软件产品原型图设计领域，特别是 Web 原型图设计领域，还没有哪款产品有如此丰富的表现形式。使用 Balsamiq Mockups 画出的原型图都是手绘风格的图像，看上去非常美观、清爽。它支持几乎所有的 HTML 控件原型图，此外它还支持目前如火如荼的 iPhone 手机元素原型图，这为开发 iPhone 应用程序的软件工程师提供了非常好的设计图。目前国内许多知名的互联网公司都推荐使用它进行原型设计。

本教程将教你如何用简单和容易的步骤使用 Balsamiq Mockups 3 制作优秀的设计原型图。

本教程内容来源于：[Balsamiq Mockups 3 官方教程] (http://support.balsamiq.com/customer/portal/articles/127377)

适用人群

本文是为从事软件原型设计的设计人员准备的，可以帮助读者快速上手制作出由 Balsamiq Mockups 3 绘制出的优秀原型图。

学习前提

在你阅读教程之前，我们假设你已经具备了基本的原型设计的相关知识。

Balsamiq Mockups 官方网站：https://balsamiq.com/products/mockups/

1

概览

Balsamiq Mockups 3 简介

Balsamiq Mockups 3 是我们将近一年的埋头编码创造出来的产品，这个产品不仅是我们的客户一直提出要求希望我们做的，也是我们自己一直想要做的。

最显著的改变是人们从一开始就一直提出需求的两个“要点”：项目支持（打包文件，多窗口）和去除 “浮动属性页面”（属性检视视图）。

但正如同我们通过后台的实现让软件运行的更快更智能并且通过不断的改进用户体验的每个部分一样重要的是，我们希望能够更好的使用 Mockups。

在这篇文章中你将找到有关哪儿去下载它，最新情况的信息，当然，还有怎样导入已存在的文件。如果你刚接触 Balsamiq Mockups 或者在读完这篇文章后想要更深地钻研下去，你可以看以下的文档目录和应用程序概述。

这里是一个版本 3 的简短 5 分钟视频介绍。

视频

如何更新

Balsamiq Mockups 3 现在是我们桌面产品的现行版本，可以在我们的下载页上获得。它对于现有的用户来说是可以免费更新的，你甚至不需要重新注册。

Balsamiq Mockups 3 将和 Balsamiq Mockups 2（作为独立的应用程序）并行运行，所以你不需要卸载你现在的版本来使用它。看以下的如何导入存在的文件。

虽然它已经被严格测试，但如果你找到了任何 bug 或者问题，告诉我们!你也能尝试下载一个新的构建，因为我们将快速响应 bug 报告，一旦它们准备好我们就会发放补丁。

Balsamiq Mockups 3 中有什么新的内容

一句话概括，很多！这些是你应该知道的“亮点”：

• 项目！
• 自动保存
• 一个新的用户接口
• 更简单的外观和感觉定制
• 更好的标志
• 更好的图标
• 更好的图像和资产
• 全屏模式
• 注释
• 垃圾箱
• 替换
• 音乐？

项目！

最后，你不仅对于不同组别的 mockups 有各自单独的窗口，而且所有属于项目的“东西”（mockups，标志，图像，图标）都会在一个文件中。这使得它发送和移动文件，归并所有东西要简单得多。

图片 1.1 image

图片 1.2 image

自动保存

你的项目被自动保存了。不需要手动保存。当你重启实物模型时，所有在你离开时候的东西都会完好无损。

一个新的用户接口

令人厌烦的四处出现的属性检视视图已经消失啦！现在你在左边拥有实物模型，右边拥有属性。简单，可预测并且快速。UI 库位于它一直所在的顶部但是现在它有一点紧凑。

图片 1.3 image

你可以通过点击 Quick Add 栏或者通过键盘快捷键来独立切换属性面板和 UI 库。

图片 1.4 image

当然，你可以使用面板的图标隐藏所有的面板，使你进入美妙的线框天堂。

图片 1.5 image

使用工具栏中的图标四处浏览和进行普通的操作是简单的。

图片 1.6 image

1.在 Mockup，资产，标志和垃圾箱中导航。
2.展示/隐藏左边的面板
3.用一个缩略图中显示你的 mockups 4.创建一个新的 mockup 5.Mockup 动作（重命名等）和在 mockups 间（当左边面板被隐藏时展示）导航
6.到下一个或前一个 mockup（当左边面板被隐藏时展示）

更简单的外观和感觉定制

在 Mockup 中所使用的字体控制自从开始以来已经成为最需要的功能之一。之前自定义字体是使用一个复杂的配置文件来得到的，但我们现在允许你在新的项目信息面板中设置项目字体。是的，你现在可以简单地使用任何你已经在你的 mockups 中安装的字体。你也能为它设置一个默认的大小。

图片 1.7 image

我们也把皮肤转换选项移动到了新的项目信息面板中，这使得它们更加明显（许多人从来不知道我们的线框皮肤）。最后，默认的选择颜色在新的面板中也是可配置的。

更好的标志

在之前的版本中我们把标志称为一个“先进的特征”。但是，我们不再这么说了。标志现在是对于所有人来说的。标志允许你创建模板，作品，和其他可重复使用的成分来节省时间和保证一致性。它们对于大项目和自定义控件来说是尤其有用的，而且是我们 Mockups To Go 页面 的核心。

你现在可以跳到标志面板并从草稿中创建一个新的标志，它将出现在 UI 库的“标志”标签。你仍然可以通过老方法创建它们（创建一个有名字的组合并点击 “Convert To Symbol” 按钮）。

图片 1.8 image

我们现在也在标志库中将标志以列表的形式展示，因此你可以在它们之间更简单地导航并且了解自己正在编辑哪个标志。

图片 1.9 image

最后，我们可以更简单地导入标志。只要点击 “Import Symbol Library” 图标并选择文件导入。

图片 1.10 image

更好的图标

在这里有一个大改动。

首先，图标现在在 UI 库中有它们自己的种类所以你能像其他控件一样拖放它们。

图片 1.11 image

不仅如此，它们被通过名字或键盘搜索时会在 Quick Add 结果中显示，这节省了你的时间。

图片 1.12 image

图标搜索结果将在任何匹配你所进入文章的 UI 控件下显示。

你将很快注意到我们比起前一个版本拥有一个完全不同的图标集。我们把我们的图标转换到非常受欢迎的 Font Awesome 图标集。这意味着现在有超过 500 个预先安装的图标。

更好的图像和资产

现在有存放一个图片和其他导入资产的专门区域，从导航栏可以进入。

图片 1.13 image

你可以将图像添加到你的项目中而不需要先将它们放到你的实体模型中。点击 “Import Asset...”按钮来从你的电脑添加文件或者点击 “Download Asset...”图标来从 Flickr 或者网页中添加一个图像。或者仅仅是从你的电脑中拖动一张图像到画布。

图片 1.14 image

你也可以从面板中的上下文菜单删除，重命名，克隆和下载图像。

新的全屏模式

相同的选项仍然在那儿，但是我们已经提升了经验来使得它具有更好的可用性测试和展示功能。我们也去除了 mockups 在全屏模式下跳出的问题。

图片 1.15 image

注释

当没有控件被选择时你将在属性面板中看到一个地方来添加注释。你可以为你的项目，Mockups，资产，标志库和单独的标志添加注释，它们将被保存为项目的一部分。

图片 1.16 image

垃圾箱

Balsamiq Mockups 3 现在为你已经删除的 mockups，资产和标志设置一个垃圾箱。这使得当你在处理项目时保持你的项目整洁变得简单，但是它仍然不允许你浏览和恢复之前的东西。

图片 1.17 image

为了从垃圾箱面板恢复一个对象，点击上下文菜单箭头并且选 “Restore”。你也可以选择永久删除。

图片 1.18 image

替换

替换（有时候也指版本或分支）允许你在一个单独的 mockup 设计上创建变更而不需要通过添加更多的 mockup 到你的项目中。在这里读全文件。

图片 1.19 image

音乐？？？

是的，内置的背景音乐帮助你进入你的富有创造力的领域！查看博客获得更多的细节

图片 1.20 image

哪些不是新的

我们大部分的添加，安排和编辑控件是相同的，所以如果你是从前一个版本来的话应该对它们是很熟悉的。

我们希望所有这些改变为人所欢迎并且 Balsamiq Mockups 3 仍然是一款你一直了解和喜爱的应用程序，而且逐渐变得更好！如果你有任何想法或反馈，请让我们知道!

导入存在的文件

Balsamiq Mockups 3 有一个新的文件格式来为项目提供支持，但是你也能简单地导入你的旧文件。

为了将你现有的文件夹或 ZIP 文件转换成 BMPR 文件，只要打开 Project > Import 菜单。

图片 1.21 image

选择你所喜欢的东西来导入，并且你的旧文件将被导入，然后一个新的 BMPR 文件将被创建。

图片 1.22 image

欢迎反馈

图片 1.23 image

这对于我们来说是一个巨大的改变所以我们十分乐意地想要知道您是如何考虑的。如果你找到任何问题或者有任何评论，请使用 Mockups 中的 Help > Send Feedback 菜单来在新的 Balsamiq Forums 中评论。我们将在那看到你！

版本过渡指南

感谢试用我们最新的 Balsamiq Mockups 版本！我们认为你将真正喜欢所有的版本升级并且觉得它使用起来非常简单。为了了解更多新特性，你可以读一读 Balsamiq Mockups 3 简介或者阅读我们的完全文档。

这篇文章是可以解答一些你可能会有的从前一个版本转换到当前的 Balsamiq Mockups 3 的问题。

这是一次免费更新吗？

是的！并且它和旧版本使用相同的许可，所以你甚至将不必重新注册。Mockups 3 也有免费的小版本更新，所以你将能得到 3.1,3.2,3.3 等。

我的 BMMLs 无法打开，出了什么事？

如果你正在从 Balsamiq Mockups 的版本 2 过渡到版本 3，最重要的事就是知道 Balsamiq Mockups 3 使用了一个新的文件格式。我们通过这次改版大大简化了将你的实体模型组织到项目中的过程，并且使得它更简单地分享文件。

图片 1.24 image

在之前的版本中，每个实物模型是一个单独的文件而且图片和标志需要被存储到一个特定的子文件夹中以被识别。这使得它在和许多实物模型，许多图片和多个工程一起工作时令人感到十分疑惑。

现在不再如此。我们新的文件格式，BMPR（或者，“bumper”），包含了在一个单独文件中的工程内的所有的实物模型，包括它的图片和标志。所有东西都放在同一处，即便你移动了文件。你的实物模型现在表现得更像 PowerPoint 中的幻灯片或者主题文档。

对于我们现存的用户来说，这意味着你将需要导入你现有的文件到 Balsamiq Mockups 3 中，以让它们工作。不要担心，我们使得这个过程变得非常简单。

有许多选项来导入，从带入整个项目到导入单独的实物模型或者标志库。只要点击 Project > Import 菜单，就像下面展示的。

图片 1.25 image

看这一页得到更多的详细说明。

如果你想要转换到 Balsamiq Mockups 3 但是在 BMML 格式下有正在运行的工程，我们有两个建议：

1.并行使用 版本 2.2 和 3。应用程序名字是不同的所以你可以一起运行两个版本。为了连续性考虑你也许想要完成所有版本 2 的工程并在版本 3 中开始新的工程。

2.完全转换到版本 3。导入所有的你正在运行中的工程到新的 Balsamiq Mockups 3 工程并且完全停止使用版本 2。来来回回将是一种痛苦，因为你将频繁地导入导出。

导入的实物模型应该看起来和它们在前一个版本中一样，除了我们旧的图标已经被 Font Awesome icons 代替（你会更喜欢）。

你其它的产品 - myBalsamiq 和插件呢？

我们新的文件格式和用户接口将马上应用于所有我们的产品。同时，你可以导入和导出 ZIP 文件或者单独的 BMMLs，但是你可能只想让 BMPR 应用于你的其它 Balsamiq 产品。所有东西将马上无缝衔接 - 感谢你的耐心。

我如何在 Balsamiq Mockups 3 从 Mockups To Go 中使用标志？

在 Import 菜单有一个选项可以导入标志库。点击这里获得更多细节。

旧图标在哪里？我仍然可以使用它们吗？

我们将它们放置在 Font Awesome 图标集，那儿有更多的图标而且它们是更通用的。

怀念旧的版本？你可以在这里下载它们：

• Balsamiq Mockups version 2 icon set - Sketch skin（.zip 文件，268Kb）
• Balsamiq Mockups version 2 icon set - Wireframe skin （.zip 文件，234Kb）

看作为自定义图标添加它们的说明。

Mockups 应用概述

最新更新！
这个页面已经被更新为Balsamiq Mockups 3。旧文档在这里。

Balsamiq Mockups 是一个创建线框（也被叫做实物模型或者低保真原型）的用户接口设计工具。你可以使用它来形成你产品思路的数字草图，在代码编写之前协助讨论和理解。

每个 Balsamiq Mockups 文件（有一个 .bmpr 文件扩展名）代表一个项目并包含许多实物模型和图片，它们被一起存储在一个单独的 .bmpr 文件中。不同项目的实物模型应该在各自的 Balsamiq Mockups 文件中被创建。为了创建一个新的项目，可以从菜单中选择 Project > New Project。

注意：单独的项目文件在 Balsamiq Mockups 3 中都是是新的。（了解更多）

Balsamiq Mockups 用户接口由五个基本的区域组成：工具栏，UI 库，画布，导航面板和属性面板。每个都会在下面被描述。

图片 1.26 image

在 UI 区域上的 myBalsamiq 独有的文档，查看 myBalsamiq 编辑文档。

注意：你可以在我们的 Mockups Intro Video tutorial 看一个包含基本应用程序使用方法的视频。

工具栏

工具栏包含一系列的图标用来在其他用户接口的区域执行操作。

第一个图标集如下所描述。

图片 1.27 image

1.在 Mockups,资产，标志和垃圾箱间导航
2.展示/隐藏左边的面板
3.用一个缩略图显示你的实物模型
4.创建一个新的实物模型
5.Mockup 动作（重命名等）和在实物模型间（当左边面板被隐藏时展示）导航
6.到下一个或前一个实物模型（当左边面板被隐藏时展示）

工具栏中心的图标组作用于通常执行的画布功能。这些是你可能在文章编辑器或者其他绘画工具中已经习惯的动作，比如复制，粘贴，分组，排列和缩放。最后一个图标是用来切换标记的（阅读有关标记的细节）。

图片 1.28 image

工具栏最右边的最后一部分包含了快速添加工具，UI 库，属性检视视图和项目信息面板的切换图标，和一个进入全屏展示模式的图标。

图片 1.29 image

工具栏的顶部展示了项目的名字，你可以双击来重命名（或者到菜单中的 Project > Rename Project...）。

图片 1.30 image

快速添加工具

快速添加工具是最快的添加 UI 控件到你的实物模型的方法。为了使用快速添加，在快速添加输入框内点击（或者使用 / 或者 + 键盘快捷键来进入）。从一个 UI 控件或者图标输入一些字母，快速添加将为你显示一列推荐。使用你的鼠标或者方向键来快速浏览列表然后点击或者按下 Enter 来给实物模型画布添加控件或图标。你也可以使用 Shift + Enter 来将控件放到你的鼠标游标在画布上的位置。

例如，输入 “bu” 显示了一些包含 “Button”，“Button Bar”，“Help Button”，“Radio Button” 和 “Round Button” 的列表。另一方面，输入 “hel”，仅仅返回 “Help Button”。按下 ESCape 键使得列表消失，就像我们所期待的那样。

图片 1.31 image

现在尝试下快速添加吧！当你熟悉它，你甚至可以隐藏 UI 库并简单地使用快速添加来添加 UI 元素到你的实物模型中。这最大化了你的画布区域和速度！

UI 库

UI 库，或者 UI 控件，是工具栏下的 UI 控件的长条地带。它罗列了所有 Mockup 和资产，图标和标志的 UI 控件的类型。UI 库的主要目标是让你添加 UI 控件到实物模型画布，但是你也能使用它来为你的实物模型获得灵感。

图片 1.32 image

为了添加一个新的 UI 控件到画布，选择你想要添加的控件类型，然后可以拖动它到下面的实物模型画布，或是简单地双击它，Balsamiq Mockups 将为你把它放到实物模型画布中。

UI 库能通过几种方式被打开或关闭：点击快速添加框右边的图标，使用键盘快捷键 CTRL/CMD + L，或者通过选择应用程序菜单栏的 View > UI Library。

Mockup 画布

这是 Balsamiq Mockups 的主要工作区域，在那里你的 UI 实物模型被赋予生命。一旦你添加了 UI 控件，你能移动它们，调整它们到你的核心内容，直到你的 UI 实物模型已经准备完毕。看使用 UI 控件以了解更多。

实物模型画布根据你的应用程序窗口增加或收缩，所以如果需要的话你可以为更大的实物模型分配空间。

注意：如果你在一个小屏幕上工作或者有很大的实物模型，你可能想要读这篇关于隐藏面板来为画布获得更多空间的文章

导航面板

位于左边的导航面板展示了实物模型，资产或者你项目中的标志。当前选择的对象被突出了。实物模型和资产能以文本列表或者缩略图预览的形式被查看。

图片 1.33 image

你可以通过点击面板上方导航切换图标来隐藏导航面板（键盘快捷键：CTRL/CMD + J）。隐藏它将显示工具栏中额外的图标（如上所示），来在实物模型或者资产（依赖于被选择的那一个）间导航。

可以通过从画布中分离导航面板并把它向左或向右拖动，放置你的鼠标游标到线上来调整面板大小。你可以双击分隔线来把它重新设置为默认宽度。

实物模型能在导航面板中通过把它们向上或向下拖动被重新排序。这在导出到 PDF 时是有用的。举个例子。当你关闭并重新打开你的项目，甚至在一台不同的电脑上打开时，你的实物模型的顺序将被记住。

上下文菜单动作

一个在导航面板上打开的上下文菜单对于项目来说也是可以获得的。你可以通过右击选择的项目或是点击当你在它身边移动时出现的小箭头来打开菜单。

图片 1.34 image

这个菜单的内容根据哪种类型的对象被选择而显得不同（实物模型，资产，标志或垃圾），但是它通常包含比如重命名，移动到垃圾箱或者克隆的选项。在 Mockups 视图中，它也包含使用 alternates 的动作。

重命名 Mockups

重命名实物模型可以通过上下文菜单或者通过双击导航面板中的实物模型的名字来完成。有链接的实物模型在当所连接的实物模型名字被改变时将自动更新。

图片 1.35 image

属性面板

应用程序（当显示时）右边的面板展示了所选择的控件或者对象的属性。依赖于所选择的图标，它展示了或是属性检视视图或是项目信息面板。它能通过选择视图菜单中的工具栏或未检查的检视视图的图标以及项目信息中的图标来隐藏。

图片 1.36 image

缩略图

点击图标右边的导航面板切换将转换到缩略图，以下是展示。

图片 1.37 image

这个视图展示了所有你的实物模型的缩略图，这对于获得你项目的整体预览是有用的。它允许你立刻看见更多的有关实物模型，而且是一个非常好的用来重排序和整理（例如，重命名和移动到垃圾箱）的视图。

缩略图在查看实物模型和资产时可获得，而且是仅有的垃圾箱可获得的视图。

使用 UI 视图

最新更新！
这个页面已经被更新为 Balsamiq Mockups 3。旧文档在这里。

添加 UI 控件

图片 1.38 image

为了添加 UI 控件到你的实物模型，双击或者拖动一个控件到 UI 库或者输入一个关键词到快速添加工具。

你也可以使用复制和粘贴命令（CTRL/CMD + D）来复制已经在画布上的控件。ALT/Option + 拖动也将复制控件并允许你使用鼠标放置它们。

注意：键盘快捷键的全列表在这儿。

选择 UI 控件

有一些不同的方法来选择 UI 控件。如果你熟悉图形软件，这些应该是不会让人太过惊讶的。

• 点击 UI 控件选择它
• 拖动一个包含了许多 UI 控件的矩形选择它
• SHIFT + 点击一个控件将它添加到选择中
• CTRL/CMD + 点击一个选择的控件将它从选择中除去
• 按住 ALT 来忽略鼠标后的项目并拖动选择，就如在短视频所显示的

为了选择在另一个控件后的控件，右击顶端的控件来打开一个允许你选择它后边控件的菜单。

图片 1.39 image

移动 UI 控件

一旦你已经选择了一个或多个 UI 控件，有一些不同的方法来移动它到画布。

• 你可以同你的鼠标拖动（按下 SHIFT 按键来保持原始的水平或垂直位置）
• 你可以用你键盘的 UP/DOWN/LEFT/RIGHT 键一次“微调”一个像素
• 你可以通过按下 SHIFT 和使用你键盘的 UP/DOWN/LEFT/RIGHT 键用更大的幅度移动它（10 像素）
• 你可以使用以下所示的排列工具移动控件到排列成一个方向。

拍摄和智能指南

当你移动画布上的对象时，Mockups 尽量建议一个在画布上能使用智能指南和与其他对象相关的排列。这使得排列稍许简单一些而且使得你的 Mockups 看起来更简洁。

如果你想要暂时禁用这个特性，你可以当移动或者调整时按住 CTRL/CMD 键，这样拍摄将被关闭。

调整 UI 控件

调整所选择的控件是简单的。你可以仅仅抓取任何所选择矩形的边或角然后拖动它。

如果你想要在仅从一个角上拖动时限制属性，在拖动时按下 SHIFT 键。

你也可以使用键盘来调整选择的控件。CTRL/CMD + ALT + 方向键来以 1 像素的增幅调整，CTRL/CMD + ALT + SHIFT + 方向键来以 10 像素的增幅调整。

调整一些控件到它们的“实际尺寸”的另一种方法是使用在属性检视视图中可以找到的 Auto-Size 功能。

排列 UI 控件

你可以通过选择多个控件和右击打开下面显示的菜单来排列和分布（间距隔开）控件。

图片 1.40 image

同一个选项当多个控件被选择时显示在属性检视视图中。

图片 1.41 image

将 UI 控件分层

你可以将控件分层，就好像它们是实物模型画布上的几页纸。为了这么做，你选择你想要分层的控件并通过右击菜单或者属性检视视图选择可获得的四个分层命令中的一个：置为顶层，上移一层，置为底层，下移一层。键盘快捷键也是可行的。

图片 1.42 image

删除 UI 控件

为了从实物模型画布上移除一些 UI 控件，选择它们并点击 DELETE 键。或者你可以点击工具栏中的垃圾箱图标或从编辑菜单选择 “Delete”。

将 UI 控件分组

有时候你可能想要将一些控件分组来更好地排列它们或者立刻移动它们。为了将一个集合的控件分组，选择它们并在你的键盘上点击 CTRL + G 或者在工具栏编辑菜单中使用 Group 命令。一旦被分组，控件在移动或排列时将表现为只有一个控件在移动或排列。为了解除控件分组，在你的键盘上按下 CTRL + SHIFT + G 或者使用菜单或工具栏中的 Ungroup 命令。组可以被嵌套。

你可以双击一个组来“进入”并且编辑它的内容。这里有一个视频来解释如何使用这个特征：

视频

你可以有选择地通过属性检查器给予一个组名字。这在当你有许多组和当你编辑它们的内容时需要“知道你在哪儿”时会变得很有用。在创建标志时命名组也是很有用的。

剪裁组

剪裁（遮蔽）组仅仅显示它们中所选择的一部分是有可能的。

下面的视频展示了如何使用这个强大的功能：

视频

属性检视视图

最新更新！
这个页面已经被更新为Balsamiq Mockups 3。旧文档在这里。

属性检视视图是一个应用程序右边的面板，它允许你设置一些普通的属性,比如排列，位置和大小以及对特定控件的指定设置（选择状态，文本属性，颜色等等）。这在当查看实物模型，资产和标志时是可获得的。

图片 1.43 image

你可以通过点击上面的切换图标显示并隐藏属性检视视图（键盘快捷键 CTRL/CMD +；或 ALT/Option + Enter）。当隐藏时你也可以通过右击一个控件和选择 “Properties...”展示它。

如果你有多个选择的控件，这会显示所有选择控件和排列以及分布选项通用的属性。

添加注释到你的实物模型，标志和资产

当没有控件被选择时，属性检视视图为选择的实物模型，资产或者标志显示注释。在 Mockups 视图中面板也显示了 mockup alternates。

注意：你可以使用这里描述的语法来规定注释文本的格式，如使文本加粗，加下划线等。

图片 1.44 image

对于资产和标志，它也展示了对象被使用的计数和实物模型的名字。

使用Alternates分支

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

Alternates（有时也指版本或者分支）允许你创建一个单独 mockup 设计的副本，而不需要在你的工程中添加新的 mockups。
在探索理念的设计初级阶段和在靠后一点添加评论的反馈和建议的阶段，创建 alternates 是很有用的方式。

使用 alternates 的一些理由：

• 你想要每一个屏只创建一个 mockups，然而每一个却有很多想法。
• 你想得到设计的改进意见，但却不想被人更改 mockups。
• 你想将你的项目发出去获得反馈意见，而且每一个反馈意见你想单独处理。
• 你想尝试新的设计理念，但并不希望它包含在现有的 mockups 上。

这里是一个综述:

视频

创建 Alternates

当你浏览 mockup 没有选中任何一个控件时，你将在 mockup 注释的下面看到一部分 Property Inspector 面板，名为 "Alternate Versions"。

图片 1.45 alternates-new.png

点击 "+" 图标位于 "Alternate Versions" 旁边来创建一个新的 alternate。

图片 1.46 alternates-create.png

或者使用 Navigator panel 中的上下文菜单。

图片 1.47 alternates-create-navigator.png

这将会创建一个当前 mockup 的拷贝作为 alternate 版本供你修改。但是默认的它将被自动命名为 "Alternate" 加一些随机数和字母来确保名字是唯一的。

图片 1.48 alternates-default.png

alternate 版本的下拉列表中会提示你当前你所工作在 mockup 的哪一个版本。你可以创建任意个 alternates。

注释：你可以为一个 alternate 创建 alternate。当一个 alternate 被选中是点击 "+" 图标会创建一个选中版本的 alternate 而非正式版本。

如果你正在使用的 alternate 版本同时也在 Navigator panel 是正式版本，那么将有 mockup 名插入在 alternate 名之后。

图片 1.49 alternates-default-navigator.png

在 alternate 版本列表的名字上双击或者右键选择 "Rename..."可以进行重命名

图片 1.50 alternates-menu.png

编辑 Alternates

在你创建 alternate 版本之后你可以像对其它 mockup 一样对它进行编辑，包括添加资源和标记。你的修改不会影响主干分支的 mockup(作为 Official Version 显示的)。你也可以在注释面板添加注释来描述你的想法或者用来与其它人来交流它。

图片 1.51 alternates-testimonials.png

从属性面板里的列表或者在 Navigator panel 中的上下文菜单中选择版本的名字来从一个 mockup 的所有 alternate 版本中选择一个版本。你也可以选择回到 Official Version 通过在列表上选择它。

图片 1.52 alternates-menu-navigator.png

注释：如果你连接到包含有 alternate 的 mockup 时，这个链接将会转到在 alternates 表中选中的 mockup 版本。同一个规则应用于[导出](Working with Alternates )。你 mockup 所选择的版本将导出。

升级 Alternates

如果相比于原始的 mockup，你更喜欢另一种 alternate 的话，你可以将其“升级”到官方版本，这将会代替并重写原始版本。

图片 1.53 alternates-promote.png

注释：通过撤销指令(CTRL/CMD + Z)，你有三次撤销该命令的机会。

已升级的 alternate 会被保留，以防你想要将其保存至变化历史记录中。否则的话，你可以将其删除掉。

合并 Alternates

如果你想合并官方版本的 alternate 的某些组件的话，你可以使用合并选项。

图片 1.54 alternates-merge.png

如下图所示，选择 "Merge with Official" 就可以将选中版本中的内容添加到官方版本中 mockup 内容的右边。

图片 1.55 alternates-post-merge.png

如果 alternate 中的注释和原始版中的注释不一样，那么他们同样会通过一条虚的水平线被合并或者分离。

图片 1.56 alternates-post-merge2.png

之后，你就可以手动编辑内容，来创建一个新的官方版本了，这个版本是各个版本里你喜欢的元素的融合。

图片 1.57 alternates-final.png

删除 Alternates

在完成检查或者将各个 alternate 版本整合到官方版本的工作后，你就可以通过 "Discard" 选项来删除你再也不会使用的 alternates 了。

设计 Alternates

有些情况下，你可能需要在几个 mockups 中提出一系列的 alternates 的设计来。这种情况可能会发生在当你在看其他人的 mockups，并且想让他们看看你在整个设计中提出的设计改变的时候。

当你想要重命名一个 alternate 的时候，你可以在重命名对话框的一个选项列表中选择，列表中是已有的 alternate 的名称。这使得在几个 mockups 中使用相同的 alternate 名称变得方便。

图片 1.58 alternates-rename-from-list.png

在紧挨着 Mockups 的 Navigator 选项板中，有一个菜单显示了你的设计中出现的所有 alternates 的名字。

在这个列表中选择一个 alternate，将会选择出所有 mockups 中有相同名称的 alternate。

图片 1.59 alternates-mockups-menu.png

注释：这在概念上相当于在代码库中创建一个分支，除了它只适用于有特定的 alternate 版本名的 mockups。

因此，例如，如果你创建了一系列叫 "Leon's Proposal" 的 alternates 并且适用上面显示的菜单栏来选中那个名字，那么任何包含有名为 "Leon's Proposal" 的 alternate 的 mockup 都会显示出那个 alrenate 版本。

没有同名 alternate 的 Mockups 是不能被更新的。改进、合并和丢弃操作暂时不允许在多个 mockups 之间跨越。

项目信息面板

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

在 Balsamiq Mockups 3 中的新特性是可以为皮肤、字体和被选中的颜色定义一个覆盖整个工程的设置。项目信息面板包含上述这些设置，并且可以在这里为项目添加注释。单击位于属性检视视图图标旁边的图标来触发项目信息面板（快捷键：CTRL/CMD + , )。

图片 1.60 project-info.png

这些设置将应用到工程中的全部 Mockups 中并且将随工程保存(也就是即使工程被关闭并重新打开或者分享给他人这些设置依然存在)。
若想要了解更多有关素描和线框图的区别，可以参见使用皮肤。

默认字体是 Balsamiq Sans ,与之前的版本一样(并不像你想像的那样是 Comic Sans；尽管现在你可以设置成这个字体，但是你们这些喜欢 Comic Sans 的人请离开！)

注释：如果你想使用其他的我们介绍的工程字体，你可以在你创建 Mockups 之前设置它。修改工程字体可能会对工程中已有 Mockups 有不利影响。每种字体有不同的规模和比例，所以切换字体可能会导致重叠或者线条不均匀的情况发生。也许你的工程设置了多种字体比如 "thin","light" 或者 "extrabold" 可能会复写个体控制中的字体格式设置。

快捷键

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

下面这张表列出了在 Balsamiq Mockups 中所有可用的快捷键和修饰符。尽管在桌面版中所有的快捷键都是有效的，但是当你在浏览器中编辑模型时，有些快捷键可能就不管用了。

下面的快捷键适用于 Mockups 的桌面版 3 及以上版本。你可以下载右面的链接以做备忘。

控件使用

图标处理

文本处理

文本格式

特殊的文本宏命令

快速添加

模型文件处理

视图

全屏

2

控件的使用

使用文本控件

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

许多 Mockups UI 控件，像按钮、标签或者数据网格，里面都包含文本。双击控件并输入内容来修改文本。或者，如果你选中了控件，只需按一下回车或者 F2 就可以开始编辑了。单击除了你输入内容的文本框之外的任何一个地方或者按回车或 CTRL + 回车都可以保存编辑。如果你想要放弃对文字的更改，按 Esc 键即可。

有些控件使用某一字符作为分隔符。例如，在标签栏创建多个标签，你可以用逗号分隔它们。

图片 2.1 FirstMockup-tabs_edit.png

或者，在 Tag Cloud 控件中使用一个空格字符来分隔标签。一些其它控件，比如树，使用其它字符。在这样的情况下，控件的默认文本包含了如何使用它的说明。

在编辑 Label 或 Paragraph 控件时，你会发现在编辑框的右下角有一个小数字。这是字符数，这在书写文案或其它情况下很有用。

基本格式

文本样式

你可以使用下列符号来格式化你的标签文本的某一部分。

• 对于斜体字，使用 _this notation_
• 对于超链接，使用 [this notation]
• 对于加粗，使用 *this notation*
• 对于有缺陷的，使用 -this notation-
• 对于下划线，使用 &this notation&
• 对于删除线，使用 ~this notation~
• 对于颜色，使用 {color:#FF0000}this notation{color}
• 对于字号，使用 {size:16}this notation{size}

上述所有的语法作用的文字必须用空格分开，而且下划线作用单位为单词。

注释：

1. 上面的 #FF0000 是 HEX 格式的颜色，与 HTML 中一样。宏可以有 # 号，也可以没有。你也可以使用确切的颜色名（例如 green , yellow 等），你可以移动鼠标到 Property Inspector 上的调色板来找到它们的名字。
2. 看下一个小节来了解如何将[链接文本]转变成具有跳转至网站或者其它 mockups 的功能。
3. 这些格式化语法同样作用于输入到注释面板上的文本，除了斜体和删除线。

这有一个截图显示了上述文本在 Paragraph 控件中的样子，例如：

图片 2.2 italiclinksbold.png

快捷方式几乎在任何更直观的地方都能见到，你可以组合使用上述语法，就出现了斜体加下划线的字，[_this_]
或者 [this]。

一些控件像 Paragraph 或 Label 允许你经过属性检视视图选择不加粗。如果你那么做了，那么*加粗字*还会保持加粗。一些控件默认使用加粗字体，所以在那些控件中使用加粗字体不会用任何变化。

如果你需要使用特殊的格式字符作为实际字符显示，你需要将 *, _, -, [ 和 ] 替换为 *, _, -, [ 和 ]，所以如果你想要显示 "this [is] some text" 并且不想让 "is" 变成一个连接的话，就需要输入 "this [is] some text"。

换行符

大多数控件允许你插入换行符使光标从这一行跳转到下一行。你可以通过在新一行的内容前加 \r 来实现。看下面的一个例子，换行符使用在单选按钮组的第二个元素上。

图片 2.3 linebreak.png

项目符号列表

在一个段落控件中，你可以通过以连字符或者星号加空格开头来创建一个项目符号列表。

\* item1
\* item2
\- item3
\- item4

使文字中的链接生效

如果你使用了上述的链接符号（比如，[这是一个链接]），你可以通过 markdown 语法使链接格式文本成为一个真正的链接。

将链接地址放在括号里写在链接文本的后面就可以实现功能了。链接地址可以是 URL，也可以是在相同目录下另一个 mockup 的名字。下面的这些形式都是有效的。

网站地址：

[Balsamiq Website](balsamiq.com)
[Balsamiq Website](www.balsamiq.com)
[Balsamiq Website](http://www.balsamiq.com)
[Balsamiq Website](http://balsamiq.com)

同一项目中的 Mockups ：

[Features Page](features)

使用这一方法添加链接会使它们在属性检视视图中也显示出来，如下图所示。

文本：

图片 2.4 bracket_links-edit.png

结果：

图片 2.5 bracket_links.png

你可以链接整个控件中的指定字符串。

注释：如果整个控件被链接了，文本链接会失效。如果整个控件后来被释放链接，那么之前的文本链接又会回来。

更多宏命令

lorem

在 Paragraph 或 Text Area 输入 lorem 来使用我们的 Lorem Ipsum 发生器。

图片 2.6 lorem.gif

{mockup-name}

在 Label, Text, Title 或者 Subtitle 控件中输入 {mockup-name} (所有小写字母) 会显示当前 mockup 的名字。

使用数据网格／表格

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

数据网格控件的功能与其它基于文本的控件相似。它使用逗号分隔列，使用换行分隔行。一个基本的三列两行表会像这样：

First Name, Last Name, Email Address
firstname, lastname, email@email.com

你可以在属性检视视图中选择是否将第一行作为表头来显示，同时也可以指定行高、颜色和网格线。

列宽选项

Mockups 使你可以指定独立的数据网格的宽度和队列。

下面有一个简易视频来显示怎么做这些：

视频

在创建列宽时有一些细节值得注意：

• 你必须添加一个指定的文本行作为你的表的最后一个文本行，并且还要被波形括号 {} 包起来
• 对于每一列，如果你想要列宽可以尽可能小到与列中文本匹配，可以设置列宽为 0；或者可以是其它数字
• 使用数字指定列的相对大小，例如 {2,1} 表示“在一个两列数据表格中第一列是第二列的两倍大小”。再如 {70,20,10} 表示“在一个三列数据表格中第一列占总宽度的 70%，第二列占 20%，第三列占 10%。
• 你可以混合使用 0 和除 0 之外的所有其它的数字，例如 {1,0,4}
• 如果你想要单个列对齐，可以在数字之后添加 L,C 或者 R，比如 {0R,2L,1} 意味着“在一个三列组成的数据表格中，第一列尽可能的小，并且靠右对齐，第二列是第三列的两倍大，并且靠左对齐，通过数据网格对齐方式设置（从控制面板）来决定如何对齐这第三列”。

在数据表格中使用图标和下拉菜单

Data Grid 支持排序图标，需要在表头添加如下文本：

• 升序 : ^
• 降序 : v

Data Grid 支持在表格中使用一个单独的复选框或单选按钮，需要使用如下文本：

• 复选框：[] 或 [ ]
• 被勾选的复选框：[x] 或 [v] 或 [o] 或 [*] 或 [X] 或 [V] 或 [O]
• 不确定的复选框：[-]
• 单选按钮：() 或 ( )
• 被选中的单选按钮：(x) 或 (v) 或 (o) 或 (*) 或 (X) 或 (V) 或 (O)
• 不确定的单选按钮：(-)

在 Data Grid 中添加换行

有时候你想在表格中添加一个换行。你可以使用 "\r" 来实现这一功能。
下面的代码示例将显示成两行:

Name\r(job title)

从 Excel 中粘贴数据

有些人喜欢在电子表格比如 Excel 中准备表格。你可以直接从 Excel 中复制和粘贴一些列表格到 Data Grid/Table 组件中。只需要复制/粘贴，它就可以完成了。也可以逆向使用，从 Mockups 到 Excel。

注释：如果你的表格中有逗号，你可以使用斜杠来显示它们，像这样:
1\,000\,000

组件默认逗号和 tab 是定界符。其它所有的都必须在表格之中。

使用图标

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

Balsamiq Mockups 3 包含令人难以置信的 Font Awesome 的图标集。包含了超过 500 个图标，而且种类丰富，从极小到很大的图标都有。而且它还频繁地更新，我们计划无论何时我们发布的新版本都要保持同步更新（了解更多我们为何转换）。

这里几乎有所有你想要的图标，但是如果没有，你可以添加自己的图标或者从 Front Awesome 要求一些新的图标。

图片 2.7 icon-library.png

之前版本 Balsamiq Mockups 中的图标已经重新绘制成新图标。了解在 Balsamiq Mockups 3 项目中如何使用旧图标。

通过 UI 库或 Quick Add 来添加图标

在 Balsamiq 3 同样是新内容，图标现在在 UI 库中有它们自己的类别了，所以你可以像其它控件一样拖拽它们。

图片 2.8 icon-uilibrary.png

不只是这些，它们会在 Quick Add 结果中显示，节省你用名字或关键字来搜索的时间。

图片 2.9 icon-quickadd.png

图标检索到的与你输入匹配的结果将显示在任何 UI 控件的下方。

通过属性检视视图添加和替换图标

一些控件允许你为它们添加图标(比如按钮)。你可以在属性检视视图完成，两种方法任选其一：搜索图标和图标库对话框。

搜索图标

如果你选中的控件支持图标，你可以在属性面板看到搜索图标框。这看起来很像 Quick Add 工具，只需要输入你寻找的图标名字中的几个字母，就会列出许多供选择的图标。只要在你想用的上面单击就可以了。

图片 2.10 icon-search.png

然后你可以调整图标大小从 "X5"(16 px)到 "XXL"(128 px)。你也可以通过搜索框旁边的按钮旋转图标 90 度。

图标库对话框

如果你想浏览所有可用图标，点击图标搜索框右边的图标。

图片 2.11 icon-open-library.png

这样就会显示图标库对话框，在这里你可以分类浏览并预览不同大小的图标。你可以双击一个图标来立即选择或者单击选中在点击 "Select" 按钮添加它。

图片 2.12 icon-library.png

在你选中了一个图标之后，你可以通过属性检视视图重新调整它的大小，旋转它或者移除它。

添加你自己的定制图标

你也可以在你的线框图中添加自己的图标。

通过图标库对话框添加

有两种方式向 Balsamiq Mockups 中添加定制图标。一种是通过图标库对话框。

图片 2.13 icon-import.png

在底部选择 Assets 分类，然后点击小加号按钮，选择一个图标文件然后你的图片将被调整至符合已有图标大小并添加至你的资源中。

通过 Assets 添加

第二种方式是手动添加图标文件到你的资源中。如果你为每一个文件名添加 "icon_" 前缀，并将它们拖拽到你的资源中，它们将出现在图标库和 Quick Add 搜索中。

图片 2.14 icon-custom.png

注释：MAC 用户可以为多个文件快速添加 "icon_" 前缀通过使用批重命名工具 Mac OS X（10.10 或更高版本）。

在图标对话框中，文件名 "icon_" 后面的内容将作为检索的关键字。所以文件名为 icon_airplane.png 的关键字为 "airplane"。你可以将几个标签组合在一起来获得标签的近义词。例如，如果文件被命名为 icon_bag briefcase portfolio.png ，那么所有这些在 icon_ 之后的词都将可搜索。

使用已经存在的定制图标集

有一些图标集用来补足手绘风的 Mockups。这个在 Tips Blogger 的博客列举了一些更手绘风的图标集，可能会有用。

有些图标设计者已经开始创建图标包，兼容我们的命名体制。这里有一些我们知道的。

如果想使用这些图标包，只需要解压图标文件，并把它们拖拽到你的 Assets，像之前描述的那样。如果你正在使用 myBalsamiq，可以通过 Assets 对话框上传图标文件。

创建或准备定制图标的最佳练习

Mockups 使用颜色和透明度，但是如果你添加的图标没有做 Mockups 希望它们做的准备的话，恐怕不会像你想像中的那样显示。下面给出一些建议让你的定制图标更好用。

颜色

• Mockups 使用黑色来代替 100% 不透明度。
• 图标不创建成黑色的会在上色时会有不良影响。
• 我们建议使用黑色作为你的图标的颜色。

透明区域

• Mockups 为图标整个不透明区域着色。
• 为了最佳效果，我们建议将你的图标的白色区域设置为透明。透明的 PNG 文件最佳。

下列例子在左列显示常规图标，在中间列是使用黑色的定制图标，然后最右列是一些看起来不太好的图标。修理最右侧图标的方式是将感叹号变成透明，然后颜色选择黑色。

图片 2.15 customicon-bestpractice.png

使用图像

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

有多种方式可以向你的 mockups 中添加图像。最简单的方法只需要拖拽一个图片文件从你的电脑到你的 Mockups 画布上。来阅读一些更多在你的工程中添加并使用图像的方法吧。

在 Mockups 视图中添加图像

正如上面提到的，从你的电脑上拖拽一个图像到 Balsamiq Mockups 会把它添加到你的画布上。这样做会将图片放在你选中的 Mockups 中并拷贝图像文件到你的 Assets 目录中，所以你可以很轻松的在其他 Mockups 上重复使用它。

你可以在属性检视视图中修改图片属性，和其他 UI 控制一样。

图片 2.16 image-properties.png

图像的特定属性如下：

• 下拉菜单显示你当前图片的名字。打开它会允许你选择一个其他的你已经上传到 Assets 目录中的图像。
• 在下拉菜单旁边的"+" 图标允许你从你的电脑里添加一个图像。这与你拖拽一个图片进来效果相同。
• 单击下载图标打开一个对话框可以通过输入 URL 来从网络上直接或者从网络相册上搜索并添加图像。Mockups 支持 GIF, JPG/JPEG, 和 PNG 图像格式。文件将从网上下载并复制到你的工程中。
• 单击下拉菜单下面的旋转图标每次让你的图像旋转 90 度。
• 单击方框中有一个 "x" 的图标将会还原你的图像成为一个默认的占位符图像。
• 素描！复选框将转换你的图像成为一个仅使用黑白线条描绘的版本。

如果你还没有准备好一个图像文件或者你想使用一个占位符图像来保证你的 mockup 低保真度，你可以从 UI 库中添加一个图像控制，然后它就会显示一个方框里面有一个 "x"。你可以稍后再使用上面提到的图像属性来用一张图像代替它。

图片 2.17 image-default.png

只要图像添加到你的项目中，它将在 UI 库中显示，然后你就可以轻松的将它应用在你项目中的任何 mockup 中。"Assets" 分类下将显示所有你添加到项目中的图像。

图片 2.18 assets-uilibrary.png

这也意味着你可以从 Quick Add 中给你的 mockups 添加图片。只需要输入图像名的前几个字母它就会出现在列表之中。

注释：你可以通过在 UI 库中在图像上单击右键并选择 "Move Image to Trash" 或者从Assets 视图的上下文菜单中删除图像。

图片属性面板还允许你修剪或掩盖图片使得只显示它们的一部分。你可以在这里看一个修剪图像的指导。已经修剪过的图像会在属性面板上显示移除修剪的图标。

除了图像控件，你也可以在 Cover Flow 控制中嵌入图像。

在 Assets 视图中添加图像

Balsamiq Mockups 3 有一个专用的用户接口区域来管理图像，称为 Assets 视图。

图片 2.19 assets.png

assets 视图显示所有已经添加到项目中的图像和常用图标。你可以选择 assets 中的导航视图来看到它。

图片 2.20 assets1.png

你可以通过从你的电脑里拖拽的方式或者使用工具栏的图标来在 Assets 视图中添加图像。

图片 2.21 assets2.png

"Import Asset..."图标允许你从你的电脑里选择一个或多个图像，同时可以在 Mockups 视图里使用 "Download Asset..."得到相同的对话框输入 URL 从网络相册上获得图像。

图片 2.22 add-from-web.png

只要你添加了图像，就可以以缩略图或者是列表的形式查看它们，在缩略图视图也一样。

右侧的属性面板显示了选中图像边框的像素，并且允许你在上面添加注释。面板的下面显示了这个图片被应用在了哪些 Mockups 中（如果有的话）。举个例子，这一般常常用来管理图像，你可以删除一些没有被使用的图像。点击一个 mockup 的名字将跳转至它的 Mockups 视图。

图像管理

像在 Mockups 视图中那样，在 Assets 视图中有一个上下文菜单,你可以在导航栏或者下拉菜单中右键单击来打开。这样你可以重命名、克隆、丢弃或者下载你的图像。

图片 2.23 assets-context-menu.png

重命名图像

在上下文菜单中使用重命名图像会改变你的项目中资源的名字。这不会影响到你的本地文件，因为图像是添加到项目中的一个副本。重命名图像会在你的 mockups 中更新，所以并不需要手动的更新它们。

删除图像

你同样可以使用上下文菜单来从项目中删除图像。正如你的 mockups,删除将会把图像移至回收站，从那里你可以永久地删除或者是还原它们。值得注意的是从 mockups 画布上删除它们并不意味着从工程中删除它们。

将图像从工程保存到本地

你可以在上下文菜单中使用 "Download" 选项来将图像从工程保存到本地，这样你可以从工程中提取出图像来做其他事情。

使用标记

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

标记是 UI 库中一个特殊的组件，它用来添加注释、评论和解释说明性文字。

通常情况下使用的标记有：箭头/下划线，插图编号，记事贴，红叉和花括号。下面的截图显示了 UI 库中提供的可选标记按钮面板，和在页面上的标记组件。

图片 2.24 markup-on.png

锁定和隐藏标记

当你编辑你的标记时，你有时会想看一看没有标记时是什么样子的。你可以通过使用在工具栏右侧尽头的 Show/Hide 选项按钮实现。
下面的插图显示了之前的页面在不显示标记时的样子。

图片 2.25 markup-off.png

标记隐藏与锁定的快捷键

这里有快捷键来控制标记的可见或隐藏。

在 Windows 下按 CTRL + K（在 MAC 下按 CMD + K）来开关显示标记。

在全屏模式下你可以只按 “M”（或 “K”）键。

使用选项标记和隐形标记

有时候你希望你的标记像没有一样，反之亦然。举个例子，你可以使用 iphone 控制作为设计给手机屏幕导航，但是当你提交它并在手机上浏览时，你可能想要隐藏 iphone 自身的样子。

如果你想让你的标记像没有一样，在组件上单击右键在下拉菜单中选择 "Do Not Treat as Markup" 选项。这将允许组件可见无论标记可见选项是可见还是不可见。

你可以使用 "Treat As Markup / Do Not Treat As Markup" 选项在任何组件上。如果你在任何一个普通组件上右键选择 "Treat as Markup"，它都可以像标记一样使用。它将在你选择标记标签为不可见时隐藏起来。

图片 2.26 markup-nonmarkup.png

下面的视频将演示这一过程：

视频

将标记导出为 PNG 或 PDF

如果你想在你导出的 PNG 图片或者 PDF 中显示或隐藏，只需要像上述那样选择标记可见并导出即可。

使用符号

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

Balsamiq Mockups 支持符号的概念。一个符号是一组只有单一功能的控件。它通常用于部分用户的界面，并出现在多个屏幕上。有的其他软件称这个特性为模板，母版页，自定义组件或部件。

从本质上来说，符号让你创建可重用元素，你可以在不同的 Mockups 上使用这些元素。

创建符号

这有两种方法来创建符号，描述如下。

1.在模型视图创建符号

在 Mockups 视图创建一个符号时要给你的符号组件进行分组。你可以创建一个新的分组或使用已经存在的分组。下面的步骤为创建一个新的分组。

1.选择你想要的组件。

图片 2.27 image

2.分组你选择的组件（选择 Edit > Group，单击工具栏中的组图标，或者使用 CTRL/CMD + G）。注意控件将变成蓝色，以显示他们是一组。
3.给组命名
4.在属性面板中单击“转换为符号”按钮

图片 2.28 image

你将会注意到选择组会成为浅绿色。这意味着现在选中的是一个符号的实例，并且你可以在你的工程中重用它。

图片 2.29 image

这个新的符号将显示在 UI 库的符号集合中，可以用在你项目中的所有模型中，这样你可以非常容易地将它添加到任何模型当中。

图片 2.30 image

提示：一旦创建了一个符号，就像其他控件一样，你也可以通过使用快速添加，利用其名称的前几个字母来进行添加。

2.使用符号视图

Balsamiq Mockups 3 是一个专用的视图创建和管理的符号。使用 mockups 视图创建的符号将在这里显示，并且你也可以在这个视图中创建符号。

你可以使用导航图标并选择符号来得到符号视图。你会在左侧的面板列表中看到任何活动的符号。

图片 2.31 image

工具栏包括两个图标可以用来创建符号：一个用于创建一个空白画布，另一个则用于导入。

图片 2.32 image

单击新符号库图标可以创建一个新的符号库。符号视图显示符号的同时，也会显示符号库容器。在符号视图中你可以在创建之前得知他们的区别。阅读它们的解释。

符号与符号库

一个符号库是符号的集合。它能够用来将具有类似特性的符号进行分组。当符号过多的情况时，符号库是用来管理和组织符号的。如果你不是一个符号的专业用户，你可以将符号保持在一个符号库中（然后你可以添加更多的符号库）。

符号视图在他们符号库中以嵌套列表的形式显示，如下所示。

图片 2.33 image

你能选择符号库名称来查看其中所有的符号，或者你可以选择某个符号的名称来仅查看该符号。

当浏览一个符号时，你将会看到一个小浮动栏，其显示链接到符号库的路径。如果你在符号里有分组，这个浮动栏将会帮你导航分组。

符号列表的顶部的图标允许你选择除了你选择的符号外你是否希望看到在符号库中的其他的符号。

图片 2.34 image

注意：一个符号所属的符号库会被 UI 库和快速添加中被忽略。无论符号属于哪个符号库，你都将看到你的符号列表。

在符号视图中创建符号

在符号视图中创建符号，和在模型视图中创建符号类似，只不过你不需要对它们分组。任何控件添加到符号中都会立即成为其中的一部分。

如上所述,你可以添加一个新的符号到现有的符号库或一个新的库。要创建一个新的符号，点击符号库右边的 '+' 图标。这将在那个符号库中创建一个新的符号（比如，叫做 "New Symbol"）。

当你创建一个新的符号库，两个示例符号会自动被创建来帮助你理解符号是怎么工作的。你可以随时修改或删除它们。

提示：你可以给符号库本身添加控件，但是这些控件当符号在你的模型中被使用时将不会被显示。像便签一样控件在添加到符号库时能够用于记录符号，不需要在 UI 中显示出来。

导入符号

除了在视图中创建符号，你也可以导入在先前版本的 Balsamiq 模型创建的符号。点击导入符号库按钮来打开一个对话框，导入 BMML 格式的文件（模型中使用的格式，比如，Mockups To Go）。

图片 2.35 image

导入的符号将被创建在一个新的符号库。

在你的模型中使用符号

你可以像使用其他控件一样在模型中使用符号。你能够从 UI 库中添加它们，或使用快速添加在你的模型中安置符号和其他控件。

这样的创建方法与先前的方法的主要的区别在于，类似于其他分组控件，符号的属性本身是有限的。

图片 2.36 image

当然，最大的优势是您所做的任何改变在你使用符号时都会被更新。请继续阅读，来学习如何编辑符号。

编辑符号

当你在模型画布中选中一个符号，你将看到两个符号属性出现在属性检视视图中： Break Apart 和 Edit Source。

图片 2.37 image

"Break Apart" 将把符号中的空间和选中的符号本身的连接打断，意味着它不再是一个符号（尽管原始符号完好）。你对分解后的符号的任何改变都不会在其他地方更新，你对一个符号的任何改变在它的分解处也都不会被更新。

"Edit Source" ，它会去做你期望它做的事情，它提供给你可以编辑符号的符号视图。可重复使用的符号的主要好处是，如果你需要作出更改，你只需要在一个地方进行更改即可，它会传播到所有的符号实例（使用中的）中去。当你完成编辑符号时，你可以点击画布上的 "Back to Mockups" 按钮。对符号的编辑将会立即显示在你使用的模型中。

图片 2.38 image

提示 你同样可以通过在 UI 库中右击并选择 "Edit Symbol Source" 来进行编辑符号。

重写符号属性

一旦你已经创建了一个符号，你每次使用它的时候可能都会想要做一些小小的更改。

例如想象一个你创建主页或模板时的样本,包含一个 Web 页面的标题和导航。

图片 2.39 image

你的所有网站页面的标题将含有相同的字体大小和位置，但是标题文本是不同的。同样的，你可以在导航栏中选择哪一个页面会被显示。

符号通过允许你在每一次使用符号时覆盖特定的符号属性来实现这一效果。为此,首先双击符号的 "enter it"。虽然这个过程非常类似于编辑一个分组的内容,但你会发现 Mockups for Desktop 会提醒你,你所做的是正在重写一个符号的某些属性。

图片 2.40 image

此时，你可以操控在符号中的每一个控件，就好像你在编辑一个分组。当你在重写符号属性时，一些操作是不能进行的，比如添加，删除或是控件分组。如果你想要编辑所有的实例化符号，单击 "Edit" 按钮。

如果你的操作出现错误，你可以通过撤销来回到上一步操作。如果你想要移除一个属性更改的操作，并且恢复符号的默认属性，你可以单击在属性视图中的绿色的小 "x" 图标。

图片 2.41 image

你同样可以立即撤销你对一个实例化符号的所有操作，只要当你选择整个符号时，在通过属性视图中的 "x" 图标来完成。

图片 2.42 image

在项目中使用符号

如果你想要在多个项目中使用相同的符号，你可以将模型代码导出到另一个项目。你同样可以创建一个模板项目，该操作在 Using Symbols and Assets across Projects 中涉及到。

管理符号

在符号视图中除了可以创建符号和符号库之外，它也是一个可以管理和组织你的符号的好工具。

你可以通过右侧的属性面板来给你的符号和符号库添加标记。

当一个符号被选中时，较低部分的面板会显示符号在使用的模型（如果有的话）。这可以用来查看你是否可以删除你没有在使用的符号。单击模型名称将会链接到模型视图中的模型中。

图片 2.43 image

重命名符号

重命名符号或是符号库时，你可以在左侧的导航栏面板中双击它的名称，或使用文本菜单。

删除符号

你同样可以使用文本菜单从你的项目中删除符号或是符号库。当你删除符号库时，就像是模型或是图像，删除会将它们已送至垃圾箱，在垃圾箱中你可以永久的删除它们，或者是恢复它们。而从符号库中删除一个符号时，删除意味着永久性的删除。

从模型中删除一个符号，就像是图片一样，并不意味着删除符号，而仅仅是一个符号的实例被删除。

克隆符号

克隆符号（同样可以通过文本菜单）可以在你创建类似的符号或是符号库时为你节约宝贵的时间。

使用站点地图

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

你可以通过使用站点地图控件来创建简单的站点地图。

创建站点地图

从 UI 库添加一个 "Site Map" 控件到画布上。

通过双击或选中来编辑控件并且点击回车。

首先编辑一个概念图来创建亲子关系。每一行在你的站点地图中代表一个盒子（页面或结点）。使用连字符在父母下缩进子结点。这是一个示例：

Home
- Products
-- Product 1
-- Product 2
- About Us\rCompany
- Support
- Blog

这是上面所说的概念图：

图片 2.44 image

注意事项和选项

• 只支持单一树：站点地图的第一行代表全局的双亲，而且只存在一个全局双亲，因为站点地图只支持一棵树的存在。如果你想要创建多棵树，请添加多个地图控件。
• 多行文本：在结点中你可以通过使用 \r 来进行换行操作。如：关于 \r 我们
• 你不可以重新设置站点地图的大小，但是如果你不能在你的画布中显示整个地图，你可以将其中一个结点在整个站点地图中进行放大。

图片 2.45 image

3

进阶

导出Mockups

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

导出菜单包括以下导出选项：

图片 3.1 image

请继续阅读对每一条的描述。

以 PDF 形式导出

你可以将 mockups 以 PDF 的形式导出到你的项目中，你可以用来打印或是发送邮件，或呈现给用户，或是在互联网上发送。如果你的 mockups 包含链接，同样可以用 PDF 的形式进行导出，并且允许你自行设计创建一个单击原型。（要了解更多有关链接的信息，请查看Linking Mockups Together。）

注意：当导出 PDF 至 myBalsamiq 时，请查看 myBalsamiq 文档中的 Managing Projects。

导出 PDF 时，选择项 Project > Export to PDF...菜单命令（快捷键：CTRL/CMD + P ）。每一个 mockup 将会在 PDF 中独立的一页中显示。mockup 将会和项目中的顺序保持一致，所以在导出前请安排还他们的顺序。

PDF 导出选项显示如下：

图片 3.2 image

导出之后，将会出现一个通知窗口询问你将 PDF 保存到哪里。点击按钮打开包含的文件夹。

以图片形式导出

如果你想要把你的项目或是 mockups 以图片的形式导出，则在导出菜单那种选择导出 PNG 命令。Export > Mockup to PNG...将把你选中的 mockup 以 PNG 的格式进行保存，当选择 Export > Project to PNGs...时，你的项目中所有的 mockups 将保存为多个独立的图片文件。

将你的 mockups 或者是项目以图片的形式导出的快捷键分别为 CTRL/CMD + R 和 CTRL/CMD + Shift + R。

你同样可以将你 mockups 中的某一些选中控件导出在画布上，并使用导出 PNG 命令。导出对话框将询问你是否想要导出你选中的组件或是整个 mockup。

图片 3.3 image

打印

Balsamiq Mockups 不再支持直接使用打印机打印服务。但是你可以导出为 PDF 并通过 PDF 查看软件进行打印。

将 mockups 导出至另一个项目

使用项目菜单中的 导入/导出 Mockup JSON 命令你可以快速的从一个项目中拷贝 mockups 至另一个项目。导出至 Mockups JSON(Project > Export > Mockup to JSON) 命令将拷贝选中的 mockup 的 Balsamiq Mockups 代码至剪贴板。要将这个 mockup 创建在一个新的项目中，就要切换至这个项目，并且在 Project > Import 菜单中选择 “Import Mockup JSON…” 并且粘贴复制好的代码。

使用先前版本的导出

你同样可以导出你先前 Balsamiq Mockups 的版本或是不支持 new BMPR file format 的项目。

选择 Export > Project to BMMLs ZIP...命令会将你的 mockups 保存为 ZIP 文件，并且在资产子文件夹中包含 BMML 文件（支持 Balsamiq Mockups 版本 2）和图片以及符号。你可以上传这些文件到 myBalsamiq 或者将它解压并且使用老版本的 Balsamiq Mockups 打开 mockups。

注意：这也是导出使用 Confluence 或 JIRA Balsamiq Mockups 的 mockups 的方法。这里为更多细节指导

从其他 Balsamiq 产品导出

如果你正在寻找我们的插件的导出指导，包括 Google Drive, Confluence 和 JIRA，请查看 FAQ 页面

想要从 myBalsamiq 导出，请看这篇文章

导入 Mockups 和符号

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

从先前版本中（BMML 文件）导入 mockups

Balsamiq Mockups 3 会从先前的版本中使用不同文件格式（在这里可以了解更多）。你可以用以下三种方式之一导入你的老版本 mockups：

1.单个BMML文件
2.一个包含 assets 子文件夹中的图片 BMML 文件和符号的文件夹
3.一个包含 assets 子文件夹中的图片 BMML 文件和符号的 ZIP 文件

可以通过打开Project > Import 菜单，将有的项目文件夹或是 ZIP 文件转换为 BMPR 文件。

图片 3.4 image

选择你要导入内容后，你的老文件将会被导入，并且一个新的 BMPR 文件将会被创建。

图片 3.5 image

你同样可以将 BMML 文件拖拽到 Balsamiq Mockups 3 来将他们导入到现在的项目中。

导入符号

如果你有先前版本的 Balsamiq Mockups 创建的符号文件，你能够使用 Import > BMML 符号库命令将他们作为符号导入 Balsamiq Mockups 3。

这将把分组转换为已命名的符号，并且会出现在 UI 库中的符号类里。这个命令非常有用，尤其适用于导入在 Mockups To Go 下载的符号。

从另一个项目中导入 mockups

你能够使用在项目菜单中的 Import/Export Mockup JSON 命令来快速从一个项目拷贝 mockups 到另一个项目。导出至 Mockups JSON (Project > Export > Mockup to JSON) 命令将拷贝选中的 mockup 的 Balsamiq Mockups 代码至剪贴板。要将这个 mockup 创建在一个新的项目中，就要切换至这个项目，并且在 Project > Import 菜单中选择 “Import Mockup JSON…” 并且粘贴复制好的代码。

导入图片

想要学习有关导入图片的知识，查看 Working with Images。

将 Mockups 链接起来

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

您可以将 mockups 链接起来，为你的网站或是软件应用创建一个简单的原型。当你以全屏显示模式或是导出 PDF 方式展示你的项目时，采用将 mockups 链接起来的方法，对展示点击原型或是可用性测试非常有效。

链接 mockups 就像在下拉菜单中选择 mockup 一样简单。简单的点击一个支持链接的控件（这是通常的做法，如果不这样做的话，这里也有一个解决方案）并且你将在属性视图 中看见一个 "Link" 下拉菜单（如果你没有看到，请点击 “查看链接视图”）。

图片 3.6 image

项目中的列表已经预先填充了其他 mockups 的名称。选择其中一个并且链接到它。如果你想要链接到一个还没有创建的 mockup，点击 "Link to a new mockup"，然后一个新的 mockup 将会被创建，并且选中的控件会链接到该 mockup。这个新 mockup 的名字会以一个通知的形式来显示。点击该通知，将会转到这个 mockup 中。

图片 3.7 image

你同样可以链接到网络 URLs 而不是其他 mockups，来展示链接到外部网站或是产品页面的链接。为了这么做，选择 "Link to web address..." 选项，并且在弹出的对话框中输入你要链接到的 URL。

图片 3.8 image

对于有多个链接目标的组件，你将看到如下情况：

图片 3.9 image

注意:想要学习如何在其他控件中的文本字符串创建链接，请查看我们的文章 making links in text actually work。

一旦你已经在下拉菜单中选择了一个 mockup 或是网络页面来进行链接，组件将会在右下角显示一个小箭头。到 mockup 的链接会被现实为一个空白的箭头，而到网络页面的链接将是一个箭头周围有一个小盒子包围着它。如下所示：

图片 3.10 image

当你链接至你的 mockups 时，你能够进入全屏显示模式，并且你可以点击你的链接来测试原型。

在全屏显示模型中，含有链接的组件将会有一个红色的叠加，并且当指针在其上经过时，将会出现一个大指针，并且伴随着链接到的目标文件或是网络页。（这个功能也可以在全屏显示模式设置面板中关闭）。

图片 3.11 image

点击这个链接会直接到链接到的 mockup 文件或是网络页面。网络链接将会在浏览器中的打开。

这里有一个短视频来展示将 mockups 链接起来的过程。

视频

使用皮肤（sketch vs. wireframe）

我们知道一些人需要从内部团队中聚集想法，并且将最好的创意展现给客户或者是利益共享者，在这种情况下默认的 "sketch" 外表风格很难满足要求。应对这种需求，我们创建了一个 "wireframe" 外表风格，能够告别粗糙的手绘风格，取而代之的是更加鲜活，干净的线框元素。

从 sketch 转换为 wireframe 皮肤风格

想要转换外表风格，要到项目信息面板并且将外表设置为 "Wireframe"。

图片 3.12 image

这个特性允许你使用粗糙的外表风格来显示你的想法，然后再通过菜单选择外表风格，来将你所有的控件转换为干净的风格。其中包括图标的所有元素都会被转换。

下面的截图分别展示了两种风格的对比。可以点击图片看更加清晰地大图。

图片 3.13 image

应该使用哪种皮肤风格

很高兴你能够问这个问题;-) 简单的说，我们仍然认为在使用 mockup 时 sketch 皮肤风格在大多数时候更加合适。

我们添加 wireframe 皮肤风格的意图主要是给你的 Mockups 添加更多的逻辑性，这有利于展示给客户或是利益共享者，人们也许会不经意间对你努力相处的创意有所打折，仅仅因为你的展示就像是画在餐巾上的素描。我们不愿意你的努力工作被轻视，仅仅因为他看上去不够专业。

然而，当你在进行设计时，原始的 sketch 皮肤风格仍然提供它已经含有的所有优点。它故意的做成看上去非常粗糙，这是因为想要通过这样来鼓励设计者去尝试更多的创意去不断实验和修改来完成最好的设计。wireframe 皮肤风格能够很快的让你去完成一个特定的设计，因为他看起来就好像是已经完成的了，或者当你在考虑工作细节时，它会提示你调整对齐，字体颜色等。

wireframe 皮肤风格让你的设计看上去感觉已经完成，而 sketch 皮肤风格则让你的设计看上去还是不完美的，这将指引你继续提出问题并进行探索。下面对草图和原型的不同的描述同样可以应用到 sketch 和 wireframe 皮肤风格的不同。

图片 3.14 image

来源：Bill Buxton，Sketching User Experiences

因此，虽然你可以在设计过程中的任何阶段使用 wireframe 皮肤风格，但是我们不推荐用它代替 sketch 皮肤，而是将它作为 sketch 的一个后续。它扩展了 Mockups 的功能，使他更适合在产品开发过程中的演示或是推销，而不是构思和设计阶段。

在一开始，Balsamiq Mockups 就被优化成为产品设计阶段的新颖点，并且在未来会继续如此。我们仍然没有任何计划去为我们的产品添加花哨的交互行为，我们非常满意我们现在做的事。

全屏演示模式

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

Mockups 包含了全屏演示模式来展示你的线框给利益共享者或是用于可用性测试。

点击 Mockups 右上角的全屏显示图标，即可进入全屏演示模式，或者在视图菜单中选择“全屏演示”，或者直接使用快捷键 CTRL/CMD + F。

图片 3.15 image

Mockups 将会扩大直到占据整个屏幕（为了消除干扰），并且你的 mockup 将会集中在屏幕上。

你可以使用左上方的图标来导航 mockups。最左边的图标可以控制顶部菜单的开关。你可以将顶部菜单关闭来移除 mockup 以外的任何东西（甚至图标也会消失，鼠标指针经过时才会出现），当你在做可用性测试时，这样非常有利于得到最真实的体验。

图片 3.16 image

在默认情况下，你将会看到一个大的蓝色的箭头来代替常规的鼠标指针。这有利于演示你的 mockups。箭头将会指向屏幕的中间来让出更多的空间给你的 mockup。

你可以通过在全屏设置中关闭大蓝色箭头，点击右上角的齿轮图标可以打开设置面板。

图片 3.17 image

设置面板同样有一个选项来控制打开和关闭链接提示。当链接提示打开时，包含的链接将显示为粉红色叠加，所以很容易被发现。

标记设置是为了显示或隐藏标记元素，像是便签、箭头和插图（UI 库中 Markup 标签下的任何控件）。如果你只想看你的 UI 而不看注释时，这将是非常有用的。

最后需要设置视图以缩小它来适应最大的 mockup。所有其他的 mockup 相对于最大的 mockup 都将被扩大。

这里的每一个设置都是有快捷键的，在面板中设置的名称后面会显示快捷键。在全屏模式中不需要修饰键。（如要获得链接提示，仅需 L，而不是 CTRL/CMD + L）

紧接着设置图标的信息图表将会打开一个面板来查看并编辑选定 mockup 的记录，就像正常的编辑模式。

点击 ESC 键或点击右下角的图标将会退出全屏演示模式。

Balsamiq Mockups 延伸内容

一个欣欣向荣的用户群体

使用 Balsamiq Mockups 意味着你加入了一个不断发展壮大的组织，这里有程序员，设计师，产品经理和产品可用性专家们，他们都热衷于创造能够使用户快乐得生活的软件和 Web 网站。

本页对一些可能对你有用的社区工具和网站做了突出标记。但除注明外，我们并不属于以下产品的制造商。

更多的 UI 控件

• MockupsToGo 是用户准备使用的 UI 组件和使用 Balsamiq Mockups 的设计模式集合。新的模式将添加所有的时间 - 我们希望你会想贡献更多！
• Mock4U 是一套适用于 Balsamiq Mockups 的 UML 模板。
• Blackboard Learn Symbols 是一系列有价值的产品，它主要帮助设计针对自定义 Blackboard Learn（9.0 和 9.1）扩展项的用户接口。
• Charts for Mockups 是 Balsamiq Mockups 中一个包含 18 个附加的图形和图表的库。

模板

• Bootstrap and UX Deliverable Templates 都包含在我们的创建可克隆项目模板的教程中。
• Landing Pages Templates by Good UI 提供了一组用于转换集中登陆页面模板。第一个样品是免费的。
• Magento Wireframes 是一套由 NuBlue 创建的用于 Magento 的桌面和移动布局模板。
• Windows Store Apps Design Library 提供专门设计的模板和控件来帮助你勾勒出一个 Windows 应用商店的应用程序的设计。由微软制造。
• Sharepoint Templates 由来自 Flucidity 的 Matthew Hughes 制作。
• Bootstrap Grid Template 由 Harry Budianto 制作。

自定义图标包

准备拖放到资产里的图标都会使用我们的 icon_file 命名约定：

• Hand Drawn Icons
• Google Material Design icons
• Doodlekit Icons
• Font Awesome 现在包含在 Balsamiq Mockups 3!

关于如何使用自定义图标包的说明在这里。

用户测试模型

如果是使用 myBalsamiq 做出的原型，用户可以用以下工具进行测试：

• 用户使用 UsersThink 测试你的 mybalsamiq 原型
• 用户使用 UserTesting.com 测试你的 mybalsamiq 原型
• 如何测试你的 mybalsamiq loop11 原型
• 用户使用 Usabilla 测试你的 mybalsamiq 线框图
• 用户使用 Kupima 测试你的 mybalsamiq 原型
• 用户使用 UserZoom 测试你的 mybalsamiq 原型
• 用链接查看器给你的 ipad 和 iPhone 样机演示 （也可以用 Mockups for Desktop）
• 学习更多......

你也可以使用如下的工具来测试用任何版本的 Mockups 创建的模型：

• 用户使用 HeatData 测试你的移动 Balsamiq 原型

更多的社区！

• UX Apprentice 是一项为新的用户进行设计体验建设的资源。
• 在 Balsamiq forums 论坛上的问题总是能得到迅速的且值得参考的答案，而且在这里新的功能也总是以协作和开放进行设计。大家可以看一看！
• Twitter 爱我们 ，我们也爱它！你可以关注 @balsamiq 账号来实时了解我们正在做的项目，或者你只需要简单地 在推特搜索 “Balsamiq” 就可以看到人们对我们的看法。
• 成为 Facebook 上 Balsamiq Mockups 账号 的粉丝，这样你就可以在这里随时与 Mockups 的其他爱好者进行交流讨论！了解更多......
• 我们为赞助行为感到骄傲 我们赞助了最好的项目，博客和相关网站的 IA 和 UX，以及初创公司。这就是我们帮助我们社区发展的方法。了解更多......
• 针对于 UX Training 的免费 myBalsamiq。如果你是一个产品可用性的研究者，你可能会对我们的免费 mybalsamiq UX 培训感兴趣。了解更多......

其他可与 Mockups 协作的产品（第2版）

Balsamiq Mockups 第三版 使用了 一种新的文件格式 ，而这种格式与这里的很多工具不能兼容。所以如果你想使用它们，你应该阅读有关的 导入和 导出 BMML 文件。

请注意，我们不是这些工具中任何一个的运营商，我们不能保证他们会按需要继续支持工作。

• Frontify 是一个 Web 应用程序，用于创建的规格说明书，轻原型，和关于你的 PNG 文件和 mybalsamiq 原型样机的风格导向。
• Flairbuilder 是一个原型工具，用以引入 BMML 文件
• MockGen 将网页转化为 Balsamiq Mockups
• iMockups 是一个 ipad 应用程序用以导出 BMML 文件。在我们的路线图上也有一个 ipad 的应用
• 如果你使用 SWT ，你会喜欢这个为 BMML 引入者提供的开源的 SWT
• LiveMockups 是一个应用程序，可以帮助你在 iPhone 或 ipad 上展示你的 Mockups 原型
• Wirify Pro 是一个书签，可以将网页转换为 BMML 模型
• Mockups.me 是一个 ipad，Android，Web 和桌面的线框应用程序，并导入或导出 BMML 文件
• mockupsNode 是一个 NodeJS 模块，可以读取，处理和写 BMML 文件
• Mockups Strings Extractor 是一个 Python 脚本，可以从 Balsamiq Mockups 文件提取文本字符串（开源代码！）
• Advanced Mockup Strings Extractor 是一个脚本，可以提取模型到 XML，使之对翻译系统可读
• Excel Calendar Tool for Balsamiq 是一个 Excel 文件，让你轻松地对你指定的显示一个（或两个）指定月的日历中生成 Balsamiq Mockups 标记
• Table Editor 是一个在线工具，可以输入表格数并将其导出到 Balsamiq Mockups 的格式化文本
• ReqWriter Pro 从 Balsamiq Mockups 文中生成一个产品需求文档
• SpeedWapp 将 BMML 文件导入它们的动态网页生成器

将你的模型输出到代码（第2版）

Balsamiq Mockups 第三版使用了一种新的文件格式，而这种格式与这里的很多工具不能兼容。所以如果你想使用它们，你应该阅读有关的导入和导出 BMML 文件。

请注意，我们不是这些工具中任何一个的运营商，我们不能保证他们会按需要继续支持工作。

Web

• HTML/CSS ：PHP Mockup to HTML exporter（开源）
• HTML/CSS：nedeco converter（免费）
• HTML/JS 或 GWT：为 SmartClient 或智能 GWT 应用 Smart GWT 开发的 Reify 转换模型（商业，博客介绍）
• 以HTML/CSS/JS：尝试 Napkee（博客介绍）

Flash

• MXML/AS:尝试 Napkee（博客介绍）
• MXML: 尝试 QXmlEdit（开源）

Images

• PNGs: 尝试这一组命令行脚本或这个 Ruby 脚本来批量生成 mockup 的图像。

其他应用

• 一个三层应用程序：尝试 WebORB Exporter
• 一个使用 MS Word 的活应用 ：尝试 SoftwareServant（博客介绍 ）
• XAML：了解 MockupToXaml 项目（开源）

想要在一个服务器上通过命令行运行 Mockups？创造这些源文件脚本的 Ian Norton 将可以提供帮助。

加入我们！

你还知道除此以外的其他的模型相关的工具或网站么，或是你在设计一个相关模型吗？跟我们取得联系！我们非常希望我们能对你有所帮助！

4

常见问题解答（FAQ）

Mockups 是否自动保存已打开的文件？

最近更新！

本页已更新为 Balsamiq Mockups 3。旧文档都在这里。

是的！Balsamiq Mockups for Desktop 会在每发生一个改变后就立即自动保存，所以你不会失去任何工作，你也不会在试图退出程序时一直被烦人的对话框窃听。只有当你想要关闭一个之前从来没有保存过的工程时，你才会收到系统对你是否选择保存的询问。

我们还在自动保存过程中为每一个项目创建了一个备份以防止主文件发生的一些意外状况。

我们的网络版，myBalsamiq，同样具有自动保存功能，它可以保存在浏览器缓存中的一个版本的所有文件以防应用程序意外崩溃结束。如果应用程序崩溃或到服务器上的连接断开，那么任何未保存的更改都将在你下次打开应用程序时恢复。

在 Mockups 汇总中你可能必须得首先恢复自动保存的总汇页。你可以在你的草稿中找到它，也可以通过重新编辑没有保存（这里有更多细节）的页面找到它。你创建的任何 Mockups 都应存放在汇总的附件中。

Mockups 是否可以将我的原型图分享给客户端？

最近更新！

本页已更新为 Balsamiq Mockups 3。旧文档都在这里。

是的！Mockups 是为合作而设计的，所以有几个不同的方法来实现这种要求。你最好的选择是将交互式 PDF 或直接将你的 Balsamiq 文件发送给你的客户端。

共享 PDF 文件

为创建一个交互式 PDF，你可以发电子邮件，放到网上，甚至显示在移动设备上，第一次使用我们的链接功能链接你的模型在一起。然后导出您的项目作为一个 PDF 使用，通过菜单 “Project > Export > Project to PDF...”。这样一个单一的 PDF 文件将被创建，每一个页面都有一个模型。单击你所创建的链接，这应该将 PDF 从一个模型跳到另一个。

共享 Balsamiq 文件

另一种分享你的工作的方式是通过电子邮件直接发送 Balsamiq 文件（有 .bmpr 扩展名的文件）给你的客户端，和一个下载 Balsamiq Mockups 的链接 - http://balsamiq.com/download - 如果他们没有的话。

告诉你的客户端安装 Balsamiq Mockups 并打开你要发送的文件（或几个文件）。他们可以选择全屏点击或查看编辑器中的模型。在 30 天的试用期内他们可以改变和保存这些文件。但当试用期结束，他们将无法保存编辑，不过他们仍然可以查看。

共享 PNG 图片

你可以导出你的所有 mockups 的 PNG 图像，并且你可以发送给你的客户端。了解更多。

使用 myBalsamiq!

最后但并非最不重要的，你可以将你的文件上传到 myBalsamiq，我们的基于网络的应用程序提供了内置的评论，分支和模型修订历史。 学习更多 myBalsamiq，也可查看如何在 mybalsamiq 用外部客户端分享你的工作。

我能导出 Mockup 笔记吗？

最近更新！

本页已更新为 Balsamiq Mockups 3。旧文档都在这里。

当你将你的模型导出到 PDF，你可以选择同时导出你在 mockup 笔记面板里写下的笔记，可以通过检查标记框 “包括 mockup 笔记”来实现导出。

输出图像不包括 mockup 笔记。

另一种方式来分享 mockup 笔记的方式是共享项目文件。

如果你使用的是 mybalsamiq，那么你可以邀请其他人加入你的项目，他们可以看到你所做的笔记，评论你所做的工作并添加自己的评论。

Mockups 能导出为 HTML/CSS/JS，XAML，Ruby等格式吗？

最近更新！

本页已更新为 Balsamiq Mockups 3。旧文档都在这里。

不能直接导出，答案是不；

这对于我们这样的小公司来说需要跟踪和导出太多的技术，所以我们不打算在近期一段时间内对导出能力本身做增加。

当然也有一些项目以各种不同的方式拓展了 Balsamiq Mockups；你可以在我们的扩展页面找到他们。

如果你想写模型的一个扩展，也请你与我们取得联系，我们会尽我们所能帮助你。

我可以跨项目使用符号和资源吗？

最近更新！

本页已更新为 Balsamiq Mockups 3。旧文档都在这里。

现在，Balsamiq Mockups 为一个单项目文件约束了符号，图像和自定义图标，我们不再支持引用本工程以外的可用于整个项目的文件（以前称为“账户资产”）。使用帐户资产往往会在文件被移动时或网络驱动器断开时或模型通过电子邮件发送时导致图像或符号的丢失。

但是你可能还想使用共同的项目资产，例如一个标志形象或自定义控件的符号库。在这种情况下，我们建议创建一个 Balsamiq 项目作为新项目的模板。请阅读说明。

首先创建一个新的项目。给它添加任何你认为在未来你会想得到的将用于你所有的项目的图片，图标，或符号。如果你是为了一个特定的平台设计（例如，移动或 Web ）你也可以向你的第一个模型添加一个控件如浏览器，窗口或 iPhone 。这就是你的模板工程。你可能会将其保存下来，并取一个包括“模板”这个单词的模板名。

然后，当你想使用这个模板时可以创建一个新的项目，你可以打开它（如果它不是已经打开），从菜单选择 Project > Save Project As...（CTRL/CMD + Shift + S）来保存内容，包括资产，作为一个新的项目。在新的项目中继续你的工作。你可以很容易地通过从一个内置的常用资产库启动来为所有的新项目做此工作。

我可以添加自定义控件或图标吗?

最近更新！

本页已更新为 Balsamiq Mockups 3。旧文档都在这里。

Mockups for Desktop 支持符号的概念（也称为模板，母版页，自定义组件，组件等）。请阅读我们的符号说明文件学习更多关于这个强大的功能。

模型还提供接口，使您能够为任何支持图标控件的操作添加自己的自定义图标，请看自定义图标说明文件学习。

如果除上述情况之外，你有一个具体到你的项目中的非常特殊的控制，我们建议你看一下导入图像的属性特征，它甚至可能会缩略你的图片来使其符合其它程序。

对于由简单的模拟控件组成的复杂的控件，标识对此种情况来说是理想的。

您可能对 Mockups To Go 也有兴趣，这是一个用户分散式的对可以使用的 UI 集合和使用 Balsamiq Mockups 建设的设计模式的集合。

我可以在不同的 mockups 之间重用已有的元素吗？

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

是的！利用 Symbols 功能 。

你可能也对 Mockups To Go 感兴趣, Mockups To Go 是一个由用户贡献的现成的 UI 组件集合，也是一个由 Balsamiq Mockups 构建的设计模式。

Mockups 有比较正式的皮肤吗？

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

如果您想让您的线框更加精良，少些人工痕迹，那就试试线框皮肤吧！

如果您想更换皮肤，您可以到项目信息面板来把皮肤设置成“线框”。

图片 4.2 image

下面的截图是一组各自的样品设计对比，分别是默认的“素描”皮肤和“线框”皮肤。点击来观看大图。

图片 4.3 image

想了解更多的话，点击在这里使用皮肤。

我的屏幕较小，如何能够看到更大的画布？

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

正如在 Mockups Application Overview 中描述的那样，用户界面分为五个部分。基本工作区域是 Canvas 而且它总是在屏幕中央可见的。不管怎样，可能你不需要或者不想随时看到其它区域。

源于这个原因，UI Library, Navigator, 和 Properties panels 均可以使用鼠标或者键盘自由选择开关。

下图中这些可以控制这些面板自由开关的图标已被高亮显示。

图片 4.4 panels-toggle-on.png

控制开关的快捷键列表:

• UI Library: CTRL + L 或 CTRL + F1
• Navigator: CTRL + J
• Properties Panel: CTRL + ; 或者 ALT + ENTER
• Project Info Panel: CTRL + ,

隐藏所有面板之后用户界面是这样的:

图片 4.5 panels-toggle-off.png

当面板没有被显示的时候，关联的工具栏图标从蓝色变成了白色。

值得注意的时当 UI Library 被隐藏时你还可以使用 Quick Add 来在画布上添加控件。还有当 Navigator Panel 隐藏时，你可以使用 additional toolbar icons 来在你的 mockup 之间切换。

我可以在微软 Sharepoint 服务器上保存 Mockups 文件吗？

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

如果您想要在微软 Sharepoint 服务器上保存 Mockups 文件，您需要让您的服务器管理员在 IIS 上添加下列的 mime 类型。

.bmpr application/vnd.balsamiq.bmpr

什么是自定义属性？

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

如果您想要使用可以扩展 Mockups 的第三方工具的其中一种，或者您想要为开发者增添额外细节，又或者您想要做其它任何事情的话，这个特征都是可用的。

您可以在您的模型上右键单击任何控制键并且在右键菜单上选择 "Custom Properties..."。

图片 4.6 image

这会打开一个如下的对话框。

图片 4.7 image

在这个对话框中您可以为已经选择好的控制键添加自定义 ID 和与它对应的自定义数据。Balsamiq Mockups 不会使用这些属性，但是这些属性会随着剩余的模型被保存在工程中。

其它工具可以使用这些数据来做一些高级的东西，比如当控制键被点击或者只是单纯地使用您在导出代码中指定的自定义 ID 时，允许您指定的一些 JavaScript 语句来运行。

我可以使用命令行安装 Mockups 吗？

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

Mockups for Desktop 可以通过以下指令被注册或注销：

指令

Balsamiq Mockups register organizationName serialKey

用提供的一系列关键信息注册 Balsamiq Mockups

Balsamiq Mockups unregister

从这台电脑上注销 Mockups

额外的资源

寻找如何在众多终端机器上执行 Mockups for Desktop 的静默安装的信息？点击这里。

对于某一个Mockup，最大的画布大小是多少？

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

一个 Mockups 最大的画布大小是 4056x4056 像素。Mockups 会自动调整画布大小来适应您的内容。这是 Adobe AIR 应用允许的最大画布大小。如果在将来框架允许我们增大画布尺寸的话，我们会那么做的。

如果您的线框超过 4056 像素边框出现不平整情况，您可以用断裂线来表示延续。这就是设计者对线框规格经常做的事。Mockups 在浏览器，矩形，几何形和水平尺控制中都支持断裂线。

图片 4.8 image

如何找到你的本地数据存储文件夹？

最近已经上传完毕！

这篇网页是为了 Balsamiq Mockups 3 而上传的。原来的文件您可以点击这里来观看。

Balsamiq Mockups for Desktop 像许多其它应用一样，在您的硬盘上新建一个文件夹来储存本地数据和一些个人偏好。就像下图一样。

图片 4.9 image

您最好不要打开这个文件夹，但在故障排查中可能会需要您来定位这个文件夹。找到它最简单的方式是打开 “About” 对话框并点击 "Open Local Store Folder" 链接。

图片 4.10 image

仅供参考，以下是一些可运行 Balsamiq Mockups for Desktop 的操作系统中这个文件夹的位置：

• 在 Windows XP 操作系统中：
  C:\Documents and Settings\<username>\Application Data\BalsamiqMockups3.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local Store
  
• 在 Mac OS X 操作系统中：
  <your user home>/Library/Preferences/BalsamiqMockups3.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1/Local Store
  

对 Mac OS X Lion 用户的提醒： ~/Library 文件夹是默认隐藏的。想要使它再次可见，打开一个终端窗口并输入： chflags nohidden ~/Library

• 对 Windows Vista 和其后版本操作系统中： C:\Users\<yourusername>\AppData\Roaming\BalsamiqMockups3.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local Store
  

在 Windows 7 操作系统中，如果您看不见 Documents and Settings 这个文件夹，您可能需要“显示隐藏系统文件”。
1. 打开 Windows 资源管理器(Start+E)
2. 选择菜单项 “Organize > Folder and search options.”
3. 选择视图选项卡并且取消勾选“隐藏受保护的操作系统文件” 现在 Documents and Settings 文件夹应该出现在 Windows 资源管理器位置 C:\ 之下。如果没有出现，您也需要重新启动电脑。

• 在 Linux 操作系统中: ~/.appdata/BalsamiqMockups3.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1/Local Store
  

更多信息请访问

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/