电商后台设计(二):菜单管理

目前人机交互技术之一的菜单技术已得到广泛使用,我们把菜单定义为一组可供用户选择的可执行模块。菜单管理工具负责菜单的创建、维护(修改、增添和删除)和执行,是模块化程序设计时系统总装及用户友好接口设计的必备工具。本文从以下几点聊聊电商后台的菜单管理设计。

电商后台设计(二):菜单管理

对于绝大数后台管理系统功能管理应该是它的重点,系统中涉及大量的功能模块,能够有一个清晰的结构划分,无疑会提升员工的使用效率。

电商后台设计(二):菜单管理

1、功能分析

设计一个功能前,最重要的还是需求,了解清楚想要的功能,设计起来就会容易很多。导航的常见功能如下:

  • 页面导航: 菜单最基本的功能就是导航作用,可以在系统内部或系统外部自由切换。
  • 功能划分: 一个系统通常包含大量功能点,通过模块划分、层级结构可以更清晰的展示出系统架构
  • 权限管理: 对于常见的门户网站来说,菜单最主要的功能就是起到快捷导航作用,而对于后来系统来说,除了导航功能,它还涉及到权限功能。因为后台中涉及到大量的业务工作,所以在不同中页面可能有多个操作按钮,而操作按钮无法单独存在,需要依附在对应菜单上的。

电商后台设计(二):菜单管理

2、字段整理

通过上面的对菜单功能的分析,可以整理出如下所需字段:

  • 菜单名称:功能作用的直接体现方式
  • 父级菜单:展示父子级菜单的层级关系
  • 跳转方式:系统内部跳转还是外部跳转,参数值有:
    • 站内跳转:系统内部的跳转,将URL设置为不带域名的相对路径(如:/system/menu/index)
    • 站外跳转:系统外部的跳转,将URL设置为带有域名的绝对路径(如:http://www.exp.com) 
  •  跳转路径:设置具体的跳转地址
  •  新页面:跳转后的页面是在原始页面还是打开新的页面
  •  菜单功能:列举出所跳转页面内所有的操作功能,为后面的权限设置提供选项
  •  ICON: 页面美化效果(不同系统略有差异,有些使用的是图片,根据自己需求而定)
  •  状态:导航功能是否正常使用,参数值有:
    •  开启:正常使用中的菜单
    •  关闭:已停用的菜单
  •   标识码:  系统内部识别的唯一标识信息,主要用于代码内部逻辑判断

电商后台设计(二):菜单管理

3、原型设计

列表页原型

电商后台设计(二):菜单管理

表单页原型

电商后台设计(二):菜单管理

对[菜单功能]的设计做几点说明:

  1. 上面我们分析了页面操作也会参与权限的判断,代码里面不会写汉字进行逻辑判断,所以功能按钮也需要设计对应的标识码
  2. 一个页面中有多个操作按钮,只有具体到功能页面才会知道,如大部分页面都会有查看、详情、添加、编辑、删除功能,商品管理页可能还会有上架、下架功能,财务相关页面还会有审核功能,所以这个功能需要动态管理。

4、小知识点

跳转:页面跳转是通过标签实现的,如果a标签中路径设置为相对路径,点击跳转时系统会在相对路径前自动添加当前系统的域名,如果路径设置为带有域名的绝对路径,点击跳转时则会直接跳转到对应地址,当后台有多个业务系统时或者跳转到。

标识码:当后台程序将数据入库后,数据库会自动分配一个唯一的ID,后期一些特定的判断我们会通过在代码中写死ID值来获取指定的数据。但是这会产生一个问题,开发时的测试数据库经常会进行人为数据删减,而生成环境的数据库是规整的,所以会产生看似相同的数据但是数据库ID值不一样的情况,而写死在代码里面的ID值是参考测试库的ID,最终导致功能上线后不可用。所以通常的解决方案就是加一个可维护的标识码,代码中通过写死标识码来获得具体的数据信息。这种方式在我们后期很多设计中都会使用。

标识码编码: 对于系统各个功能编码,不同人有不用的习惯或者要求,我个人对菜单的编码是给每个层级菜单一个两位数字,如果层级不够三级用零补齐;而页面功能按钮,根据字面意思翻译成英语, 如:

电商后台设计(二):菜单管理

页面权限判断: 当用户进入到对应页面,会先通过菜单标识码(标识码被写死在代码里)请求后台数据获取到页面功能权限列表,再在页面中根据匹配的功能标识码显示对应的操作按钮。如:用户进入【系统管理->菜单管理[100100]】, 接口则通过100100请求权限接口返回页面功能权限列表,如:[get,detail], 页面显示 查看、详情功能按钮

以上就是后台系统菜单模块通常使用的功能,如果感觉不错就分享一下哦,同时也欢迎小伙伴们留言互动!

业界动态

产业互联网时代,产品经理应该如何选择行业

2020-6-29 12:21:09

业界动态

产品设计中,文案存在的几大问题

2020-6-29 13:04:46

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索