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创建一个新文件。
在此示例中，我们将设计大多数软件产品中所见的简单
菜单栏。菜单结构将包含以下菜单元素和每个元素下的子菜单。
文件
New
Open
Save
Close
编辑
Cut
Copy
Paste
Find
Replace
查看
显示状态栏
Toolbars Main Toolbar Styling Toolbar
帮助
Getting Started
Using Help
What’s this
首先，将
经典菜单-水平拖放到设计区域中。您将在库 → 菜单和表格下找到它。将该控件命名为 MenuBarExample。让我们让这个元素的宽度为 300 像素，高度为 30 像素。将其定位在 X 轴上的 100 和 Y 轴上的 30。您可以在右侧检查器部分下的样式选项卡下调整这些值。
在上述过程结束时，您将能够看到如下屏幕截图所示的最终结果。
让我们也将名称添加到 Inspector 部分的菜单标题中。单击每个菜单标题并观察检查器部分。如果没有为特定的菜单栏指定名称，则名称将变为（菜单项名称）。
将文件菜单命名为
FileMenu。
编辑为
EditMenu 和查看为
ViewMenu。
要确认是否提供了名称，请单击每个单独的菜单并在检查器：菜单项下确认。您将能够看到名称而不是（菜单项名称）。
现在，根据我们的要求，让我们用"帮助"菜单完成菜单栏。右键单击菜单栏标题-查看，您将看到一个上下文菜单。点击添加菜单项之后。
将出现一个空白菜单项。双击空白菜单项，输入菜单标题为帮助。重复该过程，在 Inspector: Menu Item Name 下为其提供一个名称。完成后，您将看到如下所示的设计区域。
接下来，让我们设计文件菜单的交互。
单击文件菜单栏标题并观察检查器：菜单项。
如上面屏幕截图中突出显示的，请观察"属性"选项卡。
在属性选项卡下，我们将为文件菜单创建交互。
在菜单中添加子菜单非常简单。右键单击文件菜单，在出现的上下文菜单中，单击添加子菜单。
注意-我们也可以通过重复相同的步骤并单击删除子菜单来删除子菜单。
一旦添加了子菜单，就会出现一个空白的子菜单。双击每个菜单项并提供名称，例如-新建、打开、保存。
右键单击最后一个子菜单项，然后再添加一个子菜单项。将其命名为关闭。
最好也为 Inspector 部分下的所有子菜单项命名。这有助于在您的整体设计过程中参考它们。
在设计此部分时，请注意，每当我们单击设计区域的任何其他部分时，子菜单都会消失。我们需要点击文件菜单项来查看子菜单。
让我们谈谈交互——
悬停。当鼠标指针悬停在特定元素上时，此交互具有触发的独特行为。在 Axure 中，这种交互是通过经典菜单-水平自动实现的。
要查看实际交互，请单击工具栏中的"预览"按钮。 Axure 将在默认浏览器中打开预览。
将鼠标悬停在文件菜单上。子菜单将如下面的屏幕截图所示显示。
如果我们客观地看待它，我们刚刚使用 Axure 创建了一个复杂的交互，例如悬停在菜单项上。在通常的 HTML 编码中，它会花费接近 1 到 1.5 个小时的时间。
作为一项作业，完成其子菜单的其余菜单。
现在，让我们在"文件"菜单下的"关闭"子菜单上快速创建一个交互。悬停时，我们将以红色突出显示它。为此，右键单击关闭子菜单。点击交互样式...
在鼠标悬停选项卡下，选中填充颜色并选择红色。 Axure 将立即在设计区域中显示预览。假设应用到部分选定菜单和所有子菜单被选中，它将以红色突出显示整个菜单。
仅单击选定的菜单项。现在检查选择字体颜色并为字体选择白色。预览将立即更新。
单击"确定"完成此设置。
再次单击"预览"以查看正在执行的交互。
示例到此结束。
您可以尝试以下互动作为快速作业。
使用按钮小部件的 OnClick 属性。
