线框图软件(Balsamiq Wireframes)

　　Balsamiq Wireframes是一款用户界面设计软件，可以帮助用户设计客户端界面，可以设计网站界面，您可以在软件添加很多控件，支持高级控件，例如数据网格，站点地图，树状窗格，数据网格控件的功能类似于许多其他基于文本的控件。它使用逗号作为列分隔符，并使用换行作为行，一些控件具有更强大的文本编辑功能，您可以选择是否在属性检查器中将第一行显示为标题行，以及指定行高，行颜色和网格线，可以使用与其他文本控件相同的语法将“数据网格”中的文本设置为粗体，斜体等格式，Balsamiq线框允许您为每个“数据网格”列指定单独的宽度和对齐选项，这里小编推荐的是Balsamiq Wireframes破解版，需要的朋友就下载吧！

软件功能

　　Balsamiq线框编辑器界面由五个主要区域组成：工具栏，UI库，画布，导航器面板和属性面板。每个都在下面描述。

　　1、工具列

　　工具栏包含一系列图标，用于在用户界面的其他区域执行操作。

　　第一组图标如下所述。

　　显示/隐藏左面板

　　以缩略图网格查看线框

　　创建一个新的线框

　　线框动作（重命名等）并在线框之间导航（隐藏左面板时显示）

　　转到下一个或上一个线框（隐藏左侧面板时显示）

　　工具栏中心的图标组用于常用的画布功能。这些可能是您从文本编辑器或其他绘图工具中习惯的操作，例如复制，粘贴，分组，对齐和缩放。最后一个图标用于切换标记（在此处阅读有关标记的信息）。

　　最右边的工具栏的最后部分包含“ 快速添加”工具，UI库切换图标，“ 注释”面板，“ 属性检查器”和“ 项目信息面板”，以及进入全屏演示模式的图标。

　　工具栏的顶部显示了项目的名称，您可以双击该名称以重命名（或使用应用程序菜单选项）。

　　2、快速添加工具

　　快速添加工具是将UI控件添加到线框的最快方法。要使用快速添加，请在快速添加输入框内单击（或按/或+输入）。

　　在UI控件或图标的名称中输入几个字母，“快速添加”将为您显示建议列表。使用鼠标或箭头键向下滚动列表，然后单击或按ENTER将控件或图标添加到画布上。您还可以使用SHIFT+ENTER将控件放置在鼠标光标在画布上的位置。

　　例如，键入“bu”将显示一个包含“按钮”，“按钮栏”，“帮助按钮”，“单选按钮”和“圆形按钮”的列表。另一方面，键入“hel”仅返回“帮助按钮”。按此ESC键可使列表消失。

　　提示：熟悉快速添加后，您可以隐藏UI库，仅使用快速添加将UI元素添加到线框。这样可以最大化您的画布面积和速度。

　　3、UI库

　　UI库或用户界面控件库是工具栏正下方的一长串用户界面控件。它列出了包括的所有UI控件类型以及Assets，Icon和Symbols。UI库的主要目的是允许您将UI控件添加到画布，但是您也可以使用它来查看可行的方法并为线框获取灵感。

　　要将新的UI控件添加到画布上，请选择要添加的控件类型，然后将其拖动到下面的画布上，或者双击即可将其放置在画布上。

　　可以通过以下几种方式来打开和关闭UI库：单击“快速添加”框右侧的图标，使用键盘快捷键

　　或从应用程序菜单中选择“视图”>“UI库”。

　　4、帆布

　　这是编辑器的主要工作区域，您的UI线框将在其中发挥作用。向其中添加UI控件后，就可以移动它们，调整它们的大小并对其进行调整，直到准备好UI线框为止。请参阅添加和安排UI控件以了解更多信息。

　　画布随着应用程序窗口的增长和缩小，因此您可以根据需要为更大的线框腾出空间。画布的最大尺寸为10000x10000像素。

　　注意：如果您使用的是小屏幕或非常大的线框，则可能需要阅读本部分的“隐藏面板”以为画布留出更多空间。

　　5、导航器面板

　　左侧的导航器面板显示项目中的线框，资产或符号的列表。当前选定的对象突出显示。

　　您可以通过在导航器面板中按住CTRL或SHIFT单击来选择多个对象。线框和资产可以作为纯文本列表或缩略图预览查看。

　　您可以通过单击面板上方的导航器切换图标来隐藏导航器面板

新版特色

　　编辑Balsamiq云项目

　　这是人们多年来一直要求的，终于到了。使用Balsamiq Wireframes for Desktop，您可以登录Balsamiq Cloud并访问您所有基于云的项目。

　　新的全屏模式

　　根据从上一版本中学到的知识，我们花了很多时间对全屏演示模式进行现代化改造。新版本具有更高的可定制性，更适合用户测试，并且使用起来感觉更好。

　　强大的评论系统

　　对我们的网络应用程序最大的要求之一就是最终将其返回到桌面。现在，您可以向项目添加评论和标注，然后让您的协作者直接对其进行响应。

　　与线框集成

　　Wireframes to Go是我们社区驱动的自定义控制站点。如果您发现自己除了我们提供的控件之外还需要其他控件，那么您很有可能会在这里找到它！

　　使用Balsamiq桌面线框，您可以直接从编辑器访问和导入这些控件。

　　和更多...

　　列出所有差异需要一段时间。强烈要求使用较大的画布或高分辨率的SVG PDF导出之类的功能，但它们并不能带来很大的回响。Balsamiq台式机线框有很多新功能，但您应该有宾至如归的感觉。

安装方法

　　1、打开Balsamiq Wireframes 4.0.28.exe软件直接安装

　　2、点击install就可以安装软件

　　3、提示软件的安装进度，等待安装结束就可以了

　　4、如图所示，软件已经成功安装到你的电脑，点击完成

　　5、将补丁BalsamiqWireframesCommon.dll复制到安装地址替换就可以破解软件

使用说明

　　1、添加线框

　　使用图标将新的线框添加到您的项目。

　　2、添加控件

　　使用QuickAdd搜索和添加控件，或切换Ul库以将控件拖到画布上。

　　3、查找符号模板

　　想要从模板开始还是找到更多可用于线框的控件？ 使用WireframesToGo查找符号和模板。

　　4、可以直接将需要使用的项目拖动到软件界面，从而设置线框参数

　　5、软件提供很多符号，可以添加Android、ico、IOS图标到项目

　　6、小编不会使用这款软件所以就不多介绍了，如果你需要学习Balsamiq Wireframes就点击帮助

官方教程

　　添加UI控件

　　要将UI控件添加到模型中，请双击或拖动UI库中的控件，或在“快速添加”工具中键入关键字。

　　您还可以使用复制和粘贴或重复命令（CTRL/ ⌘+ D）复制画布上已有的控件。ALT/ OPTION+拖动还将复制控件，并允许您使用鼠标放置它们。

　　选择UI控件

　　有几种不同的方法可以选择UI控件。如果您熟悉图形软件，这些也就不足为奇了。

　　单击UI控件将其选中

　　拖动一个包含许多UI控件的矩形将其选中

　　SHIFT+单击控件将其添加到选择中

　　CTRL/ ⌘+单击选定控件上的将其从选择中删除

　　按住ALT可忽略鼠标后面的项目并拖动选择

　　要选择另一个控件后面的控件，请在顶部控件上单击鼠标右键以弹出一个菜单，该菜单允许您选择它后面的控件。

　　移动UI控件

　　选择一个或多个UI控件后，有几种不同的方法可以在画布上移动它。

　　您可以用鼠标拖动它（按住SHIFT以保持原始水平或垂直位置）

　　您可以使用键盘的↑↓←→按键一次“微移”一个像素

　　您可以按住SHIFT键盘上的↑↓←→键，以更大的步长（10像素）移动它

　　您可以使用以下所示的对齐工具来移动控件，使其在一个方向上对齐

　　捕捉和智能指南

　　当您在画布上移动对象时，编辑器会尝试使用智能向导来建议相对于画布上其他对象的对齐方式。这使对齐更加容易，并使线框通常看起来更整洁。

　　如果要暂时禁用此功能，可以在移动或调整大小时按住CTRL/ ⌘，然后将关闭捕捉。

　　调整UI控件的大小

　　调整所选控件的大小很容易。您可以抓住选择矩形的任何边缘或角落并拖动它。

　　如果要在从角落拖动时限制比例，请在拖动时按住SHIFT。

　　您也可以使用键盘来调整所选控件的大小。CTRL/ ⌘+ ALT+ ↑↓←→以1px的增量调整大小，CTRL/ ⌘+ ALT+ SHIFT+ ↑↓←→以10px的增量调整大小。

　　将某些控件调整为“自然大小”的另一种方法是使用属性检查器中的“自动调整大小”功能。

　　若要调整一个或多个控件的大小以匹配另一个控件的大小（宽度或高度相同），可以使用“编辑”菜单中的“调整为...”功能。

　　选择多个控件，然后使用此选项调整所有选定控件的大小，以匹配选择中最窄，最宽，最短或最高的控件。

　　对齐UI控件

　　您可以通过选择多个控件并单击鼠标右键以调出下面所示的菜单来对齐和分配（间隔）控件。

　　选择多个控件时，属性检查器中将显示相同的选项。

　　分层UI控件

　　您可以对控件进行分层，就好像它们是样机画布上的纸一样。为此，请选择要分层的控件，然后通过右键单击菜单或“ 属性”检查器选择四个分层命令之一：“置于最前”，“向前”，“向后发送”和“向后发送”。键盘快捷方式也可用。

　　锁定UI控件

　　锁定控件在画布上的位置对于希望保留在原位的背景控件很有用。您可以通过选择控件并从上下文菜单中选择“锁定（控件名称）”，或单击工具栏中的锁定图标来锁定控件。

　　结果，控件的位置将被锁定，您将无法选择控件。

　　但是，您仍然可以通过在单击它的同时按CTRL/ ⌘来选择它。这使您可以编辑控件（通过按ENTER或双击）或从Property Inspector中更改其属性。

　　要解锁控件，请在鼠标光标悬停在控件上时右键单击它，或单击工具栏中的锁定图标。

　　删除UI控件

　　要从样机画布中删除某些UI控件，请选择它们并按下DELETE键。或者，您可以从“编辑”菜单中选择“删除”。

　　旋转UI控件

　　某些 UI控件可以通过“ 属性”检查器旋转（例如，标签，图像和图标控件），但许多不能。如果您习惯了通用绘图工具，这可能会令人惊讶。此限制是有意的，而不是由于编程复杂性（从技术上来说不难添加）。

　　我们之所以不支持旋转所有控件，是因为我们认为在90％的情况下，线框并不需要。实际上，增加旋转任何控件的能力可能会导致线框非常困难，即使开发团队无法实施也是如此。

　　如果您认为需要旋转任何其他控件，请在此论坛主题中告知我们，我们将讨论是否将其添加在一起。一种解决方法是旋转绘图应用程序中的控件，然后将其导入为图像。

　　分组UI控件

　　有时您可能希望对某些控件进行分组，以更好地对齐它们或一次移动它们。要对一组控件进行分组，请选择它们并按键盘上的CTRL/ ⌘+ G或使用“编辑”菜单或工具栏中的“分组”命令。控件将颜色更改为紫色，以指示它们已分组。分组后，控件在移动或对齐时将表现为一个。要取消组合控件，请按键盘上的CTRL/ ⌘+ SHIFT+ G或使用菜单或工具栏中的取消组合命令。

　　您可以双击一个组以“输入”并编辑其内容。一个小的浮动面包屑栏将指示您正在编辑组，并允许您从组中导航出来（也可以使用ESC）。可以嵌套组，如下所示。

　　您可以通过属性检查器为组命名。当您有很多组并且在编辑其内容时需要“知道您的位置”时，这将很有帮助。创建Symbols时，命名组也很有用。

　　裁剪组和图像

　　可以裁剪（蒙版）一组控件以仅显示其中的选定部分。选择一个组后，“ 属性”检查器中将显示一个裁剪图标。单击它以编辑组的可见区域。

　　以下视频说明了如何使用此功能。

　　注意：要裁剪单个控件，请将其选中并分组（是的，只有一个元素的组）。然后，您将可以对其进行裁剪。

　　您还可以使用裁切工具创建图像精灵，例如，对于创建按钮状态变量很有用。该视频演示了如何在Balsamiq中使用“ sprite”图像使用单个图像创建多个图标。

　　“绘图”基本控件

　　您可以通过在按住字母键的同时用鼠标“绘制”三个控件来将它们添加到画布。要在画布上快速绘制一个矩形，请按住R并拖动鼠标。T相反，按住不放将绘制一段文本，Y并将产生一行文本。

　　添加这些控件后，您可以使用转换菜单轻松地将它们转换为其他控件。

　　编辑控件

　　一旦你添加的控件到编辑器画布您可以通过编辑它们直接输入到他们，并通过在改变其性质属性面板上的权利。两者将在下面描述。

　　通过属性检查器编辑属性

　　“属性”检查器是应用程序右侧的面板，允许您设置一些常用属性，例如对齐方式，位置和大小以及特定于某些控件的设置（选择状态，文本属性，颜色等）。在查看线框，资产和Symbol时可用。

　　通过单击属性检查器上方的切换图标（键盘快捷键CTRL/ ⌘+ ;或ALT/ OPTION+ ENTER），可以显示和隐藏属性检查器。隐藏时，也可以通过右键单击控件并选择“属性...”来显示它。

　　如果选择了多个控件，它将显示所有所选控件共有的属性以及对齐和分布的选项。

　　通过文本自定义控件

　　许多UI控件（例如Button，Label或DataGrid）中都包含文本。要编辑文本，请双击控件并开始输入。或者，如果您选择了控件，只需单击ENTER或F2开始编辑。要提交您键入的文本，只需单击您键入的文本字段以外的任何地方，或单击ENTER或CTRL/ ⌘+ ENTER。如果要放弃刚刚进行的文本更改，请点击ESC。

　　一些控件使用某些字符作为分隔符。例如，要在选项卡栏中创建多个选项卡，请用逗号分隔它们。

　　或者，空格字符分隔标签云控件中的标签。其他一些控件（例如“ 树窗格”）完全使用其他字符。在这种情况下，控件的默认文本包括有关如何使用它的说明。

　　在“标签”或“段落”控件中编辑文本时，您会在编辑框的右下角看到一个小数字。这是字符数，可用于文案写作或其他目的。

　　基本格式

　　文字样式

　　您可以使用以下表示法来仅格式化控件文本的某些部分。

　　对于斜体，请使用_this notation_

　　对于链接，请使用[此符号]

　　以粗体显示，请使用*

　　对于残疾人，请使用-此符号-

　　对于下划线，请使用＆this符号＆

　　对于删除线，请使用此符号〜

　　对于颜色，请使用{color：＃FF0000}这种表示法{color}。

　　对于字体大小，请使用{size：16}此符号{size}

　　以上所有语法均适用于由空格分隔的单词，并且下划线将在单词内起作用。

　　注意：

　　1.上面的＃FF0000是十六进制格式的颜色，就像HTML一样。该宏可以使用或不使用英镑符号。您还可以使用某些颜色名称（绿色，黄色等），方法是将鼠标移到“属性”检查器中的调色板中的颜色上。

　　2.有关如何将[链接的文本]转换为指向网站或其他线框的有效链接，请参见下一部分。

　　3. 除斜体和删除线外，此格式语法也适用于在“ 注释”面板中 输入的文本。

　　例如，下面是上述文本在Paragraph控件中的屏幕截图：

　　快捷键几乎可以在任何有意义的地方使用，您可以将它们组合在一起，因此要使用[_this_]或_ [this] _来使斜体链接。

　　一些控件（如段落或标签）使您可以通过“属性检查器”面板“取消粗体”文本。如果这样做，您*的*单词将保持粗体。某些控件默认情况下使用粗体文本，因此这些控件中的粗体文本不会有所不同。

　　如果您想将这些特殊格式的字符显示为实际文本，则可以使用\ *，\ _，\-，\ [和\]来对*，_，-，[和]字符进行转义，因此，如果要编写“ “ [is] some text”，并且不希望“ is”成为链接，只需键入“ this \ [is \] some text”。

　　换行符

　　大多数控件都允许您插入换行符以将文本从一行换行到下一行。您可以通过在要换行的文本前面写\ r来实现。请参见下面的示例，其中在单选按钮控件的第二项中使用了换行符。

　　项目符号列表

　　在段落控件中，可以在文本前面加上连字符或星号，后跟空格，从而创建项目符号列表。

　　* item 1 * item 2 - item 3 - item 4

　　使文本中的链接实际起作用

　　如果您使用上面的链接符号（例如[this is a link]），则可以使用markdown语法将链接格式的文本转换为实际的链接。

　　为此，请在链接文本之后紧接在括号中添加链接目标。链接目标可以是URL或同一文件夹中另一个模型的名称。以下所有格式均有效。

　　网址：

　　[Google Home Page](google.com) [Google Home Page](www.google.com) [Google Home Page](http://www.google.com) [Google Home Page](https://google.com)

　　同一项目中的线框：

　　[Features Page](features)

　　以此方式添加链接也会使它们也显示在“属性”检查器中，如下所示。

　　本文

　　结果是

　　您可以链接特定的文本字符串以及整个控件。

　　注意：如果整个控件都已链接，则文本链接将被禁用。如果随后取消整个控件的链接，则将返回以前的文本链接。

　　更多宏

　　洛雷姆

　　在段落或文本区域中键入lorem以使用我们的Lorem Ipsum生成器。

　　玩

　　{样机名称}

　　在Label，Text，Title或Subtitle控件中键入{mockup-name}（全部小写）以显示当前的模型名称。

　　占位符文字

　　创建占位符文本的另一种选择，除了Lorem存有文本生成器，是使用文本行和文本座控制UI资源库中

　　注意：有关直接在画布上绘制这些控件的信息，以了解如何真正快速添加它们。

　　您可以随时编辑它们并输入一些文本，或者只需双击每个控件即可将它们转换为真实文本，如下所示。

　　玩

　　转换控件类型

　　许多控件可以转换为其他控件。当线框中已经有内容但想要使用其他控件类型而不重新键入内容时（例如，将文本输入更改为组合框），这将很有用。

　　只需单击一个控件，然后在“属性”检查器中打开该控件名称旁边的上下文菜单，即可查看所选控件可以转换为哪些控件类型。选择您想要将其转换为的控件，或使用搜索来查找它。

　　您可以使用快捷键CTRL+ 快速转换控件T，以在画布中心弹出转换菜单。

　　以下是创建列宽的详细信息：

　　您必须在表的最后一行添加特殊的文本行作为文本的最后一行，并且必须用{}大括号括起来

　　对于每个列，如果希望该列尽可能小以适合该列中的文本，请使用0或一个数字

　　数字指定列的相对大小，因此{2,1}表示“在此两列

　　网格中使第一列的大小是第二列的两倍。或者{70,20,10}表示“在此三列网格中，使第一列的宽度为整个表格的70％，第二列的20％，第三列的10％为整个表格的宽度。

　　您可以组合数字和零，例如{1,0,4}

　　如果要单独对齐列，请在数字后立即添加L，C或R，例如：{0R，2L，1}，这意味着“在此3列网格中，使第1列尽可能小，并始终将其向右对齐，第二个是第三个的两倍，并始终向左对齐，然后使用数据网格的对齐方式（来自属性检查器）来决定如何对齐第三列。”

　　在数据网格中使用图标和选择控件

　　数据网格支持标题中使用以下文本的排序图标：

　　升序：^

　　降序：v

　　数据网格使用以下文本在表格单元格中支持单个复选框或单选按钮：

　　复选框：[]或[]

　　选中的复选框：[x]或[v]或[o]或[*]或[X]或[V]或[O]

　　不确定复选框：[-]或[=]

　　单选按钮：（）或（）

　　选定的单选按钮：[x）或（v）或（o）或（*）或（X）或（V）或（O）

　　不确定的单选按钮：（-）或[=]

　　在数据网格中创建行返回

　　有时您想在表格单元格中创建行返回。为此，您可以使用“ \ r”创建行返回。

　　站点地图控件

　　您可以使用“站点地图”控件从文本轮廓创建简单的站点地图。

　　通过双击或选择并按来编辑站点地图控件ENTER。编辑大纲以创建父子关系。每行代表站点地图中的一个框（或页面/节点）。使用连字符在父级下方缩进子级框。这是一个例子：

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

　　使用Property Inspector，可以将链接添加到地图中的节点，并更改地图的文本属性和方向（垂直或水平）。

　　这是上面的轮廓在垂直方向上的样子（默认）：

　　...并且在水平方向上：

　　自动生成站点地图

　　在“ 属性”检查器中用于更改方向的选项旁边是一个按钮，该按钮使您可以根据“ 导航器面板”中线框的顺序和结构自动填充站点地图。

　　每次单击“从项目填充”项目时，站点地图都会更新以反映当前的项目结构。

　　如果您使用父子层次结构，则子线框将在站点地图中显示为子节点，如下所示。

　　链接将添加到站点地图中的每个节点，并指向项目中相应的线框。

　　注释和选项

　　单树支持：站点地图希望第一行是最高的父树，并且其中只有一个可以存在，因为它仅构成一棵树。如果要制作多棵树，只需添加更多站点地图控件。

　　多行文本：您可以使用\ r在类似这样的框中的文本上创建行返回：About \ rUs

　　您无法调整站点地图的大小，但是如果您无法在画布上查看整个地图，则可以尝试更改方向或在单独的站点地图中显示展开的节点之一，如下所示。

　　树窗格

　　通过树窗格控件，您可以创建对象的分层列表，类似于在文件资源管理器或垂直导航面板中看到的内容。

　　您可以在列表中的项目旁边显示常用图标，例如文件夹，文件和其他类型的展开/折叠符号。

　　双击以编辑文本，您将看到如何使用它（“ f”代表关闭的文件夹，“ F”代表打开的文件夹，等等）。

　　注意：确保在图标指示符和其后的文本之间添加空格（例如，“ F文件夹名称”，而不是“ Ffolder名称”）。

　　要缩进项目，请对要缩进的层次结构中的每个级别使用空格或点（“。”）。