第二节:线框图组件库:轻轻松松学会Axure-【产品经理必备教程】

因为AxureRP是一款原型设计工具,因此在开始前还是要说一下为什么要进行原型设计,《用需求管理快速交付高质量的软件》的作者阿伦M.戴维斯 和 迪安A. 莱芬韦尔说:没有比制作原型更易取得使用者界面与特殊功能可用性上的一致性了。原型不只可确认需求,它更可赢得顾客的心。单纯的依靠即时通讯工具、邮件、文档或者会议来沟通用户需求,有时候会出现遗漏需求、沟通双方所描述的不是同一件事物或者不能准确表达所需要达到的功能需求,此时若有一份可演示的原型,整个沟通的过程会变得高效的多。

传统的需求管理工具、各式文档或工作表中所储存的数千个需求与上百页的文件早已不合时宜。现在,这些需求更是不适用于目前快速发展的软件或系统开发环境,而制作原型是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面,如此更能抓住利益相关者与使用者的注意,让用户在软件或系统开始投入编程前就尽可能的确认全部需求。

快速原型法(Rapid Prototyping)是一种有效且高效的以用户为中心(User-Centered Design)的技术,可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。 AxureRP就是一款非常出色的原型设计工具,国内的淘宝、雅虎、腾讯、当当等公司的产品设计都在使用。

画基于web形态的原型时,AxureRP绝对是一款比较称心的工具:

1、AxureRP功能强大,可以做出很多可视化的交互效果,直接通过拖拽画出所需要的原型,生成网页、规格说明书和chm格式的文档;

2、AxureRP模拟效果好,遵循一些可用性原则,可以很快模拟出高保真页面原型。

3、AxureRP上手容易,稍微看一下教程,学习几个别人做的事例,就能达到专家级的水平。

不过AxureRP生成的原型,一般只作为定效果用,不具备直接适用性,主要用于演示的时候配合解说,但也不是取代解说,只是反应的产品交互设计效果,重要的还在于交互设计的想法、理念,以及对视觉、用户体验的研究,横向软件的熟练度。顺便提到一点,做为产品设计从业者特别是很多做互联网的朋友,一定要了解基本Html、了解一些技术的实现原理,因为交互也是有章可循的。

下面介绍AxureRP中最基本的设计元素,学习AxureRP的操作,首先要学会认识对象(Widgets)的特性,才能快速应用在绘制示意图(Wireframe)上。下面这个范例把Axure RP中的 Wireframe类别的每一个Widget都列出来 ,并且提供AxureRP程序中的Widget Icon 与实际输出到原型的对应关系。
AxureRPWidget

依次分别是:

图片组件image:设置一个图片占位符,可插入图片,可设置鼠标轮换效果等

文本块组件Text Panel:类似word中的文本框,相当于插入了一个text标签,可以输入文字,默认是不带链接的,但可以设置成超链接的样式。

超链接组件Hyperlink:插入带有超链接效果的文本,相当于插入了一段带a标签的文字。但其实在AxureRP中它与普通文本除了外型不同,没有本质区别。之所以将两类文字区分开来,目的还是为了在视觉表达中让人直观的理解链接文本和普通文本,而这对于设计人员理解也非常重要,因此建议画图时尽量标准的区分链接文本和普通文本。

矩形组件Rectangle:插入一个矩形,可以对其进行图形样式编辑,从而插入各种形状,通常用来做背景或边界。

占位符组件Placeholder:插入一个占位符。占位符通常用来表达在页面中某些特殊区域,比如情况复杂,或者在设计中不需要修改,又或者无关紧要的区域等等,需要结合说明文字,进行对应的详细表达。

按钮组件Button:插入一个按钮,相当于button标签。按钮一般结合表单使用,当然也可以作为强化的提示链接使用。
AxureRPframewidget1

表格组件Table:插入表格,不过不足的是表格不支持一些简单的编辑,如合并单元格,增加行、列,修改行、列宽度都不方便。与标准化制作网页一样,表格的使用在画线框图的时候就应该明确其作用,是用来作为数据列表展示使用,而不是作为网页布局的控件

单行文本框组件Text Field:单行输入框效果,一般用作表单中提交数据。比如搜索框、用户登录框、注册信息填写框等,用作字段提交或单行数据提交。

多行文本框组件Text Area:多行输入框效果,一般用作大段文字编辑、提交。比如文章编辑、留言等板块。

下拉选择组件Droplist:下拉选择效果,可批量添加选项.一般用作下拉菜单或者下拉列表选项,比如在搜索中,可以通过下拉列表框来定位搜索分类的范围。也有人用它来做友情链接,可以通过下拉选择直接进行页面跳转。

列表框组件Listbox:显示列表选择效果.通过文本框列表选项,通常使用在多项列表选择,比如在填写简历表的时候,选择你所感兴趣的行业,会提供列表选择框。不过列表选择框都会结合按钮使用。

多选组件Checkbox:多项选择通常使用在表单中,以提供多项选择。比如在有些有些注册要求用户选择兴趣爱好,会提供十多个选项,因为选项可以并列进行,因此使用的是多项选择。

单选组件Radio Button:在一组选择中选择适合选项,选项关系非此即彼。比如在填写性别的时候提供男女选择,用户非男即女,只取一项。当然,不排除再多提供一个双性选择,这样就是三选一,但是同样是非此即彼的单一选择。

竖线组件Vertical line和横线组件horizontal line:插入线条,用以分割页面中的不同板块区域。由于web页面中只能存在垂直与水平线,为了系统生成用于演示的html文件,将两种线条分开使用。

形状按钮组件Button Shape:比按钮组件多了设置按钮显示形状的功能,多用于导航,或者多帧切换的版面切换按钮,可进行边角编辑。

映射区域组件Image map region:我经常称之为图片映射组件,它用于在web页面中制造一片不可见的区域,一般是图片的部分区域,相当于图片的热区,从而添加说明与互动。在现实的网页中经常会有一张大图中有某个区域是触发按钮,而图像映射区就可以用来说明这个区域的的功能和互动内容,也可作为链接设置跳转效果

内部框架Inline Frame:用作页面内的嵌套效果,类似于html中的ifram>对象。用于在页面中制造页面框架,每个框架中嵌入不同的页面。经常看到的系统分左右两栏,一般都是使用了框架,左侧载入的是导航页面,右侧是载入的管理页面。AxureRP的缺点是暂时不支持百分比,因此都是按像素度量的,和实际页面效果还是有差距。

动态面板组件Dynamic Panel:这个是AxureRP的特性功能,可设置各种交互效果,它的图标很形象的说明了它的结构。它是不同的状态state叠加的一个动态区域,默认显示其中一个state,当用户触发按钮、图片或者下拉列表等时,可以设置相应动态面版切换到不同的state。不同state的关系,类似于photoshop的层,也类似于html中的css属性layer。可以通过右击dynamic panel进行state编辑,然后通过打开对应state进行编辑,编辑方式和编辑页面相同。

横向菜单组件horizontal menu和竖向菜单组件vertical menu:用于制作水平或者垂直的菜单,可以添加漂浮的的子菜单,添加方法很简单,就是选择所要添加的菜单项,添加子菜单。

应该说AxureRP的基础组件库是比较丰富的,而且还支持自定义组件库,例如将常用的组件组合设定为一个组件,或定制一套UI展示风格相同的组件等,很灵活。而且这种通过拖拽组件编辑属性来设置效果的方式,是可视化的,方便初学者上手。