本次来讲解 PC 端电商首页的商品分类,如何在Axure里面实现。
以下依旧使用动态面板来实现效果( 理由:方便、快捷、不需要函数 )
先来看一下某东的 PC 首页的商品分类效果,下文将按照此效果实现出来:
(因gif图比较大压缩出现失真,各位看官将就一下)
一、准备元件
1.拖出四个矩形,输入文字 “ 一级分类 ” ,w 为:200 px ,h 为:50 px ;
2.在拖出一个矩形,w 为 400 px ,h 为200 px 。里面放入文本 “ 二级分类 ” 、“ 三级分类 ” ,然后如图排放:
3.前面有四个 “ 一级分类 ” ,二、三级分类的展示也需要有四个,因为四个一模一样的话到时不好分辨,所以小伙伴们各自给做出一些区别取来。然后把四个一起放在一个动态面板里面,命名:“ 二、三级展示 ” ,然后把该动态面点击隐藏。那如图:
这样所有的元件就都准备好了,现在我们来开始下一步操作 ~
二、设置交互样式
1.全选四个 “ 一级分类 ” ,右键点击交互样式设置 – 鼠标悬停 – 填充颜色 – 色值 #F2F2F2 ,如图:
2.点击第一个 “ 一级分类 ” ,设置 “ 鼠标移入时 ” – 设置面板状态 – 选择 “ 二、三级分类 ” – 选择状态 1 ,进入 / 退出动画为:逐渐 ,250 毫秒 ,选中 “ 如果隐藏则显示面板 ” ,点击确定( 其他三个 “ 一级分类 ” 类似 1 选择 2 、3 、4 )。如图:
设置完以上的所有设置,我们已经大致完成整个效果了,现在我们先来看一下效果:
3.全选所有元件 、动态面板 ,右键点击 “ 转换为动态面板 ” ,然后点击该动态面板,设置属性 “ 鼠标移出时 ” – 隐藏 “ 二、三级展示 ” ,动画为:渐变,250毫秒 。
这样我们基本的使用就都实现了,已完成的小伙伴给自己点个赞 ~
然后我们再来看看某东在首页以外的页面,商品分类是如何显示 / 影藏的:
只要完成了以上效果的,看完之后是不是觉得很简单,开始做吧 ~
四、进阶
1.拖如一个矩形,w 为:200 px ,h 为:40 px ,色值:#333333 ,输入 “ 全部商品分类 ” 放在如图位置:
2.把 “ 一、二、三级展示 ” 鼠标移出时的设置删除,然后隐藏 “ 一、二、三级展示 ” ,点击 “ 全部商品分类 ” 设置属性:“ 鼠标移入时 ” 显示 “ 一、二、三级展示 ” ,动画为:逐渐,250毫秒,置于顶层,点击确定;
3.继续全选所有元件、动态面板,右键点击 “ 转换为动态面板 ” ,命名为:“ 全部商品分类 ” ,点击 “ 全部商品分类 ” 设置鼠标移入 / 移出的效果 ,如下图:
完成以上所有设置就完成了,来看看以下效果:
该文件百度云链接:链接:https://pan.baidu.com/s/19d3wk15sfUKY3VDH8Eo7AQ 密码:gim8
以上就是所有的效果解析,各位小伙伴是否学会了?
今天的文章就到这里结束了,如有相关问题请在下方留言,我将一一解答。
谢谢大家 !!