广东快3>WIKI库>学习产品设计>axure淘宝全局导航

axure淘宝全局导航



淘宝商城的全局导航


如图为本节课要制作的效果,当鼠标点击左侧内容时,我们会相应的看到右侧的子菜单对应的出现。当点击第二条的时候,会对应的出现第二个子菜单,当鼠标移出的时候,它又返回。当我们点击的时候,它由原来的图一变成了图二,颜色由黑色变成深黑色,还带了一个箭头的符号,可以看出是有替换的效果的。


global1.png


打开Axure软件,导入图片,鼠标右键,导入之前裁剪好的素材文件。再次导入图片,按住Ctrl,拖拽一下,这是第二张图片。导入图片,第三幅图。再次导入图片。全选四张图片,右侧对齐,拖拽到相应的底图上面,只举四个例子,以下的内容都是相应的。


点击第一个图片,转换为动态面板,命名为“1”,鼠标双击,复制一下,命名“状态2”。在“状态2”里面,我们替换一下图片,导入图片,替换的图片是鼠标点击的时候让它替换到下面的一张图片。回到主页,进行相同的操作,转换为动态面板,名称为“2”,双击,复制一个,确定。在右侧状态2中,替换一张图片。回到主页,把图片三转换为动态面板,称为“3”,点击复制状态1为状态2,确定。在状态2中复制图片。回到主页,转换为动态面板,命名为“4”。在状态2中,修改一下导入的图片,图片替换这部分就完成了。


再导入一张图片,把右边子菜单的导航相应的制作一下。导入图片1,转化为动态面板,命名为“x1”,设为隐藏元件。再导入图片“x2”,转化为动态面板,隐藏元件。再导入图片3,转化为动态面板,设为隐藏元件。导入图片4,名称为“x4”,转化为动态面板,设为隐藏元件。检查一下有没有名称没有加上的。当我们选中图片1,“鼠标移入时”,选择动态面板的状态,它的状态应该是带箭头的状态2,其他的状态保持状态1。


global2.png


广东快3复制用例1,点击图2,“更多事件”,“鼠标移入时”,粘贴。双击用例1,更改,把设置图1改为状态1,把设置的图2 改为状态2,确定。复制用例1,导图3,“更多事件”,“鼠标移入时”,粘贴。立即修改,设置3为状态2,其他为状态1,确定。


global3.png


再接着复制用例1,然后点击图片4,鼠标移入时,粘贴。修改4为状态2,其他为状态1,确定。当我们鼠标点击图片的是时候,它相应的子菜单应该显示淡入淡出的动画效果,“更多选项”选择弹出效果。当我们点击小图2的时候,修改用例1,显示,对应子菜单显示,显示图2的效果“淡入淡出”,更多选项选弹出效果。选择图3,修改用例,显示,“淡入淡出”,“弹出效果”。修改小图4,对应的修改子菜单4,依旧“淡入淡出”的效果,“弹出效果”。我们应该对应的修改一下子菜单的相应的处理,动态面板,选中x1,更多事件,隐藏,动态面板设置,让它回到状态1。选中动态面板,x2,更多事件,隐藏事件,动态面板设置,状态为状态1。X3,x4,操作一样,都为隐藏,且分别设置为状态1。


广东快3最终效果:当点击“女装”时,会在子菜单显示相应的内容,鼠标移出时,它会回到原来的页面。当我们点击图2时,它的状态由状态1替换为状态2,子菜单导航也相应的改变。


global4.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

分享到:

目录