管理后台设计与对接规范v1.0.0
前言
管理后台的设计对接一直以来都是让我们头痛的一个问题,一开始我们采用的是功能列表的方式说明后台的管理功能设计,最终管理后台的功能性目标确实是完成了,但使用的体验却还是不进入人意。后来我们尝试为后台管理进行了原型的设计,但却发现其极为耗费时间,且由于目前我们采用的是成套的管理后台前端框架,在交互上的指导性上也并不多。
面对以上的问题,我们尝试采用一种新的方式进行管理后台设计上的对接,其主体为思维导图,在过程中的描述,我们需着重描述其展现的形式、逻辑的关系、展示数据的要求。让如今负责管理后台客户端建设的前端工程师更为一目了然。
另外,作为“规范”就肯定有可优化之处,希望大家可以在评论区,多提意见,我们会定时处理反馈,感谢
描述规范
对接工具
X-mind-思维导图创作工具
目前企业的大多数工程师使用的思维导图工具都为xmind,使用同一个工具,通过可共用的工程文件可以让我们的对接工作更高效
纯内容编辑展示
image纯内容编辑,出现场景一般为需要编辑某对象详情的时候,如上,在培训机构管理系统的中课程详情编辑,其实际上是一个表单,在表单中存在多个数据项上需要编辑提交,我们需要做的是描述好是:
- 有多少、怎样、什么字段的数据项
- 每个数据的输入格式限制等
故有以下的规范
结构规范:
image
描述规范:
image
列表内容管理
image列表内容管理,是我们在管理后台里最常见的一种设计形式,业务的数据对象会以表格条目的形式存在,我们利用这样的形式进行,数据条目的展现,操作,如,编辑、删除;又或者对此数据模块做整体的操作,如,表格导出,条目查询。
对于这样的模块规范,我们需要做的描述是:
- 查询项有哪些?分别是什么?
- 数据展示项有哪些?分别是什么?对于条目我们可以做怎样的操作?
- 模块数据的整体操作有哪些?分别是什么?
故有以下的规范
结构与描述规范
image
注:当中描述的固定的条目字段与可滚动遮挡的字段为:
image
还有一个问题!如果客户需要预览管理后台设计怎么办?
在过往的业务中,确实存在有客户对管理后台的最终设计并不满意,而我们也缺乏如客户端一般,提供效果图给他们进行预览;也有情况是,或许客户有对管理后台进行预览的要求,那么我们应该怎么做呢?
有如下的方法可以解决:
如今我们管理后台建设的web前端框剪为 Ant Design ,其本身提供有 Axure、Sketch、墨刀等原型母版设计资源,我们都可以用来更方便地制作我们的高保真原型,且当中的设计效果都是前端工程师将可以实现的。
资源连接:Ant Desgin-资源
芦苇科技产品团
芦苇科技-广州专业软件外包服务公司
提供微信小程序、APP应用研发、UI设计等专业服务,专注于互联网产品咨询、品牌设计、技术研发等领域
访问 www.talkmoney.cn 了解更多
万能说明书 | 早起日记Lite | 凹凸壁纸 | 言财
image