Axure鼠标移入移出及图像变换的交互设计

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)在Axure RP里头，Rectangle，Placeholder，Button Shape这三种Widget可以直接设定变换样式(Rollover Style)，而不需要去特别指定OnMouseEnter / OnMouseOut的触发事件，就可以做到变换样式。

想要建立变换样式的话，请在Rectangle / Placeholder / Button Shape上按右键，选择「Edit Edit Button Shape->Edit Rollover Style」。

此时会开启「Set Rollover Style」对话框，您可以在这里选择变换样式，勾选「Preview」复选框来预览设定在Button Shape的变换样式。

变换的样式(如左图)包括：

字型 Font

字体大小 Font Size

粗体 Bold

斜体 Italic

底线 Underline

文字颜色 Font Color

填色 Fill Color

线条颜色 Line Color

线宽 Line Width

线条样式 Line Style

套用了变换样式之后，您可以选择 Preview提早预览效果。也可以在Wireframe中，利用鼠标滑过Widget左上角的黑白色方块来预览变换状态。