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