Axure-RP-8-交互原型第2章课件.pptx

1、第2章 图形元件A x u r e R P 8 交 互 原 型设 计 案 例 教 程（微 课 版）微课版Axure RP 将所有与设计原型的相关对象统称为元件（Widgets），并且专门存放于元件库面板中。Axure RP 提供了三类元件库，分别是：默认、流程图和图标。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.1 认识元件库面板当图标数量太多而不容易查找某个图标时，可以使用元件的查找功能快速查找。单击元件库面板上的按钮，然后输入要查找的图标名称即可，如图2-1 所示。Axure RP 8 交互原

2、型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.1 认识元件库面板图 2-1 查找元件与一般的图形处理软件不同，Axure RP 创建图形元件的方法是：使用鼠标从【元件库】面板中将某个元件拖到页面中。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.2 使用图形元件Axure RP 提供了两种选择工具按钮：相交选择模式（【Ctrl+1】）和包含选择模式（【Ctrl+2】），这两个按钮可以在主工具栏上找到，如图2-2 所示。Axure RP

3、 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.3 选择图形元件图 2-2 在页面上应用元件除了使用选择工具选择对象外，还可以在页面上没有元件的位置右击鼠标，从弹出的快捷菜单中执行选择对象的命令，如图2-3 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.3 选择图形元件图 2-3 选择对象的快捷菜单1.使用鼠标变换使用鼠标变换对象时，最好使用选择工具。选择对象后，会出现一个绿色的边界框。鼠标指针放在边界框内按下左键拖

4、动即可移动位置，鼠标放在4 个角或者4 条边处的小方格上，指针会变成双向箭头，此时可改变宽度和高度，如图2-4 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.4 变换图形元件图 2-4 变换对象大小使用鼠标旋转对象需先按下【Ctrl】键，然后将鼠标指针放在边界框周围8 个小方格的任意一个上，此时鼠标指针变成弯曲箭头，按住鼠标左键拖动即可旋转对象，如图2-5所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作

5、2.1.4 变换图形元件图2-5 变换对象的方向2.使用样式工具栏变换在样式工具栏中，可以通过设置参数精确变换元件的位置和大小，如图2-6 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.4 变换图形元件图 2-6 样式工具栏的变换参数3.使用【样式】面板变换【样式】面板是【检视】面板的一个子面板，在该面板中，除了和样式工具栏一样可精确变换元件的大小和位置外，还可以精确旋转对象。选择多个图形元件对象时，在【样式】子面板中可以看到变换分成了两部分，上面的“位置+尺寸”针对的是选择的多个元件对象，也

6、可以理解为将选择的多个对象作为一个整体来变换大小和位置；下面的“每个元件”针对的是选择的多个对象中的每个对象，如图2-7 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.4 变换图形元件图 2-7 样式面板中的变换参数镜像也可叫作翻转，分为水平镜像和垂直镜像。选择对象后，在【样式】子面板中只要单击【水平镜像】按钮和【垂直镜像】按钮即可实现镜像操作。除了使用【样式】子面板中的两个镜像按钮外，还可以在要镜像的元件上右击鼠标，从弹出的快捷菜单中执行【变换形状】【水平镜像】或者【垂直镜像】命令。Axur

7、e RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.5 镜像图形元件在Axure RP 中，锁定对象有两种方法。（1）使用锁定按钮：在主工具栏中可以找到【锁定】和【解除锁定】两个按钮，如图2-8 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.6 锁定和解锁图形元件图 2-8 主工具栏的【锁定】和【解除锁定】按钮（2）使用菜单命令：执行【排列】【锁定】【锁定位置和尺寸】（【Ctrl+K】）或者【解除锁定位置和尺寸】

8、（【Ctrl+Shift+K】）命令。对齐至少要选择两个对象，分布至少要选择3 个对象。在Axure RP 中有3 种方法可以完成对齐和分布。（1）使用主工具栏的按钮：Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.7 对齐和分布图形元件图 2-9 主工具栏的【对齐】和【分布】按钮（2）使用快捷菜单：（3）使用主程序菜单：除了使用上面的【对齐】按钮对元件对齐之外，还可以使用Axure RP 软件提供的元件对齐功能将两个元件对齐。但是，当将两个矩形相邻的边界对齐时，对齐的边看起来会变粗，如图2-10 所

9、示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.7 对齐和分布图形元件图 2-10 两个矩形相邻的边并列对齐这是因为默认状态下，程序采用的边界对齐方式是边框并排方式，可以执行【项目】【项目设置】命令将边界对齐设置为“边框重叠”，此时，再将一个右边界和另一个矩形的左边界对齐时就会发现两个边界完全重叠了，如图2-11 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.7 对齐和分布图形元件图 2-11 两

10、个矩形相邻的边重叠“边框重叠”和“边框并排”究竟有什么区别呢？只要选择一个图形元件并设置较粗的描边并适当放大视图，再选择这两个选项就能直观地看出二者的区别，如图2-12 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.7 对齐和分布图形元件图 2-12 边框重叠和边框并排的区别从元件库中拖出的元件放到页面后是有先后顺序的，先放置的元件在下层位置，后放置的元件在上层位置。1.使用主工具栏的按钮主工具栏的排列顺序按钮，如图2-13 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2

11、章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.8 排列图形元件的顺序图 2-13 主工具栏的排列按钮2.使用快捷键菜单在元件对象上右击鼠标，从弹出的快捷菜单中可执行【顺序】【排列顺序】命令。3.使用主菜单命令4.使用【大纲】面板Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.8 排列图形元件的顺序1.使用主工具栏的按钮主工具栏的【群组】和【取消群组】按钮，如图2-14 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.

12、1 图形元件的基本操作图形元件的基本操作2.1.9 编组图形元件图 2-14 主工具栏的【群组】和【取消群组】按钮1.使用主工具栏的按钮主工具栏的【群组】和【取消群组】按钮，如图2-14 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.9 编组图形元件图 2-14 主工具栏的【群组】和【取消群组】按钮2.使用快捷键菜单选择多个元件对象后右击鼠标，从弹出的快捷菜单中可执行【群组】或【取消群组】命令。3.使用主菜单命令（1）选择要添加到群组中的对象。（2）在【大纲】面板中将其拖到群组中，如图2-15

13、 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.9 编组图形元件Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.9 编组图形元件图 2-15 使用【大纲】面板向群组中添加新对象同样，在【大纲】面板中也可以将一个群组拖到另一个群组中，建立嵌套群组，如图2-16 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.

14、1.9 编组图形元件图 2-16 使用【大纲】面板建立嵌套群组在做交互原型设计时，经常需要将某个元件对象隐藏起来。Axure RP 提供了3 种隐藏元件对象的方法。1.使用样式工具栏的选项2.使用快捷键菜单3.使用【样式】子面板Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.10 隐藏图形元件Axure RP 复制图形元件对象的方法有3 种。1.使用常规方法复制执行【编辑】【复制】（【Ctrl+C】）、【粘贴】（【Ctrl+V】）命令。这并非Axure RP 独有的方法，几乎所有的程序都可以使用该方法

15、。2.斜向等距快速复制选择要复制的元件对象后，反复按【Ctrl+D】组合键可快速等距斜向复制元件对象。3.使用鼠标移动时复制按【Ctrl】键再移动某个元件就可以实现复制。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.1 2.1 图形元件的基本操作图形元件的基本操作2.1.11 复制图形元件从元件库中拖曳到页面的元件大多是有描边和填充色的，但是，在做原型设计时，这些默认的颜色往往不能满足要求，这就需要重新设置。有以下两种方法设置描边和填充。1.使用样式工具栏在样式工具栏中，可以使用相关按钮对图形元件指定填充颜色和描边颜色，也可以设置描边的宽度以及描边的类型

16、是虚线还是实线，如果不是封闭的图形元件，还可以通过样式工具栏对其添加各种箭头，如图2-17 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.1 描边和填充图 2-17 样式工具栏的填充和描边按钮无论是描边还是填充，Axure RP 不但允许使用单色（一种颜色），而且可以使用渐变色（两种或者两种以上的颜色）。选择“渐变”填充类型后，可以将鼠标指针放在渐变条的下方，当鼠标指针变成标志时，单击即可添加一个色标，如图2-18 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2

17、2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.1 描边和填充图 2-18 添加颜色色标2.使用【检视】【样式】子面板【检视】【样式】子面板中提供了填充和描边更详细的参数设置，【样式工具栏】中图形元件填充和描边的按钮工具，在该面板中也存在，而且按钮工具图标也相同。不过【样式】子面板对描边又增加了一个“边界可见”选项。设置“边界可见”选项，可以控制图形元件描边时哪条边是可见的，哪条边是不可见的，如图2-19 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样

18、式和形状2.2.1 描边和填充Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.1 描边和填充图 2-19 设置边界可见前后的图形比较阴影分为外部阴影（也可以叫投影）和内部阴影，通过样式工具栏可以为图形元件对象添加外部阴影，如图2-20 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.2 添加阴影图 2-20 样式工具栏的外阴影参数“偏移”控制阴影到图形元件的水平距离（x）和垂直距

19、离（y）；“模糊”控制阴影的虚化程度；“颜色”控制阴影的颜色，默认是灰色。对图形元件添加内阴影，在样式工具栏中无法实现，需要通过【样式】子面板来实现，如图2-21 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.2 添加阴影图 2-21【样式】子面板中的【外阴影】和【内阴影】选项本小节主要学习钢笔工具的使用方法。钢笔工具（【Ctrl+4】）位于主工具栏中，如图2-22所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的

20、样式和形状编辑图形元件的样式和形状2.2.3 使用钢笔工具图 2-22 主工具栏的【钢笔】工具1.绘制直线2.绘制平滑曲线在使用钢笔工具绘制曲线时，如果使用鼠标右击，则会在右击位置和上一锚点之间出现两条方向相反但位于同一直线的橙色控制手柄线，如图2-23 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.3 使用钢笔工具图 2-23 使用钢笔工具右击调整控制手柄线3.绘制转折曲线使用钢笔工具绘制曲线时按下【Ctrl】键拖动，则只有靠近鼠标指针一侧的橙色控制手柄线变动，另一条控制手柄线保

21、持不同，这样可以绘制出转折的曲线，如图2-24 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.3 使用钢笔工具图 2-24 使用钢笔工具绘制转折线1.将一个形状切换成其他图形2.使用黄色小圆点编辑形状3.使用黄色小三角圆角化矩形默认状态下，矩形的四个直角同时圆角化，如果只对某个角圆角化，则需要在【检视】【样式】子面板中通过“圆角化”参数右侧的按钮实现。单击该按钮，在弹出的列表中可单击去掉无需圆角化的角。在【样式】子面板中设置好圆角化的角之后，在页面中拖动黄色小三角标志时就只有指定的

22、角变成圆角，如图2-25 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.4 编辑形状Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.4 编辑形状图 2-25 局部圆角化矩形4.转为自定义形状图标元件库中的形状只要双击其边框线就可进入自定义形状模式，如图2-26 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的

23、样式和形状编辑图形元件的样式和形状2.2.4 编辑形状图 2-26 双击图标边框线进入自定义形状模式【结合】和【分离】可视为互为逆向操作，【结合】可以将多个图形元件结合在一起成为一个整体对象，结合后的对象采用最底层图形元件的样式，但结合后的每个图形元件仍然保留原来的形状，其独立性的本质并未改变。执行【结合】后，再对其【分离】，则分离后的每个元件不会恢复到【结合】前的样式，而是继续保留了与结合时相同的样式。需要注意的是，结合多个对象元件后，有时会出现镂空，而有时几个图形元件的外观保持不变，如图2-27 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2

24、 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.5 结合和分离Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.5 结合和分离图 2-27 同样的图形元件结合的结果不同下面先使用钢笔工具沿着顺时针方向绘制两个封闭且重叠的图形，然后再沿着逆时针方向绘制两个封闭且重叠的图形，如图2-28 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.5 结合和分离图 2-28 使用

25、钢笔工具按顺时针方向绘制的两个形状接下来，分别选择左侧的两个重叠图形并执行【结合】命令，对右侧的两个重叠图形同样执行【结合】命令，会发现两组图形的结果相同，如图2-29 所示。继续使用钢笔工具绘制两个重叠的图形，但是这一次绘制的两个图形，一个沿顺时针方向，一个沿逆时针方向，如图2-30 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.5 结合和分离Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样

26、式和形状2.2.5 结合和分离图 2-29 方向相同的重叠图形结合的结果图2-30 绘制的两个方向相反的重叠图形再次选择两个重叠的图形并执行【结合】命令，奇怪的现象发生了，两个图形重叠的位置竟然变成了镂空的，如图2-31 所示。例如，从【元件库】面板中拖曳出一个椭圆形元件，然后将其复制一个放在原来椭圆的上方并适当将复制的椭圆变小，选择小椭圆后，单击【检视】【样式】子面板中的【水平镜像】工具或者【垂直镜像】工具，再选择这两个椭圆并执行【结合】命令，镂空就出现了，如图2-32 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式

27、和形状编辑图形元件的样式和形状2.2.5 结合和分离Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.2 2.2 编辑图形元件的样式和形状编辑图形元件的样式和形状2.2.5 结合和分离图 2-31【结合】后出现了镂空图2-32 镂空的圆创建自己的元件库的具体步骤如下。（1）在【元件库】面板中单击【选项】按钮，在弹出的菜单中执行【创建元件库】命令。（2）在打开的【保存Axure RP 元件库】对话框中指定保存的位置、元件库名称，设置完成后单击【保存】按钮。（3）稍等片刻，会重新启动一个Axure RP 程序，与先前打开的Axure RP不同的是，【页面】面板名

28、称在新的程序界面中已经改成了【元件库页面】，如图2-34 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.3 2.3 自定义元件库自定义元件库2.3.1 创建元件库Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.3 2.3 自定义元件库自定义元件库2.3.1 创建元件库图 2-34 重新启动的Axure RP 程序界面（4）添加元件页面。（5）在【元件库页面】面板中双击某个页面以打开该页面。（6）使用本章前面所学的创建和编辑图形元件的方法，在当前页面中创建出手机模型，在样式工具栏或者【样式】子面板中将横纵坐标值都

29、设置为0，这样，绘制的图形元件就放在了元件库页面的左上角位置了。重复步骤（5）和步骤（6），完成其余元件的绘制。（7）执行【文件】【保存】（【Ctrl+S】）命令，保存当前绘制的元件，然后关闭当前程序，返回原来的Axure RP 程序界面。（8）如果Axure RP 的【元件库】面板中没有列出刚刚创建的三个元件图形，那么可以在【元件库】面板中单击【选项】按钮，在弹出菜单中执行【刷新元件库】命令。如果在自定义元件时，在【元件库页面】面板中创建了文件夹，而且将自定义的元件放在不同的文件夹中，则返回Axure RP 主程序并执行【刷新元件库】命令后，【元件库】面板中的元件将按文件夹分类显示元件，如图

30、2-35 所示。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.3 2.3 自定义元件库自定义元件库2.3.1 创建元件库Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.3 2.3 自定义元件库自定义元件库2.3.1 创建元件库图 2-35 分类显示的元件自定义的元件库可以随时再次编辑，方法是：在元件库面板中单击【选项】按钮，在弹出的菜单中执行【编辑元件库】命令。执行【编辑元件库】命令后会再次进入与2.3.1 小节中自定义元件库一样的程序界面，可以修改已经定义好的元件，也可以继续创建新的元件。Axure RP 8 交互

31、原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.3 2.3 自定义元件库自定义元件库2.3.2 编辑元件库可以随时将自定义的元件库或者载入的元件库卸载。在【元件库】面板中单击【选项】按钮，然后在弹出菜单中执行【卸载元件库】命令。还可以从Axure 官网下载元件库，方法是：在【元件库】面板中单击【选项】按钮，在弹出的菜单中执行【下载元件库】命令，可以在打开的Axure 官网中下载想要的元件库。Axure RP 8 交互原型设计案例教程（微课版）第第2 2章章图形元件图形元件2.3 2.3 自定义元件库自定义元件库2.3.3 卸载和导入元件库本章总结本章总结通过本章的学习，读者应熟悉Axure RP【元件库】面板，掌握编辑图形元件的方法和各种技巧，而且能够创建自定义元件库。在本章中，读者要着重区分群组、结合和合并的不同之处，以免混淆；一定要掌握编辑图形元件的方法，这是绘制其他复杂原型的基础。THANKSA x u r e R P 8 交 互 原 型 设 计 案 例 教 程（微 课 版）