Axure初中高级交互实例

step 1: Description - 预设为Case 1，不用变更。

step 2: Select Actions - 勾选Toggle Visibility for Panel(s)，此时在step 3会出现Toggle Visibility for Panel。如下图：

接下来…

step 3: Edit the Action description (click an underlined value to edit) - 这句话的意思是，去点选有加底线的项目进一步编辑。于是我们接着click Panel这个单字，然后会看到弹出一个「Select Panels」对话方块，里头只有一个叫做”My First Panel”的项目，把它勾选起来。此时在step 3会出现Toggle Visibility for My First Panel。 (如下图)

如果您曾经给Dynamic Panel有意义的名称，就可以在Select Panel时看到被您命名过的Panel。选择Dynamic Panel时，Dynamic Panel 会以Annotations & Interactions 窗格中所给予的Label做为识别，如果没有指定的话，Dynamic Panel 会预设标示为”Unlabeled”。

接下来，就可以输出Prototype了，按下F5或选择「Generate > Prototype」，将刚刚设计过的简易互动介面，输出到浏览器上进一步检视，当滑鼠click时，您所设计的那个Dynamic Panel是否会消失/出现(如下图)。

当您顺利完成这个 Dynamic Panel的设定之后，非常恭喜！您已经成功进阶到Axure RP中级互动设计了，随着Dynamic Panel的各种互动设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具创意的互动介面。

Axure中级互动设计2—鼠标移入移出等的互动设计

1. 滑鼠移入移出(OnMouseEnter/OnMouseOut) 2. 变换图像(Rollover Image) 3. 变换样式(Rollover Style)

1. 滑鼠移入移出(OnMouseEnter/OnMouseOut)

在先前初级互动设计(Basic Interaction)一章中，介绍多种Axure RP支援的人机介面互动效果。这里我们要介绍其中两个常见的触发事件 (Event)： OnMouseEnter - 滑鼠的指标移动到物件之上 OnMouseOut - 滑鼠的指标移动出物件之外

有许多Widget可以使用OnMouseEnter 和OnMouseOut触发事件，当滑鼠移到Widget上时会触发OnMouseEnter事件，OnMouseOut事件则发生在滑鼠离开 Widget 时被触发。

最常见的运用方式，则是合并Dynamic Panel来控制比较复杂的功能时，例如：浮动选单、滑过特效和自订tooltips等。

以左图的互动效果来当例子：当滑鼠移到图片上方时，会自动弹出说明文字框(Dynamic Panel)，当滑鼠移出图片时，说明文字框就会消失。这个互动设计就可透过OnMouseEnter 和OnMouseOut触发事件结合Dynamic Panel的控制来达成，设计方式如下图所示。

2. 变换图像(Rollover Image)

Image Widget 以及Button Shape Widget可直接利用Axure RP的功能来设计Rollover Image和Rollover Style，不需要使用到OnMouseEnter、OnMouseOut和Dynamic Panel。

变换图像(Rollover Image)

想要建立变换影像的话，请在Image Widget上按右键，选择「Edit Image->Import Rollover Image」，然后选择一个影像当作变换影像，一旦影像选定后，您可以在Wireframe中，利用滑鼠滑过影像上的黑白色方块来预览变换影像。

3. 变换样式(Rollover Style)