快好知 kuaihz

AXURE 中分类,关于分类显示的实现效果(以电商 商城产品分类为例) 适合初学者

实现后的效果是下面这样的:

这个做法:其实很简单:用动态面板的方法.现在一步步截图给大家:

做一个基础的,先做好左边大的分类上图 3)

做一个详细分类的动态面板。(上图4)

动态面板含4种状态(上图5)

服饰鞋包(上图6)

美容护肤(上图7)

运动户外(上图8)

家具用品(上图9)

如果你要问我,那个形状是怎样形成的,用矩形。实在不行就用直线。

用这种加直线的方式可以组合(上图10)

下面我们来看下逻辑

鼠标移入某个分类,就让某个分类的详细分类显示出来,所以我们将详细分类的(4个状态)动态面板覆盖在上面,并隐藏。如下图步骤:

1、设置每个大分类的交互,即鼠标移入某个大分类,就显示这个大分类的小分类(动态面板对应的状态),然后等待多长时间后,自动隐藏小分类(动态面板)

详细的交互,以服饰鞋包为例(上图11   12其它分类,也同样的方法添加同样的交互)

将我们之前做好的动态面板,覆盖分类上面,并隐藏。

隐藏是黄色的(上图13)

这样能运行就实现啦!试试看吧!

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:电商  电商词条  分类  分类词条  初学者  初学者词条  适合  适合词条  效果  效果词条  
原型

 Axure教程:屏幕纵向切换

通过鼠标滚轮的前滚及后滚操作,实现屏幕纵向的上翻页和下翻页效果,其实不难。一起来学习吧。一、原型效果二、准备工作本文原型是在1366*768分辨率下完成的。元件...(展开)

原型

 Axure:以秒表计时为例,看如...

本文作者将尝试用两种方法来实现【秒表计时】功能,探讨一下如何实现:循环的开始、循环的结束、循环的继续。enjoy~在原型设计过程中,有一些常用的交互效果,涉及到...(展开)