【产品设计】通用后台管理系统需求及原型设计

news/2024/11/29 5:45:44/

后台管理系统,会根据不同公司、不同业务的要求做出改变。

在这里插入图片描述
网上很多系统的参考多数为业务中台,过于带有业务色彩。做过三四个后台管理系统,从中总结了一个通用的功能和需求设计模版,供大家参考。本文适用于0-2岁的产品经理做基础功能设计,通俗易懂,放心食用。

一个后台管理系统,大部分是对系统产生对数据进行各种操作,或者是对移动端的内容进行配置。所以对于数据的操作逃脱不了“增删改查”,在这个基础上,扩展一下“排序导出”等功能。

一、页面整体框架

大家可以根据前端的技术选型,选择对应的UI框架元件库,目前常见的UI框架是element、iview、ant-design等。这些元件库,在网上有很多付费优质资源,可以直接载入axure中使用。我选取了一个常见的框架样式,为大家讲解。
在这里插入图片描述
此框架中,头部为功能模块,左侧为一级菜单、二级菜单,右侧为功能页面。这种适用于业务较多较复杂的后台。右上角为系统设置,个人账号管理等基本功能。

二、列表

在这里插入图片描述
列表的功能设计要点如下:

  • 列表数据的排序:正序、倒序。比如按数据的创建时间倒序,即数据越新的越靠前。如果做的高级一些,可以在时间的位置,设计排序功能,同时支持正序和倒序,可以互相切换。
  • 数据的翻页:一般为20个数据一页,翻页加载需要前端做好处理。可以增加页面跳转,跳转至首页/尾页的功能。不过在前端组件里,这个是通用组件,可以直接套用。
  • 数据的选择:多选数据(复选框)、分为全选本页、全选所有数据、反选本页、反选全部数据。选择后对此批数据进行批量操作。
  • 列表字段:标明字段的来源和定义。例如,公司名称取【新建】时的值,【创建时间】取此条数据创建时的系统时间。一般来源分为后台创建、前台(业务端)创建、系统生成、从其他模块带出、历史缓存。

可以根据下表梳理说明,附在原型图的右侧。
在这里插入图片描述

三、新增

在这里插入图片描述
新增的功能设计要点如下:

  • 定义字段的输入类型:输入框、下拉框、单选、多选等。(就是原型中的表单元素)
  • 定义输入型元素的约束条件:字符、文本、英文、数字等。
  • 定义选择型元素的枚举值:例如,字段名:姓名;类型:下拉选择;枚举值:男/女。
  • 是否必填:必填项标记出来。
  • 提示语:显示在输入框里,提示用户如何填写。一般为灰色。
  • 是否允许编辑:在编辑时,此字段是否允许编辑,编辑是否有其他限制。

可以根据下表梳理说明,附在原型图的右侧。
在这里插入图片描述

四、编辑

界定编辑的功能时,需要注意以下几点。

  • 权限设计:哪个角色有编辑此数据的权限。
  • 操作记录:需要记录此条数据在什么时间被谁做了什么编辑操作。
  • 时效性:如果业务允许多人编辑同一条数据,如果某个用户在编辑时,内容已被其他用户修改,这里要做一个“锁”,在保存或者其他操作时提示用户,你的数据不是最新的,请刷新后再次进行编辑。(此处根据具体业务场景做匹配用户体验的功能设计)

五、删除

删除操作是个敏感操作,注意事项跟编辑类似。哪个角色有权限删除数据,需要有操作记录,并且需要根据具体业务设置删除的限制条件。

例如:删除一个销售人员,前置条件为此销售名下没有关联客户,此处就要延伸出一个客户转移的功能。

六、查询

后台的查询相对于前台业务的搜索查询简单的多,只需要列出,查询的字段和类型即可,再明确好交互。
在这里插入图片描述
查询字段名称是否需要模糊检索,下拉选择的枚举值列出来。交互方面是输入后即可查询还是需要点击查询按钮。

七、导出

  • 导出分为:导出列表所有数据、导出当页数据、导出选中数据、导出查询后数据。
  • 数据分为:导出部分字段、导出所有字段。规定导出的格式是.xls还是.csv。
  • 明确导出数据限制:根据具体业务场景进行设计,没有特殊要求可以设置为10000条数据,拆分多个表导出。

八、后台常用测试用例整理

大家在设计时,也可以对照着测试用例看看,是否有描述不到或者不清晰的地方。
在这里插入图片描述


http://www.ppmy.cn/news/957385.html

相关文章

JS-26 认识防抖和节流函数;自定义防抖、节流函数;自定义深拷贝、事件总线函数

目录 1_防抖和节流1.1_认识防抖和节流函数1.2_认识防抖debounce函数1.3_防抖函数的案例1.4_认识节流throttle函数 2_Underscore实现防抖和节流2.1_Underscore实现防抖和节流2.2_自定义防抖函数2.3_自定义节流函数 3_自定义深拷贝函数4_自定义事件总线 1_防抖和节流 1.1_认识防…

实现将redis中的所有数据备份到数据库表中

实现将redis中的所有数据备份到数据库表中 /*** 将redis中的数据同步到mysql中*/Overridepublic void saveMysqlForRedis(){Jedis jedis new Jedis("127.0.0.1", 6379);//System.out.println(jedis.ping());Set keys jedis.keys("*");//列出所有的keyI…

Win10环境下Android Studio中运行Flutter HelloWorld项目

一、引言 Android Studio是Android的官方IDE(Integrated Development Environment)。它专为Android而打造,可以加快开发速度,为Android设备构建最高品质的应用。 Flutter是Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开…

一分钟带你了解什么是ChatGPT?

在实际应用场景中,ChatGPT可以应用于多种场景,如客服、娱乐和教育等。与传统的聊天机器人相比,ChatGPT具有更高的智能水平,能够更好地理解人类的语言和意图。比如,ChatGPT可以帮助用户解决一些常见的问题,如…

chatGPT的原理是什么

ChatGPT是一种基于自然语言生成的对话系统。它使用了一种叫做 Transformer 的神经网络架构,能够从输入的文本中学习语言模型并生成输出文本。 ChatGPT 的工作原理是,当用户输入一条消息时,它会将输入的消息与之前的对话历史拼接起来&#xff…

如何使用chatgpt提高嵌入式软件开发效率

使用CHATGPT可以提高软件的开发效率 注册 这个过程网上很多,可从网上参考 输入要实现的软件功能,尽量的分模块获取软件的源码, 将最终输出的源码信息拷贝到项目中,前提一定要读懂软件源码的功能,且懂得调用接口。

chatgpt是什么软件

ChatGPT是一款基于自然语言处理技术开发的聊天机器人软件,它通过与用户的交互,为用户提供有关各种主题的答案和解决方案。这款软件可以称为是一种智能机器人,它可以理解自然语言、识别语义、自主学习和适应,为用户提供与人类一样的…

【SpringBoot Web开发】如何构建树形结构数据

树形结构数据 应用场景 比如我们需要构建菜单、机构树、其他业务类型树形结构 工具类 我们可以把菜单列表返回,获取parent_id字段等于0的节点,称为根节点,这样的节点代表一级菜单再通过根节点的主键去寻找子菜单,因为要有多及菜…