基于AxureRP的电信运营商O2O产品原型设计和应用

陈冬旭 梁琳

摘  要： 在软件产品研发过程中，为了让团队成员能更直观地了解产品的功能、界面和交互，尽早让产品暴露设计不足和功能缺陷，提高团队开发效率，在产品需求分析和研发之间增加产品原型设计。使用功能强大的原型建模工具Axure RP进行原型设计工作，为产品经理、交互设计师和开发工程师提供用于需求沟通的高保真原型。文章通过使用原型工具，设计了电信运营商的预约受理产品原型，形成一套完整的原型设计案例。

关键词： 需求分析; 原型设计; 高保真; 建模工具

中图分类号：TP399，TP37          文献标志码：A     文章编号：1006-8228（2019）11-54-04

Abstract： In the process of software development， in order to make team understand the function， interface and interaction of the product intuitively， expose the design shortcomings and functional defects as soon as possible， and improve the efficiency of development， product prototype design usually be added between product requirement analysis and development. The prototype modeling tool Axure RP is used to design the product prototype， providing product manager， interaction designer and development engineer with a high-fidelity prototype. This paper describes the designing of telecom operators product prototype with the prototype tool， and the forming of a complete set of prototype design cases.

Key words： requirement analysis; prototype design; high fidelity; modeling tool

0 引言

原型是解决软件危机的一种行之有效、可操作性强的产品开发方法。其主要思想是在需求分析阶段先行开发一个与需求尽可能匹配的“简约版”产品，然后通过需求分析沟通，进行多次原型迭代和细化，以便准确地表达客户真实需求，并最终实现产品的成功开发。Axure RP是业内广泛采用的表示层原型建模工具，它通過设计出逼真的项目高保真原型，使开发团队在软件开发前，就能真实地体验和直观地展示未来软件的效果与核心逻辑功能，从而实现精确的需求分析。同时Axure RP能便捷地创建基于目录组织的原型文档和功能说明，并自动生成HTML原型文件，原型HTML文件经优化后可直接用于后期逻辑代码开发，能有机地将需求工作成果应用于后期开发编码。

1 产品开发过程和原型意义

典型的软件产品开发过程一般经历需求分析、产品方案、交互视觉设计、开发、测试、上线等六大阶段，六大阶段形成闭环圈，每一圈，称之为一个“迭代”[1]。需求分析阶段为市场需求洞察，决定一个产品或一个功能到底做还是不做;产品方案阶段为需求确认后，产品经理进入细化产品方案设计环节，包括梳理功能、细化逻辑和排优先级等;交互视觉设计阶段更生动的表述需求，交互设计师在充分理解产品目标客户、场景和需求基础上，结合交互稿，使用视觉语言来完善每一个UI的具体视觉细节;开发阶段是开发工程师依照产品需求文档、交互稿和视觉稿，将产品方案用编程的方式真正实现出来;测试阶段为产品开发上线前经过的各类“测试”，产品测试通过后，可对外上线供客户使用。

原型是指呈现产品一方面或多方面特征的近似品。原型可让很多关于需求、功能、界面设计等方面的潜在问题尽早暴露出来。从整个项目的角度来看，原型阶段的工作非但不代表“耗时”与“高成本”，实际上正相反，在原型的设计与测试过程中发现问题并加已解决，比将问题留到开发中再处理要省时省力得多。任何产品的开发和设计都涉及到构建原型，这个过程被称为原型化。原型化的目的通常有四个[2]：研究产品一个或多个特性而构建;与上级、团队、客户进行交流而构建;为保证产品的子系统及组件按照预期工作而构建;为开发团队后期检测产品在功能上是否达到预期水平而构建。

2 原型工具对比和Axure RP概述

产品原型设计是最基础的产品研发工作，是结合批注、大量的说明以及流程图画和框架图，将产品原型完整而准确的表述给 UI、UE、开发工程师和市场人员，并通过沟通会议，反复修改原型直至最终确认，开始投入执行。原型的建模工具可以是简单的纸笔和Visio，也可以是功能强大的Dreamweave和Axure RP等[3]，它们各有利弊，对比起来，Axure RP功能更加强大，利于软件产品的原型制作，也是行业内最多选择使用的原型制作工具。

纸笔：简单易得，上手难度为零。有利于瞬间创意的产生与记录，有利于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。

Visio：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明;同样不利于交互的表达与演示。

Dreamweave：操作难度大，需要基础的html知识;易于画框架图、流程图、表达交互设计;不擅长文字说明与批注。

Axure RP是美国Axure RP Software Solution公司的旗舰产品，是一个专业的快速原型设计工具，它可让负责定义需求和规格、设计功能和界面的人快速创建应用软件或网站页面的线框图、流程图、原型和规格说明文档[4]。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持可视化工作环境、多人协作设计和版本控制管理。

3 基于Axure RP的电信运营商O2O页面原型设计案例

电信运营商与线上实体店不一样，电信运营商主要是将虚拟的系统服务打包为商品进行销售，商品销售过程也不一样，比如客户申请安装宽带，其中宽带安装过程需客户先订购包月/包年服务外，还需上门进行安装服务，且涉及客户安装地址附近是否已满足网络覆盖、网络端口是否空余、拉线是否顺畅、实地布线安装、测试等等。电信运营商在线上销售这些商品时，一般会按简单商品H5配置承载，复杂商品个性化承载这两个方式进行快速线上销售。本案例是针对复杂商品进行O2O原型设计，因宽带申请安装涉及客户在线上快速下单和客服响应订单，该页面原型可方便需求人、开发者、使用者、管理者等多方明确需求，减少开发阶段中原需求反复修改，提升开发速度。

3.1 电信运营商O2O商品销售流程

利用Axure RP元件库中的Flow工具，使用流程图元件进行流程图绘制;其中圆角矩形代表开始，菱形代表判断，圆形代表结束，四方形代表处理方法，箭头代表流转过程，各元件双击均可编辑文字。本案例中，客户在O2O商品销售页面中进行登录，提供两种登录方式，首要运用运营商独有的网关自动登录，当无法取得网关登录信息时，再使用常规的手机+动态验证码形式登录;登录后客户选择要办理的商品并提交，订单信息以实时接口方式从APP流转到人工外呼坐席，话务员接到工单后对客户进行预约，可外呼办理的，帮客户进行热线办理;无法外呼办理的，预约客户上门服务时间，并安排营销人员上门服务。预约成功结果或最终受理结果，可在APP中进行进度查询。详见图1商品销售流程图。

3.2 电信运营商O2O商品销售线框图

线框图是产品设计的低保真呈现方式，作为产品的骨干而存在。它就像一幢建筑的蓝图一样，将细节规定地明明白白。它的目标为：呈现主体信息群、勾勒出结构和布局，提供客户交互界面的主视觉和描述等。首先画主要状态或核心状态的线框图，一般是进入该页面之后，可以正常清晰地看到所有主要内容，其次补充次要状态的线框图，以放置到主要状态的线框图旁边，最后优化线框图的细节，添加交互，写上逻辑，使原型开发容易理解。

客户的商品预约页面为O2O商品预约销售的主要状态页面，头部规划了多帧的轮播图，右上角放置“预约说明”和“我的预约”，接着为预约流程描述，中间是商品档次选择和预约号码登录，客户选择商品档次和确认预约号码，之后可“立马预约”，页面下部分是商品详细说明。将主要交互页面进行设计和交互逻辑描述，补充次要状态的线框图，其中包括客户点击“我的预约”可跳链接到“我的预约”次要页面;客户点击“切换号码”后可弹窗切换到预约号码的次要页面;客户点击“立马预约”后弹窗展示预约成功的次要页面。详见图2商品销售线框图。

3.3 电信运营商O2O商品销售高保真原型

线框图有时候并不一定适合，团队成员总能从线框原型中找到一些他们不理解的“问题”。因此在这个时候，他们更希望看到的是一个无限接近真实的高仿产品，从视觉显示以及交互动作上都和真实产品大致相同的高保真原型，让团队能够尽可能详细的了解产品的功能及业务需求。所以高保真原型也可称之为效果图或产品DEMO，除了没有真实的后台数据进行支撑外，几乎可以模拟前端界面的所有功能，同时如果细节加深加厚可直接对接到开发人员[5]。

本次产品原型，利用AxureRP动态面板控件实现高级的交互功能，将涉及小弹窗展现的“我的预约”、“预约说明”、“切换号码”和“预约成功”等做到动态面板的多层中，让页面逻辑更加流畅;同时让动态面板的状态进行隐藏、显示和改变，实现交互。详见图3和图4商品销售高保真图。

原型交付最终通过需求文档的形式展示出来，完整的需求文档包括产品简介、行业概要和版本三大方面内容，开发人员可直接从产品需求文档中细化开发过程。其中产品简约说明产品有什么用，价值在哪，目标客户是谁和有哪些使用场景;行业概要阐述行业现状、未来的发展趋势和竞争对手情况分析;版本则为上面研究的产品设计流程图、线框图和原型图等等。产品经理、运营人员和技术开发对需求文档内容进行多方联合评审，将需要优化的地方增加到原型中，并同步更新需求文档，最终形成开发建设方案。

4 结论

通过探讨原型设计在产品研发过程中的作用和意义，分析手工草图到高保真原型图的利弊后，利用Axure RP原型开发工具对电信运营商的O2O商品预约销售页面进行原型建模，包括功能流程图、页面线框图和高保真原型等，且将原型设计过程加入到产品需求文档中，形成完整的需求文档，为后续开发过程奠定基础，提高产品开发效率。本文研究的O2O商品预约销售页面目前已在某省电信运营商APP中上线，随着市场和业务变化，原型可随着新需求的变化而迭代优化，进一步缩短需求分析设计和产品开发时间。

参考文献（References）：

[1] 舒浩.云南"掌上云游"交互式原型产品设计[D].昆明：昆明理工大学，2016.11-13

[2] 董元，张行文.基于Axure的软件原型法的研究與应用[J]. 湖北师范大学学报（自然科学版），2017.37（4）：15-19

[3] ToddZakiWarfel.沃菲尔，汤海等.原型设计：实践者指南[M].北京：清华大学出版社，2013.

[4] 马凤娟，宋大伟.基于axure的web 网站原型设计—以糗事百科网站为例[J].电脑知识与技术，2015.11（30）：160-162

[5] 张晓景.Axure RP原型设计完全自学一本通[M].北京：电子工业出版社，2016.