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

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