AXURE_RP案例教程.ppt

Axure 中级互动设计 1——控制 Dynamic Panel

控制 Dynamic Panel

1. Axure RP 实现更丰富的互动设计

2. 认识 Dynamic Panel Widget

3. 编辑 Dynamic Panel 的状态

4. 预设 Dynamic Panel 的显示/隐藏

5. 示范-以 Click 来开关 Dynamic Panel

6. 教学影片

Axure RP 与其他的 wireframe 软体，最大的差异在于能够进行互动设计(Interaction Design)，且可

以立即将结果呈现于 prototype 上，而不是只有文字叙述。更棒的一点是，学习 Axure RP 的互动设计，

您并不需要学习 HTML 或 Java Script 语法，只要透过一些设定与操作，便可以完成多样而创新的互动介

面设计。

在 Axure RP 设计出来的 Prototype 中，最简单的互动设计是网页连结，透过滑鼠的 click 来串起使用者

与网站的互动流程。然而，真正发挥 Axure RP 在互动设计上的惊人特色，并不是只有连结这么简单的互

动，您可以藉由学习 Dynamic Panel (动态面板)物件的操作与控制，来做到更丰富更友善的互动介面设

计。

2. 认识 Dynamic Panel Widget

Dynamic Panel ( 动态面板) 这种物件是专门 用在 设计 Prototype 动态功能的 Widget，Dynamic

态就是该面板的长相。

(2) State (状态)：

每个状态都是一个小网页，而这个小网页的边界与大小，与所属的 Dynamic Panel 大小相同。不同的

State 可 以 重 叠 在 同 一 个 Dynamic Panel 里 头 ， 唯 有 被 控 制 放 在 最 上 层 的 State ， 才 会 呈 现 于

Prototype 的画面中。

以 Axure RP 所设计出来的多样互动介面，大多藉由各种触发事件(Event)来控制 Dynamic Panel 显示

或消失，或控制哪个 State 在最上层来模拟出实际的互动介面。

3. 编辑 Dynamic Panel 的 State(状态)

已经摆放到画布中的 Dynamic Panel，直接在上头快速点滑鼠左键两下，会开启「 Dynamic Panel

State Manager」对话方块。在这个对话视窗中，您可以新增 State、更改 State 名称、调整 State 排

4. 预设 Dynamic Panel 的显示/隐藏

Dynamic Panel 可以预设为隐藏(Hidden)，作法是在 Dynamic Panel 物件上按滑鼠右键，并选择

「Edit Dynamic Panel->Set Hidden」，这样就可以隐藏 Panel 的内容，而且 Dynamic Panel 的遮

罩也会从蓝色变成黄色。已经预设隐藏的 Dynamic Panel，可以选择「Edit Dynamic Panel->Set

Visible」来显示 Dynamic Panel。

Dynamic Panel 可以藉由接下来所介绍的互动模式，动态控制在 Prototype 中的显示或隐藏。 Axure

RP 提供互动设计的实现方式，都在「Interaction Case Properties」对话方块中设定(请参考初级互动

设计)。

其中有 5 种互动方式(Action)是专门用来控制 Dynamic Panel 的，分别是:

* Set Panel state(s) to State(s)：将某个 Dynamic Panel 的 State 设定为该 Panel 的显示状态

出现一个讯息视窗，再 Click 一次时，又把讯息视窗隐藏起来。换句话说，我们将藉由滑鼠 Click 来控制

Dynamic Panel 的显示与隐藏。

首先我们先在画布上放一个矩形物件。接下来放置一个 Dynamic Panel，并且编辑这个 Panel 唯一的预

设状态(State1)。

在 State1(状态)的 wireframe 上，随意加入一些文字，以供辨认。