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 原型 – 鼠标悬停显示菜单

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

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

文件

• 新建
• 打开
• 保存
• 关闭

编辑

• 剪切
• 复制
• 粘贴
• 查找
• 替换

视图

• 显示状态栏
• 工具栏
  • 主工具栏
  • 样式工具栏

帮助

• 入门
• 使用帮助
• 这是什么

要开始，请将经典菜单 - 水平拖放到设计区域。您可以在库→菜单和表格中找到它。将控件命名为 MenuBarExample。让我们将此元素的宽度设置为 300 px，高度设置为 30 px。将其 X 轴位置设置为 100，Y 轴位置设置为 30。您可以在右侧“检查器”部分的“样式”选项卡下调整这些值。

在上述过程结束时，您将能够看到如下所示的最终结果。

让我们也在检查器部分添加菜单标题的名称。点击每个菜单标题并观察检查器部分。如果未为特定菜单栏指定名称，则名称将显示为（菜单项名称）。

将“文件”菜单命名为FileMenu。

“编辑”菜单命名为EditMenu，“视图”菜单命名为ViewMenu。

要确认是否已提供名称，请点击每个单独的菜单并在“检查器：菜单项”下确认。您将能够看到名称，而不是（菜单项名称）。

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

将出现一个空白菜单项。双击空白菜单项，然后输入菜单标题“帮助”。重复此过程，在“检查器：菜单项名称”下为其提供名称。完成后，您将看到设计区域如下所示。

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

点击“文件”菜单栏标题并观察“检查器：菜单项”。

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

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

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

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

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

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

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

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

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

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

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

如果我们客观地看待它，我们只是利用 Axure 创建了一个复杂的交互，例如将鼠标悬停在菜单项上。在通常的 HTML 编码中，这将需要大约 1 到 1.5 小时的时间。

作为一个作业，请完成其余菜单的子菜单。

现在，让我们快速在“文件”菜单下的“关闭”子菜单上创建一个交互。我们将鼠标悬停时将其高亮显示为红色。为此，请右键点击“关闭”子菜单。点击“交互样式…”

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

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

点击“确定”以完成此设置。

再次点击“预览”以查看实际交互。

本例到此结束。

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

使用按钮组件的 OnClick 属性。