转自：https://www.w3cschool.cn/axurezwjc/dpzcpe.html

第1节 了解Axure的工作区

2.1 了解Axure的工作区

Axure的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。以下是对Axure RP工作环境的简要说明：

1. 主菜单和工具栏（Main Menu & Toolbar）
执行常用操作，如文件打开、保存、格式化控件、输出原型、输出规格等操作。

2. 页面导航板（Sitemap Pane）
对所设计的页面进行添加、删除、重命名和组织。

3. 控件面板（Widgets Pane）
该面板中有线框图控件和流程图控件，用这些控件进行线框图和流程图的设计。

4. 模块面板（Masters Pane）
模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织。

5. 线框图面板（Wireframe Pane）
在线框图面板中可以进行页面线框图的设计，线框图面板也就是进行页面设计的工作区。

6. 控件交互面板（Interactions Pane）
定义控件的交互，如：链接、弹出、动态显示和隐藏等。

7. 控件注释面板（Annotations Pane）
对控件进行注释定义和对控件的功能进行说明。

8. 页面交互和注释面板（Pages Notes & Page Interactions Pane）
添加和管理页面的注释和交互。

第2节 Axure页面导航面板 (Sitemap)

在绘制线框图(Wireframe)或流程图（Flow）之前，应该先思考界面框架，决定信息内容与层级。明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。

页面导航面板是用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织。

1. 页面的添加、删除和重命名

点击面板工具栏上的“Add Child Page”按钮可以添加一个页面，如图1所示。点击 “Delete Page”按钮可以删除一个页面。右键单击选择“Rename Page”菜单项可对页面进行重命名。

图1：添加新页面

2. 页面组织排序

在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次，如图2所示：

图2：移动页面

3. 打开页面进行设计

在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。

第3节 Axure控件面板 (Widgets)

控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件，如按钮、图片、文本框等。其面板如图3所示：

图3：控件面板

1. 添加控件

从控件面板中拖动一个控件到线框图面板中，就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。

2. 操作控件

添加控件后，在线框图中点选该控件，然后可以拖拉移动控件和改变控件的大小，还可以一次同时对多个控件进行选择、移动、改变尺寸。另外，还可以组合、排序、对齐、分配和锁定控件。这些操作可通过控件右键菜单中进行，也可在Object工具栏上的按钮进行。

3. 编辑控件风格和属性

有多种方法可以编辑控件的风格和属性：
(1)鼠标双击：鼠标双击某个控件，可以对控件的最常用属性进行编辑。例如，双击一个图片控件可以导入一张图 片；双击一个下拉列表或列表框控件可以编辑列表项。
(2)工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。
(3)右键菜单：控件右键菜单上可编辑控件的一些特定属性，不同控件这些属性也不同。

第4节 Axure模块面板(Master)

1. 什么是模块？

模块是可以重复使用特殊页面。一些常用模块如页首(Header)、页尾(Footer)与导航(Navigation)。模块可用在页面中或是其他模块中。只要修改模块，在所有页面中引用这个模块的模块实例也会随即全部跟着变化。

模块的概念犹如PowerPoint中母版、Dreamveawer中模板的概念，熟练掌握模块可以大大提高原型设计的效率，并易于维护管理。

2. 模块的操作

在模块面板中可进行模块的管理。

• 要添加模块，单击模块面板顶部的工具栏上的“Add Master”按钮；或在面板中点鼠标右键，选择“Add Master”。
• 模块面板中可利用文件夹(Folder)来组织模块，然后通过工具栏、快捷菜单或是拖拉的方式重新排列模块。
• 在模块上双击鼠标打开模块，像设计页面一样拖拉控件到线框图面板中进行模块设计。

3. 在页面中使用模块

只要拖拉模块面板中的模块到线框图中，就可以在页面或另外模块中应用模块。拖入到线框图中后，根据模块特性，模块对象会有淡红或灰色的遮罩，执行菜单 “Wireframe->Mask Masters”可以移除遮罩。

模块预设行为（Behavior）是“Normal”，可以在模块面板中的模块上点鼠标右键，然后利用“Behavior”子菜单将它的行为修改为“Place In Background”或“Custom Widget”。

模块的行为说明如下：

• Normal：模块可以被移动与放置在线框图中的任何地方，对模块修改后，所做的修改会在该模块的所有使用实例中反映出来。
• Place in Background：模块应用在线框图中时，会处于线框图的最底层并被锁定，所包含控件的位置与在模块中的位置相同，常用于作为模板、布局、底板。
• Custom Widget：模块应用在线框图中时，模块中的控件与模块失去关联，模块中的控件可以像一般控件一样进行编辑，就好像只是进行了复制。常用于创建具有自定义属性、注释和交互的自定义控件库，例如：具有白色文字的蓝色按钮。

第5节 Axure控件交互面板(Annotations & Interactions)

控件交互面板用于定义线框图中控件的行为，包含定义简单的链接和复杂的RIA行为，所定义的交互都可以在将来生成的原型中进行操作执行。在控件交互面板中可以定义控件的交互，交互由事件（Events）、场景（ Cases）和动作（Actions）组成：

• 用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；
• 每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；
• 每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。

1. 事件名称

目前Axure RP 5支持的事件如下：

• OnClick：鼠标点击
• OnMouseEnter：鼠标的指针移动到对象上
• OnMouseOut：鼠标的指针移动出对象外
• OnFocus：鼠标的指针进入文字输入状态（获得焦点）
• OnLostFocus：鼠标的指针离开文字输入状态 （失去焦点）
• OnPageLoad：页面或模块载入

大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter 与OnMouseOut，一些特殊的控件可触发的事件有些不同：

• 按钮控件只有OnClick
• 单选框和复选框则具有OnFocus、 OnLostFocus
• 文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus
• 页面加载或模块被载入时则发生OnPageLoad

2. 动作名称

以下是 Axure所支持的动作：

• Open Link in Current Window：在当前窗口打开一个页面
• Open Link in Popup Window：在弹出的窗口中打开一个页面
• Open Link in Parent Window：在父窗口中打开一个页面
• Close Current Window：关闭当前窗口
• Open Link in Frame：在框架中打开一个页面
• Set Panel state(s) to State(s)：为动态面板设定要显示的状态
• Show Panel(s)：显示动态面板
• Hide Panel(s)：隐藏动态面板
• Toggle Visibility for Panel(s)：切换动态面板的显示状态（显示/隐藏）
• Move Panel(s)：根据绝对坐标或相对坐标来移动动态面板
• Set Variable and Widget value(s) equal to Value(s)：设定变量值或控件值
• Open Link in Parent Frame：在父页面的嵌框架中打开一个页面
• Scroll to Image Map Region：滚动页面到Image Map所在位置
• Enable Widget(s)：把对象状态变成可用状态
• Disable Widget(s)：把对象状态变成不可用状态
• Wait Time(s)：等待多少毫秒(ms)后再进行这个动作
• Other：显示动作的文字说明

3. 场景

一个触发事件可以包含有多个场景，根据条件执行流程或互动。
例如，可以在一个按钮的OnClick触发事件中加入两个场景，第一个场景可以加入一个条件说明(“If Yes”)并执行第一个动作；第二个场景则可加入另一个条件说明(“If No”)并执行第二个动作，如下图所示：

按钮图例

当在原型中按下按钮时，会显示出这两个条件说明(“If Yes”和“If No”)，点选其中一个条件说明，就会执行该条件所关联的动作。

使用条件说明可以有效操作条件流程，但如果需要建立一个高保真的原型，则必需在条件中定义条件逻辑：根据控件的值或变量值执行动作。

第6节 Axure控件注释面板(Annotations)

可以为控件添加注释，以说明控件的功能。

1. 添加注释

在线框图中选择控件，然后在控件注释和交互（Annotations and Interactions）面板中编辑字段中的值，即可为控件添加注释。面板顶部的Label字段是为控件添加一个标识符，如图1所示。

图1

2. 自定义字段（Fields）

通过主菜单Wireframe->Customize Annotation Fields and Views或点击面板上Annotations头部的“Custommize Fields and Views”，然后在弹出的Custommize Fields and Views对话框中可以添加、删除、修改、排序注释字段。

3. 脚注（Footnotes）

在控件上添加注释后，控件的右上角会显示一个黄色方块，称为脚注。脚注号码可以增大和减小，可通过控件右键菜单按钮或工具栏上的图标按钮进行修改。

第7节 Axure页面交互和注释面板(Page Notes & Page Interactions Pane)

页面备注可以对页面进行描述和说明。

1. 添加页面备注

在线框图下面的Page notes面板中可以添加页面备注内容,如图1所示：

图1

2. 管理页面备注

另外，可以自定义页面备注，为不同的人提供不同的备注，以满足不同需要。比如可以新增“测试用例”、“操作说明”等不同类别的页面备注。当输出规格文件时，可以指定哪些页面备注要输出。

要添加页面备注，点击主菜单“Wireframe->Manage Page Notes”或点击页面备注面板上的“Page Notes - Default”旁边的箭头按钮，然后选择“Manage Page Notes”，将出现页面备注对话框，然后就可以添加、删除、重命名、排序备注字段。其界面如图2所示：

图2

要在备注字段间进行切换，可以点击“Page Notes – Default”旁边的箭头按钮，然后选择要添加备注的字段。

前面七小节简要介绍了Axure中各大区域的基本操作，以后，我们将会有针对性的讲其有特色的操作，希望能不断进步吆！