通用后台管理系统需求及原型设计

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

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

一、页面整体框架

大家可以根据前端的技术选型，选择对应的UI框架元件库，目前常见的UI框架是element、iview、ant-design等。这些元件库，在网上有很多付费优质资源，可以直接载入axure中使用。我选取了一个常见的框架样式，为大家讲解。

此框架中，头部为功能模块，左侧为一级菜单、二级菜单，右侧为功能页面。这种适用于业务较多较复杂的后台。右上角为系统设置，个人账号管理等基本功能。

二、列表

列表的功能设计要点如下：

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

可以根据下表梳理说明，附在原型图的右侧。

三、新增

新增的功能设计要点如下：

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

可以根据下表梳理说明，附在原型图的右侧。

四、编辑

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

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

五、删除

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

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

六、查询

后台的查询相对于前台业务的搜索查询简单的多，只需要列出，查询的字段和类型即可，再明确好交互。

查询字段名称是否需要模糊检索，下拉选择的枚举值列出来。交互方面是输入后即可查询还是需要点击查询按钮。

七、导出

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

八、原型设计（极其好用的元件）

有几个通过中继器实现的后台元件，很好用，分享给大家。原创作者：蜗牛。

通过修改中继器中的值，快速生成表单和导航菜单。无需画图，拖入画布中，修改中继器中的值即可。元件库中还有各种利用中继器快速配置界面的功能，欢迎大家下载。

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

作者平时留意并收集了一些测试用例，对设计后台的功能非常有帮助，大家在设计时，也可以对照着测试用例看看，是否有描述不到或者不清晰的地方。

本文作者@Olivia 。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！