Axure设计之多级菜单导航教程(中继器)

在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。

一、效果展示

1、首页头部导航为一级目录,点击可展开子目录或菜单,点击菜单可与左侧菜单导航联动;

2、左侧菜单可进行搜索、收藏、取消收藏功能,点击菜单目录可展开子级,点击菜单右侧打开菜单页面;

3、菜单可点击☆进行收藏或取消收藏,已收藏的菜单在上方我的常用下显示;

效果预览:多级菜单导航

二、设计思路

1、考虑到菜单后续可自由调整,而且可以是多级菜单导航,左侧使用中继器控制菜单导航的数据;

2、左侧目录/菜单中继器的设计有四个重点:

  • 要对菜单和目录类型进行定义,例如添加列“menu_type(M-目录;C-菜单)”;
  • 要对层级关系进行定义,例如添加列“menu_tag(所属一级导航)、menu_id(唯一标识)、parent_id(父级目录唯一标识)”;
  • 要对菜单点击展开隐藏进行控制,需要在添加列“display(显示隐藏状态:1-显示;为空时隐藏)”,当目录被点击时会更新此列;
  • 要对搜索功能进行设计,搜索时其实就是对此中继器数据进行添加筛选,所以要思考根据中继器什么数据来做筛选(搜索到菜单需要逐层显示上级目录);

3、收藏菜单中继器的数据根据点击菜单的收藏时动态添加,所以实现相对简单,这里不做详细设计说明;

4、头部一级导航采用抽屉式效果,这块重点使用好父子级的组合,梳理好层级嵌套关系,主要做的交互就是:

  • 单击目录时控制子级的显示隐藏;
  • 单击菜单是控制左侧目录/菜单中继器的数据,就是对中继器列“display”的更新;

三、关键步骤

1、左侧目录/菜单导航使用动态面板和中继器,中继器中这里分别设置目录和菜单元件(目录和菜单的展示效果不同,高度也不同)

2、设置好目录/菜单元件后,添加中继器数据列,这里定义了menu_tag、menu_id、parent_id、menu_name、menu_icon、menu_type、selected、display、collect、searchValue、page列,然后再给中继器添加交互

3、给目录/菜单设置单击时交互

4、设置收藏菜单中继器,并定义数据列,这里只需menu_id、menu_name、page

5、设置头部导航目录/菜单,并添加交互

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/905935.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

真题总结和整理

补码的符号位在最高位 IEEE754 规格化要求 小数点前面是1,其他的认为是小数点后面为1即可 计算之前要对阶 左移和右移在寄存器中如果未说明定点数,可以通过移动小数点实现 涉及最小帧长要记得除以2 求用于外设的时钟周期数 指令两端只允许有寄存器,间接寻址要通过MA…

计组-层次化存储结构

这里主要看存储的整体结构,cache,内存 这里看存储结构是按什么样的层次来划分存储结构,速度由慢到快,容量由大到小,这是基于性价比的考虑,所以分为多级多层次,可以做到提高速度的同时没有增加多…

Rust整合Elasticsearch

Elasticsearch是什么 Lucene:Java实现的搜索引擎类库 易扩展高性能仅限Java开发不支持水平扩展 Elasticsearch:基于Lucene开发的分布式搜索和分析引擎 支持分布式、水平扩展提高RestfulAPI,可被任何语言调用 Elastic Stack是什么 ELK&a…

CoTAM——思维属性操纵链,一种利用大规模语言模型的新的高效快速学习方法

概述 近年来,大规模语言模型已显示出惊人的能力,可以从少量样本中学习。然而,这种能力需要昂贵的大规模模型,其运行成本是一大挑战。此外,在推理过程中,需要对所有测试输入的上下文(包括演示&a…

Chromium 中chrome.topSites扩展接口定义c++

一、chrome.topSites 使用 chrome.topSites API 访问新标签页上显示的热门网站(即最常访问的网站)。不包括用户自定义的快捷方式。 权限 topSites 您必须声明“topSites”扩展程序清单中授予使用此 API 的权限。 {"name": "My exten…

物联网设备如何助力实现高效远程老人监护

在发达国家,老龄化进程加速,老年人常需医疗、行动辅助、安全保障及个人卫生护理,费用高昂。传统老人监护依赖护士或助理现场照料,而物联网远程监控方案能有效改进此模式。它通过运用传感器等技术,实现全天候低成本实时…

NPM 包开发与优化全面指南

前言 Hey, 我是 Immerse系列文章首发于【Immerse】,更多内容请关注该网站转载说明:转载请注明原文出处及版权声明! 1. 理解 NPM 包的结构 1.1 package.json 文件:包的核心 package.json文件是 NPM 包的中央配置,定…

基于redis实现延迟队列

Redis实现延时队列 延时队列里装的主要是延时任务,用延时队列来维护延时任务的执行时间。 1、延时队列有哪些使用情景? 1、如果请求加锁没加成功 可以将这个请求扔到延时队列里,延后处理。 2、业务中有延时任务的需要 比如说&#xff0…

探索Python安全字符串处理的奥秘:MarkupSafe库揭秘

文章目录 探索Python安全字符串处理的奥秘:MarkupSafe库揭秘第一部分:背景介绍第二部分:MarkupSafe是什么?第三部分:如何安装MarkupSafe?第四部分:MarkupSafe的简单使用方法1. 使用escape函数2.…

Docker(一):Docker简介及安装

目录 1 Docker简介1.1 容器跟虚拟机的区别1、虚拟机是什么2、容器是什么3、容器和虚拟机的区别 1.2 为什么要学习容器1.3 Docker 是什么 2 Docker安装2.1 安装docker-centos71、环境初始化2、安装docker-ce3、配置docker镜像加速器 2.2 安装docker-ubuntu22.041、安装2、添加镜…

scp免密传输教程

scp免密传输教程 为了在使用 scp 命令时不需要输入密码,通常的做法是通过设置 SSH 公钥认证来实现。这种方法不仅避免了每次都要输入密码的麻烦,而且也更加安全。下面是如何设置 SSH 公钥认证的步骤: 1. 生成 SSH 密钥对(如果你…

使用Postman发送POST请求的指南

作为一名软件测试工程师,掌握如何使用Postman发送POST请求是非常重要的技能。POST请求通常用于向服务器发送数据,以创建或更新资源。本文将详细介绍如何在Postman中发送POST请求,帮助你高效地进行接口测试。 什么是POST请求? PO…

<项目代码>YOLOv8 猫狗识别<目标检测>

YOLOv8是一种单阶段(one-stage)检测算法,它将目标检测问题转化为一个回归问题,能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法(如Faster R-CNN),YOLOv8具有更高的…

auto占位符(C++11~C++17)

文章目录 1. 定义1.1 注意事项 2. 推导规则3. 返回类型推导(C14)4. lambda表达式中使用auto类型推导5. 非类型模板形参占位符(C17) 1. 定义 在C11以前,auto关键字是用来声明自动变量的。从C11起auto被用来:声明变量时根据初始化表…

栈虚拟机和寄存器虚拟机,有什么不同?

本来这节内容是打算直接讲字节码指令的,但讲之前又必须得先讲指令集架构,而指令集架构又分为两种,一种是基于栈的,一种是基于寄存器的。 那不妨我们这节就单独来讲讲栈虚拟机和寄存器虚拟机,它们有什么不同&#xff0…

Vision - 开源视觉分割算法框架 Grounded SAM2 配置与推理 教程 (1)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/143388189 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 Ground…

vxe-table v4.8+ 与 v3.10+ 虚拟滚动支持动态行高,虚拟渲染更快了

Vxe UI vue vxe-table v4.8 与 v3.10 解决了老版本虚拟滚动不支持动态行高的问题,重构了虚拟渲染,渲染性能大幅提升了,行高自适应和列宽拖动都支持,大幅降低虚拟渲染过程中的滚动白屏,大量数据列表滚动更加流畅。 自适…

Docker | 将本地项目发布到阿里云的实现流程

发布到阿里云 本地镜像发布到阿里云流程具体流程1. docker commit 生成新镜像文件2. 查看镜像3. 阿里云开发者平台选择控制台,进入容器镜像服务,选择个人实例创建命名空间仓库名称进入管理界面获得脚本推送到阿里云 补充: docker tag 命令基本…

龙迅#LT8668EX显示器图像处理芯片 适用于HDMI1.4+VGA转4PORT LVDS,支持4K30HZ分辨率,可做OSD菜单亮度调节!

1. 一般说明 LT8668EX 是 Lontium 的第二代 LCD 控制器,基于 ClearEdge 技术,支持 VGA 接口和 HDMI 接口,符合 HDMI 1.4 规范。它可以支持带 HDMI 接口的双模 DP。为了向后兼容,该 LCD 控制器还包括一个高性能模拟接口&#xff0…

如何在Linux系统中使用Apache HTTP Server

如何在Linux系统中使用Apache HTTP Server Apache简介 安装Apache 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 启动Apache服务 验证Apache是否正在运行 访问Apache默认页面 配置Apache虚拟主机 创建虚拟主机配置文件 示例虚拟主机配置 创建网站根目录 准备静态网站内…