Axure是产品经理用来绘制原型的工具，在快速迭代快速发展的当下，原型能验证设计的概念，将现有的需求转化为具体可视方案，让团队成员可以更好的理解需求方案。

一、操作界面

1. 页面

单击“页面”窗格右上方的“添加页面”按钮，添加页面。

2. 画布

3. 元件库

从“元件库”窗格中拖动，也可以使用“插入菜单”中的选项来添加文本，图像和形状，将元件添加到画布。

在“样式”窗格中可以改变元件的外观，例如，填充颜色，字体等，当然通过画布顶部样式工具栏也可以实现。

在“交互”窗格中给拖到画布中的元件添加交互。

1.在“页面”窗格中，添加一个新页面，现在应该有两个页面，第1页和第2页。

3.在浏览器中打开原型，单击按钮会转到第2页。

nerror="javascript:errorimg.call(this);">

在页面上动态显示和隐藏元件。

使用样式效果更改将鼠标悬停，单击并进行其他操作时的部件的视觉外观。

单击界面右上方的“共享”、“发布”按钮，并指定名称和密码，将原型分享给开发或其他同学。

nerror="javascript:errorimg.call(this);">

在AxureRP界面环境的中心是画布，可以通过排列元件来创建图表，画布周围是工具栏和工具面板，允许自定义图表样式和交互并与其他人分享。

1. 界面环境地图

1. 主工具栏和样式工具栏：执行常用操作，如管理元件、设置元件样式和发布，可以在选择模式、连接器模式和绘图工具之间更改光标工具。
2. 画布：在这个环境中拖放布局元件，更改元件颜色和尺寸、添加网格和参考线，以及切换标尺的可见性。
3. 页面：添加、删除、重命名和管理文件中的页面。
4. 概要：查看当前图表上所有可搜索、可排序和可筛选的部件、母版及动态面板列表。
5. 元件库：例如按钮、图像、文本和形状等元件的库，从“元件库”窗格中拖动元件，然后放到画布上，通过“元件库”窗格，可以在元件库之间切换及加载其他元件库，甚至可以创建自己的自定义元件库，还可以从本地添加图像文件夹。
6. 母版：可以在整个文件中重复使用的元件集合，可以进行添加、删除、重命名和管理母版等操作。
7. 样式：编辑元件和页面样式。
8. 交互：在页面或选定元件上添加和编辑交互及其他交互属性。
9. 注释：添加、编辑元件和页面注释。

nerror="javascript:errorimg.call(this);">

界面窗格可以被拖放到任何地方，甚至可以变成自由浮动的窗口，或者放在绿松石热区，固定在Axure界面中的新位置。

nerror="javascript:errorimg.call(this);">

通过点击:视图→工具栏→自定义主工具栏更改显示在主工具栏中的图标，或右键单击工具栏中的空白区域，在上下文菜单中选择自定义工具栏。

nerror="javascript:errorimg.call(this);">

单击右上角的恢复默认值，可以将工具栏恢复成默认设置。

nerror="javascript:errorimg.call(this);">

在应用程序首选项中将AxureRP切换为深色用户界面模式，该选项位于顶部菜单中的以下位置之一，具体取决于操作系统:

5. 查看和分享原型

6. 预览

预览时，浏览器中的原型链接到RP文件，文件更改时，在浏览器中刷新原型查看更改内容。

nerror="javascript:errorimg.call(this);">

7. 控制台

8. 预览选项

9. 发布到AxureCloud

发布成功会获得一个已发布原型的链接，可以与其他人共享并在任何具有web浏览器的设备上使用该链接。

nerror="javascript:errorimg.call(this);">

Axure官方全部快捷键，以及快捷键对应功能的中英文名称，实际原型设计中，由于快捷键操作便捷性的差异，和每个人使用习惯的不同，应用到的快捷键并不会太多，而且不同人也各不相同，以下快捷键选择性使用。

nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">

AxureRP自动保存打开的RP文件的备份副本，恢复文件的早期版本或恢复未保存的更改，可以访问备份文件。

12. 恢复自动保存的备份文件

2.在对话框左上角，输入1到30之间的值，查看备份天数，默认显示5天。

*提示：建议使用新文件名保存恢复文件，避免要盖最近保存的文件。

一旦恢复并保存了备份文件，可以直接从恢复RP文件继续工作，或者，按照以下步骤更改从备份文件导入原始文件:

1. 打开原始的RP文件。
2. 使用文件→从RP文件导入菜单选项，打开导入对话框。
3. 在出现的文件浏览器中选择恢复的备份RP文件。
4. 使用导入向导中的选项从备份文件中导入所需的更改。

15. 更改备份频率

在文件→备份设置，对话框中输入新的备份间隔值，可以设置为低至5分钟，高至60分钟。

在文件→备份设置，取消选中启用备份复选框，可以禁用备份功能。

四、管理元件

1. 在画布上定位元件

使用鼠标可以将元件或元件组拖放到适当位置，使用上下左右键将元件在画布上微移，也可以使用顶部工具栏或样式窗格中的X和Y字段选择画布坐标。

2. 一次定位多个元件

设置顶部工具栏中的X和Y字段，会将选中的元件移到画布上的目标坐标，并且每个元件将保持与目标坐标的相对距离。

nerror="javascript:errorimg.call(this);">

3. 调整元件大小

使用顶部工具栏或样式窗格中的W和H字段为元件选择尺寸，在W和H字段之间单击保持长宽比图标，可以维持元件的长宽比。

4. 一次调整多个元件的大小

顶部工具栏中的W和H字段，可以调整整个选区的大小，设置所选内容本身的宽度和高度，按比例调整所选元件的大小和位置，以适合所选尺寸。

*提示：当选中的元件尺寸不同时，样式窗格中的W和H字段将为空白。

在画布上移动元件时，会出现红色辅助线，显示元件与附近的其他元件之间的距高，这些辅助线还会显示何时边缘对齐或中点对齐。

nerror="javascript:errorimg.call(this);">

默认情况下，元件没有命名，在概要窗格和其他显示元件名称的位置，未命名元件在括号中显示元件型标识(矩形)、(图像)等。

在概要窗格中双击元件，可以给元件命名，还可以选中元件，在样式、交互或注释窗格的顶部输入名称。

nerror="javascript:errorimg.call(this);">

为方便将多个元件命名、定位和交互，可以将元件设置为一个分组。

选择一组元件，单击取消分组，拆分一组元件。

nerror="javascript:errorimg.call(this);">

当两个或多个元件重叠时，层次顺序较高的元件显示在前面，层次顺序较低的元件显示在后面。

在概要窗格查看元件的特定深度/z-index位置，默认情况下，元件是从前到后排序的，因此窗格顶部的元件在前面，底部的元件在后面。(可以通过单击概要窗格右上方的排序和过滤器图标来更改排序方向。)

nerror="javascript:errorimg.call(this);">

在概要窗格中上下拖动元件，更改元件的深度/z-index位置，顶部工具栏中也有用于实现此功能的按钮，使用顶层按钮将选定的元件移动到图的最前面，然后使用底层按钮将元件移动到最后面，还可以自定义顶部的工具栏，选中上移一层和下移一层按钮，这些按钮可向前/向后移动选中元件，一次一层。

nerror="javascript:errorimg.call(this);">

在概要窗格中切换元件或者组名称旁边的箭头，可以折叠或展开元件组(或具有嵌套结构的元件，例如动态面板和中继器)

11. 对齐和分布元件

对齐工具可以将两个或多个选定的元件在左侧，中心或右侧水平对齐，或在顶部，中间或底部垂直对齐，新位置基于选择的第一个元件的位置，必须至少选择两个元件才能对齐。

*提示：可以自定义顶部工具栏将这些选项合并到两个图标下，对齐和分布。

被锁定元件，不能在画布上拖动更改大小和位置，此时，用顶部工具栏或样式窗格中的字段才可以改变，这种配置有助于防止被锁定的元件意外移动或调整大小。

*提示：锁定的元件具有红色边框，如果无法拖动或调整特定元件的大小，可以查看元件边框颜色查看元件是否被锁。

用“显示”操作来动态显示窗口，隐藏元件，在Web浏览器中不可见。

五、元件样式

1. 样式属性

2. 不透明度

3. 排版

行距：调整文本行之间的间距，可以设置特定的像素值，也可以选择自动以使用默认间距。

其他文本选项：此菜单包括以下格式选项：

• 项目符号列表、粗体、斜体、下划线和删除线。
• 基线：向上或向下移动选定文本的基线，从正常、上标和下标中进行选择。
• 字母大小写：转换所选文本中所有字符的大小写，从正常、大写和小写中进行选择。

nerror="javascript:errorimg.call(this);">

对齐：六个对齐选项控制元件文本在其边框内的对齐，可以控制水平对齐和垂直对齐。

颜色：设置元件的填充颜色，元件填充颜色可以是实心的，也可以包括线性或径向渐变。

6. 边框

厚度：设置直线元件或二维元件轮廓的厚度。

可见性：控制矩形元件的哪些边显示边框

7. 阴影

8. 角

9. 边距

10. 元件样式

选择元件，在样式窗格或样式工具栏的元件样式下拉列表中选择元件样式，可以将元件样式应用于一个或多个元件。

nerror="javascript:errorimg.call(this);">

11. 元件样式层次结构

1.元件样式管理器对话框顶部的默认样式，样式属性选择将应用于原型中的每个元件。

3.在样式窗格或样式工具栏上的元件自身上进行的样式属性设置，将覆盖默认样式和元件自己应用的窗口元件样式中的选择。

nerror="javascript:errorimg.call(this);">

六、更新和创建样式

1. 快速更新

2. 快速创建

3. 元件样式管理器

单击对话框顶部的添加，或者，单击复制从现有样式制作新样式，添加新样式。

使用向上和向下箭头重新组织对话框中的样式。

在右列中，选中样式属性旁边的框，以使该属性覆盖默认样式，在适用的字段中选择该属性。

4. 复制和粘贴样式

第二个元件将具有第一个元件的所有样式属性，包括已经应用的元件样式。

在主菜单的编辑→格式刷中使用格式刷。

此外，格式刷允许复制和粘贴样式效果。

样式效果是基于Web浏览器中的应用于交互动态的元件样式，只要元件处于特定状态(例如，将鼠标悬停或禁用)，就会将元件样式从其基本样式更改为其他样式。

nerror="javascript:errorimg.call(this);">

AxureRP预装了四个元件库——默认、流程、图标和示例UI模式——也可以安装其他库，甚至创建自己的元件库。

1. 元件库切换

单击下拉列表并在列表中选择元件库，可以切换元件库，或者，选择所有库一次查看所有已加载的元件。

添加本地库文件

每次打开AxureRP时，都会尝试加载过去已添加的所有本地元件库。

*提示：单击窗格右上方的选项菜单，选择在磁盘上查找，可以查看本地元件库文件的存储位置。

在元件库窗格顶部的下拉列表中选中，单击窗格右上方的选项菜单，然后选择删除元件库。

AxureRP画布包含许多功能来辅助设计图表，可以显示和自定义背景网格以及垂直和水平参考线，这些参考线可以应用于特定页面，也可以全局应用于项目中的所有页面。

1. 网格

无论网格是否可见，拖动移动或调整元件大小时，元件都会捕捉到网格，可以通过取消选中视图→标尺，网格和参考线下的对齐网格禁用。

2. 参考线

1）页面和全局参考线

全局参考线类似于页面参考线，无论当前正在使用哪个页面或母版，参考线始终在画布上可见，按住CTRL或CMD并从标尺中拖动，创建全局参考线，全局参考线默认为紫红色。

右键单击参考线，选择删除，或者，选择一个参考线或一组参考线，然后按键盘上的Delete键，可以删除参考线。

*提示：从一页删除全局参考线也会将其从项目的其他每一页中删除。

用视图一标尺，网格和参考线一创建参考线对话框一次创建一系列页面或全局参考线。

4）锁定参考线

还可以通过检查视图→标尺，网格和参考线→锁定参考线，一次锁定项目中的所有参考线。

页面尺寸参考线显示了已走义页面尺寸的页面边界，页面顶部，左侧和右侧边界由出现在画布的视口区域周围的灰色蒙版标记，底部边界由虚线，褐红色线标记。

6）打印参考线

7）对齐参考线

在视图→标尺，网格和参考线，取消选中对齐参考线，可以禁用此行为。

默认情况下，参考线展示在画布上的元件前面，始终可见。

4. 标尺

九、管理页面

1. 添加，删除和命名页面

在页面上单击鼠标右键，选择“删除”，或选中页面并按Delete，删除页面。

2. 管理页面

*提示：“页面”窗格顶部的页面用作Web浏览器中原型的登录页面，重新排列页面顺序更改登录页面。

使用“页面”窗格右上方的“添加文件夹”图标添加文件夹，也可以右键单击页面，选择添加→文件夹，右键单击文件夹，选择“删除”或选中页面并按Delete。

双击文件夹名称或右键单击该文件夹，选择“重命名”，修改文件夹名称。

页面名称左侧的图标指示该页面包含的图表类型，即“页面”或“流程”，右键单击页面，使用“图表类型”子菜单，更改图标。

在画布上打开的每个页面都由画布上方的选项卡表示，单击页面的选项卡显示在画布上，或使用键盘快捷键在这些选项卡中导航。

单击画布右上方的箭头图标，打开的页面的完整列表。

在“样式”窗格中通过编辑自定义原型页面样式。

默认情况下，页面尺寸是根据画布上的元件自动计算的，画布本身不受约束。

为页面选择尺寸时，画布将更改大小以匹配，灰色负空格将白色视口区域框定，该框架也反映在Web浏览器中。

3. 自适应视图

4. 页面对齐

*提示：页面对齐方式不会影响AxureRP画布上元件的对齐方式。

颜色:设置页面的背最颜色和不透明度

*提示：在AxureRP和Web浏览器中都应用了颜色和图像填充。

低保真度模式会降低页面的视觉保真度，将注意力集中在设计用户体验上，而不是视觉上，在页面上启用“低保真”模式时，元件将转换为灰度，所有字体都替换为“Axure手写”字体，以使外观更粗糙。

1）事件、案例和动作

在“交互”窗格中创建和管理原型的交互，从窗格底部的所选元件的最常见交互中选择，也可以单击“新建交互”来构建自己的交互。

2）交互结构

3）事件

查看页面或窗口元件可用的事件，选中元件在“交互”窗格中单击“新建交互”，在列表中选择一个事件以配置其下的交互。(可以在此页面的下方查看可用页面的完整列表和窗口元件事件。)

4）案例

可以通过单击事件名称右侧的“添加案例”图标来向事件添加其他案例，当事件在Web浏览器中触发时，可以在出现的菜单中选择要执行的事件，或者，设置条件逻辑以根据某些条件自动进行此确定。

5）动作

在“新建互动”菜单中选择一个事件时，将显示可用操作的列表。选择动作后，系统会提示配置，通过将光标悬停在操作名称上方并单击右侧的“添加目标”，将其他目标添加到该操作(对于添加目标的操作)

在“交互”窗格中选择案例，按DELETE，删除案例。

十一、事件列表

1. 页面和母版事件列表

2）键盘

• 页面按键按下：当按下键盛键时。
• 页面按键松开：释放键盘键时(按下后)。

。调整浏览器窗口的大小。

。在原型播放器的“自法应视图”下拉列表中选择一个新机图。

• 窗口向上滚动时：当窗口向上滚动时。
• 窗口向下滚动时：当窗口向下滚动时。
• 窗口滚动时：当页面向任何力向滚动时。

1）所有元件

键盘

• 按键按下时：当元件具有浏施器焦点时按下建盘键。
• 按键松开时：当元件具有刘览器焦点时释放键盘键（按下后)。

2）下拉列表和列表框独有

4）动态面板独有

动态面板

• 面板转态改变时：通过“设置面板状态”操作更改面板的状态时。
• 拖动开始时：拖动动态面板时。
• 拖动时：停止拖动面板时，（释放鼠标按钮时触发，而不是停止移动时触发)。
• 拖动结束：拖动动志面板时连续触发。
• 向上滚动时：动态面板向上滚动时。
• 向下滚动时：动态面板向下滚动时。
• 滚动时：动态面板沿任何方向滚动时。

3. 操作列表

打开链接：在以下位置打开原型页面或外部URL：

• 当前窗口：当前浏览器窗口。
• 新窗口/标签：新的浏览器窗口或标签。
• 弹出窗口：一个弹出窗口。
• 父级窗口：弹出窗口的父窗口(必须在弹出窗口中加载的页面中使用)。
• 关闭窗口：关闭当前的浏览器窗口或标签。

动到元件(锚链接)：将浏览器窗口滚动到页面上元件的位置。

3）变量

5）其他

• 设置自适应视图：更改显示在web浏览器中的自适应视图。
• 等待：在执行任何后续操作之前，添加指定时间的暂停(以毫秒为单位)。
• 其他：显示指定的文本描述(作为尚未原型化的动作的占位符)。
• 触发事件：在页面，母版或窗口元件上触发指定事件。
• 引发事件：“引发”母版窗口元件上的事件，直至页面级别。

文本链接是一种独特的窗口元件类型，不能单独存在，必须将添加到形状元件上并作为元件的一部分。

在形状元件上双击或选择文本，按Enter，以编辑文本，然后，选择要变成链接的文本部分，在“交互”窗格中单击“插入文本链接”

2）文字链接遮罩

*提示：窗口元件遮罩，包括文本链接遮罩，不在Web浏览器中显示。

选择文本链接，在“样式”窗格或样式工具栏中进行样式选择。

十二、样式效果

当鼠标光标移到元件上时应用。(默认情况下在文本链接上启用。)

单击窗口元件并按下鼠标按钮时应用。(默认情况下在文本链接上启用。)

当通过“设置选中动作”将元件设置为选中状态时，或者在单击复选框或单选按钮时自动应用。

通过“禁用”操作将元件设置为禁用状态时应用。(默认情况下在例如文本字段和下拉列表之类的窗体元件上启用。)

当元件在Web浏览器中获取焦点时应用，例如文本字段和下拉列表之类的窗体元件在单击或切换到选项卡时会自动获取浏览器的焦点，还可以使用“焦点”操作动态地给元件浏览器焦点。

启用样式效果

1. 选择窗口元件，然后在“交互”窗格中单击“新建交互”。
2. 在事件列表下方，在“样式效果”标题下选择所需的样式效果。
3. 在出现的区域中，选择要为样式效果更改的样式属性，通过单击更多样式属性来查看样式属性的完整列表。

*提示：创建一个元件样式保存样式选择，在“窗口元件样式”下拉菜单中选择窗口元件样式，启用样式效果。

复制和粘贴样式效果

十三、动画

每个动画都有两个部分：效果和时间。

• 在“动画”下拉列表中选择的动画效果决定了动画的视觉效果。
• 在ms字段中输入的动画时间决定了完成动画所需的时间(以毫秒为单位)。

以下效果可应用于更改窗口元件可见性的操作，这些是“显示/隐藏”操作和“设置面板状态”操作。

• 淡入淡出：逐渐更改元件或面板状态的不透明度，直到完全看不见。
• 向左/向右/向上/向下滑动：将元件或状态滑动到视图中或从视图中移出。
• 向左/向右/向上/向下翻转：沿中心轴翻转元件或状态到视图中或从视图中移出(X代表上/下，Y代表左/右)。

也称为“缓动”以下效果决定了在指定时间范围内动画的步调，这些可以应用于更改窗口元件或页面本身的空间方向的动作。包括“滚动到元件”，“移动”，“旋转”，“设置大小”和“设置不透明度”操作。

• 逐渐：动画在开始和结束时比在中点处稍微慢一些。
• 线性：动画在整个定时中以相同的速度进行。
• 缓进：动画开始缓慢，逐渐变快，直到定时结束。
• 缓出：动画开始缓慢，逐渐变快，直到定时结束。
• 缓进缓出：动画开始缓慢，逐渐变快直到定时的中点;然后逐渐变慢。(类似于Swing，但更为明显。)
• 弹跳：动画像缓进一样加速，但是一旦达到动画的终点，就会反弹几次。
• 弹性：动画会超出其终点，然后弹回原点。

元件和页面注释是可以添加到设计中的文本元数据，使用这些注释来记录规范，将元件和页面与项目需求相关联，记录更改并与开发同学进行交流。

如果在画布上没有选择任何元件，则页面注释字段位于“注释”窗格的顶部，单击进入页面注释字段以编辑其文本。

2）元件注释

添加元件注释

分配元件注释

如果在选择元件时创建新的元件注释，则该注释将自动分配给该元件。相反，如果在未选择任何元件的情况下创建新的元件注释，则该注释未分配；单击注释右上方的“分配元件”，分配未分配的注释；单击便笺右上角的元件名称，将当前分配的注释分配给其他元件，或取消分配。

选中元件，按DELETE。

在单击时按CMD(Mac)或CTRL(Windows)多选元件，按DELETE删除。

元件的脚注图标上显示的数字与其在页面上存在的元件注解列表中的注解位置相对应。可以通过在“注释”窗格中向上，向下，向左或向右拖动注释来更改编号。还可以通过“布局”一“对脚注重新编号”菜单选项立即自动对所有脚注重新编号。

在另一个注下缩进一个注时，缩进注的编号将变成一个小数，表示其在父便笺下的位置。例如，在注释#4下缩进一个注释将使该注释缩进为注释#4.1，随后的注释将为#4.2，#4.3，依此类推。

单击注释右上角的回形针图标，选择要包括的项目，可以在其分配的注释中包括元件的文本和交互。

复制和粘贴元件注释

添加注释字段

在“注释字段和集”对话框中，使用“编辑元件注释”选项卡来管理元件注释字段，并使用“编辑页面注释”选项卡来管理页面注释字段。页面注释字段仅支持文本，但是窗口元件注释字段可以是文本，选择列表或数字字段。

在“编辑元件字段集”选项卡上，可以将元件注释字段组织成针对项目生命周期中不同受众或不同时期的集合。

在浏览器中查看字段

使用HTML生成器设置的“注释”选项卡上的选项，更改页面和窗口元件注释在浏览器中的显示方式。

页面和元件注释包含在Word文档规范和CSV报告中。

本文由 @PM大明同学 原创发布于人人都是产品经理。未经作者许可，禁止转载

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务