快好知 kuaihz

Axure 教程:PC 端电商首页商品分类

本次来讲解 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

以上就是所有的效果解析,各位小伙伴是否学会了?

今天的文章就到这里结束了,如有相关问题请在下方留言,我将一一解答。

谢谢大家 !!

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:电商  电商词条  首页  首页词条  教程  教程词条  商品  商品词条  分类  分类词条  
原型

 Axure的这些实用技巧,你都知...

在评估一位产品新人的原型时,发现对方竟然不知道Axure的很多实用技巧,导致很多效果都是用极其复杂或者笨拙的方式实现。Axure是产品经理的必备工具之一,熟练使...(展开)

原型

 Axure教程:如何制作3D动效...

早几期文章,我说没有我做不出的交互,于是有同学加我微信,说老师你能实现这个3D效果吗?我本来想怼她一顿,这是平面软件,但是一气之下我就把她说的3D效果做出来了。...(展开)