线框图软件(Balsamiq Wireframes)

　　Balsamiq Wireframes是一款用户界面设计软件，可以通过这款软件帮助用户制作UI界面，你可以在软件添加各种设计元件，可以添加界面菜单布局，可以添加按钮，可以添加web样式，可以添加媒体内容，可以添加表单内容，可以添加Android界面，可以添加iOS相关的菜单内容，为用户设计用户界面提供衡多帮助；新版提供新的全屏模式，根据从上一版本中学到的知识，花费了很多时间来更新全屏演示模式，新版本具有更高的可定制性，更适合用户测试，并且使用起来感觉更好码，提供强大的审阅和评论系统，对我们的网络应用程序最大的要求之一就是最终将其返回到桌面，现在，您可以向项目添加评论和标注，然后让您的协作者直接对其进行响应。

功能功能

　　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单击来选择多个对象。线框和资产可以作为纯文本列表或缩略图预览查看。

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

　　6、键盘快捷键：

　　隐藏它会在工具栏（如上所示）中显示其他图标，用于在线框或资产之间进行导航（取决于选择的是哪个）。可以通过将鼠标光标放在导航器面板和画布之间的直线上并向左或向右拖动来调整面板的大小。您可以双击分隔线以将其重置为默认宽度。

　　您可以使用键盘通过CTRL+TAB或在导航器中单击一个并使用↑和来在线框或资产之间跳转↓。

　　可以通过在导航器面板中上下拖动线框来对其进行重新排序。例如，在导出为PDF时，这很有用。关闭并重新打开项目时，即使在另一台计算机上打开，也会记住线框的顺序。

　　使用层次结构

　　导航器面板还提供了层次结构，可以更好地组织线框。

　　要使用它，请选择要用作子级的线框，然后按TAB。子线框将放置在其上的线框下方的树层次结构中。

　　然后，您可以使用父线框左侧的箭头来显示和隐藏其下方的线框。

　　要将其恢复到最高级别，请使用SHIFT+TAB。下面的动画显示了实际使用中的嵌套线框。

　　上下文菜单操作

　　上下文菜单也可用于在导航器面板中打开的对象。您可以右键单击所选对象，也可以单击将鼠标悬停在所选对象上时出现的小箭头以打开菜单。

　　该菜单的内容取决于所选对象的类型（线框，资产，符号或废纸））而异，但通常包含诸如重命名，移至废纸，和重复等选项。在“线框”视图中，它还包含用于处理替代项的操作。

　　重命名线框

　　重命名线框可以通过上下文菜单或在导航器面板中双击线框的名称来完成。与线框链接时，链接线框名称更改会自动更新。

软件特色

　　一、零学习曲线，随时随地提供强大功能

　　1、UI组件和图标

　　数以百计的内置和社区生成的 UI控件和图标。

　　2、拖放简单性

　　知道要实现这些元素时，请放心组装它们。

　　3、导出为PNG或PDF

　　通过图像或交互式PDF在网络上共享或显示线框。

　　4、通过“ 快速添加”和许多键盘快捷键，可以以最快的速度针对线框进行优化。

　　5、可重用符号创建模板，母版以及可重用和可自定义的组件库。

　　6、交互式原型

　　链接可以让您生成用于演示或可用性测试的简单原型。

使用说明

　　1、打开Balsamiq Wireframes就可以正常使用，在软件新建项目，添加需要设计的内容

　　2、设计的内容都在这里显示，鼠标拖动对应的项目就可以开始添加项目数据

　　3、将顶部的项目添加到设计界面，可以添加网页浏览数据

　　4、按钮添加功能，在软件加载各种菜单按钮，可以调整按钮颜色，可以设置大小

　　5、右边是按钮信息编辑界面，如果你看懂英文就可以直接调整按钮

　　6、需要添加的内容都在软件界面显示，您只需要找到对应的元件就可以拖动到项目

　　7、Balsamiq Wireframes是英文软件，这里小编就不介绍了，可以自行查看帮助文件

官方教程

　　全屏演示模式

　　全屏演示模式非常适合向利益相关者展示线框或进行可用性测试。

　　要输入它，只需单击工具栏右上角的全屏图标，从“查看”菜单中选择“全屏演示”或直接按CTRL/ ⌘+即可F。

　　该应用程序将展开以占据整个屏幕。

　　总览

　　当“全屏演示模式”首次打开时，将为您显示类似于此屏幕的屏幕。这些是屏幕的不同部分。

　　航海家

　　在屏幕的左侧，您将找到导航器。它在功能上与主编辑器中的导航器相同。您可以使用它来浏览项目（如果您未使用link），也可以使用它来重命名/复制/删除线框。

　　注释和评论

　　全屏演示模式的另一（右侧）是“注释和注释”部分。此面板的顶部显示您已添加到线框中的任何线框注释。底部将显示已添加到线框的所有注释。如果启用了此面板，则用户还可以添加注释和评论。

　　设定面板

　　设置面板使您可以调整“全屏演示”模式的外观。默认情况下它将打开，并允许您为演示文稿准备好一切。下面有更多详细信息。

　　您的线框

　　最后（但并非最不重要）是您的线框，即全屏演示模式的核心。

　　设定面板

　　如上所述，每当您启动全屏演示模式时，就会出现“设置面板”。默认情况下，所有功能都将在“ 审核模式”下打开。您可以通过单击“ 关闭设置”按钮或按Enter键盘来关闭“设置面板”。

　　注意： 自定义模式将在您取消选中“设置面板”中的任何选项时触发。如果您想快速关闭所有内容，请选择“ 用户测试”模式。

　　让我们跳到“设置”面板上的各个复选框。

　　导航器复选框

　　此复选框控制“导航器面板”。在全屏演示模式下，取消选中该选项将隐藏导航器面板。

　　注释复选框

　　此复选框控制右侧面板的Notes部分。取消选中此复选框将隐藏“注释”部分，并将整个右侧面板变成“注释”面板。

　　评论复选框

　　此复选框控制右侧面板的“注释”部分。取消选中此复选框将隐藏“注释”部分，并将整个右侧窗格变成“注释”面板。

　　注：取消选择将双方的注释和评论的复选框会隐藏右侧面板中。

　　链接提示复选框

　　该复选框控制您是否希望全屏演示模式显示链接提示。启用“链接提示”时，包含链接的区域将显示为粉红色叠加层，以便于查看。

　　大箭头光标复选框

　　此复选框控制使用全屏演示模式时是否要使用更大的箭头指针。较大的箭头在您要向其演示的人们不靠近演示屏幕的情况下很有用。取消选中此框会将箭头指针变成您操作系统的标准指针。

　　标记复选框

　　所述标记复选框是用于示出和隐藏标记元件，诸如注释，箭头和标注（用户界面库中的“标记”标签下的任何控制）。如果您只想查看用户界面而没有包围它的注释，这将很有用。取消选中它可以隐藏任何标记控件。

　　缩放设定

　　“ 缩放”部分中的“ 高级”链接将打开您的项目的“ 项目居中规则”。您可以使用它们更好地将线框居中。

　　注意：使用键盘快捷键时，在全屏模式下不需要任何修改键（例如，只需单击L链接提示即可，而不是CTRL/ ⌘+ L）。

　　要退出全屏演示模式，请点击ESC或单击右上角的图标。

　　调整项目的中心

　　全屏演示模式基于最高的线框和最宽的线框将整个项目居中。虽然这通常会导致演示文稿居中（并且焦点不会跳动），但是如果线框比其他线框大很多，则可能导致您的项目偏离中心或推到屏幕顶部。

　　在“设置”面板中，单击“ 缩放 ”一词旁边的“ 高级”链接。

　　单击该链接将打开一个窗口，该窗口为您提供了项目中所有线框尺寸的概述。它将向您显示项目中最长和最宽的线框，以及它们使您的项目成为一个整体的有效尺寸。最宽的线框的宽度为红色，而最高的线框的高度为蓝色。这应该给您一个提示，指出哪个线框导致您的项目无法正确居中。

　　单击故障线框（或多个线框）旁边的复选框会将其从居中计算中移除，并将重新计算新的最长/最宽的线框，从而调整整个项目的大小。

　　这应该可以解决您可能遇到的所有居中问题。

　　将线框链接在一起

　　您可以将线框链接在一起，以为您的站点或软件应用程序创建一个简单的原型。当您以全屏演示模式或导出的PDF格式显示项目时，这对于演示点击原型或进行可用性测试很有用。

　　将线框链接在一起就像从下拉菜单中选择线框名称一样容易。只需单击一个支持链接的控件（大多数情况下，对于不支持链接的控件，这是一种解决方法），然后您会在属性检查器中看到“链接”下拉列表（如果需要，请单击“显示链接检查器”链接您看不到）。

　　链接到现有线框

　　列表中预填充了项目中其他线框的名称。选择一个链接到它。

　　链接到新的线框

　　要链接到尚未创建的空白线框，请单击“链接到新的线框”，然后将创建一个新的线框，并从所选控件中进行链接。

　　选择“链接到此线框的新副本”以创建内容与当前线框相同的新线框。将显示带有新线框名称的通知。单击通知将带您到该线框。

　　链接到网页

　　您也可以链接到Web URL而不是其他线框，以显示到外部站点或产品页面的链接。为此，请从下拉菜单中选择“链接到Web地址...”选项，然后在弹出的对话框中输入Web URL。

　　在演示模式下使用链接

　　完成线框的链接后，可以进入“全屏演示”模式，然后可以单击为测试原型而设置的链接。

　　在“全屏演示”模式下，带有链接的控件将在其上覆盖红色，并且将鼠标悬停在它们上将显示一个大指针，其中包含链接的目标文件或网页的名称（可以在“ 全屏”中关闭这些选项设置面板）。

　　自动生成站点地图

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

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

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

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

　　注释和选项

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

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

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

　　树窗格

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

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

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

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

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