【文档说明】Axure-RP-8交互原型设计案例教程第2章-图形元件.pptx，共(53)页，707.173 KB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2785.html

以下为本文档部分文字说明：

第2章图形元件AxureRP8交互原型设计案例教程AxureRP将所有与设计原型的相关对象统称为元件（Widgets），并且专门存放于元件库面板中。AxureRP提供了三类元件库，分别是：默认、流程图和图

标。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.1认识元件库面板当图标数量太多而不容易查找某个图标时，可以使用元件的查找功能快速查找。单击元件库面板上的按钮，然后输入要查找的图标名称即可，如图2-1所示。AxureRP8交互原型设

计案例教程第2章图形元件2.1图形元件的基本操作2.1.1认识元件库面板图2-1查找元件与一般的图形处理软件不同，AxureRP创建图形元件的方法是：使用鼠标从【元件库】面板中将某个元件拖到页面中。AxureRP8交互原型设计案例教程第2章图形

元件2.1图形元件的基本操作2.1.2使用图形元件AxureRP提供了两种选择工具按钮：相交选择模式（【Ctrl+1】）和包含选择模式（【Ctrl+2】），这两个按钮可以在主工具栏上找到，如图2-2所示。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.3

选择图形元件图2-2在页面上应用元件除了使用选择工具选择对象外，还可以在页面上没有元件的位置右击鼠标，从弹出的快捷菜单中执行选择对象的命令，如图2-3所示。AxureRP8交互原型设计案例教程第2章图形元

件2.1图形元件的基本操作2.1.3选择图形元件图2-3选择对象的快捷菜单1.使用鼠标变换使用鼠标变换对象时，最好使用选择工具。选择对象后，会出现一个绿色的边界框。鼠标指针放在边界框内按下左键拖动即可移动位置，鼠标放在4个角或者4条

边处的小方格上，指针会变成双向箭头，此时可改变宽度和高度，如图2-4所示。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.4变换图形元件图2-4变换对象大小使用鼠标旋转对象需先按下【Ctrl】键，然后将鼠标指针放在边界框周围8个小方

格的任意一个上，此时鼠标指针变成弯曲箭头，按住鼠标左键拖动即可旋转对象，如图2-5所示。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.4变换图形元件图2-5变换对象的方向2.使用样式工具栏变换在样式工具

栏中，可以通过设置参数精确变换元件的位置和大小，如图2-6所示。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.4变换图形元件图2-6样式工具栏的变换参数3.使用【样式】面板变换【样式】面板是【检视】

面板的一个子面板，在该面板中，除了和样式工具栏一样可精确变换元件的大小和位置外，还可以精确旋转对象。选择多个图形元件对象时，在【样式】子面板中可以看到变换分成了两部分，上面的“位置+尺寸”针对的是选择的多个元件对象，也可以理解为将选择的多个对象作为

一个整体来变换大小和位置；下面的“每个元件”针对的是选择的多个对象中的每个对象，如图2-7所示。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.4变换图形元件图2-7样式面板中的变换参数镜像也可叫作翻转，分为水平镜像和垂直镜像。

选择对象后，在【样式】子面板中只要单击【水平镜像】按钮和【垂直镜像】按钮即可实现镜像操作。除了使用【样式】子面板中的两个镜像按钮外，还可以在要镜像的元件上右击鼠标，从弹出的快捷菜单中执行【变换形状】→【水平镜像】或者【垂直镜像】命令

。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.5镜像图形元件在AxureRP中，锁定对象有两种方法。（1）使用锁定按钮：在主工具栏中可以找到【锁定】和【解除锁定】两个按钮，如图2-8所示。AxureRP8交互原型设计案例教

程第2章图形元件2.1图形元件的基本操作2.1.6锁定和解锁图形元件图2-8主工具栏的【锁定】和【解除锁定】按钮（2）使用菜单命令：执行【排列】→【锁定】→【锁定位置和尺寸】（【Ctrl+K】）或者【解除锁定位置和尺寸】（【Ctrl+Shift+K】）命令。对齐至少要选择两个

对象，分布至少要选择3个对象。在AxureRP中有3种方法可以完成对齐和分布。（1）使用主工具栏的按钮：AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.7对齐和分布图形元件图2-9主工具栏的【对齐】和【分布】按钮（2）使用快捷菜单：（3）使用

主程序菜单：除了使用上面的【对齐】按钮对元件对齐之外，还可以使用AxureRP软件提供的元件对齐功能将两个元件对齐。但是，当将两个矩形相邻的边界对齐时，对齐的边看起来会变粗，如图2-10所示。AxureRP8交互原型设计案例教程第2

章图形元件2.1图形元件的基本操作2.1.7对齐和分布图形元件图2-10两个矩形相邻的边并列对齐这是因为默认状态下，程序采用的边界对齐方式是边框并排方式，可以执行【项目】→【项目设置】命令将边界对齐设置为“边框重叠”，此时，再将一个右边界和另一个

矩形的左边界对齐时就会发现两个边界完全重叠了，如图2-11所示。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.7对齐和分布图形元件图2-11两个矩形相邻的边重叠“边框重叠”和“边框并排”究竟有什么区别呢？只要选择一个图形元件并设置较粗的描边并适当

放大视图，再选择这两个选项就能直观地看出二者的区别，如图2-12所示。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.7对齐和分布图形元件图2-12边框重叠和边框并排的区别从元件库中拖出的元件放到页面后是有先后顺序的，先放置的元件在下层位置，后放置的元件在上层位

置。1.使用主工具栏的按钮主工具栏的排列顺序按钮，如图2-13所示。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.8排列图形元件的顺序图2-13主工具栏的排列按钮2.使用快捷键菜单在元件对象上右击鼠标，从弹出的快捷菜单中可执行【顺序】→【排列顺序】命令。3.使

用主菜单命令4.使用【大纲】面板AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.8排列图形元件的顺序1.使用主工具栏的按钮主工具栏的【群组】和【取消群组】按钮，如图2-14所示。AxureRP8交互原型设计案例

教程第2章图形元件2.1图形元件的基本操作2.1.9编组图形元件图2-14主工具栏的【群组】和【取消群组】按钮1.使用主工具栏的按钮主工具栏的【群组】和【取消群组】按钮，如图2-14所示。AxureRP8交互原型设计案例教程第

2章图形元件2.1图形元件的基本操作2.1.9编组图形元件图2-14主工具栏的【群组】和【取消群组】按钮2.使用快捷键菜单选择多个元件对象后右击鼠标，从弹出的快捷菜单中可执行【群组】或【取消群组】命令。3.使用主菜单命令（1）选择要添加到群组中的对象。

（2）在【大纲】面板中将其拖到群组中，如图2-15所示。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.9编组图形元件AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.9编组图形元件图2-15使用【大纲】面

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

嵌套群组在做交互原型设计时，经常需要将某个元件对象隐藏起来。AxureRP提供了3种隐藏元件对象的方法。1.使用样式工具栏的选项2.使用快捷键菜单3.使用【样式】子面板AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.10隐藏图形

元件AxureRP复制图形元件对象的方法有3种。1.使用常规方法复制执行【编辑】→【复制】（【Ctrl+C】）、【粘贴】（【Ctrl+V】）命令。这并非AxureRP独有的方法，几乎所有的程序都可以使用该方法。2.斜向等距快速复制

选择要复制的元件对象后，反复按【Ctrl+D】组合键可快速等距斜向复制元件对象。3.使用鼠标移动时复制按【Ctrl】键再移动某个元件就可以实现复制。AxureRP8交互原型设计案例教程第2章图形元件2.1图形元件的基本操作2.1.11复制图形元件从元件库中拖

曳到页面的元件大多是有描边和填充色的，但是，在做原型设计时，这些默认的颜色往往不能满足要求，这就需要重新设置。有以下两种方法设置描边和填充。1.使用样式工具栏在样式工具栏中，可以使用相关按钮对图形元件指定填充颜色和描边颜色，也可以设置描

边的宽度以及描边的类型是虚线还是实线，如果不是封闭的图形元件，还可以通过样式工具栏对其添加各种箭头，如图2-17所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.1描边和填充图2-17样式工具栏的填

充和描边按钮无论是描边还是填充，AxureRP不但允许使用单色（一种颜色），而且可以使用渐变色（两种或者两种以上的颜色）。选择“渐变”填充类型后，可以将鼠标指针放在渐变条的下方，当鼠标指针变成标志时，单击即可添加

一个色标，如图2-18所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.1描边和填充图2-18添加颜色色标2.使用【检视】→【样式】子面板【检视】→【样式】子面板中提供了填充和描边更详细的参数设置，【样式工具栏】中图形元件

填充和描边的按钮工具，在该面板中也存在，而且按钮工具图标也相同。不过【样式】子面板对描边又增加了一个“边界可见”选项。设置“边界可见”选项，可以控制图形元件描边时哪条边是可见的，哪条边是不可见的，如图2-19所示。AxureRP8交互原型设计案例教程第2章

图形元件2.2编辑图形元件的样式和形状2.2.1描边和填充AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.1描边和填充图2-19设置边界可见前后的图形比较阴影分为外部阴影（也可以叫投

影）和内部阴影，通过样式工具栏可以为图形元件对象添加外部阴影，如图2-20所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.2添加阴影图2-20样式工具栏的外阴影参数“偏移”控制阴影到图形元件的水平距离（x）和垂直距离（y）；“模糊”控制阴影的虚化

程度；“颜色”控制阴影的颜色，默认是灰色。对图形元件添加内阴影，在样式工具栏中无法实现，需要通过【样式】子面板来实现，如图2-21所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.2添加阴影图2-21【样式】子面板中的【外阴影】和【内阴

影】选项本小节主要学习钢笔工具的使用方法。钢笔工具（【Ctrl+4】）位于主工具栏中，如图2-22所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.3使用钢笔工具图2-22主

工具栏的【钢笔】工具1.绘制直线2.绘制平滑曲线在使用钢笔工具绘制曲线时，如果使用鼠标右击，则会在右击位置和上一锚点之间出现两条方向相反但位于同一直线的橙色控制手柄线，如图2-23所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式

和形状2.2.3使用钢笔工具图2-23使用钢笔工具右击调整控制手柄线3.绘制转折曲线使用钢笔工具绘制曲线时按下【Ctrl】键拖动，则只有靠近鼠标指针一侧的橙色控制手柄线变动，另一条控制手柄线保持不同，这样可以绘制出转

折的曲线，如图2-24所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.3使用钢笔工具图2-24使用钢笔工具绘制转折线1.将一个形状切换成其他图形2.使用黄色小圆点编辑形状3.使用黄色小三角圆角化矩形默认状态下，矩形的四个直角同时圆角化

，如果只对某个角圆角化，则需要在【检视】→【样式】子面板中通过“圆角化”参数右侧的按钮实现。单击该按钮，在弹出的列表中可单击去掉无需圆角化的角。在【样式】子面板中设置好圆角化的角之后，在页面中拖动黄色小三角标志时就只有指定的角变成圆角，如图2-25所示。Axu

reRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.4编辑形状AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.4编辑形状图2-25局部圆角化矩形4.

转为自定义形状图标元件库中的形状只要双击其边框线就可进入自定义形状模式，如图2-26所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.4编辑形状图2-26双击图标边框线进入自定义形状模式【结合】和【分离】可视为互为逆向操作，【结合】

可以将多个图形元件结合在一起成为一个整体对象，结合后的对象采用最底层图形元件的样式，但结合后的每个图形元件仍然保留原来的形状，其独立性的本质并未改变。执行【结合】后，再对其【分离】，则分离后的每个元件不会恢复到【

结合】前的样式，而是继续保留了与结合时相同的样式。需要注意的是，结合多个对象元件后，有时会出现镂空，而有时几个图形元件的外观保持不变，如图2-27所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.5结合和分离Ax

ureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.5结合和分离图2-27同样的图形元件结合的结果不同下面先使用钢笔工具沿着顺时针方向绘制两个封闭且重叠的图形，然后再沿着

逆时针方向绘制两个封闭且重叠的图形，如图2-28所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.5结合和分离图2-28使用钢笔工具按顺时针方向绘制的两个形状接下来，分别选择左侧的两个重叠图形并执行【结合】命令，对右侧的两个重叠图形同样执行

【结合】命令，会发现两组图形的结果相同，如图2-29所示。继续使用钢笔工具绘制两个重叠的图形，但是这一次绘制的两个图形，一个沿顺时针方向，一个沿逆时针方向，如图2-30所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的

样式和形状2.2.5结合和分离AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.5结合和分离图2-29方向相同的重叠图形结合的结果图2-30绘制的两个方向相反的重叠图形再次选择两个重叠的图形并执行【结合】命令，奇怪的现象发生了

，两个图形重叠的位置竟然变成了镂空的，如图2-31所示。例如，从【元件库】面板中拖曳出一个椭圆形元件，然后将其复制一个放在原来椭圆的上方并适当将复制的椭圆变小，选择小椭圆后，单击【检视】→【样式】子面板中的【水平镜像

】工具或者【垂直镜像】工具，再选择这两个椭圆并执行【结合】命令，镂空就出现了，如图2-32所示。AxureRP8交互原型设计案例教程第2章图形元件2.2编辑图形元件的样式和形状2.2.5结合和分离AxureRP8交互原型设计案例教程第2章图形元

件2.2编辑图形元件的样式和形状2.2.5结合和分离图2-31【结合】后出现了镂空图2-32镂空的圆创建自己的元件库的具体步骤如下。（1）在【元件库】面板中单击【选项】按钮，在弹出的菜单中执行【创建元件库】命令。（2）在打

开的【保存AxureRP元件库】对话框中指定保存的位置、元件库名称，设置完成后单击【保存】按钮。（3）稍等片刻，会重新启动一个AxureRP程序，与先前打开的AxureRP不同的是，【页面】面板名称在新的程序界面

中已经改成了【元件库页面】，如图2-34所示。AxureRP8交互原型设计案例教程第2章图形元件2.3自定义元件库2.3.1创建元件库AxureRP8交互原型设计案例教程第2章图形元件2.3自定义元件库2.3.1创建元件库图2-34重新启动的AxureRP

程序界面（4）添加元件页面。（5）在【元件库页面】面板中双击某个页面以打开该页面。（6）使用本章前面所学的创建和编辑图形元件的方法，在当前页面中创建出手机模型，在样式工具栏或者【样式】子面板中将横纵坐标值

都设置为0，这样，绘制的图形元件就放在了元件库页面的左上角位置了。重复步骤（5）和步骤（6），完成其余元件的绘制。（7）执行【文件】→【保存】（【Ctrl+S】）命令，保存当前绘制的元件，然后关闭当前程序，返回原来的AxureRP程序界面。（8）如果Axure

RP的【元件库】面板中没有列出刚刚创建的三个元件图形，那么可以在【元件库】面板中单击【选项】按钮，在弹出菜单中执行【刷新元件库】命令。如果在自定义元件时，在【元件库页面】面板中创建了文件夹，而且将自定义的元件放在不同的文件夹中，则返回AxureRP主程序并执行

【刷新元件库】命令后，【元件库】面板中的元件将按文件夹分类显示元件，如图2-35所示。AxureRP8交互原型设计案例教程第2章图形元件2.3自定义元件库2.3.1创建元件库AxureRP8交互原型设计案例教程第2章图

形元件2.3自定义元件库2.3.1创建元件库图2-35分类显示的元件自定义的元件库可以随时再次编辑，方法是：在元件库面板中单击【选项】按钮，在弹出的菜单中执行【编辑元件库】命令。执行【编辑元件库】命令后

会再次进入与2.3.1小节中自定义元件库一样的程序界面，可以修改已经定义好的元件，也可以继续创建新的元件。AxureRP8交互原型设计案例教程第2章图形元件2.3自定义元件库2.3.2编辑元件库可以随时将自定义的元件库或者载

入的元件库卸载。在【元件库】面板中单击【选项】按钮，然后在弹出菜单中执行【卸载元件库】命令。还可以从Axure官网下载元件库，方法是：在【元件库】面板中单击【选项】按钮，在弹出的菜单中执行【下载元件库】命令，可以在打开的Axure官网中下载想要的元件库。Axu

reRP8交互原型设计案例教程第2章图形元件2.3自定义元件库2.3.3卸载和导入元件库本章总结本章总结通过本章的学习，读者应熟悉AxureRP【元件库】面板，掌握编辑图形元件的方法和各种技巧，而且能够创建自定义元件库。在本章中，读者要着重区分群组、结合和合并的不同

之处，以免混淆；一定要掌握编辑图形元件的方法，这是绘制其他复杂原型的基础。AxureRP8交互原型设计案例教程