Axure RP交互设计软件使用教程:Widgets工具栏

http://www.itjxue.com  2015-08-07 22:20  来源:未知  点击次数: 

Axure RP的widgets工具栏,就是我们用来画线框图wireframe、流程图flow的工具,也可以说是组成我们最终输出图表的零件。好比我们小时候玩的组装积木,这些工具就是组装积木里的一个个小部件,组成什么?组合得怎样?完全依靠个人的经验和智慧。因此,熟悉每一个工具的用法和用途,才能随心所欲的画出脑海中的图形。

相关文章:Axure RP交互设计软件使用教程:masters

Widgets工具栏,下分两类工具:

wireframe线框图工具:基本上对应着web页面中的各种图形。针对页面中交互行为的表达,Axure RP专门增加了image map region 图像映射区、dynamic panel动态面版、menu(vertical/horizontal)水平/垂直菜单等几个特殊的工具。

Flow工具:流程图所需的基本图形框架。

我们先谈wireframe线框图工具。学习这部分工具,如果事先有html基础,或者对web页面元素有比较充分的理解,就很容易入手。以下我根据图片中的编码,依次讲解。

  • 1、image图片:给wireframe中插入一个图片站位,也可以直接置入真实的图片。
  • 2、text panel文本:插入文本。相当于插入了一个< text >标签。是不带链接的文本。但是其实也可以带链接,在interactions中我们会提到。
  • 3、hyperlink超链接:插入带链接的文本。相当于插入了一段带< a >标签的文字。但其实在Axure中它与普通文本除了外型不同,没有本质区别。
    之所以将两类文字区分开来,目的还是为了在视觉表达中让人直观的理解链接文本和普通文本,而这对于设计人员理解也非常重要,因此建议画图时尽量标准的区分链接文本和普通文本。
  • 4、rectangle矩形:插入一个矩形。可以对其进行图形样式编辑。此图形通畅被用来表达板块的边界。
  • 5、placeholder占位符:插入一个占位符。占位符通常用来表达在页面中某些特殊区域,比如情况复杂,或者在系统升级中不需要修改,又或者无关紧要的区域等等。作者需要结合说明文字,进行对应的详细表达。
  • 6、button按钮:插入一个按钮,相当于< button >标签。按钮一般结合表单使用,当然也可以作为强化的提示链接使用。
  • 7、teble表格:插入一个表格。Axure的表格使用起来不是很方便,增加行、列,修改行、列宽度都不方便,算是一个败笔。期待在下一个版本的时候能够有更好的进步。与标准化制作网页一样,表格的使用在画wireframe的时候就应该明确其作用,是用来作为数据列表展示使用,而不是作为网页布局的控件。
  • 8、text field文本输入框:结合表单使用。一般用作表单中提交数据。比如搜索框、用户登录框、注册信息填写框等。用作字段提交或单行数据提交。
  • 9、text area文本区:结合表单使用。一般用作大段文字编辑、提交。比如文章编辑、留言等板块。
  • 10、droplist下拉列表框:结合表单使用。一般用作下拉菜单或者下拉列表选项,比如在搜索中,可以通过下拉列表框来定位搜索分类的范围。也有人用它来做友情链接,可以通过下拉选择直接进行页面跳转。
  • 11、listbox列表选择框:结合表单使用。通过文本框列表选项,通常使用在多项列表选择,比如在填写简历表的时候,选择你所感兴趣的行业,会提供列表选择框。不过列表选择框都会结合按钮使用。
  • 12、checkbox多项选择:多项选择通常使用在表单中,以提供多项选择。比如在有些有些注册要求用户选择兴趣爱好,会提供十多个选项,因为选项可以并列进行,因此使用的是多项选择。
  • 13、raido button单项选择:在一组选择中选择适合选项,选项关系非此即彼。比如在填写性别的时候提供男女选择,用户非男即女,只取一项。当然,不排除再多提供一个双性选择,这样就是三选一,但是同样是非此即彼的单一选择。
  • 14、15、horizontal line水平线、vertical line垂直线:用以分割页面中的不同板块区域。由于web页面中只能存在垂直与水平线,为了系统生成用于演示的html文件,特将两种线条分开使用。
  • 16、button shape形状按钮:相当于图形按钮,多用于导航,或者多帧切换的版面切换按钮。可进行边角编辑。
  • 17、image map region图像映射区:它用于在web页面中制造一片不可见的区域,一般是图片的部分区域,相当于图片的热区,从而添加说明与互动。在现实的网页中经常会有一张大图中有某个区域是触发按钮,而图像映射区就可以用来说明这个区域的的功能和互动内容。
  • 18、inline frame框架:类似于html中的< iframe >对象。用于在页面中制造页面框架,每个框架中嵌入不同的页面。我们经常看到后台系统分左右两栏,一般都是使用了框架,左侧载入的是导航页面,右侧是载入的管理页面。
    Axure的缺点是,暂时不支持百分比,因此iframe都是按像素度量的,和实际页面效果还是有差距。
  • 19、dynamic panel动态面版:是Axure为了表现多帧区域内容而制造的一个工具。它的图标很形象的说明了它的结构。它是不同的state叠加的一个动态区域,默认显示其中一个state,当用户触发按钮、图片或者下拉列表等时,可以设置相应动态面版切换到不同的state。不同state的关系,类似于photoshop的层,也类似于html中的css属性layer。
    我们可以通过右击dynamic panel进行state编辑,然后通过打开对应state进行编辑,编辑方式和编辑页面相同。
  • 20、21、menu(vertical/horizontal)水平/垂直菜单:用于制作水平或者垂直的菜单,可以添加漂浮的的子菜单,添加方法很简单,就是选择所要添加的菜单项,添加submenu。

(责任编辑:IT教学网)

更多