baiguomeng

浏览: 956977 次

最近访客更多访客>>

u012363178

wangyy

canofy

深诺7号

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1544)

社区版块

存档分类

Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 101 Article 3: Introduction介绍 - Basic Interactions基本交互

Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 101 Article 3: Introduction介绍 - Basic Interactions基本交互

Overview

概述

1. Basic Interactions Demo
1. 演示基本交互
2. Interactions
2. 交互
3. Defining a Basic Link
3. 定义一个基本链接
4. Actions
4. 动作
5. Multiple Cases
5. 多重用例
6. Page Level Interactions: OnPageLoad

6. 页面级的交互: OnPageLoad
7. Advanced Interactions Editor
7. 高级交互编辑器

1. Basic Interactions Demo

1. 演示基本交互

Please turn on speakers for audio
请打开扬声器听声音

To view in HD on Vimeo, please click here .
在Vimeo上观看高清视频，请单击这里 .

2. Interactions

2. 交互

The Interactions pane is used to define the behavior of the widgets on the wireframes. Interactions can be added ranging from basic links to Rich Internet Application (RIA) behavior. The defined interactions will function in the generated prototype.

交互面板用于定义线框上部件的行为。可以增加的交互范围可以从基本链接到复杂互联网应用程序（Rich Internet Application, RIA）行为。定义后的交互将在生成的原型中起作用。

Interactions are made up of Events, Cases, and Actions.

交互包括事件、用例和动作。

Some examples of Events are OnClick, OnMouseEnter, and OnMouseOut.

事件包括 OnClick，OnMouseEnter和OnMouseOut等。

Each Event can have one or more Cases. For example, the OnClick event of a button, can have two cases: one leading to Page 1 and the other leading to Page 2.

每个事件能包括一个或多个用例，例如：一个按钮的OnClick事件可以包括两个用例：一个将引导到页面1，而另一个将引导到页面2。

Each Case can perform one or more Actions. An example of an Action is Open Link in Current Window which is a basic link.

每个用例能执行一个或多个动作。例如一个动作是在当前窗口中打开一个基本链接。

Cases can be copied by right clicking on a case or event and selecting copy case. To paste the copied case to an event on the same or different widget, right click on the event and select paste case.

右击一个用例或事件后选择 copy case（复制用例）可以复制用例。

3. Defining a Basic Link

3. 定义一个基本链接

Below are the steps to adding a basic link to a Button widget.

下述步骤可以在一个按钮部件上增加一个基本链接。

Add a Button widget to a wireframe and select it.

在线框上增加一个按钮部件然后选择之。

Add a Case: To add a case to the OnClick event of that button, select OnClick in the Interactions pane and click "Add Case" (or simply double click on OnClick). This brings up the Interaction Case Properties dialog where you choose which actions to perform.

增加一个用例: 为了在按钮的OnClick事件上增加一个用例，在交互面板上选择OnClick后单击“Add Case”“增加用例”，或者简单的在OnClick上双击。将出现交互用例属性地话框用来选择所执行的动作。

Add an Action: In the dialog, check the Open Link in Current Window action.

增加一个动作: 在对话框中，选择Open Link in Current Window“在当前窗口打开链接”动作。

Edit Action Options: Click "Link" to open the Link properties dialog box and link to a page in the design or link to an external URL.

编辑动作选项: 单击"Link"（链接）打开链接属性对话框，然后设置连接到设计中的一个页面或者链接到一个外部的URL。

To quickly add a basic link to a widget, select the widget, click on Quick Link at the top of the Interactions pane and choose the target page.

要快速的为一个部件增加一个基本链接，单击交互面板上侧的Quick Link“快速链接”然后选择目标页面。

4. Actions

4. 动作

There are many Actions available in Axure RP in addition to basic links. One or more of these Actions can be performed on any Case on an Event. Below is a list of the Actions available in Axure RP.

除基本链接之外，Axure RP还包括很多动作。在一个事件的一个用例中可以执行这些动作中的一个或多个。下面是Axure RP中有效的动作列表：

Open Link in Current Window: Opens the page in the current window.

在当前窗口中打开链接: 在当前窗口中打开页面。

Open Link in Popup Window: Opens the page in a popup window.

在弹出窗口中打开链接: 在弹出窗口中打开页面

Open Link in Parent Window: Used from a popup window to change the page loaded in the window that opened the popup.

在父窗口中打开链接: 用于在弹出窗口中改变打开该弹出窗口的窗口的页面。

Close Current Window: Closes the current window.

关闭当前窗口: 关闭当前窗口。

Open Link(s) in Frame(s): Used with the inline frame widget to change the page loaded in the inline frame.

在框架中打开链接: 和内部框架部件共同作用改变内部框架加载的页面。

Open Link in Parent Frame: Opens a page in the parent frame. Used from pages loaded in inline frames.

在父框加打开链接： 在父框架打开一个页面，用于从内部框架加载页面。

Set Panel state(s) to state(s): Set the current state of one or more dynamic panels.

设置面板的状态为指定状态: 设置一个或多个动态面板的当前状态

Show Panel(s): Shows (makes visible) one or more dynamic panels.

显示面板: 显示（使可见）一个或多个动态面板

Hide Panel(s): Hides one or more dynamic panels.

隐藏面板: 隐藏一个或多个动态面板

Toggle Visibility for Panel(s): Shows or hides dynamic panels based on their current visiblity.

切换面板的可见性: 按照面板当前的可见性显示或隐藏动态面板。

Move Panel(s): Move a dynamic panel to a specific location or by a specified distance.

移动面板: 按指定距离或指定位置移动动态面板。

Bring Panel(s) to Front: Brings a dynamic panel to the top layer of the page.
将面板移动最前： 移动一个动态面板到页面的最顶层。

Set Variable and Widget value(s) equal to Value(s): Sets the value of one or more variables and/or widgets.
设置变量或部件的值等于指定值: 设置一个或多个变量和/或部件的值。

Scroll to Image Map Region (Anchors): Scroll a page to a specific location horizontally, vertically or both.

滚动到图片的映射区域（锚）：: 以垂直或水平或两者同时滚动页面到指定的位置。

Enable Widget(s): Enable form widgets like a droplist or text field.

使部件有效: 使窗体部件有效，例如下拉列表框或文本框。

Disable Widget(s): Disable form widgets.

使部件无效: 使窗体部件无效

Set Widget(s) to Selected State: Sets the style of the widget to its Selected style or back to its default style.
设置部件为选中状态： 设置部件的样式为选中的样式或返回它的默认样式。

Set Focus on Widget: Sets the focus on a specified widget such as a text field.

设置部件焦点： 设置焦点在指定部件上，例如一个文本框。

Wait Time: Delays actions by a specified time.

等待时间: 按指定时间延迟动作。

Expand Tree Node(s): Expands the nodes of a tree widget.

展开树节点： 展开一个树部件的节点

Collapse Tree Node(s): Collapses the nodes of a tree widget.

缩进树节点： 缩进一个树的节点

Other: Shows a textual description of an action such as "Send email to user".

其他: 显示一个动作的文本描述，例如“向用户发送电子邮件”。

5. Multiple Cases

5. 多重用例

Multiple Cases can be added to an Event to communicate conditional flows or interactions.
一个事件可以增加多重用例以展示条件流程或交互。

For example, you could have two cases on the OnClick event of a button. The first case could be given a description "If Yes" and an Action to open Page 1. The second case could be given a description "If No" and an Action to open Page 2.

例如，一个按钮的OnClick事件可以包括两个用例，第一个用例可以设定一个描述”如果是“和一个打开页面1的动作，第二个用例可以设定一个描述”如果否“和一个打开页面2的动作。

When the button is clicked in the prototype, the descriptions for each case ("If Yes" and "If No") are shown. Clicking on a description will perform the associated Action.

在原型中单击按钮时，将显示每个用例的描述（“如果是”和“如果否”）。单击一个描述将执行相应的动作。

Using descriptions is effective for communicating conditional flow. However, if a higher fidelity prototype is required, Axure RP supports defining conditional logic on Cases to perform Actions based on values entered in form widgets in the prototype or values stored in variables. This is discussed in AXURE 202 Article 1: Conditional Logic .

使用描述将有效的展示条件流程。然而，当需要更详尽的原型时，Axure RP支持在用例上定义条件逻辑以便基于原型中表单部件输入的值或变量中保存的值来执行动作，这些在AXURE 202: Rich Functionality复杂功能 - Article 1: Conditional Logic条件逻辑进一步讨论。

6. Page Level Interactions: OnPageLoad

6. 页面级交互: OnPageLoad

The OnPageLoad event occurs when a page loads in the prototype.

当原型载入页面中时将触发OnPageLoad事件。

The OnPageLoad interaction is defined in the Interactions pane within the Page Notes pane. Cases are added to this event the same as adding Cases to Events on widget interactions.

OnPageLoad交互定义在 Page Notes“页面注释”面板中的Interactions“交互”面板中。如同在部件的事件上增加交互一样，可以为这个事件增加用例。

The OnPageLoad Event is discussed in more detail in AXURE 202 Article 5: OnPageLoad Event .

OnPageLoad事件将在AXURE 202: Rich Functionality复杂功能 - Article 6: OnPageLoad Event - OnPageLoad事件进一步讨论。

7. Advanced Interactions Editor

7. 高级交互编辑器

In the Interactions Case Properties dialog, you can access the Advanced Interactions Editor by clicking on link to the right above the Select Actions section. The Basic Editor allows each action to be added once to a case and automatically orders the action in a logical manner. Using the Advanced Editor, you can customize the order of actions and add multiple of each action. This can be useful for creating animations by using the Wait action and setting dynamic panels multiple times.

在交互用例属性对话框，单击选择动态区域上方右侧的链接能访问高级交互编辑器。基本编辑器允许一个用例一次添加一个动作并以一个逻辑原则排列动作。使用高级编辑器能自定义动作的顺序和添加多个相同的动作。适用于通过多次等待动作和设置动态面板创建动画。

The Advanced Actions Editor is discussed in more detail in AXURE 201 Article 3: Advanced Interactions Editor .

讨论高级动作编辑器的更多细节参见 AXURE 201 Article 3: 高级交互编辑器 .