上一篇
下一篇
Hawking’s Axure RP Pro 4原创教程：（五）widgets工具-上
作者:hawking 日期:2008-03-28
Axure RP的widgets工具栏，就是我们用来画线框图wireframe、流程图flow的工具，也可以说是组成我们最终输出图表的零件。好比我们小时候玩的组装积木，这些工具就是组装积木里的一个个小部件，组成什么？组合得怎样？完全依靠个人的经验和智慧。因此，熟悉每一个工具的用法和用途，才能随心所欲的画出脑海中的图形。
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。
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。
文章来自: 
引用通告: 
Tags: 评论: 10 | 引用: 0 | 查看次数: 12221
- 1
flynight [2009-05-18 03:42 PM]请问“10.droplist下拉列表框”的按钮样式和列表框的样式分别怎么修改？？
谢谢你的教程，对初学者非常有用
to smileandsmile
1、关于工作区宽度的问题，暂时没有可以裁剪的方法。正确的说，我们是拥有一个5000px宽的画布，但是好在我们不需要用到那么宽的宽度。
我相信axure之后会改善这个地方。其实你只要用到左边的区域，别把画布拖动到右侧就很好了。而且在生成html和word的时候，axure会自动根据你文件内容生成文档，没有内容的区域自然会隐去，所以你也不用担心。
不过这里引出一个题外话，就是用axure做页面居中的展示是挺麻烦的一件事，基本上我现在的处理方法是，口述加文字描述的方法，希望对你有所帮助。
2、导入网页是做不到的，但是你可以公用axure的模板内容。
我们应该明确，axure是做快速产品原型的，html的产生是在axure文档之后。
1、关于工作区宽度的问题，暂时没有可以裁剪的方法。正确的说，我们是拥有一个5000px宽的画布，但是好在我们不需要用到那么宽的宽度。
我相信axure之后会改善这个地方。其实你只要用到左边的区域，别把画布拖动到右侧就很好了。而且在生成html和word的时候，axure会自动根据你文件内容生成文档，没有内容的区域自然会隐去，所以你也不用担心。
不过这里引出一个题外话，就是用axure做页面居中的展示是挺麻烦的一件事，基本上我现在的处理方法是，口述加文字描述的方法，希望对你有所帮助。
2、导入网页是做不到的，但是你可以公用axure的模板内容。
我们应该明确，axure是做快速产品原型的，html的产生是在axure文档之后。
同问以下两个问题：
1. Axure新建文件是 4800像素宽的，事实上页面没那么宽，每次从左拖到右也很烦。可不可以像photoshop裁剪画布一样裁掉一些呢？
2. 可不可以把现成的网页导入成 Axure RP文件，然后做细节性修改呢？ 因为网站已经开发好了，很多页面都类似的。
多谢。
1. Axure新建文件是 4800像素宽的，事实上页面没那么宽，每次从左拖到右也很烦。可不可以像photoshop裁剪画布一样裁掉一些呢？
2. 可不可以把现成的网页导入成 Axure RP文件，然后做细节性修改呢？ 因为网站已经开发好了，很多页面都类似的。
多谢。
谢谢你的教程，对初学者很有用：-）
请教两个问题：
1. Axure新建文件是 4800像素宽的，事实上页面没那么宽，每次从左拖到右也很烦。可不可以像photoshop裁剪画布一样裁掉一些呢？
2. 可不可以把现成的网页导入成 Axure RP文件，然后做细节性修改呢？ 因为网站已经开发好了，很多页面都类似的。
多谢。
请教两个问题：
1. Axure新建文件是 4800像素宽的，事实上页面没那么宽，每次从左拖到右也很烦。可不可以像photoshop裁剪画布一样裁掉一些呢？
2. 可不可以把现成的网页导入成 Axure RP文件，然后做细节性修改呢？ 因为网站已经开发好了，很多页面都类似的。
多谢。
矩形颜色的修改：选择矩形或其他图形，在工具栏中fill color 、line color、line with、line pattern中设置调整。
fill color ：调整面版颜色，5中已经推出了透明度。
line color：调整图形线框颜色。
line with：调整线框宽度。
line pattern：调整线框样式。
评论里没法传图，没法切下来给你看。不过很好找的，用鼠标去触发一下吧；）
fill color ：调整面版颜色，5中已经推出了透明度。
line color：调整图形线框颜色。
line with：调整线框宽度。
line pattern：调整线框样式。
评论里没法传图，没法切下来给你看。不过很好找的，用鼠标去触发一下吧；）
请问下“4、rectangle矩形
”
这个工具的样式和颜色 。这么修改啊。。谢谢
”
这个工具的样式和颜色 。这么修改啊。。谢谢
都看完了 加油呀
非常好，多谢。
加油，很不错的教程！
- 1
发表评论
