基于Axure的软件原型法的研究与应用

第３７卷湖北师范大学学报（自然科学版）Ｖｏｌ．３７第４期ＪｏｕｒｎａｌｏｆＨｕｂｅｉＮｏｒｍａｌＵｎｉｖｅｒｓｉｔｙ（ＮａｔｕｒａｌＳｃｉｅｎｃｅ）Ｎｏ．４，２０１７基于Ａｘｕｒｅ的软件原型法的研究与应用董元和１，２，张行文１（１．湖北师范大学计算机科学与技术学院，湖北黄石　４３５００２２．湖北师范大学文理学院，湖北黄石　４３５０００）摘要：提出了一种基于Ａｘｕｒｅ的软件原型开发方法及应用过程，实现了构建基于需求分析的原型建模与表示层代码开发的高度有机统一，既让开发团队直观地理解项目的需求全貌，又确保了软件页面与原型的高度一致性。关键词：软件原型法；需求分析；高保真；Ａｘｕｒｅ中图分类号：ＴＰ３９３　　文献标识码：Ａ　　文章编号：２０９６３１４９（２０１７）０４００１５０５犱狅犻：１０．３９６９／犼．犻狊狊狀．２０９６－３１４９．２０１７．０４．００４０　引言原型法是解决软件危机的一种行之有效、可操作性强的软件开发方法。其主要思想是在需求分析阶段先行开发一个与需求尽可能匹配的“简约版”系统，然后通过需求分析沟通，进行多次原型系统迭代和细化，以期准确地表达用户的真实需求，并最终实现系统的成功开发。Ａｘｕｒｅ是业内广泛采用的表示层原型建模工具。它通过制作出逼真的项目高保真原型，使开发团队在软件开发前，就能真实地体验和直观地展示未来软件的效果与核心逻辑功能，从而实现精确的需求分析。Ａｘｕｒｅ能便捷地创建基于目录组织的原型文档、功能说明等，并自动生成原型的Ｈｔｍｌ文件和页面的需求与设计的Ｗｏｒｄ文档。原型Ｈｔｍｌ文件经优化后，可直接用于后期逻辑代码的开发工作，有机地将需求工作成果应用于后期逻辑编码工作，使原型建模不只是完成了需求分析工作，而是完成了主要的项目表示层的编码工作。１　Ａｘｕｒｅ原型建模分析１．１　原型建模［１］原型法软件开发过程一般大致分为：需求沟通和市场调研、项目评估、原型设计、软件设计、开发编程、测试和产品交付等６个阶段，如图１所示。图１　原型法软件开发过程原型设计是原型法项目开发过程中非常关键的一步，它承载着客户的理念和想法，并在原型中得收稿日期：２０１７—０８—２０基金项目：湖北省高等学校优秀中青年科技创新团队计划项目（Ｔ２０１４３０）资助作者简介：董元和（１９７３—　），男，湖北蕲春人，硕士，副教授；研究方向：软件工程与信息系统集成．·５１·到体现，它直接决定了系统的使用感受和效果。产品原型就是整个产品在研发前的一个框架设计，它高保真地展示了未来软件的页面效果、逻辑功能、层次结构、用户体验等软件要素。１．２　Ａｘｕｒｅ建模价值Ａｘｕｒｅ主要负责定义需求和规格、设计功能和界面等，它能快速创建应用软件或Ｗｅｂ系统线框图、原型、规格说明书，能把系统页面的功能模块、视觉元素、人机交互的形式和效果完整地展现出来，且操作简便、快速、易于上手，设计效率高。Ａｘｕｒｅ主要针对包括用户体验设计师（ＵＸ）、交互设计师（ＵＩ）、业务分析师（ＢＡ）、信息架构师（ＩＡ）、可用性专家（ＵＥ）和产品经理（ＰＭ）等。Ａｘｕｒｅ通过直观地展示开发的产品原型，辅以讲解，可以让领域专家及客户直观有效地评估该产品的可行性；可以让项目经理和技术人员快速理解产品的需求和具体功能，指导项目开发；可以指导测试人员编写测试用例和进行测试指导；Ａｘｕｒｅ产品原型的模块齐全、带有交互效果，初步展示了产品前端的面貌，ＵＥ知道该如何改进和优化现有的体验设计，ＵＩ也知道该如何丰富该产品的交互效果；在产品正式推出前，邀请用户试用产品保真原型，并获得反馈，可以验证产品是否满足用户需求，从而提高产品开发的成功率；Ａｘｕｒｅ可以生成特定格式的Ｗｏｒｄ需求文档，为开发人员节省了大量的时间；Ａｘｕｒｅ原型代码可直接用于后期研发的表示层的代码开发。２　Ａｘｕｒｅ原型建模的应用采用Ａｘｕｒｅ进行原型建模，一般需要先理解项目的需求，然后再把产品的线框图、保真图做出来，待确定后再进行下一步的系统研发。这样不仅让研发人员更加了解需求，也能使原型更加接近最终的真实项目，减少后面的返工量，为后期的开发提供便利。下面结合具体的软件开发项目实例，重点介绍利用Ａｘｕｒｅ进行该项目“首页”的原型建模的应用过程。２．１　项目需求概述“糖尿病患者健康管理系统”是一个基于ＷＥＢ的糖尿病医疗互动平台。系统具备动态、实时、交互、协作等特点，分设有前台和后台，前台是呈现给网络用户的外部ＵＩ系统，后台是平台的内容管理系统。该系统有三类角色，分别是患者、医生以及健康管理师。用户登录后需要根据不同角色加载不同界面，并完成相应的管理功能。　　　图２　“首页”线框图布局　　　　　　　　　　　　　图３　“首页”高保真图　　　２．２　原型线框图设计“首页”页面是所有角色用户进入系统的第一个页面。该页面主要包括系统Ｌｏｇｏ、标题、简介、注册、登录、中国糖尿病患者示意图和健康测试等元素。因此，初步将首页分为头部、系统介绍、用户登录、中国糖尿病患者示意图、健康测试、底部等六个模块，如图２所示：同时，将这六大模块以表格的形式列出来，并且给出内容组成和重要级别，如表１所示，有利于相关人员对需求的理解。·６１·表１　首页中模块优先级模块名称内容组成重要级别Ａ．头部系统Ｌｏｇｏ和标题重要Ｂ．系统介绍模块系统内容介绍（图片轮播）很重要Ｃ．用户登录用户登录和注册重要Ｄ．中国糖尿病患者中国糖尿病患者示意图重要Ｅ．健康测试用户填写健康测试题，测试其健康状况重要Ｆ．底部给出许多跟健康相关的网络平台超链接重要２．３　高保真原型设计高保真意味着原型已经与最终产品的视觉、逻辑、使用方式、感觉功能上保持高度一致，可以直接用于后期的开发与实现。保真图是在线框图的基础上，根据原始需求分析经过完善、细化后，添加交互动作及页面元件而实现，用以高保真地说明未来系统的真实页面效果及基本业务逻辑。图３描述了“首页”的高保真图的效果。１）图片轮播效果实现向页面中拖入一个动态面板，设置三个ｓｔａｔｅ分别为ｉｍｇ１，ｉｍｇ２，ｉｍｇ３，在每个ｓｔａｔｅ里面放一张图片。之后在动态面板的右下方拖入三个小圆给其分别命名为ｉｍｇ１，ｉｍｇ２，ｉｍｇ３，给每个小圆设置一个选中状态的样式，如表２是图片轮播效果中部件的基本设置。表２　图片轮播的基本设置部件Ｎａｍｅ坐标尺寸样式动态面板Ｘ：０Ｙ：８４Ｗ：１２００Ｈ：２７９矩形ｉｍｇ１Ｘ：５５８Ｙ：３３４Ｗ：１０Ｈ：１０圆角半径：１０矩形ｉｍｇ２Ｘ：５８８Ｙ：３３４Ｗ：１０Ｈ：１０圆角半径：１０矩形ｉｍｇ３Ｘ：６１８Ｙ：３３４Ｗ：１０Ｈ：１０圆角半径：１０页面载入时的交互动作（实现载入后就动态循环），见图４：图４　页面载入时的动作动态面板状态改变时的交互动作，见图５：　　鼠标移入和移出小矩形的交互动作，见图６：图５　面板状态改变时的动作　　　　　　　　　　　　图６　鼠标移动时的动作　　　·７１·２）用户登录需要设置权限，让不同的角色用户登录后进入不同角色页面。因为Ａｘｕｒｅ中没有数据库，所以将不同的角色用户存于不同全局变量中。表３是用户登录模块中部件的基本设置。登录时的交互动作，见图７：图７　登录时的动作表３　用户登录的基本设置部件Ｎａｍｅ坐标尺寸文本框ＬｏｇｉｎｎａｍｅＸ：２０４Ｙ：４３６Ｗ：２５２Ｈ：３４文本框ＬｏｇｉｎＰａｓｓｗｏｒｄＸ：２０４Ｙ：４９９Ｗ：２５２Ｈ：３４按钮ｌｏｇｉｎｂｔｎＸ：３６０Ｙ：５５８Ｗ：７９Ｈ：２８标签ｌｏｇｉｎｔｉｐＸ：２５６Ｙ：４１４Ｗ：２０４Ｈ：１６２．４　生成原型页面文件和需求文档１）生成基于ＨＴＭＬ代码的原型Ａｘｕｒｅ可以将页面高保真原型设计生成基于ＨＴＭＬ代码和ＪａｖａＳｃｒｉｐｔ（包括各种基于ＪａｖａＳｃｒｉｐｔ框架，如ＪＱｕｅｒｙ）代码的页面文件，其实质就是一套完整的静态Ｗｅｂ系统，决策者、开发者和测试人员都可以在普通浏览器中浏览，并且与页面进行互动而无需其它支撑软件。这些Ｈｔｍｌ代码可以作为后期开发工作的表示层开发原码使用。２）部分注释和说明可以对部件和页面添加说明文字，从而更好地描述背景情况和详细功能。注释按照自定义的字段进行组织，以便于更好地管理信息和使用文档标准化，页面说明可以针对不同的受众者分成不同的分类。３）导出页面需求文档Ａｘｕｒｅ不仅可以导出所有的部件注释和说明，还可以将部件的一些值，比如将列表部件或者下拉·８１·类别部件的所有供选择的值导出为Ｗｏｒｄ格式的文档，形成规范的页面需求与设计文档。２．５　建模原型在项目编码中的应用项目最终的页面效果是源于Ａｘｕｒｅ制作的高保真原型的，因此，开发人员可以直接在原型Ｈｔｍｌ代码上进行优化、修善、规范化，然后添加后台逻辑代码，或者用后台控件代码代替Ｈｔｍｌ组件代码，这不仅节省逻辑代码的开发成本，大大提高了开发人员的开发效率，而且可以充分保证项目页面效果与原型设计高度一致。一般来说，后台逻辑代码的开发人员往往对前台页面代码具有天生的不敏感性，这也在很大程度上规避了这一弊端，使后台代码开发人员可以专注于后台逻辑的研究与开发，而无需过多地关注前台页面代码的组织。３　结论利用Ａｘｕｒｅ进行软件原型法开发，使软件开发的效率和成功率都大幅提高。它不仅构建了基于需求分析的页面原型，为未来成品系统提供一个直观的可视蓝本，实质上同时也完成了软件表示层的代码开发工作，使成品系统的页面效果与原型保持高度一致，让业务逻辑代码程序员不必过多关心表示层的代码开发，从而使需求分析与表示层代码开发高度有机地统一起来。参考文献：［１］ＴｏｄｄＺａｋｉＷａｒｆｅｌ，沃菲尔，汤海，等．原型设计：实践者指南［Ｍ］．北京：清华大学出版社，２０１３．［２］赖定清，林　坚．ＡｘｕｒｅＲＰ设计交互原型（１）［Ｍ］．北京：机械工业出版社，２０１０．［３］陈　晓，李燕龙，王小琼．基于项目实例的软件工程课程改革－以公司网站设计为例［Ｊ］．大众科技，２０１５，１７（８）：１１７～１１８．［４］蔡　婷．如何用Ａｘｕｒｅ做好原型开发［Ｊ］．科教导刊，２０１５，（１２）：１５５～１５５．［５］张晓景．ＡｘｕｒｅＲＰ８．０原型设计完全自学一本通［Ｍ］．北京：电子工业出版社，２０１６．犚犲狊犲犪狉犮犺犪狀犱犪狆狆犾犻犮犪狋犻狅狀狅犳狊狅犳狋狑犪狉犲狆狉狅狋狅狋狔狆犻狀犵犿犲狋犺狅犱犫犪狊犲犱狅狀犃狓狌狉犲ＤＯＮＧＹｕａｎｈｅ１，２，ＺｈａｎｇＸｉｎｗｅｎ１（１．ＣｏｌｌｅｇｅｏｆＣｏｍｐｕｔｅｒＳｃｉｅｎｃｅａｎｄＴｅｃｈｎｏｌｏｇｙ，ＨｕｂｅｉＮｏｒｍａｌＵｎｉｖｅｒｓｉｔｙ，Ｈｕａｎｇｓｈｉ４３５００２，Ｃｈｉｎａ；２．ＣｏｌｌｅｇｅｏｆＡｒｔｓａｎｄＳｃｉｅｎｃｅ，ＨｕｂｅｉＮｏｒｍａｌＵｎｉｖｅｒｓｉｔｙ，Ｈｕａｎｇｓｈｉ４３５０００，Ｃｈｉｎａ）犃犫狊狋狉犪犮狋：ＴｈｉｓｐａｐｅｒｐｒｅｓｅｎｔｓａｓｏｆｔｗａｒｅｐｒｏｔｏｔｙｐｅｄｅｖｅｌｏｐｍｅｎｔｍｅｔｈｏｄａｎｄａｐｐｌｉｃａｔｉｏｎｐｒｏｃｅｓｓｂａｓｅｄｏｎＡｘｕｒｅ．Ｔｈｉｓｍｅｔｈｏｄｒｅａｌｉｚｅｓｔｈｅｈｉｇｈｌｙｏｒｇａｎｉｃｕｎｉｆｉｃａｔｉｏｎｏｆｂｕｉｌｄｉｎｇｐｒｏｔｏｔｙｐｅｍｏｄｅｌｉｎｇｂａｓｅｄｏｎｒｅｑｕｉｒｅｍｅｎｔａｎａｌｙｓｉｓａｎｄｃｏｄｅｄｅｖｅｌｏｐｍｅｎｔｆｏｒｐｒｅｓｅｎｔａｔｉｏｎｌａｙｅｒ．Ｉｔｎｏｔｏｎｌｙａｌｌｏｗｓｔｈｅｄｅｖｅｌｏｐｍｅｎｔｔｅａｍｔｏｖｉｓｕａｌｌｙｕｎｄｅｒｓｔａｎｄｔｈｅｏｖｅｒａｌｌｒｅｑｕｉｒｅｍｅｎｔｓｏｆｔｈｅｐｒｏｊｅｃｔ，ｂｕｔａｌｓｏｅｎｓｕｒｅｓａｈｉｇｈｄｅｇｒｅｅｏｆｃｏｎｓｉｓｔｅｎｃｙｂｅｔｗｅｅｎｔｈｅｓｏｆｔｗａｒｅｐａｇｅａｎｄｔｈｅｐｒｏｔｏｔｙｐｅ．犓犲狔狑狅狉犱狊：ｓｏｆｔｗａｒｅｐｒｏｔｏｔｙｐｉｎｇ；ｒｅｑｕｉｒｅｍｅｎｔａｎａｌｙｓｉｓ；ｈｉｇｈｆｉｄｅｌｉｔｙ；Ａｘｕｒｅ·９１·