Axure案例:用中继器实现便捷好用的3级菜单--转载
提示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)
最后,因为元件“展开”“收缩”不需要在前台显示,所以将这两个元件隐藏即可(不影响交互效果)
原文链接:https://www.axure.com.cn/77496/
Axure案例:用中继器实现便捷好用的3级菜单--转载的更多相关文章
- 使用Axure设计基于中继器的左侧导航菜单
实现效果: 使用组件: 设计详解: 一.设计外层菜单 1.拖一个矩形,在属性栏中命名cd1,设置宽高为200*45,背景色#393D49,双击设置按钮名称为“默认展开”,字体大小16,字体颜色#C2C ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- 原型工具介绍———墨刀以及Axure RP比较
原型工具——墨刀以及Axure的比较 1759233 目录 一.了解背景... 1 二.下面分开介绍一下这两款工具... 1 2.1 Axure RP. 1 2.2墨刀... 6 三.比较... 8 ...
- Axure原型设计工具介绍
Axure原型设计工具介绍 1759230茅杭斌 目录 1.前言 2.下载与激活 3. Axure相关功能介绍 4.Axure案例演示 5.结语 一.前言 在我们进行程序开发的时候,原型图是必不可少的 ...
- axure rp ----专业的快速原型设计工具
Axure RPAxure的发音是』Ack-sure』,RP则是』Rapid Prototyping』快速原型的缩写.Axure RP Pro是美国Axure Software Solution公司的 ...
- 使用Axure设计中,大型的后台系统原型总结
使用Axure设计中,大型的后台系统原型总结 2018年4月16日luodonggan 在产品原型设计中,经常会涉及到后台系统原型的设计,如何设计出更规范标准的后台系统原型,是很多产品同行们都会遇到的 ...
- 使用Axure来仿真Vogue网站
用户体验包括三部分:用户研究.视觉设计和交互设计.按顺序进行,在用户研究和视觉设计之后,开始交互设计,Axure是最好的交互设计的软件. Vogue是著名的奢侈品品牌,网站设计“高大上”,用Axure ...
- axure原型设计
在上一个学期的学习中,我们已经初步学习了axure的使用方法,它可以为负责定义需求设计,功能和界面的人员能快速设计出所需产品. 引入:在我们想为软件设计原型的时候,纸质原型很难表达交互的界面,与此同时 ...
- TOP100summit 2017:小米唐沐等大咖精心挑选的100个年度研发案例实践
2017年,机器学习.大数据.人工智能等词汇成为软件研发行业的主流,大前端.DevOps.区块链等技术方式成为热点方向:2017年,智能硬件开始成为新的焦点,这一年更被称为智能音箱井喷的一年:2017 ...
随机推荐
- JS-T
取整函数ceil:向上取整floor:向下取整round:四舍五入 js获取当前页面信息this.location.href JS打印对象 var data = JSON.stringify(res. ...
- Unreal Engine 4 优化教程
本教程旨在帮助开发人员提升基于虚幻引擎(Unreal Engine*4 (UE4))开发的游戏性能.在教程中,我们对引擎内部及外部使用的一系列工具,以及面向编辑器的最佳实践加以概述,还提供了有助于提高 ...
- C# WPF DataGrid在Grid中自适应窗体大小
XAML 中设置 例如 <DataGrid AutoGenerateColumns="False" Margin="6" Name="dgV ...
- 【Python开发】python读写文件,和设置文件的字符编码比如utf-8
一. python打开文件代码如下: f = open("d:\test.txt", "w") 说明: 第一个参数是文件名称,包括路径: 第二个参数是打开的模式 ...
- 用docker 跑 logstash节点 - kibana界面汉化
0.docker中logstash的配置文件 [root@VM_0_6_centos pipeline]# cat logstash.yml #http.host: "0.0.0.0&quo ...
- php导出excel方法: 所有语言通用
后端: //导出if($_GPC['export']==1){ $list_export = pdo_fetchall($sql.$where); include $this->templa ...
- maven引用本地jar,并打包部署
由于项目需要的一个jar在maven仓库里没有,又不想把jar手动导入仓库.然而百度的几个处理方式都是一样的方法,我却没有一个成功的.于是就请教了大神,大神也是各种测试,终于成功实现了,实现如下: 新 ...
- C语言No such file or directory错误
昨天晚上因为这个错误,都没睡好觉 早上六点起来查资料,换了个绝对路径就行了 #include"D:\软工专业\数据结构PPT和作业\实验作业\实验上机\单链表的基本操作\HeadFile.h ...
- ARC 100 C - Linear Approximation题解---三分法
题目链接: https://arc100.contest.atcoder.jp/tasks/arc100_a 分析: 比赛时做这题想到一个瞎搞的方法就是在平均数上下波动一下取最小值,然后大佬yjw学长 ...
- spring boot配置定时任务设置
一.定时任务的时间写法: 每天凌晨2点 0 0 2 * * ?和每天隔一小时 0 * */1 * * ? 每隔5秒执行一次:*/5 * * * * ? 每隔5分执行一次:0 */5 * * * ? ...