基于Axure RP 的O2O 电商产品原型设计

朱 格,张 磊,吴慧欣

(华北水利水电大学,河南 郑州 450046)

0 引言

软件开发由需求分析、概要设计、详细设计、开发、上线5 大阶段形成闭环,为了保证软件开发顺利进行,需求分析阶段的工作内容不仅影响着项目需求与用户需求的一致性,还对后续的开发阶段的工作效率有着较大影响。使用Axure 进行原型开发,可以有效提升需求分析阶段的工作效率。

1 原型开发的意义

1.1 产品原型

在开发启动阶段,可通过制作原型的方式得到一个和产品相似的原型,节约大量的时间和金钱成本。再以原型的方式呈现在用户眼前,确保需求和用户预期的一致性[1]。原型设计是原型法开发过程中的关键环节,用户要求与呈现内容不一致时,可以快速修改以适应需求。在进入开发阶段之前,以用户确认后的原型为模板,开发阶段后会形成更高的开发效率,避免大量因需求不明确导致的返工。

1.2 Axure 原型开发工具

Axure 是一款专业的原型工具,主要作用于软件需求梳理阶段,能够快速、全面地呈现需求[2]。支持团队多人协作,进行版本控制。

原型设计非常重要,也有很多种设计方式可选,可以使用纸笔画出页面草图。画草图仅仅为静态页面,没有体现页面尺寸、跳转关系、显示逻辑[3]。另外,也可以使用Photoshop。Photoshop 是一款强大的作图软件,对于页面设计的精美程度几乎超过市面其他工具。但是对于原型设计来说,这并不是一款能够快速设计、反映页面关系和交互逻辑的软件。

Axure 之所以被原型设计工作者广泛应用,是因为该软件能够支持页面上呈现的所有元件,包括按钮、文本框、单选框、复选框等。除此之外,还具有较强的交互逻辑说明能力。比如希望实现“当点击一个按钮时,可以跳转到对应的页面”,只需要将该按钮的点击事件指向这个页面就可以实现跳转功能。

2 原型制作过程简介

2.1 静态页面

以员工入职办理功能为例介绍静态页面和动态交互的设计过程。员工入职需要指明入职店面、员工类别以及在系统中的角色,也就是员工权限。另外还需要提交身份证验证、记录员工手机号码等(见图1)。

图1 静态页面

2.2 动态交互

Axure 支持动态交互,可以针对“移入、移出、单击、拖动、状态改变”等事件,触发用例,展现交互的动态效果。希望实现“点击上传身份证时,弹出照相机拍摄页面”的动态效果时,“点击上传身份证”这个矩形,在“交互”栏中,双击“鼠标单击时”弹出弹框,如图2 所示,选择“设置面板状态”,选择“上传身份证”动态面板,再设置状态为“拍照页面”即可完成该用例的编辑。

图2 动态交互页面

3 O2O 电商App 所需功能简介及部分页面介绍

3.1 电商App 所需功能简介

一款高质量的电商App,主要使用人群为18 岁及以上的成年用户,他们具有相当的软件使用能力,该App 致力于帮助线下手机销售店铺实现信息化管理,从而提升管理效率,提高利润。这款App 包括成本价计算、渠道价计算、出库规则计算,并且实时掌握库存信息、销售统计信息,及时判断调货需求,提供精准的运营建议。

3.2 App 部分页面介绍

整个软件的下载安装、登录、使用,每个页面的元素、图标、色彩都需要设计,比如App 的logo、App 引导页、登录注册页面等。App 的一级页面分别是首页、订单、我的3 个页面。首页包含店铺名称、商品列表。商品列表由一行展示两个的表格方式显示,点击单个商品,跳转至商品详情页。在商品详情页有商品状态查询、商品库存查询、商品底价查询等功能。在订单页面显示登录人的历史成交订单。在我的页面中,有个人昵称、手机号码、生日等字段的维护。对于不同的App,所呈现的需求功能点是各不相同的,在使用Axure 制作原型的时候,应当充分理解页面要包含的功能点,功能点之间的关系,有没有重点非重点之分,在制作页面的时候才能够合理布局,设计出符合使用习惯的页面。

4 结语

通过探讨原型法在软件研发过程中的作用和意义,对比纸笔草稿、Photoshop、Axure 的利弊后,利用Axure 软件对该电商App 进行原型设计,且将原型设计过程作为开发过程的一个前置条件,在确认好原型之后,进入开发阶段,提高开发效率。在以后的版本迭代中也可以迅速的响应用户需求,进一步缩短需求分析和软件开发的时间。