Axure鼠标移入移出及图像变换的交互设计-我要自学网

文章分类选择

电脑办公平面设计室内设计室外设计机械设计工业自动化影视动画程序开发网页设计会计课程兴趣成长 AIGC

相关推荐

您可能对下面课程感兴趣

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

发布时间:2022-03-22 08:53 [ 我要自学网原创 ] 发布人: 小刘2175 阅读: 3444

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的控制来达成，设计方式如下图所示。 Axure OnMouseEnter和OnMouseOut 事件

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的变换样式。