Axure RP交互设计软件使用教程:Widgets工具栏.(1)[图]_.NET概论及软件使用_黑客防线网安服务器维护基地--Powered by WWW.RONGSEN.COM.CN

Axure RP交互设计软件使用教程:Widgets工具栏.(1)[图]

作者:黑客防线网安ASP维护基地 来源:黑客防线网安ASP维护基地 浏览次数:0

本篇关键词:教程工具设计交互
黑客防线网安网讯:    Axure RP的widgets工具栏,就是我们用来画线框图wireframe、流程图flow的工具,也可以说是组成我们最终输出图表的零件。好比我们小时候玩的组装积木,这些工具就是组装积木里的一个个小...

    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。

    黑客防线网安服务器维护方案本篇连接:http://www.rongsen.com.cn/show-14075-1.html
网站维护教程更新时间:2012-03-30 05:25:43  【打印此页】  【关闭
我要申请本站N点 | 黑客防线官网 |  
专业服务器维护及网站维护手工安全搭建环境,网站安全加固服务。黑客防线网安服务器维护基地招商进行中!QQ:29769479

footer  footer  footer  footer