在前一篇文章AXURE:PC上常见图片的悬停效果(上)中,介绍了用鼠标悬停时放大图片的效果。在本文中,我们继续尝试使用axure来实现以下效果:悬停时,边框突出显示(或添加阴影)。
再看看我们想要达到的效果:
优酷视频列表-悬停时的阴影。
当当商品列表-悬停时连接变化。
所需要元件:像素* 1;
涉及交互事件(用例):;没有
涉及动作:;没有
涉及动画:;没有
关键设置:(组件)交互风格。
# #写在前面组件的“交互风格”。
我们在文章Axure中使用了组件的“交互风格”:使用交互风格实现多选项卡切换效果。
目前,axure支持大多数基本元件.的“交互风格”设置
右键单击组件,在菜单中找到“交互样式”条目。
目前可以设置组件四种常见状态的交互风格:
1.鼠标悬停;
2.按下鼠标;
3.选择;
4.禁用。
下面进入生产流程——其实很简单!
# #悬停时突出显示边框。
1.拖动图片(组件);
2.右键点击图片菜单,选择“交互样式”,进入交互样式设置;
3.(默认)在“鼠标悬停”选项卡下进行以下设置。
A.(检查)0099FFF用于线段颜色——样本;
B.(检查)样本中使用了线宽——线3。
在实践中,应根据实际情况设置相应的属性和值。设置后,效果会出来,如下图所示:
# #悬停时添加阴影。
(勾选)外部阴影——示例中的设置为:X轴和Y轴的偏移值为0,模糊值为10,颜色为默认值。
如下图所示:
在实践中,应该根据期望的效果来设置相应的属性和值。
设置后,效果会出来,如下图所示:
预览注意:效果时会有一个小情况——。
图片第一次悬停时,可能会闪烁和缩放。仔细查找对应的设置,没有错误,可能是axure活力的html文件或者浏览器渲染的问题。就知道了,不用太担心。(当然,如果有战士知道这个原因,请告诉我们,非常感谢。)
# #写在最后。
在日常实践中,一些比较常见和简单的交互基本上可以体现在“交互设置”中。
这次我们只尝试了两种效果。通过“交互设置”的设置界面,可以看到设置(效果)很多,可以依次尝试,在实际需要的时候选择最适合的设置。