Axure RP9基础操作

--本篇导航--

• 基本配置（界面配色、网格底纹，默认字体，自定义面板和工具位置）
• 常用快捷键、视图操作
• 绘制页面（页面、纸张大小，页面结构，元件说明，母版，导入SVG，布尔运算符）
• 制作简单交互（页面跳转链接，文本框提示文字）
• 原型批注

---

界面及工作流程

工作流程：按产品经理的工作来说，应该是拿到需求，识别需求优先级和重要程度，拆分功能和子功能，然后制作产品功能结构图、产品信息结构图。

确定好结构后，就可以用Axure制作PRD文档了，也可以直接用Axure制作产品原型用来做内部沟通、产品演示。

在Axure中，是分为绘制页面和制作交互两个部分。

绘制页面，和其他的设计软件一样，只是如果是制作非高保真原型图，则只需要简单的线框图交代清楚即可，也可以直接拖拽载入的元件库来搭建，可以极大提高效率。

制作交互，这部分就是直接防最终页面间的交互效果，按钮链接点击、滑动、页面切换、图表的增删改除等操作。

在制作期间可以随时进行预览，查看网页端、移动端的效果，最后也可以直接发布生成Word说明书以方便团队成员查看，或直接发布到Axure云上去做共享。

---

基本配置

界面配色、网格底纹

网格底纹

如果显示网格但没有吸附到网格时，可以勾选上【视图 - 标尺·网格·辅助线 - 网格对齐】即可。

默认字体

自定义面板和工具

Axure的面板可以随意拖动。

常用快捷键、视图操作

Axure默认在界面的命令后标注有其对应的快捷键。有一些在右键菜单中。

以下为一些常用的快捷键。

功能/工具	快捷键
矩形	R
线段	L
圆形	O
钢笔	P
文本	T
图片切割	S
图片裁剪	C
预览原型	/左侧的.
创建交互	X
元件透明度0%和100%切换	0（主键、小键盘均可）
元件透明度10%~90%	1~9
添加元件说明	N
复制元件	按住Ctrl拖动元件‍
元件10像素移动	Ctrl、Shift、左框选、右框选多个元件后，按住Shift+↑↓←→，可以一次移动10像素
元件打组	多选元件后，Ctrl+G或右键选择组合
元件结组	对已组元素Ctrl+Shift+G或右键选择取消组合
水平垂直移动视图	水平：按住Shift的同时滚动鼠标滚轮 垂直：直接滚动鼠标滚轮
平移视图	按住空格键，拖动鼠标左键
缩放视图	按住Ctrl键滚动鼠标滚轮

---

绘制页面

绘制页面，可以直接拖拽元件自己画界面，也可以在网上找其他界面的截图然后使用S、C裁剪拼界面，只要能表达清楚界面业务逻辑、功能即可。

页面、纸张大小

如果需要指定页面大小，可以先设置页面。网页、手机、平板，也可以自定义大小。

如果要设置页面纸张的大小，可以在【文件 - 纸张尺寸与设置】里调节。

页面结构

可以在左侧的【页面】面板中建立页面树状结构，在【概要】面板查看当前页面所有元件。

元件说明

元件直接拖拽到中间的编辑区即可使用，在右侧【样式】面板中可调整其所有的参数。也可在上方工具栏下调节部分参数。

对于元件样式的编辑很简单，此处就不做说明了。

以下就一些比较重要的来做下描述。

矩形

对于图片元件，双击可以载入图片，白色方框时会拉伸填充图片元件，黄色方框时会自动按载入图片大小显示。

对于文本框元件，点击左边和下边的白色方框是不一样的。左边的为自适应大小，下边的则是宽不变、自适应高度。

热区就是点击区域，比直接给元件添加交互事件而言，热区可以直接覆盖在多个元件之上，当修改下方的元件时，不需要重新设置交互。

动态面板可以理解为设计软件里的变体，就像一个按钮存在多个状态（默认状态、悬停状态、点击状态），在同一个组件里存在多个状态。通过交互来切换各个状态，而且通过切换动态面板比直接做跳转链接好，没有页面刷新。

创建动态面板的方法：

方法一：直接拖拽[动态面板]组件，调整大小后双击进入，添加多个状态。

方法二（优选）：先做好一个组件（可组合），然后[右键-转换为动态面板]，双击进入后可以添加多个状态。

中继器Repeater可以制作多个类似排版的表格，可以做到数据库那种的增删改查。

中继器分为表格内容添加、中继器模板内容设置、表格行列赋予到模板中，之后就可以展示出来了，最后就可以给中继器添加各种的交互。

中继器表格的列名，必须是英文的！！！就是下面的Name、Year、Image

 

第三步，双击中继器淡绿色区域，添加并编辑元件，给各元件命名。

第四步，将中继器表格的列名赋予给第三步中添加的中继器模板的元件。

第五步，给中继器添加各种交互。（后续中继器篇单独做介绍）

母版

母版就和PPT里的母版、设计软件中的组件、程序当中的实例化是一样的概念，可以随时将制作好的元件组合转化为母版，如需要重复使用的、排版结构类似的，都可以用母版。

需要先新建母版页面（淡红色的），再双击进入母版页面编辑制作内容。

制作完的母版可以设置【拖放行为】：

1. 任意位置：在应用页面中可以随便拖放
2. 固定位置：拖到应用页面中的位置与原母版中的位置一致，且原母版中元素移动位置后，对应的应用页面也会移动位置
3. 脱离母版：拖到应用页面中的与原母版没有关联关系，可以随意更改内容。

从母版中拖出来的非脱离状态的应用实例，双击会进入原母版的编辑页面。

母版的应用范围仅限当前的RP文件。

元件库可以跨RP文件引用使用。

也可以在母版上右键，选择【添加到页面中】，选择到具体的页面。

导入SVG

SVG导入到Axure后不清晰不可编辑怎么办？直接右键，转换为形状，还可以修改SVG的颜色了。但圆角并不能正确的保留！！！且图标大小会有变化。

布尔运算符

Axure有布尔运算符，可以制作复杂的形状。

多选需要做布尔运算的形状，在右侧的【样式】面板中即可出现布尔运算符。

做布尔运算时，注意图层前后关系，覆盖关系（运算出错，可能是相交处未严格能切割相减）。

---

制作简单交互

Axure中的交互都是给目标元件添加一个事件，设定执行的条件和动作，最终组成交互的。这部分就很像代码，复杂点的就类似于if、else if的判断。

此处仅列一些简单的交互，更复杂的交互放在后续的笔记中。

页面跳转链接

在Axure中任何元件都可以添加链接，各种交互动作可以叠加使用，组合成复杂的交互动作。但需要注意的是，Axure中交互动作是从上往下进行执行的，和程序代码的逻辑一样。

 

文本框提示文字

在一些提交表单如登录认证时，文本输入框中会有默认的Hint提示文字。

文本框根据输入的内容不同，可以分为一般输入框、邮箱、密码、数字、电话、链接、载入文件等等类型。

可以给输入框（或其他元件）添加不同的状态样式，如默认状态、悬停状态、点击状态的外观样式。

---

原型批注

原型文档的制作就和写word文档类似，行文结构按页面树状结构来做，图+字说明功能、字段、条件等，交付给开发或组内其他同事，能看懂了解功能和效果即可。

批注指的就是对画好（线框图、低保真界面图、高保真界面图）界面做一些说明，可以使用Axure自带的【元件 - 标记元件】。

可以连接页面，展示页面跳转关系；可以写便签，做备注；可以打标记1、2、3，再分别说明1、2、3的内容。

如果是对单个元件、组件做说明，也可以在右侧的说明中添加说明文字。

内容和结构都是非常随意的，没有特定的规范，一切以将文档说明清楚为准。