产品设计
后台管理系统框架原型模板.rp

适用产品经理进行界面原型设计,包括若干一级及二级菜单的界面原型,是系统设计初期进行界面原型设计的不错的后台框架模板工具。

一个后台管理系统框架,在这个基础上,扩展出一些功能。

后台管理系统框架原型模板.rp

关于后台数据操作的“增删改查”

1、页面整体框架

大家可以根据前端的技术选型,选择对应的UI框架元件库,目前常见的UI框架是element、iview、ant-design等。这些元件库,可以直接载入axure中使用。

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

2、列表

其功能设计要点如下:

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

比如可以根据下表梳理说明。

后台管理系统框架原型模板.rp

3、新增
其功能设计要点如下:

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

后台管理系统框架原型模板.rp

4、编辑

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

  • 权限设计:哪个角色有编辑此数据的权限。

  • 操作记录:需要记录此条数据在什么时间被谁做了什么编辑操作。

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

5、删除

删除操作是个敏感操作,注意事项跟编辑类似。哪个角色有权限删除数据,需要有操作记录,并且需要根据具体业务设置删除的限制条件。例如:删除一个销售人员,前置条件为此销售名下没有关联客户,此处就要延伸出一个客户转移的功能。

6、查询

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

后台管理系统框架原型模板.rp

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

7、导出

  • 导出分为:导出列表所有数据、导出当页数据、导出选中数据、导出查询后数据。

  • 数据分为:导出部分字段、导出所有字段。规定导出的格式是.xls还是.csv。

  • 明确导出数据限制:根据具体业务场景进行设计,没有特殊要求可以设置为10000条数据,拆分多个表导出。

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

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

后台管理系统框架原型模板.rp

相关书籍

CRM及协同办公小程序(销售侧).rp
高保真交互前后端实战原型设计模板
Element网站快速成型工具
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
QQ小程序sketch组件库
QQ小程序是连接年轻用户的新方式,覆盖8亿新生代活跃网民。轻便快捷的开发模式,还能在QQ内被轻松获取和传播
Vux移动端Axure组件库1.0
VUX(读音 [v’ju:z],同 views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。基于webpack + vue-loader + vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式
电商产品WEB&PC端-小程序微商城后端.rp
高保真交互前后端实战原型设计模板
生活类用户预约APP服务平台.rp
高保真交互前后端实战原型设计模板

暂无评论

暂无评论...