Axure RP - 基本交互( Basic Interactions)
本章将向您介绍Axure在设计屏幕时提供的基本交互集。
Axure RP的目的是允许交互式原型。 现在，在制作交互式原型时，始终需要注意创建一个过度交互的原型。 这就是为什么，一次从单个重要的交互开始，以便冲刺其余的可用页面是有道理的。
轴相互作用
交互是为将静态线框转换为可点击的交互式原型的功能元素而创造的术语。 为了使其成为一种简单的交互方法，Axure通过提供用于定义结构和逻辑的接口，消除了对原型进行编码的需要。
在生成HTML原型时，Axure RP将交互转换为实际代码（HTML，CSS和JavaScript）。 这可以作为催化剂在页面上显示预期的设计和交互。
通常，交互将在交互发生时开始。 例如，当页面在浏览器中加载时，当用户点击其中一个元素时，等等。
然后是问题，屏幕上的交互正在发生。 它可以是一个简单的屏幕元素，例如矩形，我们希望将其转换为可点击按钮以用于菜单（稍后显示的示例）。
最后，描述了交互中发生了What 。 让我们考虑浏览器加载页面时的页面加载; 您只需选择一个特定的幻灯片开始或在屏幕上输入时图像变大。
Axure活动
Axure中的事件可以是两种类型，由两种类型的事件触发。
页面和主要级别事件
当页面加载时，会发生大量事件来获取设计信息，内容，从而获取屏幕上每个元素的对齐方式。 由于这些事件发生在初始页面加载期间，您可以认为这些事件在每次页面加载时都是重复的。 以下是Page和Master Level Events的一些示例。
- OnPageLoad
- OnWindowResize
- OnMouseMove
- OnAdaptiveViewChange
对象或小组件级别事件
让我们考虑一下，我们在页面上创建了一个页面和一个特定的按钮小部件。 现在，可以通过触摸（在移动原型上）或鼠标单击来与此按钮小部件进行交互。 以下是对象或小组件级别事件的一些示例。
- OnClick
- OnMouseEnter
- OnDrag
- OnDrop
- OnMouseHover
Cases
如前一章所述，在页面属性部分中，可以设计特定的窗口小部件交互。 这些被称为cases 。 特定的互动可以是多个案例的构成。
让我们考虑一个例子，更好地理解这一点。
示例:Axure原型 - 鼠标悬停时显示菜单
要从此示例开始，请通过单击New File菜单下的“ New ”或使用快捷键Ctrl + N创建新文件。
在这个例子中，我们将设计简单的Menu Bar如大多数软件产品中所示。 菜单结构将具有以下菜单元素和每个菜单元素下的子菜单。
File
- New
- Open
- Save
- Close
Edit
- Cut
- Copy
- Paste
- Find
- Replace
View
- 显示状态栏
- 工具栏
- 主工具栏
- 样式工具栏
Help
- 入门
- 使用帮助
- 这是什么
首先，在设计区域中拖放Classic Menu – Horizontal 。 您可以在Libraries→Menus and Tables下找到它。 将控件命名为MenuBarExample。 让我们制作宽度为300像素，高度为30像素的元素。 将其定位在X轴上的100和Y轴上的30。 您可以在右侧“检查器”部分下的“样式”选项卡下调整这些值。
在上述过程结束时，您将能够看到最终结果，如以下屏幕截图所示。
我们也将这些名称添加到“检查器”部分的菜单标题中。 单击每个菜单标题并观察检查器部分。 如果未将名称指定给特定菜单栏，则名称将变为（菜单项名称）。
将File菜单命名为FileMenu 。
编辑为EditMenu和View为ViewMenu 。
要确认是否已提供名称，请单击每个菜单，然后在“检查器:菜单项”下确认。 您将能够看到名称而不是（菜单项名称）。
现在，根据我们的要求，让我们使用“帮助”菜单完成菜单栏。 右键单击菜单栏标题 - 查看，您将看到一个上下文菜单。 单击“添加菜单项”。
将出现一个空白菜单项。 双击空白菜单项，然后输入菜单标题作为帮助。 重复此过程，在Inspector:Menu Item Name下为其命名。 完成后，您将看到如下设计区域。
接下来，让我们设计文件菜单的交互。
单击文件菜单栏标题，然后观察检查器:菜单项。
如上面的屏幕截图所示，请观察“属性”选项卡。
在Properties选项卡下，我们将为File Menu创建交互。
将子菜单添加到菜单非常简单。 右键单击“文件”菜单，在出现的上下文菜单中，单击“添加子菜单”。
Note - 我们还可以通过重复相同步骤并单击“删除子菜单”来删除子菜单。
添加子菜单后，将出现一个空白子菜单。 双击每个菜单项并提供诸如“新建”，“打开”，“保存”等名称。
右键单击最后一个子菜单项，然后再添加一个子菜单项。 将其命名为Close。
在Inspector部分下命名所有子菜单项也是一个好习惯。 这有助于在整个设计过程中引用它们。
在设计此部件时，请注意每当我们单击设计区域的任何其他部分时，子菜单将消失。 我们需要单击“文件”菜单项以查看子菜单。
我们来谈谈互动 - Hover 。 当鼠标指针悬停在特定元素上时，此交互具有触发的独特行为。 在Axure中，此交互是使用经典菜单 - 水平自动实现的。
要查看正在进行的交互，请单击工具栏中的“预览”按钮。 Axure将在默认浏览器中打开预览。
将鼠标悬停在“文件”菜单上。 子菜单将显示如下面的屏幕截图所示。
如果我们客观地看待它，我们刚刚利用Axure创建了一个复杂的交互，例如悬停在菜单项上。 在通常的HTML编码中，它将花费大约1到1.5小时的时间。
作为一项任务，完成其子菜单的其余菜单。
现在，让我们在“文件”菜单下的“关闭”子菜单上快速创建交互。 我们将在悬停时用红色突出显示它。 为此，请右键单击“关闭”子菜单。 单击交互样式...
在MouseOver选项卡下，选中选择填充颜色并选择红色。 Axure将立即在设计区域显示预览。 假设选择了应用于选定菜单部分和所有子菜单，它将以红色突出显示整个菜单。
单击仅选择菜单项。 现在选中“字体颜色”并为字体选择白色。 预览将立即更新。
单击“确定”完成此设置。
再次单击“预览”以查看正在进行的交互。
这完成了这个例子。
您可以尝试以下交互作为快速分配。
使用按钮小部件的OnClick属性。
