OnMouseEnter – 鼠标的指针移动到对象之上OnMouseOut – 鼠标的指针移动出对象之外有许多Widget可以使用OnMouseEnter 和 OnMouseOut触发事件,当鼠标移到Widget上时会触发OnMouseEnter事件,OnMouseOut事件则发生在鼠标离开Widget时被触发。最常见的运用方式,则是合并Dynamic Panel来控制比较复杂的功能时,例如:浮动选单、滑过特效和自订tooltips等。
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左上角的黑白色方块来预览变换状态。