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

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

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

1

2

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

3

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

4

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

5

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

6

服饰鞋包(上图6)

7

美容护肤(上图7)

8

运动户外(上图8)

9

家具用品(上图9)

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

10

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

下面我们来看下逻辑

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

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

11

12

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

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

13

隐藏是黄色的(上图13)

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

 

本文由 @Suha 原创投稿,并经人人都是产品经理编辑。未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 9

登录后参与评论
  1. 既然想做的详细,那我这有个复杂的需求你看能解决吗:“当鼠标指向大分类时显示了小分类,这时鼠标指向小分类,小分类依然显示,然后鼠标指向空白的地方,小分类马上消失。” 这个功能我想了挺久没想出来咋整,就最后一步:“鼠标从小分类里任意时间移走,小分类能马上消失”这个功能 不好整

    回复
    1. 回复

      我就是在找这个,也是想了好久不知道怎么去实现

    2. 回复

      我已经做出来了,要用动态面板。给动态面版两个动态,动态1.隐藏小分类,动态2显示小分类。大分类设置鼠标移入时显示动态面板2 移出时显示动态面板1

    3. 回复

      我也遇到了这个问题 具体应该怎么取实现呢?在线等

  2. 有更简单的?介绍一下

    回复
  3. 脑残么

    回复
  4. 说着的……做这么细致并没有什么实际用途……

    回复
  5. 做麻烦了

    回复
    1. 回复

      介绍一下简单的

加载中