axure商城

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

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等。

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

Axure鼠标移入移出及图像变换的交互设计
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中,利用鼠标滑过影像上的黑白色方块来预览变换影像。

Axure鼠标移入移出及图像变换的交互设计
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的变换样式。

Axure鼠标移入移出及图像变换的交互设计
Axure鼠标移入移出及图像变换的交互设计
变换的样式(如左图)包括:

字型 Font

字体大小 Font Size

粗体 Bold

斜体 Italic

底线 Underline

文字颜色 Font Color

填色 Fill Color

线条颜色 Line Color

线宽 Line Width

线条样式 Line Style

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

给TA打赏
共{{data.count}}人
人已打赏
高级教程

Axure格式和样式功能详解

2012-11-12 12:43:38

高级教程

你所不知道的15个Axure使用技巧

2012-11-29 11:55:20

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索