复旦大学:以Axure原型设计一站式服务系统

文/中国教育网络 张乐 张凯
2020-04-03

  2015年9月,复旦大学一站式服务大厅(简称“eHall”)正式投入使用,在过去的四年中,它为全校师生提供了“一站式”在线服务,例如在线申办、监督和评价等。

  自管理与服务分离的建设模式在复旦大学铺开后,“烟囱”式的管理系统功能被渐渐分解,管理信息系统越来越专注于后台管理,与师生密切相关的服务事项逐渐剥离。

  当师生用户填报集中于“一表通”,管理人员的审核集中于统一的“工作流引擎”,学校的跨部门审批业务和多头管理的业务需求逐渐增加,这些需求是以往信息系统建设模式难以覆盖的。

  例如,讲座会议审批、修缮项目申请、采购申请、外贸合同管理等业务,都存在字段多,判断逻辑多,跨多部门,存在多分支,流程流转环节复杂等特点,再加上各部门信息化程度不同,对业务理解不同,前期需求确认困难,也会导致后期的实施周期漫长。

  这种情况下,采用原型法进行软件开发就显得很有必要。

原型法概述

  快速原型法,简称原型法,是惯用的软件开发方式之一。

  它是指在投入大量资源进行开发之前,首先确认基本的需求定义,通过可视化的开发环境,快速创建出一个可供用户测试的目标系统的初始版本。

  根据用户的反馈意见进行相应的补充修改,经过和用户反复沟通确认、版本修改,最终得到用户满意的原型版本。

  系统的原型能直观展现用户需求,可减少在系统开发过程中因需求改动而反复修改产生的工作量。

  而高保真原型设计能体现特定功能的交互,用户可从多个维度入手对系统进行体验,为系统的后期开发提供完善的设计流程和业务流程,有利于开发人员后期快速准确地开展工作。

  原型法的开发过程主要包括确定用户的基本需求、设计初始原型、试运行和评价原型、修改和完善原型及提供相关文档等阶段。

Axure软件介绍

  Axure也称为Axure RP(Axure Rapid Prototyping),是一种专业的快速原型设计软件,能够协助从事需求分析、功能设计和界面展示等工作的人员快速、高效地创建目标系统原型及相关说明文档等。

  此外,它还拥有开启多人协作设计模式,管控开发版本等功能。

  目前主流的原型设计工具有Axure、Balsamiq Mockups、Justinmind等。

  跟其他工具相比较,Axure有以下亮点:

  一是动态面板,能够清晰梳理出产品的整体架构;二是Axure中有丰富的函数,可以更周到地考虑产品细节,例如一些非常规操作的提示、复杂的交互等;

  三是中继器,对于多次重复的单元,中继器适合进行数据传递,用户可以对页面的信息属性和内容进行清晰的判断。

一站式服务系统原型设计

  需求确认

  以外贸合同管理系统为例,展开对一站式服务系统原型设计的探讨。

  经过和业务部门沟通,我们了解到进口货物办理事项存在以下问题:学校每年的进口货物申请量大,线下办理周期长,各院系(部门)的老师要跑多次才能办理完成,以及资产处的老师进行数据管理和信息维护工作量大等。

  为了简化进口货物办理过程、让用户少跑路、减轻业务部门的工作压力,学校对各二级单位进口货物实行网上申请与审批,并将服务名称确定为“外贸合同管理系统”。

  经过与业务部门老师的初步沟通,我们确认了具体的字段信息,包括确认字段填写类型,归纳整理需填写多条信息的“货物信息”和“经费信息”模块的相关字段,以及根据提交的货物总金额的不同,需要上传不同附件、报送不同审批部门等相关要求。

  此外,和以往开发服务需求不同的是,业务部门要求本系统由“填写申请表单”阶段和“合同信息维护”阶段两部分组成,方便审批人员和维护人员工作,减少系统切换操作。

  系统功能模块分析

  1、功能模块分析

  本系统主要分为“填写申请表单”阶段和“合同信息维护”阶段两部分。

  “填写申请表单”阶段具体包括申请人信息、接货人信息、货物信息、经费信息、收款信息、其他信息、附件信息、联系方式模块;“合同信息维护”阶段在“填写申请表单”基础上,增加了合同其他信息模块。

  此外,各审批环节需要在“填写申请表单”模块基础上增加审批意见模块。

  2、页面布局设计

  经过同业务部门沟通,已确认本系统的服务对象为全校教职工。

  根据用户的行为习惯分析,教职工大部分申请及审批业务都是在eHall平台中办理,所以本系统的整体布局设计和复旦大学自主开发的一表通平台的通用表单布局保持一致,但是考虑到业务部门的具体要求,本系统的首页布局设计如图1所示。

图1 首页布局设计

  原型设计

  页面布局设计完成后,进行本系统的原型设计,包括“填写申请表单”阶段、“合同信息维护”阶段和审批环节各功能模块的面板设计,以及特定按钮或字段的交互动作的设计。

  1、功能模块面板设计

  在“填写申请表单”“合同信息维护”,以及各审批环节界面,按照功能模块划分,设计并创建各功能模块的面板。

  2、交互设计

  在已创建的功能模块中,增添交互动作,使各字段、页面之间,形成一定的动态联系。

  本系统主要通过设置函数关系、创建动态面板和中继器来实现,主要包括以下几方面。

  信息提示设计:包括错误信息提示、确认信息提示等,比如在申请人点击“提交”按钮时,设置一个动态面板,会弹出信息确认框;当合同信息维护环节最终结束时,系统自动弹出审批通过确认框。

  操作按钮设计:根据系统要求进行设置,操作按钮通常和动态面板及相应的函数关系设置相配合。例如不同流程分支的条件判断,通过设置函数关系判断“合计金额”的取值范围来决定流程走向,如图2所示。

图2 操作按钮设计

  一对多模块交互设计:“货物信息”和“经费信息”模块,主要是利用中继器和函数关系实现,如图3所示,通过操纵对应的功能按钮,能够控制“经费信息”模块的字段及数据的展现。

图3 一对多模块交互设计

  生成原型页面文件及需求文档

  系统原型设计完成后,可生成包含CSS、JavaScript和HTML代码的页面文件,在浏览器中安装相应的Axure扩展程序,即可浏览系统原型页面,经过演示原型系统和反复修改后确定最终版本。

  为了方便后期开发,在特殊字段处添加相关说明和文字描述,形成并导出规范的需求文档。

  实施效果

  目前,一站式服务系统技术平台稳定,在自主研发过程中,节约成本、提高效率的关键是对需求进行精准设计。

  在采用原型设计后,需求调研和原型设计平均占据整个开发周期一半的时间,后期开发过程中的需求调整幅度小,业务上线后能够长期稳定运行。

  本文以一站式服务大厅中的外贸合同管理系统为例,使用Axure作为原型设计工具,构建高保真原型,在与采招办、资产处、财务处及外贸公司等校内外用户确认需求过程中实现了快速迭代。

  用户通过原型界面,能更直观地了解表单、数据、功能等,需求设计人员对用户的需求调整快速响应,为后期系统的自主开发工作提供了一份清晰明确的需求文档,大大提高了沟通效率和开发效率,为提升机关效能,深化管理改革,加速一站式服务建设,促进一网通办的校务管理提供了有力支撑。

  (本文刊载于《中国教育网络》杂志2-3月合刊,作者:复旦大学校园信息化办公室 张乐 张凯)