Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 201 Article 1: Rich Interactions复杂交互

Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 201 Article 1: Rich Interactions复杂交互 - Dynamic Panels动态面板

Overview

概述

    1. Dynamic Panels Demo
    1. 动态面板演示
    2. Dynamic Panel Widget
    2. 动态面板部件
    3. Editing Dynamic Panel States
    3. 编辑动态面板状态

4. Dynamic Panel Manager

4. 动态面板管理器

    5. Hiding Dynamic Panels
    5. 隐藏动态面板
    6. Interactions and Dynamic Panels
    6. 交互和动态面板
    7. Sample Usage

7. 使用示例

1. Dynamic Panels Demo

1. 动态面板演示

Note: This video was created using version 5.0. Axure RP Pro 5.5 now includes the Dynamic Panel Manager (see section 4 below).
注意：该视频使用版本5.0创建，Axure RP Pro 5.5现在已包含Dynamic Panel Manager动态面板管理器（参见下面的第4部分）

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

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

2. Dynamic Panel Widget

2. 动态面板部件

Dynamic Panel Widget Dynamic Panels are widgets that allow you to demonstrate dynamic functionality in your prototype. Dynamic panels can contain one or more states. Each state contains a collection of widgets. At any time, one state can be made visible or the entire dynamic panel can be made hidden.
动态面板是允许在原型中展现动态功能的部件。动态面板包含一个或多个状态。每个状态都包括一个部件的集合。任何时候，可以设淀显示一个状态或者隐藏完整的动态面板。

Interaction Actions are available to hide, show, and change the state of dynamic panels.
动态面板的交互动作包括隐藏，显示和改变动态面板的状态。

Like other widgets, dynamic panels can be added to the wireframe by dragging and dropping from the Widgets pane.
像其他部件一样，动态面板可以从Widgets"部件"面板拖放到线框中。

3. Editing Dynamic Panel States

3. 编辑动态面板状态

Double-clicking a dynamic panel in a wireframe will open the Dynamic Panel State Manager dialog. In this dialog, states can be created, renamed, reordered, removed, and edited. The first state in the panel is the default state of the panel.
在线框中双击一个动态面板将打开Dynamic Panel State Manager"动态面板状态管理器"对话框。在这个对话框中，可以创建、重命名、排序、删除和编辑状态，面板中的第一个状态是面板的默认状态。

Selecting a panel state in the Dynamic Panel State Manager and clicking "Edit State", opens the wireframe for that panel state for design.
在动态面板状态管理器中选择一个面板状态后单击Edit State“编辑状态”，可以设计面板状态的线框。

Once open, panel states can be designed like any other wireframe. A blue dashed outline on the wireframe indicates the boundaries of the dynamic panel.
打开后，面板状态可以像任何线框一样进行设计。线框上的蓝色虚线轮廓表示动态面板的边界。

4. Dynamic Panel Manager

4. 动态面板管理器

Note: This feature is new in Axure RP Pro 5.5.
注意： 该特性是Axure RP Pro 5.5中的新特性。

The Dynamic Panel Manager can be shown using View->Dynamic Panel Manager. It will be added to the bottom of the right-hand side. The Dynamic Panel Manager provides tools for managing the dynamic panels on a page.
单击View（查看）菜单，单击Dynamic Panel Manager（动态面板管理器）菜单项可以显示Dynamic Panel Manager（动态面板管理器），将被添加在右侧的底部，动态面板管理器提供管理一个页面上的动态面板的工具。

Dynamic panel states can be added, removed, and opened for editing in the manager. To add or remove states, right-click on the dynamic panel name or a dynamic panel state and use the context menu.
动态面板管理器中可以添加、删除和打开编辑动态面板的状态。

In addition, dynamic panels on the page can be hidden from view in the wireframe editor for easier access to widgets beneath them. To hide a dynamic panel, click on the blue square to the right of the dynamic panel name, or to hide all the panels on a page, right-click on
the page name and select Hide All.
进一步，为更方便的访问动态面板下侧的部件，在线框编辑器的视图中可以隐藏页面上的动态面板，要隐藏一个动态面板，可以单击动态面板名称右侧的蓝色方框，如果要隐藏页面上的所有动态面板，可以右击页面名称后选择Hide All（全部隐藏）菜单项。

To open a state for editing, double-click the state. To open all the states of a dynamic panel, right click on the Dynamic Panel name and select "Edit All States".
双击状态可以编辑一个状态，右击动态面板名称后选择 “Edit All States（编辑全部状态）”菜单项可以打开一个动态面板的所有状态。

5. Hiding Dynamic Panels

5. 隐藏动态面板

Dynamic panels can be set to be hidden by default. This is different than hiding the dynamic panel from view in the editor using the dynamic panel manager. To do this, right click on the dynamic panel and select Edit Dynamic Panel->Set Hidden. This will hide the panel contents and change the mask for dynamic panels from blue to yellow.
动态面板可以设置为默认隐藏，这和使用动态面板编辑器在编辑视图中隐藏动态面板不同。右击动态面板后选择Edit Dynamic Panel"编辑动态面板"子菜单后选择Set Hidden"设置隐藏"菜单项即可实现。这将隐藏面板内容并把动态面板的遮罩颜色从蓝色改为黄色。

The dynamic panels can be dynamically shown in the prototype using interactions as discussed below.
动态面板可以按下面的讨论在原型中通过交互动态显示。

6. Interactions and Dynamic Panels

6. 交互和动态面板

Interactions can be designed to interact with dynamic panels. The Interaction Case Properties dialog contains the following set of actions that affect dynamic panels:
可以设计与动态面板互操作的交互。Interaction Case"交互用例"对话框包含下列影响动态面板的操作集：

Set Panel state(s) to State(s)
设置面板的状态为 State(s)
Show Panel(s)
显示面板
Hide Panel(s)
隐藏面板
Toggle Visibility for Panel(s)
切换面板的可见性
Move Panel(s)
移动面板
Bring Panel(s) to Front
将面板移到最前

After selecting one of these actions, the panels to interact with and the states to set the panels to (if needed) can be specified by clicking the links in the Actions descriptions.
在选择这些动作之一后，可以在Actions “动作”描述中指定交互的面板，在需要时可以指定面板要设置成的状态。

When selecting the dynamic panels, the dynamic panels are identified by the Label of the dynamic panel assigned in the Annotations & Interactions Pane. If no label has been specified, dynamic panels will be identified as "Unlabeled".
在选择动态面板时，通过Annotations & Interactions"标注和交互"面板中设定的动态面板的Label"标签"来识别动态面板。没有指定标签时，动态面板将标识为 “Unlabeled”。

Beginning with version 5.5, conditions can be created to evaluate the current dynamic panel state in the Condition Builder .
从版本5.5开始，在条件编辑器中可以创建判断当前动态面板状态的条件

6. Sample Usage

6.使用示例

Tab Control:
标签控件：

A dynamic panel can be used to create a tab control. For a tab control with 3 tabs, the tab control is contained in a dynamic panel which has three states, one for each tab. There is an interaction on each of the three tab buttons that changes the state of dynamic panel to the state corresponding to the clicked tab.
动态面板可用于创建标签控件，对于包括三个标签的标签控件，标签控件包含在一个有三个状态的动态面板中，每个状态对应一个标签。三个标签按钮的每一个都有一个交互用于改变动态面板的状态到与单击的标签对应的状态上。

To see a sample containing a tab control created using a dynamic panel, visit this blog entry .
访问博客可以看到一个通过动态面板创建的包含标签控件的示例。

Flyout Menu:
弹出菜单：

Dynamic panels can be used to prototype custom flyout menus or dynamically show and hide regions based on mouse movements. This can be accomplished using a combination of the OnMouseEnter event and Actions to show and hide dynamic panels.
动态面板可以用定制弹出菜单原型或者按鼠标的移动动态显示或隐藏区域。这可以通过OnMouseEnter事件和显示或隐藏动态面板的动作协作实现。

To see a sample containing a flyout menu created using a dynamic panel, visit this blog entry .
访问博客可以看到一个通过动态面板创建的包含弹出菜单的示例。

Basic flyout menus can be created using the Menu widgets as discussed in AXURE 201 Lecture 3: Menus
基本的弹出菜单也可以使用AXURE 201: Rich Interactions复杂交互 - Article 3: Menus菜单中讨论的Menu"菜单"部件来创建。

Page Initialization:
页面初始化：

Dynamic panels can be used in combination with the OnPageLoad event to initialize a page's interface depending on a variable value. More information on this usage is available in AXURE 202 Lecture 5: OnPageLoad Event .
动态面板与动态面板相结合可以依据变量值初始化一个页面的界面。关于这种用法更多的信息参见AXURE 202: Rich Functionality复杂功能 - Article 6: OnPageLoad Event .