Axure RP - 基本交互
本章将带您了解Axure在设计屏幕时提供的基本交互集。
Axure RP 的目的是允许交互式原型。现在，在制作交互式原型时，总是需要注意创建过度交互式的原型。这就是为什么一次从单个重要交互开始，以便冲刺其余可用页面是有意义的。
Axure交互
交互是为将静态线框转换为可点击的交互式原型的功能元素而创造的术语。为了使其成为一种简单的交互方法，Axure 通过提供用于定义结构和逻辑的接口来消除对原型进行编码的需要。
在生成 HTML 原型的同时，Axure RP 将交互转换为真实的代码（HTML、CSS 和 JavaScript）。这充当了在页面上显示预期设计和交互的催化剂。
通常，交互将从交互发生时开始。例如，当页面在浏览器中加载时、当用户单击其中一个元素时等。
接下来的问题是，交互发生在屏幕的哪个位置。它可以是一个简单的屏幕元素，例如矩形，我们希望将其变成可单击的按钮以用于菜单（稍后显示的示例）。
最后是交互中发生了什么的描述。让我们考虑浏览器加载页面时的页面加载；您可以简单地选择一个特定的幻灯片开始播放，或者在屏幕上输入时让图像变大。
轴事件
Axure中的事件可以有两种类型，由两种类型的事件触发。
页面和大师级活动
当页面加载时，会发生大量事件来获取设计信息、内容，从而获取屏幕上每个元素的对齐方式。由于这些事件发生在初始页面加载期间，您可以认为这些事件将在每次页面加载时重复。以下是页面和主级事件的一些示例。
- 页面加载时
- 窗口调整大小
- 鼠标移动时
- 自适应视图更改时
对象或小部件级别事件
让我们考虑一下，我们已经创建了一个页面和该页面上的特定按钮小部件。现在，为了与此按钮小部件交互，可以通过触摸（在移动原型上）或单击鼠标。以下是对象或小部件级别事件的一些示例。
- 单击时
- 鼠标输入
- 拖拽时
- 点滴
- 鼠标悬停时
案例
正如前一章所讨论的，在页面属性部分，可以设计特定的小部件交互。这些称为案例。特定的交互可以是多个案例的构成。
让我们考虑一个例子，以便更好地理解这一点。
示例：Axure Prototype – 鼠标悬停时显示菜单
要开始此示例，请通过单击“文件”菜单下的“新建”或使用快捷键Ctrl + N创建一个新文件。
在此示例中，我们将设计大多数软件产品中常见的简单菜单栏。菜单结构将具有以下菜单元素以及每个菜单元素下的子菜单。
文件
- 新的
- 打开
- 节省
- 关闭
编辑
- 切
- 复制
- 粘贴
- 寻找
- 代替
看法
- 显示状态栏
- 工具栏
- 主工具栏
- 样式工具栏
帮助
- 入门
- 使用帮助
- 这是什么
首先，将经典菜单 - 水平拖放到设计区域中。您可以在“库”→“菜单和表格”下找到它。将控件命名为 MenuBarExample。让我们将这个元素设置为宽度 300 px、高度 30 px。将其定位在 X 轴上的 100 处和 Y 轴上的 30 处。您可以在右侧“检查器”部分下的“样式”选项卡下调整这些值。
在上述过程结束时，您将能够看到最终结果，如以下屏幕截图所示。
让我们将名称也添加到“检查器”部分的菜单标题中。单击每个菜单标题并观察检查器部分。如果没有给特定菜单栏指定名称，则名称将变为（菜单项名称）。
将文件菜单命名为FileMenu。
Edit as EditMenu和 View as ViewMenu也是如此。
要确认是否已提供名称，请单击每个单独的菜单并在检查器：菜单项下进行确认。您将能够看到名称而不是（菜单项名称）。
现在，根据我们的要求，让我们用“帮助”菜单来完成菜单栏。右键单击菜单栏标题 - 查看，您将看到一个上下文菜单。单击之后添加菜单项。
将出现一个空白菜单项。双击空白菜单项，然后输入菜单标题“帮助”。重复该过程，在检查器：菜单项名称下为其提供一个名称。完成后，您将看到如下设计区域。
接下来，让我们设计文件菜单的交互。
单击“文件”菜单栏标题并观察“检查器：菜单项”。
如上面屏幕截图中突出显示的那样，观察“属性”选项卡。
在“属性”选项卡下，我们将为“文件”菜单创建交互。
向菜单添加子菜单非常简单。右键单击“文件”菜单，在出现的上下文菜单中单击“添加子菜单”。
注意- 我们还可以通过重复相同的步骤并单击“删除子菜单”来删除子菜单。
添加子菜单后，将出现一个空白子菜单。双击每个菜单项并提供名称，例如 – 新建、打开、保存。
右键单击最后一个子菜单项并添加另一个子菜单项。将其命名为“关闭”。
最好也命名“检查器”部分下的所有子菜单项。这有助于在整个设计过程中引用它们。
在设计这部分时，请注意，每当我们单击设计区域的任何其他部分时，子菜单都会消失。我们需要单击“文件”菜单项才能查看子菜单。
我们先来说说交互——Hover。当鼠标指针悬停在特定元素上时，此交互具有触发的独特Behave。在Axure中，这种交互是通过经典菜单-水平自动实现的。
要查看实际交互，请单击工具栏中的“预览”按钮。Axure将在默认浏览器中打开预览。
将鼠标悬停在“文件”菜单上。将显示子菜单，如下图所示。
如果我们客观地看待它，我们只是利用Axure创建了一个复杂的交互，例如悬停在菜单项上。在通常的 HTML 编码中，大约需要 1 到 1.5 小时的时间。
作为作业，完成其子菜单的其余菜单。
现在，让我们在“文件”菜单下的“关闭”子菜单上快速创建一个交互。当鼠标悬停时，我们会将其突出显示为红色。为此，请右键单击“关闭”子菜单。单击交互样式...
在“MouseOver”选项卡下，选中“填充颜色”并选择红色。Axure会立即在设计区域显示预览。假设选择了“应用到选定菜单”部分和所有子菜单，它将以红色突出显示整个菜单。
仅单击选定的菜单项。现在检查选择字体颜色并为字体选择白色。预览将立即更新。
单击“确定”完成此设置。
再次单击“预览”以查看实际交互。
这样就完成了示例。
您可以尝试以下交互作为快速作业。
使用按钮小部件的 OnClick 属性。