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

1. 鼠标移入移出(OnMouseEnter/OnMouseOut)在先前初级交互设计(Basic Interaction)一章中，介绍多种Axure RP支持的人机介面交互效果。这里我们要介绍其中两个常见的触发事件(Event)：

2. 
   

　　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左上角的黑白色方块来预览变换状态。

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。