产品邦-帮助产品经理成长

互联网产品经理学院-满足产品经理的求知欲-产品邦

当前位置: 主页 > Axure > Axure高级教程 >

011.axure设置下拉菜单的UI设计效果过程教程

来源:非原型,不设计 heguangming.com 作者:萧何 点击:
如何用Axure模仿下面图片的效果? 第一步:拖动矩形等相关的组建,拼凑如图的2种状态 1. 螺纹形状的是图片 2, 上下三角形 是矩形改变形状的 3, 状态二矩形悬停会变色,是设置了矩形悬停的样式 第二步:拖动一个动态面板到页面编辑区域 1. 并设置大小200*200

产品经理学院提供全面的产品经理学习培训教程。
本教程为 011.axure设置下拉菜单的UI设计效果过程-Axure高级教程
通过本 axure rp 6.5 教程可以掌握 011.axure设置下拉菜单的UI设计效果过程的方法。

如何用Axure模仿下面图片的效果?

 




 

第一步:拖动矩形等相关的组建,拼凑如图的2种状态


1. 螺纹形状的是图片

2, 上下三角形 是矩形改变形状的

3, 状态二矩形悬停会变色,是设置了矩形悬停的样式

 




 

第二步:拖动一个动态面板到页面编辑区域


1. 并设置大小200*200(没有特殊要求,比上面的右边矩形大即可)

2. 给动态面板添加2个状态,分别命名为前和后

3. 将左边的矩形移动到前状态中,右边的移入到后状态中,如图:

 




 

 

第三步:设置状态前


给前状态组建上拖动一个图片热区,设置鼠标移入的时候,设置动态面板到状态后

 



 

设置动态面板到状态后

 



 

第四步:设置状态后


1. 拖动一个图片热区到状态后,设置大小200*200.坐标0:0

2. 置于最底层

3. 设置移出图片热区,设置动态面板到状态前(方法同上,不在截图)


 




 

友荐云推荐 (责任编辑:蓝极行)
顶一下
(10)
90.9%
踩一下
(1)
9.1%
------分隔线----------------------------
栏目列表
推荐内容