Axure案例:用中继器实现便捷好用的3级菜单

axure商城

提示1:本篇教程可能不太适合新手,以及不了解中继器、全局变量、系统变量等使用的…新手

提示2:文字其实不多,截图太多,所以看上去很长,也可直接翻到末尾查看所有的用例,其实并不多

之前有介绍过使用中继器制作2级菜单,可以看出,使用中继器完成类似的多重复列表时比较便捷,至少比在N层动态面板来回切不断复制要轻松一些。

这回我们尝试换一个思路来完成3级菜单。该思路两样适用于制作2级菜单,甚至更多层级的菜单。同时,对于后期需要调整菜单结构,添加新的菜单等,都比较方便

先看效果(以省、市、区三级联动为蓝本)

写在前面:原型只是过渡型产物,不是最终产品,实际工作过程中没必要死磕,能做到表述清晰即可,最好的原型是沟通,是沟通,是沟通!!!本文更多的是站在兴趣爱好,及加强基础逻辑能力角度,做了一些简单的思考及尝试,与大家一起分享共同交流。

以下为制作过程

1.1 概况

指导思路:

菜单展示 —— 父级菜单永远排在子级菜单前面 —— 排序

菜单展开/收缩 —— 筛选/取消筛选

所需元件:

  • 中继器 * 1
  • 该中继器下面的元件
  • 矩形 * 1 —— 命名为“区域”
  • icon * 1 —— 展开/收缩图标 —— 命名为“展开标识”
  • 中继器外部的元件
  • 矩形 * 2 —— a、控制展开动作;b、控制收缩动作

涉及交互事件(用例):

  • 中继器用例:载入时
  • 中继器用例:每项加载时
  • 矩形用例:鼠标单击时
  • 涉及动作:
  • 添加排序(中继器)
  • 添加筛选(中继器)
  • 更新行(中继器)
  • 设置文本
  • 设置尺寸
  • 隐藏(元件)
  • 设置选中状态
  • 旋转(元件)
  • 触发事件

涉及函数及变量

  • 全局变量 * 2- 命名为:ID1、ID2,默认值为空。用于记录被点击菜单的父级菜单、父父级菜单
  • Target:目标元件
  • .width:元件宽度
  • .height:元件高度

涉及动画:

  • 无(最好不要动画)

注意操作:

  • 用例的判断条件

1.2 素材制作

1、拖入一个中继器。设置中继器的行距为10(单击中继器,右侧样式最下选择“间距”进行设置)。

双击中继器,进入中继器内部设置。

1-1、拖入一个矩形,命名为“区域”

设置(默认)宽高为:300*40;

设置(默认)线段颜色为F2F2F2;

右键矩形“区域”,进入交互样式,

设置鼠标悬停时填充颜色为F2F2F2;

鼠标按下时填充颜色为E4E4E4;

选中时填充颜色为CCCCCC

1-2、拖入icon – 向右单角符 ,命名为“展开标识”

设置填充颜色为999999

2、拖入矩形,命名为“展开”,样式随便设置 —— 后面的触发事件需要用到,样式不重要

3、拖入矩形,命名为“收缩”,样式随便设置 —— 后面的触发事件需要用到,样式不重要

设置好之后大概长下面这个样子

注意:预览效果中应将元件“展开”“收缩”隐藏,用户不需要看到

1.3 中继器数据

按以下属性表规格为中继器填入数据

(图1)

字段说明:

1、type – 菜单类型,用于区分层级

值域:

1:一级菜单 —— 此处指“省”

2:二级菜单 —— 此处指“市”

3:三级菜单 —— 此处指“区”

2、ID – 菜单ID值,此处主要用于排序,需要按命名规则进行命名

命名规则:由ID1、ID2、ID3组合而成的至少6位正整数

ID1(1位)+ID2(2位)+ID3(3位)

例如:ID1为1,ID2为2,ID3为3,则ID值为102003

—— 中继器加载时进行一次排序,就可以保证按照想要的树结构来展现了

3、ID1、ID2、ID3

ID1:一级菜单编号,不可为0

ID2:二级菜单编号,可为0,一级菜单该值为0

ID3:三级菜单编辑,可为0,一二级菜单该值为0

4、name – 菜单名称

5、eye – 菜单是隐藏,或是否可见。作为后续中继器筛选动作的筛选条件

值域:

1:显示

0:隐藏

默认情况下除一级菜单之外的菜单都是被折叠的(即不可见)。所以,示例中的两个一级菜单:江西、浙江,基(默认)eye值为1

6、xuan – 菜单是展开情况。用于控制元件“展开标识”的旋转情况、及记录当前菜单的展开状态

值域:

1:展开

0:未展开

可延展:

1、如果需要更多的菜单(省市区),按照该形式继续添加即可。

2、如果需要改为其他的类型(比如商品三级分类),修改一下name值即可

1.3 交互设计

1、中继器部分

1-1、中继器加载数据 —— 用例:每项加载时

1-1-1、赋值及调整菜单样式

第1个动作:设置元件“区域”上的文字等于中继器的属性name值

(图2)

第2个动作:设置(调整)元件“区域”的尺寸 – 不同类型的菜单样式上做区别

(图3)

说明:

[[Target.width – 20 * (item.type – 1) ]] :根据菜单的类型设置其宽度,即子菜单相较父级菜单宽度小20像素

[[Target.height]]:高度不变,即所有菜单的高度都相同

锚点,选择右侧,目的是为了右边对齐 —— 可以根据实际情况自行调整

1-1-2、三级目录不需要“展开标识” – 三级目录不再再展开,所以不需要

设置判断条件:当菜单类型为三级菜单时

(图4)

隐藏“展开标识”

(图5)

1-1-3、展开/未展开样式

a、展开时

判断条件,[[item.xuan]]等于1,代表是展开状态

(图6)

第1个动作:设置元件“区域”为选中状态 —— 进而其选中的样式就体现出来了

(图7)

第2个动作:设置元件“展开标识”由原来的向右,变成向下 —— 围绕元件中心旋转到90度

(图8)

注意:

a1、此处使用的是绝对角度,不是相对角度。原因:相对角度容易出错

a2、不要使用动画。原因:中继器的筛选、排序、更新等,都会将所有的项都重新加载一遍,所以执行以上动作之后,可能会出现N个元件同时都在旋转的情况

a3、结合前2点,所以方向是顺时针或逆时针都可以

b、未展开时

判断条件,[[item.xuan]]等于0,代表是未展开状态

(图9)

第1个动作:设置元件“区域”为未选中状态 —— 进而就恢复其默认样式

(图10)

第2个动作:设置元件“展开标识”恢复默认状态 – 旋转角度为0(图11)

注意:

1、1-1-3的两个用例,其关系为:if…else if,即,最多只执行其中一个用例

2、1-1-1、1-1-2、1-1-3之间是平行的,依次都会执行

设置好之后的情况如下:

(图12)

1-2、中继器载入时,添加排序及筛选

第1个动作:添加排序 – 按ID值升级排列 —— 结合ID的命名规则,可保证按预期的顺序显示菜单

(图13)

第2个动作:添加筛选 – 只显示状态为显示(eye=1)的的项

(图14)

设置好之后的情况如下:

(图15)

以上步骤完成之后先看一下预览效果,应如下

(图16)

2、中继器内部操作 – 元件“区域”的交互

我们希望在点击元件“区域”时,自动展开/收缩其子菜单。

细分下来为

a、无子菜单时,即,点击的是三级菜单,什么都不做

b、点击的是二级菜单时,展开/收缩其下的三级菜单

c、点击的是一级菜单时,展开其下的二级菜单(不展开三级菜单);或 收缩其下所有的二级菜单及三级菜单

按以上思路,进行用例设计

2-1、记录上级菜单,给全局变量ID1、ID2赋值

(图17)

2-2、根据当前展开状态,执行展开或收缩动作

2-2-1、展开

第1步,添加判断条件:该菜单为未展开状态,且不是三级菜单时

(图18)

说明:

[[item.xuan]]==0:未展开状态

[[item.type]]!=3:不是三级菜单

第2步:更新中继器(下的属性值),动作“更新行”,设置(该行的)xuan值为1

(图19)

第3步:触发展开事件 – 具体展开的用例情况,下文中会有介绍

(图20)

2-2-1、收缩

第1步,添加判断条件:该菜单为展开状态,且不是三级菜单时

(图21)

第2步:更新中继器(下的属性值),动作“更新行”,设置(该行的)xuan值为0

(图22)

第3步:触发收缩事件 – 具体收缩的用例情况,下文中会有介绍

(图23)

注意:

a、展开、收缩用例是最多只执行一个就够了的,所以其结构为if……else if

b、触发事件时,不要忘了勾选具体哪个动作(往往会点击了元件,忘了勾选哪个动作)

3、中继器外部操作 – 元件“展开”、“收缩”的交互用例

为什么不直接放到用例“每项加载时”?

前面说过,中继器的执行原理(至少8.0差不多是这样),当有排序、筛选、更新、删除等动作时,会将所有的项都重新加载一遍,所以如果将对中继器的更新等动作,放在“每项加载时”很容易造成死循环,从而不产生任何效果

3-1、元件“展开”的用例设计

3-1-1、展开的是一级菜单

第1步,添加判断条件:全局变量ID2=0

—— 我们在点击“区域”元件时,会先对ID1、ID2进行赋值操作

(图24)

第2步:执行展开动作 – 通过更新行值实现(然后会自动触发中继器“载入时”的动作)

(图25)

说明:

[[(item.ID1 == ID1)&&(item.type == ‘2’)]]:定位到该一级菜单下的所有二级菜单。

eye = 1,将符合匹配条件的项的eye值更新为1,即显示状态

3-1-2、展开的是二级菜单

第1步,配置判断条件

因为与3-1-1为if…else if关系,所以此处的判断条件可以写为 else if true

操作方法:右键相应动作(示例为“鼠标单击时”)选择“添加用例”即可,默认条件即为else if true

(图26)

第2步,执行展开动作 – 通过更新行值实现

(图27)

说明:

与一级菜单的菜单匹配条件有区别,匹配条件公式为:

[[(item.ID1 == ID1)&&(item.ID2 == ID2)&&(item.type == ‘3’)]]

设置好之后的情况如下:

(图28)

3-2、元件“收缩”的用例设计

3-2-1、收缩一级菜单

(图29)

说明:

[[(item.ID1 == ID1) && (item.type != 1)]]:定位到该一级菜单下的所有二、三级菜单(不能包括自己)

eye = 0,将符合匹配条件的项的eye值更新为0,即隐藏状态

xuan = 0,将符合匹配条件的项的xuan值更新为0,即不展开状态(父级菜单收缩后,所有的子菜单都为收缩状态)

3-2-1、收缩二级菜单

(图30)

说明:

与一级菜单的菜单匹配条件有区别,匹配条件公式为:

[[(item.ID1 == ID1)&&(item.ID2 == ID2)&&(item.type == 3)]]

定位到该二级菜单下的所有三级菜单(不能包括自己)

设置好之后的情况如下:

(图31)

以上,所有的交互都设计完成,再核对一下用例情况

(图32)

最后,因为元件“展开”“收缩”不需要在前台显示,所以将这两个元件隐藏即可(不影响交互效果)

OK,来预览一下,看看效果出来了吗?

原型预览地址 https://e881q6.axshare.com

原型下载地址:https://quqi.com/s/830988/ywzuqXsKuxZVY2ZS/105

0

发表评论