---

Axure RP - 快速指南

Axure RP - 原型设计简介

原型设计这个词非常常见，与软件开发和建筑开发领域的人息息相关。说到建筑开发，在埃及，有吉萨大金字塔的原型。这些金字塔(当然)是用较小的版本建造的，以便获得统治者的同意或批准。

这个小而有意义的例子准确地说明了原型的目的。根据维基百科，原型是"设备或车辆的第一个或初步版本，其他形式就是从该版本开发而来的。"

对于软件开发领域，该定义可以调整为页面、屏幕或功能的初步版本，通过有效地可视化屏幕元素并展示交互来支持其他开发。这个定义包括最关键的部分，交互。

在软件开发中，为了开发部分功能或完整的功能本身，需要投入大量的时间和精力。这是一个根据客户反馈开发、验证和纠正问题的无休止的过程。

大多数软件开发公司都希望这个过程尽可能快。因此，他们不会让所有团队成员都投入精力和时间。相反，他们明智地聘请了一位用户体验 (UX) 工程师，他拥有可视化特定功能的技能。这让他们在开发产品时处于主导地位。

本质上，原型设计需要在开发的早期阶段模拟和可视化软件需求。该过程最终对软件开发公司和客户都有利，因为它减少了功能中的未知数，从而为开发提供了正确的方向。

原型开发的正确阶段

在当前备受瞩目的软件开发时代，整个软件开发生命周期表取得了许多进步。这些进步来自技术方面以及生命周期中特定团队成员的角色/职位。一个这样的职位已经开始受到关注，这就是所谓的用户体验工程师。

用户体验工程师具备一套对客户有益的技能。通过使用不同的技术或步骤来更好地了解客户，用户体验工程师可以很好地掌握用户对给定软件产品的期望。

通常，在需求收集过程中，科技公司现在会让用户体验工程师走进市场，了解用户的需求。随着响应式 Web XDesign 和移动优先方法在软件开发中的最新趋势，人们可能会将注意力集中在许多领域。UX 工程师采用用户访谈、市场调查等流程来了解其目标受众的脉搏。

这个过程既耗时又重要，因为它为软件产品指明了道路，使其了解其在市场上的适用性。在收集软件需求并引出它们时会采用这些步骤。这是一个理想的阶段，因为它可以降低总体开发成本。但是，当软件产品成熟时，可以引入 UX 研究阶段，以评估正在进行的增强的可行性。

Axure RP - 简介

对于 UX 工程师来说，了解其用户群的过程不仅限于从客户或相关对话中获取输入。他们需要采取一些有趣的步骤来了解用户想要什么。当他们清楚了解用户对软件产品的期望时，真正的工作就开始了。

一旦获得了一些关于用户如何看待即将推出的软件或现有软件增强功能的数据，UX 工程师就会回到自己的工作岗位为他们设计用户界面。传统上或作为一种常见的方法，当有人说设计时，它指的是 Adob​​e Photoshop、CorelDraw 甚至 Microsoft Paint 等软件。有时，为了快速回到用户身边，UX 设计师会使用老式的笔和纸来设计界面。

然而，对于 UX 设计师来说，提供高质量的用户界面设计不仅仅意味着展示一个很棒的设计。用户体验不仅包括用户如何看待界面，还包括用户如何与界面交互。上面提到的软件工具和市场上的类似工具都有自己的功能集。对于 UX 工程师来说，选择合适的软件来实现头脑风暴、设计和获得反馈确实是一项繁琐的任务。

Axure 是目前设计精美用户界面和交互的热门软件。Axure 已经问世近十年，它让用户体验工程师能够轻松创建软件原型。 Axure 不仅是原型设计工具，还拥有强大的社区，为用户体验世界做出了贡献，提供了许多示例和熟练的交互。

从更高层次来看，以下是 Axure 提供的功能 −

• 图表和文档
• 使用动态内容进行有效的原型设计
• 条件流
• 精美的动画可增强交互
• 自适应视图
• 支持 Windows 和 Mac

要探索 Axure 提供的详细功能列表，请访问 https://www.axure.com。有关安装说明，请点击链接 https://www.axure.com/download。

对于快速原型设计，Axure RP 提供了各种工具和技术，可帮助分析师/用户体验工程师可视化最终目标。

凭借强大的社区随时提供帮助，Axure RP 正在成为 UX 爱好者和从业者的首选工具。

Axure RP - 用户界面

安装 Axure 后，您将看到一个界面，如以下屏幕截图所示。

此屏幕将始终在启动时显示，除非您选择不显示它。

在此屏幕上，您有以下选项 −

• 在 Axure 中启动新文件
• 打开现有的 Axure 项目

现在让我们使用 Axure 创建一个新文件。

当您单击"新文件"按钮时，您将看到以下屏幕以创建一个新的原型。

如上图所示，工作区分为 6 个部分。

• 页面
• 库
• 检查器
• 大纲
• 母版
• 设计区域

让我们逐一介绍这些部分。

页面

此部分显示您正在处理的页面。这些页面以默认树结构显示如下。主页有以下子页面。

主页

第 1 页

第 2 页

第 3 页

您可以继续使用给定的结构，也可以根据需要进行更改。为此，请右键单击任何页面，然后您将看到以下选项:添加、移动、删除、重命名、复制等。

与大多数可用的不同工具一样，此部分允许您与原型中的页面进行交互。您可以使用它来规划预期原型中的屏幕。

库窗格

在库窗格中，原型所需的大多数控件都可用。此部分中可用的典型控件包括 - 框、图像、占位符、按钮等。Axure RP 提供了一组丰富的 UI 控件，根据其应用领域进行分类。

如上图 (a) 所示，库的类别为 - 通用、表单、菜单和表格以及标记。打开应用程序时，所有这些类别都会展开。为方便起见，此屏幕截图中将其折叠起来。

常用库包括基本形状、按钮、标题文本、热点、动态面板等。

对于 Axure RP，对于您所有的原型设计要求，都有一个非常有效的控件称为热点。使用此控件，您可以为 UI 中的几乎任何控件提供点击交互。后面的页面将提供一个示例。

在表单库中，顾名思义，包含列表框、复选框、单选按钮、文本区域和文本字段控件。要设计用户输入表单，您可以使用库下此部分的控件。

菜单和表格具有传统结构。这种结构可能是水平或垂直形式，可在此库下找到，称为菜单和表格。

最后，但并非最不重要的是标记库，其中包括便签、标记和箭头。大部分情况下，这将用于原型中的注释。

设计区域

这是 UX 工程师的实际游乐场。此空间将用于根据您的要求创建原型。首先，请参阅以下屏幕截图中以数字 6 突出显示的区域。

在此区域中，您可以从库中拖放所需的控件。让我们使用该库创建一个快速菜单栏。

示例 - 菜单栏

从库中的菜单和表格下，将经典菜单＆minus;水平控件拖到设计区域。

将控件拖到设计区域后，您将看到以下屏幕。

如上图所示，Axure RP 足够智能，可以在菜单中显示预期的文本。考虑到它是一个菜单栏，Axure RP 已自动在控件中创建文件、编辑和视图作为菜单。

如箭头所示，检查器部分显示控件的属性。在创建复杂原型时，使用此部分为您的控件创建一个名称，以便进行唯一标识。

让我们将此控件命名为 TestMenu。我们将在后面的示例中使用此名称。

页面属性

在规划原型时，对用户以及展示/查看原型的设备有一个清晰的认识是有意义的。为了获得与原型交互的最佳体验，Axure 提供了设置页面属性的功能。

如上图所示，数字 3 表示的区域是页面属性部分。在此部分中，您将能够看到交互下拉菜单和子部分自适应。

让我们详细讨论这些部分。

交互部分处理与页面的可能交互(案例)。如您所见，交互案例 OnPageLoad 处理页面加载时的事件。在大多数原型中，UX 工程师更喜欢使用动画来给人留下第一印象。显示动画的这个特定事件通常在 OnPageLoad 情况下触发。

同样，其他情况包括 - OnWindowResize、OnWindowScroll。在下拉菜单"更多事件"中，您可以看到其他支持的案例，以配置与页面相关的交互。

通过自适应部分，Axure RP 进入了响应式网页设计。如今，为网站设计体验是不够的，与此同时，企业更喜欢移动网站与网站共存。

从不同的屏幕尺寸和布局查看的同一页面构成不同的自适应视图。通常，自适应视图是为手机和平板电脑设计的。 Axure 提供了自适应视图这一功能，因此 UX 工程师从一开始就可以掌握原型的响应方面。

Widget 的检查器窗格

Widget 交互窗格是 Axure 中最关键的部分。您可以通过单击设计区域中的任意小部件来查看此窗格。

考虑我们在上一节中使用的菜单项的示例。选择名为 TestMenu 的菜单项并观察以下屏幕截图中突出显示的部分。

正如您在"属性"选项卡下看到的，有不同的交互，例如 OnMove、OnShow、OnHide 和 OnLoad。这些是特定于整个菜单控件的。

现在，从菜单控件中单击文件。

您会注意到"小部件属性"窗格中的交互类型发生了变化。此外，它还提供了为该菜单项提供名称的灵活性。让我们以 OnClick 案例为例。

OnClick − 案例 OnClick 定义在运行原型时单击控件时控件的行为。这可以实现各种交互，例如页面导航、菜单弹出等。

注释窗格 − 在检查器窗格本身中，有一个名为注释的子部分。在注释窗格中，您将能够为您选择的控件添加某些需要记住的要点。

一旦我们在下一章中深入研究示例，这些要点就会很清楚。

网格和参考线

对于具有最高质量和精度的原型，UX 工程师需要能够将控件与其他控件对齐/定位。

例如，假设您要显示登录弹出窗口。如果要将此弹出窗口显示在屏幕的正中间，则需要屏幕的整体尺寸。此外，要精确对齐屏幕中间，您应该使用网格进行适当对齐。

Axure 提供网格和参考线功能，以便您可以有效地使用设计区域。

要查看可用的网格和参考线，请右键单击设计区域，然后会弹出以下屏幕截图中显示的上下文菜单。

现在，让我们了解可用的选项。

网格 − 上下文菜单中显示的前三个选项与网格相关联。它们是显示网格、对齐网格和网格设置。

• 显示网格 − 启用显示网格后，您将能够在设计区域上看到网格，如以下屏幕截图所示。这对于将控件与屏幕上的其他控件对齐非常有用。

• 对齐网格 − 启用对齐网格后，控件将根据周围存在的网格自动连接。当您拖动控件时，您将能够看到此行为，它将自身附加到附近的网格。

• 网格设置 − 此对话框中有更多与网格相关的设置。如以下屏幕截图所示，此对话框中将提供网格之间的间距、网格类型等。您可以根据自己的方便选择交叉类型的网格。

参考线 − 在上下文菜单中(如以下屏幕截图所示)，第一个分隔符后的选项与参考线相关。

我们将介绍参考线常用的选项。

• 显示全局参考线 − 当您从设计区域中的水平和垂直标尺拖动时，这些参考线将可见。自己尝试一下吧!

• 显示页面参考线 − 参考线也可在页面级别使用。这些参考线是在从垂直和水平标尺拖动它们时创建的。它们比全局参考线更常见。使用页面参考线可以增加页面级别的设计灵活性。

• 显示自适应参考线 − 在为不同的自适应视图设计页面时，有必要使用自适应参考线。此选项可启用自适应参考线的可见性，该参考线将用于在不同的自适应视图中对齐对象。

• 对齐参考线 − 在设计区域中排列不同的屏幕元素时，此功能使对象可以对齐到参考线。当您将特定对象放置在屏幕上并相对于其他对象进行排列时，此功能非常方便。

Axure RP - 基本交互

本章将带您了解 Axure 在设计屏幕时提供的基本交互集。

Axure RP 的目的是允许交互式原型。现在，在制作交互式原型时，总是有一个警告，即创建过度交互的原型。这就是为什么一次从单个重要的交互开始是有意义的，以便快速浏览其余可用的页面。

Axure 交互

交互是指将静态线框转换为可点击的交互式原型的功能元素。为了使其成为一种简单的交互方法，Axure 通过提供定义结构和逻辑的界面消除了对原型进行编码的需要。

在生成 HTML 原型时，Axure RP 将交互转换为真实代码(HTML、CSS 和 JavaScript)。这可以充当催化剂，在页面上展示预期的设计和交互。

通常，交互将从何时交互发生开始。例如，当页面在浏览器中加载时，当用户单击其中一个元素时，等等。

接下来的问题是，交互发生在屏幕上的什么地方。它可以是一个简单的屏幕元素，例如一个矩形，我们希望将其转换为可点击按钮以用于菜单(稍后显示示例)。

最后，描述交互中发生了什么。让我们考虑浏览器加载页面时的页面加载；您可以简单地选择一个特定的幻灯片来开始，或者在屏幕上输入时让图像变大。

Axure 事件

Axure 中的事件可以分为两种类型，由两种类型的事件触发。

页面和主级别事件

当页面加载时，会发生大量事件来获取设计信息、内容，从而获取屏幕上每个元素的对齐方式。由于这些事件在初始页面加载期间发生，因此您可以认为这些事件在每次页面加载时都会重复发生。以下是页面和主级别事件的一些示例。

• OnPageLoad
• OnWindowResize
• OnMouseMove
• OnAdaptiveViewChange

对象或小部件级别事件

让我们考虑一下，我们已经创建了一个页面，并在该页面上创建了一个特定的按钮小部件。现在，为了与此按钮小部件进行交互，可能通过触摸(在移动原型上)或鼠标单击。以下是对象或小部件级别事件的一些示例。

• OnClick
• OnMouseEnter
• OnDrag
• OnDrop
• OnMouseHover

案例

如上一章所述，在页面属性部分，可以设计特定的小部件交互。这些被称为案例。特定交互可以由多个案例组成。

让我们考虑一个例子，以更好地理解这一点。

示例:Axure Prototype – 鼠标悬停时显示菜单

要开始此示例，请单击文件菜单下的新建或使用快捷键Ctrl + N创建一个新文件。

在此示例中，我们将设计大多数软件产品中看到的简单菜单栏。菜单结构将具有以下菜单元素及其下的子菜单。

File

• New
• Open
• Save
• Close

Edit

• Cut
• Copy
• Paste
• Find
• Replace

View

• Show Status Bar
• Toolbars
  • Main Toolbar
  • Styling Toolbar

Help

• Getting Started
• Using Help
• What’s this

首先，将 Classic Menu – Horizo​​ntal 拖放到设计区域中。您可以在"库"和"菜单和表"下找到它。将控件命名为 MenuBarExample。让我们将此元素的宽度设为 300 像素，高度设为 30 像素。将其放置在 X 轴上的 100 处，Y 轴上的 30 处。您可以在右侧"检查器"部分下的"样式"选项卡下调整这些值。

在上述过程结束时，您将能够看到最终结果，如以下屏幕截图所示。

让我们在"检查器"部分中将名称添加到菜单标题中。单击每个菜单标题并观察检查器部分。如果没有为特定菜单栏指定名称，则名称将变为(菜单项名称)。

将文件菜单命名为FileMenu。

将编辑命名为EditMenu，将查看命名为ViewMenu。

要确认是否已提供名称，请​​单击每个单独的菜单并在检查器:菜单项下确认。您将能够看到名称，而不是(菜单项名称)。

现在，根据我们的要求，让我们用帮助菜单完成菜单栏。右键单击菜单栏标题 - 查看，您将看到一个上下文菜单。单击添加菜单项。

将出现一个空白菜单项。双击空白菜单项，然后输入菜单标题为帮助。重复该过程，在检查器:菜单项名称下为其命名。完成后，您将看到以下设计区域。

接下来，让我们设计文件菜单的交互。

单击文件菜单栏标题并观察检查器:菜单项。

如上图所示，观察属性选项卡。

在属性选项卡下，我们将为文件菜单创建交互。

向菜单添加子菜单非常简单。右键单击文件菜单，在出现的上下文菜单中，单击添加子菜单。

注意 −我们也可以通过重复相同的步骤并单击"删除子菜单"来删除子菜单。

添加子菜单后，将出现一个空白子菜单。双击每个菜单项并提供名称，例如 - 新建、打开、保存。

右键单击最后一个子菜单项并添加另一个子菜单项。将其命名为关闭。

最好也命名检查器部分下的所有子菜单项。这有助于在整个设计过程中引用它们。

在设计此部分时，请注意，每当我们单击设计区域的任何其他部分时，子菜单都会消失。我们需要单击文件菜单项才能查看子菜单。

让我们谈谈交互 - 悬停。当鼠标指针悬停在特定元素上时，此交互具有触发的独特行为。在 Axure 中，此交互通过经典菜单 - 水平自动实现。

要查看交互的实际效果，请单击工具栏中的预览按钮。Axure 将在默认浏览器中打开预览。

将鼠标悬停在文件菜单上。子菜单将显示如下图所示。

客观地看，我们刚刚利用 Axure 创建了一个复杂的交互，比如悬停在菜单项上。在通常的 HTML 编码中，这将花费将近 1 到 1.5 小时的时间。

作为作业，完成其余菜单及其子菜单。

现在，让我们快速创建一个在文件菜单下的关闭子菜单上的交互。当悬停时，我们将用红色突出显示它。为此，右键单击关闭子菜单。单击交互样式...

在 MouseOver 选项卡下，选中填充颜色并选择红色。Axure 将立即在设计区域中显示预览。假设选择了应用于所选菜单和所有子菜单部分，它将以红色突出显示整个菜单。

仅单击所选菜单项。现在选中字体颜色并为字体选择白色。预览将立即更新。

单击"确定"完成此设置。

再次单击"预览"以查看交互操作。

此示例已完成。

您可以尝试以下交互作为快速任务。

通过使用按钮小部件实现 OnClick 属性。

Axure RP - 使用母版和动态面板

在用户界面开发方面，许多软件开发方法都采用一种通用技术，即创建母版。

母版是可重复使用的线框，只需创建一次即可在后续页面上广泛使用。使用 Axure RP，当我们创建母版页时，对该页面所做的更改将应用​​于正在使用它的页面。因此，它在很大程度上减少了所有页面通用组件的时间。

要开始使用母版，您可以专注于母版部分(标记为 5)，如以下屏幕截图中突出显示的一样。

使用此母版部分 −

• 通过添加、删除或编辑母版页/文件夹来组织原型的母版。

• 选择特定母版进行编辑。

动态面板

在 Axure RP 中，正如我们在上一章中看到的，给定的小部件具有不同的状态。为了合并/组织特定小部件或小部件集的状态，我们需要一个容器/占位符。动态面板充当小部件状态的容器/占位符。

让我们通过一个示例更好地理解动态面板。我们将从菜单栏示例继续。

此示例中的附加内容是菜单栏下方的图像区域和按钮。使用小部件占位符作为常用小部件下的图像区域和按钮。将占位符命名为 ImageAreaPlaceholder，将按钮命名为 showImageButton。

此外，让我们将菜单栏添加到母版中。右键单击菜单栏，然后​​单击"转换为母版"。将出现一个对话框，提示母版的名称。将名称添加为 menuBarMaster。

如上图所示，菜单栏变为粉红色，并且已添加母版的条目。

现在，让我们创建一个动态面板。动态面板的上下文是，您想要根据"显示图像"按钮单击来控制图像区域的可见性。拥有动态面板将允许图像区域的灵活性。

让我们看看如何创建动态面板。右键单击图像区域，将出现上下文菜单，选择"转换为动态面板"。

动态面板将位于大纲:页面下。同样在检查器下，它显示动态面板。将动态面板命名为 showImageDynamicPanel。此动态面板的名称将在"大纲:页面"部分下更新。

在设计区域中，右键单击"显示图像动态面板"以查看上下文菜单。选择"设置隐藏"，动态面板将从屏幕上消失。

可以通过双击"大纲:页面"来访问动态面板。

现在，让我们为按钮提供一个单击事件。单击"显示图像"按钮，在"检查器"→"属性"下，双击"OnClick 交互"。

如上图所示，单击"小部件"下的"显示/隐藏"。它将自动显示可用的小部件以配置操作。勾选 showImageDynamicPanel。点击 OK。

现在，点击预览。在预览屏幕上，点击显示图像。按钮的另一个交互终于创建了。

Axure RP - 条件逻辑

在本章中，我们将讨论 Axure RP 中使用的条件逻辑。

Axure 中的 If - Then - Else

与任何其他编程工具一样，Axure 也支持条件逻辑以在原型中创建增强的交互。一旦您熟悉了如何提供交互，为交互提供条件逻辑就是下一个级别。

以下是条件逻辑的简单而简洁的流程 −

• 如果单击了某个特定小部件/屏幕
• 则执行特定操作/交互
• 否则，保留/更改小部件或屏幕的状态

为了更好地理解这一点，让我们从上一个示例恢复流程。为此，我们需要熟悉条件生成器。

条件生成器

双击任何交互，例如 OnClick。您将能够看到案例编辑器，如以下屏幕截图所示。

单击案例名称附近的按钮 - 添加条件。它将显示在下面的对话框中。

如说明下所示，条件构建器将根据条件部分中选择的条件创建 If-Then-Else 流。

让我们在此按钮上创建一个条件。

我们希望在动态面板可见后显示隐藏图像按钮。我们在上一个示例中单击"显示图像"按钮时使动态面板可见。现在，让我们使另一个按钮"隐藏图像"可见。

关闭条件构建器，然后返回到设计区域。

从公共库下的库中插入"隐藏图像"按钮。重申一下，最佳做法是在将 UI 元素插入设计区域后立即命名它。

右键单击"隐藏图像"按钮，然后单击"设置隐藏"。该按钮将从设计区域隐藏，如以下屏幕截图所示。

现在，让我们回到"显示图像"按钮的交互。

首先，在"显示图像"按钮交互下，双击案例 1，您将能够看到案例编辑器。使用"显示/隐藏"操作，选择"隐藏图像按钮"并将其可见性设置为"显示"。

同样，使用"显示/隐藏"操作，选择"显示图像按钮"并将其可见性设置为"隐藏"。

我们已经管理了"隐藏图像"按钮的可见性，这样，当我们单击"显示图像"按钮时，按钮就会显示出来。

完整的条件将如以下屏幕截图所示。

让我们来构建条件。

在设计区域下，单击"隐藏图像"按钮。在"检查器"部分中，单击"添加案例"。

在"添加案例"下，单击"添加条件"按钮。根据前面提供的背景知识，使用条件生成器中的下拉值创建条件集。

简单来说，使用上述条件，我们检查动态面板 showImageDynamicPanel 是否可见

现在，让我们设计"隐藏图像"按钮的交互，按如下方式配置它 −

• 选择"显示/隐藏"操作。
• 选择小部件 showImageDynamicPanel。
• 将可见性设置为"隐藏"。

同样，重复显示 showImageButton 和隐藏 hideImageButton 的练习。

完成后，单击"确定"关闭案例编辑器。

然后，单击"预览"以查看所做的更改。

成功的结果将如以下屏幕截图所示。

单击"显示图像"按钮时 −

单击"隐藏图像"按钮时 −

Axure RP - 高级交互

到目前为止，我们已经了解了 Axure 交互的基本功能。然而，在很多实际场景中，原型必须具有智能。所​​谓智能，就是原型需要检测某个小部件的状态，以便执行操作/触发某个行为。

这种交互的一个典型示例是设置按钮的颜色。这需要 UX 工程师发挥思考能力，将原型设计提升到一个新的水平。

在 Axure 中使用变量

变量，顾名思义，代表可能发生变化或改变的因素。在 Axure 中，我们可以使用变量来表示或识别小部件/交互的状态。

一个典型示例是在将数据从一个页面传输到另一个页面时存储数据值。为了使示例简单明了，让我们考虑一个需要显示特定小部件状态的场景。

继续我们的上一个示例，让我们考虑我们想要显示图像显示的次数。

我们将这样做 −

• 我们将创建一个变量，用于将计数初始化为 0。

• 单击"显示图像"按钮时，我们将增加此变量的值。

• 在文本标签中显示值。

对于此示例，我们将在动态面板下方创建一个文本。文本将显示 – 图像显示 0 次。

严重 −标签必须分为三部分。请遵循表中列出的标签名称和文本。

这是必需的，因为我们想要控制每次单击"显示图像"按钮时的 countLabel 值。

让我们先定义一个变量。

我们需要一个变量，当单击按钮时，该变量将受到控制。在 Axure 的术语中，这个变量是 − 全局变量。要定义全局变量，请单击菜单栏中的"项目"，然后单击"全局变量"。将打开一个对话框，如以下屏幕截图所示。

单击绿色加号 (+) 图标以添加全局变量。我们将全局变量命名为 − varDynamicPanel。其默认值为 0。

使用"显示图像"按钮交互，双击 Case 1。添加另一个操作。如以下屏幕截图所示，操作为 将 countLabel 上的文本设置为 [[varDynamicPanel + 1]]。

选择文本标签的值非常简单。让我们看看如何从动态面板中获取值。

如上图第 4 步所示，单击 fx 按钮，将打开以下对话框。

在第一个文本区域下，输入以下字符串。

[[varDynamicPanel + 1]]

单击"确定"。

现在，我们需要确保每次单击按钮后都会更新变量。

在案例编辑器对话框中，在操作下，选择变量 → 设置变量值。

选择 varDynamicPanel 作为变量。

从可用选项中将变量设置为从小部件上的文本中获取值，作为 countLabel。

单击"确定"关闭案例编辑器。然后，单击"预览"按钮。

显示/隐藏图像四次后，预览屏幕上的结果如下。

Axure RP - 小部件库

现在您已经熟悉了 Axure 中可能出现的不同交互和事件，您可能希望扩展您的工作以尽量减少将来的工作量。

例如，第一个带有经典菜单 - 水平的示例曾经作为不同可用小部件的组合出现在 Axure 版本中。这意味着，Axure 随着时间的推移而不断发展，以单一小部件库的形式容纳常用的小部件。

小部件库的概念在大型 UX 团队中更为适用。一些组织将已批准的小部件保存在中央存储库中，以供后续 UX 工程师使用。

因此，简而言之，Axure 小部件库是存储在单个文件中的自定义小部件的集合。Axure 小部件库的文件类型为 RPLIB。

小部件库的类型

Axure 内置库

这些库可从"库"窗格访问。这些库无法更新/删除。对于大多数复杂的原型设计需求，Axure 内置库可以提供帮助。

该库由 17 个独特的流程小部件组成，主要用于创建图表。此外，线框库中有 25 个小部件。

第 3 章 − 用户界面中简要介绍了库的功能。

Axure 自定义库

Axure 社区规模日益壮大，拥有大量用户创建的库。您可以在 − https://www.axure.com/support/download-widget-libraries 访问它们。

致力于让这个社区成长起来的来自世界各地的 UX 专业人士在上述链接上提交了他们的作品。

您可以从网站下载库，并使用库下的"加载库"选项将它们添加到 Axure。此外，您还可以直接从应用程序界面本身下载库。

如上图所示，我们有一个上下文菜单，您可以在其中下载https://www.axure.com/support/download-widget-libraries上提供的不同库。您还可以创建自己的库，这在为给定原型创建重复控件时会很方便。

下载/加载库的完整说明可在以下位置找到:https://www.axure.com/support/reference/widget-libraries。

当要使用您加载的库之一中的自定义小部件时，请将其拖放到与内置小部件类似的设计区域中。如果小部件包含变量或自定义样式，则导入向导对话框将标记此类依赖项。

在这些依赖项中，您可能会注意到导入的小部件库时会附带某些不兼容的样式。您可以选择取消并仅导入小部件，或者单击完成按钮以导入整个包。

将小部件拖放到线框中后，该特定实例将不再与其原始小部件库相关联。因此，即使刷新库后，对导入的小部件库中的小部件所做的编辑和更改也不会应用于项目文件中这些小部件的任何实例。请放心，导入后，您可以使用导入库中的小部件，而不必担心在线可用的同一小部件​​库中发生的更新。

使用 RPLIB

使用 Axure RP 库文件非常简单。下载库时，库文件 (.rplib) 的图标与 Axure RP 原型文件 (.rp) 明显不同。例如，如以下屏幕截图所示。

实现此操作的机制 - 您可以在 iOS Wireframe Demo 中导入 iOS Wireframe 文档。

此库可用于多个项目，一旦您从上下文菜单刷新库，库文件中的更新将可用。如前所述，这在处理团队项目并以这种方式分发库时非常方便。

Axure RP - 导出原型

Axure RP 8 支持使用功能 − 团队项目进行协作。此功能不仅对分布式团队有益，而且对单个用户也有益。单个用户的好处是能够对正在进行的工作创建版本控制。

使用团队项目

在团队项目场景中，每个团队成员在他们的计算机上都有项目的副本。此项目将与共享存储库同步。此共享存储库与团队的其他成员相连。

经过一天的工作，每个团队成员将创建新元素、签出文件并通常编辑项目。 签出 是一个常用术语，表示特定文件正在进行的工作。

在团队成员签入所有签出的元素之前，更改不会反映在共享存储库中。管理团队项目 控制台为所有团队成员提供系统管理的元素可用性状态的实时视图。

此视图提供由另一个团队成员签出的元素的详细信息。

启动团队项目

要使用或创建团队项目，请转到"团队"菜单。单击"团队"，然后选择"从当前文件创建团队项目"。弹出以下屏幕。

托管团队项目的可用选项是 − 使用 AxShare 和 SVN。我们将在下一节中讨论 AxShare。 SVN 是常用的版本控制系统，它提供了一个服务器来托管您的文档。

按照屏幕上的指南创建团队项目，然后您将能够开始在整个团队中使用单个 Axure 文件进行协作/将其用于您自己的历史存储。

Axure Share

在展示原型时，根据您所处的环境，有多种选项可用。导出原型最常用的方法是使用 Axure Share(又名 AxShare)。

使用 Axure Share，可以实现以下协作功能。

• 原型可以托管在 Axure Share 上并与相关团队成员/客户共享。

• 通过讨论/评论功能，您可以在原型中获取即时输入制作。

准备好原型后，您可以使用"发布"和"发布到 Axure Share"将原型上传到 AxShare。将显示以下对话框。

您必须在 AxShare.com 上创建一个帐户才能继续进行。如果您已经有帐户，您可以使用"登录"选项登录并将您的作品上传到 AxShare。

上传的数据为 HTML、CSS 和 JavaScript。上传后，您将获得一个链接，您可以将其提供给预期的利益相关者/团队。

---