知识分享

  • 首页
  • 市场分析
  • 需求分析
  • UI设计
  • 产品运营
  • 产品设计
  • 项目管理
  • 新玩意儿
不积跬步无以至千里
不要停留,欣赏沿途的风景
  1. 首页
  2. UI设计
  3. 正文

AXURE教程:三级菜单和标签的交互使用

2019年9月30日 1779点热度 1人点赞 0条评论

如何让三级菜单和标签页实现交互,笔者在此给出了一个教程,简单快捷的原型在向你招手~~

今天,教大家如何做一个框架,包含三级菜单和标签页两部分内容,以及他们之间相互交互的内容。

效果如下图所示:

在线演示地址

一、效果介绍

  1. 左边菜单栏,最多有三级菜单,可以通过菜单中继器维护,使用方便。
  2. 点击菜单,如果有子菜单会展开或收起子菜单;如果没有子菜单,自动新增标签页,并打开对应页面(不会重复生成标签)。
  3. 点击不同的标签页,切换不同的页面。
  4. 删除所有标签页,自动跳转到首页。

二、使用方法

本模板使用简单,已制作好交互效果,只需要填写“菜单中继器”的内容即可直接使用。

  • menu1:填写一级菜单的名称;
  • menu2:填写二级菜单的名称(需要在一级菜单处先写该二级菜单的一级菜单名称);
  • menu3:填写三级菜单的名称(需要在一、二级菜单处先写该三级菜单的一、二级菜单名称);
  • picture:菜单文字前面的图标,可上传图片;
  • see:1位载入时可见,0为隐藏;一般只有一级菜单填1,其他为0;
  • xiala:如果有子菜单,填1;如果没有,填0;
  • xuan:填写默认值0即可;
  • jinyong:填写默认值0即可。

三、制作方法

1. 用中继器制作三级菜单

1)设置中继器内的表格

  • menu1:填写一级菜单的名称;
  • menu2:填写二级菜单的名称(需要在一级菜单处先写该二级菜单的一级菜单名称);
  • menu3:填写三级菜单的名称(需要在一、二级菜单处先写该三级菜单的一、二级菜单名称);
  • picture:菜单文字前面的图标,可上传图片;
  • see:1位载入时可见,0为隐藏;一般只有一级菜单填1,其他为0;
  • xiala:如果有子菜单,填1;如果没有,填0;
  • xuan:填写默认值0即可,既下拉箭头向下;如果需要默认打开下拉菜单,箭头向右,填1;
  • jinyong:填写默认值0即可,用于判断是否选中。

2)中继器材料

三个组合:

  1. 一级组合(文本标签+矩形+图片+下拉标志);
  2. 二级组合(文本标签+矩形+图片+下拉标志);
  3. 三级组合(文本标签+矩形+图片)。

3)中继器内逻辑

①点击一级菜单:

  • 收起状态:如果有子菜单,打开子菜单;如果没有子菜单,打开该名称的页面。
  • 展开状态:收起子菜单。

②点击二级菜单:

  • 收起状态:如果有子菜单,打开子菜单;如果没有子菜单,打开该名称的页面。
  • 展开状态:收起子菜单。

③点击三级菜单,打开该名称的页面。

具体逻辑如下图所示:

2. 用中继器制作标签页

1)设置中继器内的表格

  • column0:标签页名称,默认给一个首页;
  • xuanzhong:1打开对应页面,0不打开。

2)中继器材料

1个好看的标签矩形,删除“x”形状。

3)中继器内逻辑

点击标签矩形,取消选中其他标签,选中该标签并打开对应页面。

点击“x”,删除该标签,自动选择下个标签,并打开选中标签的页面。如果所有标签被删除,自动生成一个首页标签,并打开首页。

具体逻辑如下图所示:

3. 制作对应页面

页面名称要和菜单中继器内名称相同(没有子菜单的菜单),然后在对应页面制作对应内容即可。

4. 制作菜单与标签页的交互

点击没有子菜单的菜单时,记录该菜单文字,判断是否有该标签页。如果有,选中并打开该标签页;如果无,新建标签页并打开对应页面。

具体逻辑如下图所示:

总结

该原型非常实用,但制作相对复杂,新手不容易完成。

制作完成后,以后使用方便,仅需简单填写菜单中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。

 

本文由 @梓贤Vigo 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

标签: 暂无
最后更新:2019年9月30日

小虾米

同理心,洞察力!

点赞
< 上一篇

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复
最新 热点 随机
最新 热点 随机
1小时6.5元,共享单车我骑不起了 我在椰树直播间,花了三分钱 东方甄选走红这一年 京东自营开始踩刹车 “单车刺客”6.5元一小时!共享单车平台还是赚不到钱,你被刺了吗? 政务CRM-CRM在政务行业的应用现状 Temu的砍一刀,迷倒了美国人 社交媒体围攻BOSS直聘 组件应用 | 个人主页头部,应该如何设计? 远程技术团队,操作回顾会怎么开? 我在网上卖“土”,年入5000万 增长模型:产品增长的通用思维框架 “大人”,榜单时代变了 汽水音乐一周年:“抖音BGM播放器”的起与落 一个方法论,搞懂支付的一切 密码强度计有哪些局限性? 618回归“价格战”:京东淘宝进入存量竞争,小红书、视频号深入电商直播 兴趣电商未来会超过货架电商吗? 直播带货再难造神:天涯重启失败,7天只卖了36万 鏖战13年后,线上超市的肉搏还在继续
被集市收割、被买家嫌弃,“摆摊后浪”有点惨蓝领用工招聘平台的数字化建设思路干货分享:WMS系统—PDA的应用iOS 17,能否守住「iOS神话」?系统功能设计:网络加速器系统产品需求设计电商扫盲第一讲:GMV的底层逻辑打造一个基于本地社区的闲置交易平台,你看好吗?东南亚出海洞察:去东南亚为直播电商开荒,没有超头主播,货品供给不足……定金+尾款模式背后的套路天涯老用户的自救,让我明白情怀是最不值钱的东西抖音上线酒店日历房,其他平台会慌吗?从需求到设计开发,产品质量问题如何分析靠咱们看腻的电视剧,爱奇艺和腾讯在东南亚成了顶流如何让你的“对内B端产品”看起来有价值?设计走查知多少产品思考:视觉冲击!以图片展示金额,“省钱卡”这样玩就对了多多买菜为什么比美团买菜要便宜?都在骂网暴,为什么网暴一直没有停过韩国漂流记:明星在面前,咖啡在手里,中国互联网公司在广告墙自动驾驶风口退潮的深层逻辑
我在年底找工作,心态崩了 我已进入准过年状态,你呢? 手机刷新社交关系,何以可能 支付宝和微信的第二次对标 全面解读Meta发布的首份元宇宙白皮书 造车新旧势力的“修昔底德陷阱” 超硬干货:如何把需求变成产品方案? 数据中台建设(规划篇) 发挥设计中台能力:平台化搜索设计 后万店时代,瑞幸越来越像蜜雪冰城 智慧园区的未来在哪里? 不要再画流程图了,换一种方式写你的需求吧 设计沉思录|58心宠详情页改版设计总结 政务可视化设计经验——思考方式 如何点餐才能利益最大化? 社区团购的核心角色是什么?应该如何管理及增长? 商品管理:后台类目、前台类目、店铺分类详解 2022必须要了解的海外社媒平台 民宿早就凉了,只是我们现在才发现 回首互联网十年,我们能从八次烧钱大战中学到什么

COPYRIGHT © 2023 知识分享. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang