Axure RP(Axure Rapid Prototyping)是一款快速实现、准确表达、带有交互效果且易于上手的原型设计工具。
本人在曾参与某系统需求分析时开始接触Axure RP,初步掌握了一定的开发基础,成功制作出系统需求原型,对需求分析工作产生了积极效应。在此经验的基础上,后续又在其他项目中进行了较为成功的运用,并获得了良好的效果。
就个人的经验而言,使用Axure RP进行原型开发,一旦掌握了一定的开发技巧后,加上一个良好的规划,那么很多东西都可以信手拈来。好的东西需要分享并使更多人获益,给实际工作带来效益,这样才能得以体现其价值。对此,本人在此分享使用Axure RP进行原型开发的一些经验,与各位一起探讨,也希望更多人能够分享自身使用Axure RP的相关经验。
Axure RP就其本身而言,其实仅是一个工具,大部分人都可以很快学习并掌握之,但要做出好的原型,会用只是一个最基本要求,关键是要有一套良好的原型开发思想,这套开发思想除了要有整体规划之外,还需要充分结合实际业务需求,在理解需求的基础上进行开发。
目前本人使用的Axure RP版本为6.5.0.3012,该版本可以通过互联网获得。关于Axure RP的安装及基本使用,有相应的教程,例如:Axure_rp_6.5_基础教程、
Axure.RP.6.Prototyping.Essentials等,大家通过认真学习这些教程自然可以达到事半功倍的效果。因此,这些基础性内容不再这里提及,这里要谈的是本人在之前的几个项目中是如何完成快速原型开发的。
一、了解原型设计开发的特点。
首先我们需要对原型开发工具具有相对深入的了解,明确原型工具能做什么,不能做什么。其实只要关注好部件、母版、动态面板,并学会灵活运用部件属性,那么原型的效果就基本出来了。
其次就是要明确我们需要做哪类原型,是网页版的,客户端版的,还是手机版的,等等,因为每一类原型的设计要求都是不一样的。如果我们是开发Web版的原型,那么我们都知道网页尺寸的设计与浏览器及操作系统的尺寸是息息相关的,也许我们需要知道一般情况下Windows XP的任务栏高度为30px,而Windows 7的任务栏高度为40px;我们需要知道一些主浏览器的界面参数(状态栏、菜单栏、滚动条高度等);我们也需要知道系统分辨率的设计对原型的影响(安全分辨率为1024*768px,可建议的大分辨率为1280*800px);我们还需要知道网页的宽度与首屏高度等等。如果我们是开发手机版的原型,也许我们需要知道诸如Android、IOS等的设计尺寸。
当然,就我们目前所涉及的系统而言,一般的原型开发都是基于Web版本的,因此我们需要重点关注这一块的设计即可。
二、做好原型的总体规划。
在动手进行正式的原型开发之前,一定要结合实际需求及已开发过的类似系统做好原型的框架规划,包括原型整体风格、色调、布局、展现形式等。个人认为,至少要做到并做好以下几个方面:
(1) 原型设计开发要有统一理念。这个统一主要是指要有统一的界面布局,例如每一个子页面的风格都应该是相同或相近的,各类组件(例如文本框、下拉选择框、表格、消息提示框等)都应该是一致的。又例如所有界面的重置按钮或关闭按钮的样式、事件等都应该是一致的。
(2) 原型设计开发要有对称思想。这里关系到原型界面的布局问题,例如页面底部摆放的按钮应该是总体居中并向两边分散排列的。一个信息提示框的文字正常情况下应该是居中显示的,诸如此类。
(3) 原型设计开发要注意细节。做一个原型其实不难,但要做一个用户体验好的原型就相对困难了。这里说的困难其实很多时候都不是技术上的难题,而是跟我们愿不愿意做好交互体验,愿不愿意注意每一个细节等有关。好的界面原型,很多时候并不是说其有多花俏,而是每一处细节都做到极致,细到每一个文字如何描述、控件如何展现、每一个表格的高度及表头背景色是否一致等都做得很到位。其实,这个对我们而言还真不是什么难事,难就难在我们愿不愿意花时间去处理这些细节问题。很多时候,细节问题关注到了,整体效果就出来了,客户的满意度也就提升了。此外,在原型开发时,如果可能,一定要给每一个页面、每一个母版、每一个动态面板、每一个部件进行适当的命名,这对于复杂原型的开发更是如此,同时也有利于多人协作开发。当然这更是一个良好的习惯,好的习惯常常会帮助我们将事情做好。
(4) 原型设计开发要有产品意识。做原型开发也许有时候仅仅是一个草图,但更多时候是希望能够做出一个贴近真实系统的原型。毕竟,如果仅是为了做一个草图,还不如一张纸和一支笔来得方便快捷。因此,做原型的设计开发要时刻有产品意识,或许我们可以认为我们是在创造产品,而产品是提供给客户的,应该将产品瑕疵降到尽可能低。因此,在时间许可的情形下,我们应该追求精益求精。
(5) 原型设计开发要保持更新。这里有两层含义,一是项目开发过程中会存在需求变更的情形,此时涉及到变更的原型也应随之更新;二是开发出来的原型应与对应的文档保持一致性,特别是在数据项方面。
对于原型规划,具体到实操层面,就是要明确整个原型整个界面风格,大概有多少功能模块,菜单如何展现,哪些需要做成弹出窗口,哪些需要做成嵌套窗口,哪些需要以页面形式开发,哪些又需要以动态面板进行展现,哪些需要做成部件,而哪些又需要做成母版。
三、设计并形成原型部件库。
一套系统,或者是一系列类似的系统,其原型部件都应该有统一的标准。这套标准就包括了表单、文本框、下拉选择框、复选框、单选按钮、按钮等方方面面。那么这一套的标准其实风格也应该是高度统一的。例如,互联网行业有很成熟的开发框架,往往会涉及到一些常用的下拉框、选择框等基础性元素,类似这些基本元素都可以做成部件,以方便后续复用。
我们在设计制作部件时,不妨可以多参考一些优秀的部件库,这些部件库可以在Axure官方网站上获取。下图所列就是一些常用的部件库。
其实,只要我们用心,自己也可以制作出一套非常实用的部件。例如,要制作一个普通按钮,可以使用矩形即可完成,可以将调整矩形形状,可以配置悬停样式、鼠标按下样式、选中样式、禁用样式等,部分示例图如下:
四、分类设计原型母版。
为使得原型开发真正达到快速构建的目的,在原型开发过程中尽可能地将公共部分提取并转换为母版,之后在设计开发每一个原型页面时采用组装的方式将会大大提供开发效率,同时有利于后续一些基础数据的修改。
就个人经验而言,母版主要划分为两大类,一类是系统公共组件,另一类是系统业务母版。公共组件包括:按钮、文本框、下拉选择框、日期选择框、标签页、对话框、组合框、分页控件、各类表格、页面标题区域、页面底部区域,等等。其中,每一类组件又可以根据实际业务场景及相应的大小要求而设计多套。单拿表格组件来说,就可以设计出横向展现的普通表格、纵向展现的普通表格、带序号的横向表格、带复选框的横向表格、带单选按钮的横向表格,等等。而且这些表格的标题、字体大小、背景颜色、线条颜色都应该根据系统整体风格配置好。
另外,通常一个系统里面都有查询统计的影子,因此将一些常用的查询条件母版化也是非常可行的。而根据个人经验,查询条件的栏目一般为两栏四列或者三栏六列,这样整体布局会相对合理。
五、灵活运用动态面板。
动态面板是展示在页面不跳转的情况下所能实现的各种交互状态,通过动态面板可以实现高级的交互功能,实现原型的高保真度。从另一个角度来看,动态面板的每一种状态其实可以看做是一个页面,我们可以在该状态下设计所需要的原型效果。通过对动态面板进行隐藏、显示或切换到不同状态从而实现我们所需要的交互效果。
一般情况下,我们知道动态面板可以实现诸如Tab页签的切换效果、鼠标触发式和点击触发式的下拉菜单效果、鼠标触发式的浮窗效果、JS的鼠标点击弹层效果等等。而很多时候,为了使得整个原型做得更为形象逼真,整一个系统都可以通过动态面板来实现,特别是对于制作手机原型更是如此。
一个应用系统原型网页版和手机版均全部采用动态面板实现,其目录布局如下:
采用整个动态面板来设计原型的好处在于交互效果更好、操作更流畅、用户体验当然也会更好。
总的来说,进行原型开发,应有必要的积累,并且在进行原型开发时应在条件许可的条件下做到更加严谨一点、细心一点、友好一点。除此之外,应在平时进行必要的积累,可以多学习一些优秀的设计(例如http://huaban.com/nav8079206363、http://www.uisdc.com/等),然后结合实际业务需求和系统实际应用,设计一套或多套适合于项目甚至行业的原型,并在后续其他类似项目的开发过程中以此为基础不断优化、不断完善、不断提高。