Axure 教程:Web商品分类 获赏10金币 案例教程 基础教程

Donny 普通用户 2019-12-11 3056

以下依旧使用动态面板来实现效果( 理由:方便、快捷、不需要函数 )

先来看一下某东的 PC 首页的商品分类效果,下文将按照此效果实现出来:




一、准备元件


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.继续全选所有元件、动态面板,右键点击 “ 转换为动态面板 ” ,命名为:“ 全部商品分类 ” ,点击 “ 全部商品分类 ” 设置鼠标移入 / 移出的效果 ,如下图:




完成以上所有设置就完成了,来看看以下效果:



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

谢谢大家!!


上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (37)
  • WANGxr 普通用户 2021-12-6
    0 引用 38
    感谢楼主分享
  • lilin2009 普通用户 2021-10-29
    0 引用 37
    感谢分享
  • beAst 普通用户 2021-10-8
    0 引用 36
    感谢分享
  • Tonyzhang 普通用户 2021-9-7
    0 引用 35
    666
  • jhin001 普通用户 2021-9-7
    0 引用 34
    谢谢
  • niwasama 普通用户 2021-8-25
    0 引用 33
    感谢分享
  • ccoo 普通用户 2021-8-19
    0 引用 32
    6666
  • vigo 普通用户 2020-11-5
    0 引用 31
    谢谢
  • 有味 普通用户 2020-9-28
    0 引用 30
    感谢分享
  • 汪富贵儿 普通用户 2020-9-28
    0 引用 29
    感谢分享
  • 度度_1598189976 普通用户 2020-8-29
    0 引用 28
    感谢分享
  • Eric_1598164004 普通用户 2020-8-23
    0 引用 27
    感谢分享
  • 闲聊 普通用户 2020-7-11
    0 引用 26
    感谢分享
  • 鸡哥哥哥 普通用户 2020-7-8
    0 引用 25
    感谢分享
  • itcc 普通用户 2020-7-8
    0 引用 24
    感谢分享
  • snseam 普通用户 2020-7-5
    0 引用 23
    学到了学到了
  • 宸枫 普通用户 2020-6-27
    0 引用 22
  • 无隅 普通用户 2020-6-16
    0 引用 21
    优秀
  • 哆哆 普通用户 2020-6-15
    0 引用 20
    感谢分享
  • Apeng. 普通用户 2020-6-12
    0 引用 19
    感谢
  • 纳洛酮。 普通用户 2020-5-19
    0 引用 18
    666
  • Lemin.focus 普通用户 2020-5-6
    0 引用 17
    产品的知识真是博大精深
  • andealee 普通用户 2020-5-5
    0 引用 16
    看起来简单,做起来也是挺麻烦的啊。感谢分享
  • 流金 普通用户 2020-4-15
    0 引用 15
    666
  • ivy 普通用户 2020-3-29
    0 引用 14
    谢谢分享
  • 眼镜 普通用户 2020-3-23
    0 引用 13
    感谢分享
  • 单单 普通用户 2020-3-20
    0 引用 12
    谢谢
  • huhu123 普通用户 2020-3-15
    0 引用 11
    66666
  • 笨笨狐 普通用户 2020-3-14
    0 引用 10
    感谢分享
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 9
    感谢分享
  • AnMo 普通用户 2020-3-9
    0 引用 8
    感谢分享
  • 黄弟 普通用户 2020-3-6
    0 引用 7
    6666感谢楼主
  • Karen321 普通用户 2020-2-13
    0 引用 6
    谢谢
  • szuzsq 普通用户 2020-2-4
    0 引用 5
    赛事预测推荐APP原型
  • Purity 普通用户 2019-12-19
    0 引用 4
    555
  • kevin1981 普通用户 2019-12-17
    0 引用 3
    感谢分享
  • 沈十三 管理员 2019-12-11
    0 引用 2
    感谢分享,已获得10金币奖励!
返回