Axure元件之交互样式设置的案例

本文主要分享元件交互样式设置，其包括鼠标悬停、鼠标按下、选中和禁用四种，见图1。

图1 

一、案例效果：

将图2的两张图片设置为“鼠标悬停”透明度显示10，显示效果见图3。

图2

 

图3

二、分析思路：

1）添加图片元件，并导入两张图片；

2）设置交互样式设置；

 

三、实战应用：

1）在元件库中找到图片元件，并拖至画布的指定位置，见图4。

图4

2）双击图片元件，选择已准备好的图片并导入画布，见图5。

图5

3）调整图片的x、y、w、h值，将两张图片的位置、大小设置好，见图6。

图6

4）选择左边图片，右键选择“交互样式”，见图7，其界面见图1。 

图7

5）在交互样式设置的“鼠标悬停”下，选中“不透明（%）”，并将其数值改为10即可，见图8。

图8

6）点击“确定”按钮，选择“预览”，将鼠标悬停在左边图片的时候，效果见图3。

7）其他三种交互样式，可自行尝试。