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。

Axure RP pro 的widgets工具栏，另一个重要的工具组就是flow，流程工具。

对于画流程图，是我们经常会遇到的问题。我们和程序工程师沟通，用再多的口水，也无法挑明的事情，画一张简明的流程图，就能很直白的说明关键问题。

有时候你可能会懊恼，因为程序员的思维犹如计算机，你告诉他为什么没有用，你就告诉他该怎么做，是左是右，是0是1就好了。这个时候，产品经理需要的是理性思维，清晰的思路，如果你不清晰，工程师大多数会跟着你的思路乱做一团。所以多画几个流程，多根据页面需求画清晰的流程，就能解决实际的问题。

话不多说，本章主要介绍flow里面的工具，因为图形其实很好介绍，简单的英文翻译就好了，所以也顺带说说这些图形在流程里的作用。方式还和以前一样，编号，对号入座，咱们来一个萝卜，一个坑：

1. rectangle：矩形
   作用：一般用作要执行的处理（process），在程序流程图中做执行框。
   在axure中如果是画页面框架图，那么也可以指代一个页面。有时候我会把页面和执行命令放在同一个流程中做说明，这个时候将两类不同的矩形做色彩区别，然后做说明就好了。
2. rounded rectangle：圆角矩形或者扁圆
   作用：表示程序的开始或者结束，在程序流程图中用作为起始框或者结束框。
3. beveled rectangle：斜角矩形
   作用：斜角矩形我几乎不使用，可以视情况自行定义。或者在其他的流程图中，有特殊含义，暂不知晓，也希望有识之士指点一二。
4. diamond：菱形
   作用：表示决策或判断（例如：If...Then...Else）,在程序流程图中，用作判别框。
5. file：文件
   作用：表达为一个文件，可以是生成的文件，或者是调用的文件。如何定义，需要自己根据实际情况做解释。
6. bracket：括弧
   作用：注释或者说明，也可以做条件叙述。一般流程到一个位置，做一段执行说明，或者特殊行为时，我会用到它。
7. semicircle：半圆形
   作用：半圆在使用中常作为流程页面跳转、流程跳转的标记。
8. triangle：三角形
   作用：控制传递，一般和线条结合使用，画数据传递。
9. trapezoid：梯形
   作用：一般用作手动操作。
10. ellipse：椭圆形或圆形
    作用：如果画小圆，一般是用来表示按顺序数据的流程。
    如果是画椭圆形，很多人用作流程的结束。如果是在use case用例图中，椭圆就是一个用例了。
11. hexagon：六边形
    作用：表示准备之意，大多数人用作流程的起始，类似起始框。
12. parallelogram：平行四边形
    作用：一般表示数据，或确定的数据处理。或者表示资料输入（Input）。
13. actor：角色
    作用：来自于use case 用例，模拟流程中执行操作的角色是谁。需要注意的时，角色并非一定是人，有时候是机器自动执行，有时候也可是是模拟一个系统管理。
14. database：数据
    作用：就是指保存我们网站数据的数据库。
15. image：图片
    作用：表示一张图片，或者置入一个已经画好的图片、流程或者一个环境。

基本上，axure讲基本流程图、页面框架图、use case 用例图涉及到的一些关键图形都囊括在flow流程工具中，模糊了流程图的区别，而尽量贴近交互设计时的工作内容。

流程图无疑只是一个表达的工具，我们在使用的时候应该根据自己的实际情况使用，而不应该死钻牛角尖，非要知道某个图形的通用标准。理解和沟通是第一位的。而对于某些具有标准性含义的图形，大家人所共知，则我们应该遵循共同的准则，这样就能达到表达的目的。

其实axure里面由于不涉及到具体的程序流程，所以有些标准的图形并没有提供，如不规则图形、侧面双矩形等，大家可以自己google一下或者baidu一下很容易就知道。大多数情况下，还是自己自定义一下自己的符号标准，就跟prd文档加上名词解释一样，才是解决方法。

评论 (0) All

登陆 还没注册？