2.4 使用Axure RP9的元件库
元件是原型产品中最基础的组成部分，使用元件可以制作出丰富多彩的产品原型效果。本节将针对Axure RP9中的元件进行学习，通过学习，掌握元件的使用方法和设置技巧，并掌握元件属性的设置和样式的添加，熟练使用元件创建产品原型。
在Axure RP9中，用于绘制原型设计的用户界面元素被称为“元件”。而“元件”又被统一放在了“元件库”面板中。
2.4.1 Default元件
Axure RP9系统自带Default和Flow两部分元件，其中，Default元件又分为四大类型，如图2-46所示，这些元件可以满足原型设计中的一些基本需求，如图2-47所示为基本元件的具体展示。
图2-46 元件分类
图2-47 基本元件的具体展示
2.4.2 Flow元件
Flow元件即“流程图元件”。Axure RP9为用户提供了专用的流程图元件，如图2-48所示。使用流程图元件可以帮助大家更好地设计制作流程图页面，如图2-49所示。流程图元件还为大家提供很多美观、实用的流程图素材。
图2-48 流程图元件
图2-49 显示元件
2.4.3 Icons元件
Icons元件即“图标元件”。Axure RP9为用户提供了专用的图标元件，如图2-50所示。使用图标元件可以帮助大家更好地设计制作页面原型，如图2-51所示。“图标”元件还为用户提供了很多美观实用的图标素材。
图2-50 图标元件
图2-51 元件显示
2.4.4 使用“动态面板”
“动态面板”元件是Axure RP9中功能最强大的元件，是一个“化腐朽为神奇”的元件。通过这个元件，可以实现很多其他原型软件不能够实现的动态效果。
“动态面板”可以被简单地看作是一个拥有多种不同状态的超级元件。选中“动态面板”元件，将其拖入到页面中，效果如图2-52所示。
双击“动态面板”元件，弹出“动态面板状态管理”对话框，如图2-53所示。大家可以在该对话框中为“动态面板”添加不同的状态。
图2-52 使用元件库中的“动态面板”
图2-53 编辑动态面板
实战练习02 使用“动态面板”制作轮播图
视频：资源包\视频\第2章\2-4-4.mp4
源文件：资源包\视频第2章\2-4-4.rp
● 案例分析
本案例需要设计制作一款广告轮播图，案例效果是通过动态面板元件，让5张广告图片随着一定顺序进行循环播放，图片中的圆点也会随着图片的改变而进行对应的变化。图2-54所示为广告轮播图的效果展示。
图2-54 广告轮播图的效果展示
● 制作步骤
01 选中“动态面板”元件，将其拖入工作区内，如图2-55所示。在“交互”面板上，设置“动态面板”的名称，如图2-56所示。
图2-55 添加“动态面板”
图2-56 重新命名
02 双击“动态面板”进入“动态面板”的编辑页面，连续单击“添加状态”按钮，新建四个“动态面板”的状态，如图2-57所示。在每一个状态中都添加一张图片，如图2-58所示。
图2-57 添加状态
图2-58 添加图片
03 添加完成后，可以在“概要”面板中预览图片和状态，如图2-59所示。将“椭圆形”元件拖入工作区内，调整大小为10px×10px，在“交互”面板中设置名称，如图2-60所示。
图2-59 “概念”面板
图2-60 添加元件并设置名称
04 单击“新建交互”按钮，在打开的下拉列表中选择“选中”选项，设置参数，如图2-61所示。设置完成后，复制四个椭圆形，分别将其命名为“Tag2～4”，如图2-62所示。
图2-61 选中样式
图2-62 复制元件
05 复制完成后，“概要”面板如图2-63所示。在“交互”面板中，打开“选中属性”，将“Tag1”元件的状态设置为选中，设置每个椭圆形的选项组为“Tag”，如图2-64所示。
图2-63 “概要”面板
图2-64 设置选项组
06 选中动态面板元件，单击“新建交互”按钮，在下拉列表中选择“载入时”事件，打开“交互编辑器”对话框，设置参数，如图2-65所示。
图2-65 设置参数
07 继续为“动态面板”添加“状态切换时”事件，选择“设置选中”动作，设置参数，如图2-66所示。
图2-66 添加动作并设置参数
08 打开“情形编辑”对话框，单击“添加行”按钮，设置参数，如图2-67所示。设置完成后，如图2-68所示。
图2-67 设置情形
图2-68 添加动作
09 使用相同方法，完成“情形2”的设置，如图2-69所示。继续完成其余三个事件情形的设置，“交互”面板如图2-70所示。
图2-69 设置情形
图2-70 交互面板
10 在“页面”面板中，将页面重命名为“动态面板”，如图2-71所示。工作区内的“动态面板”元件和“椭圆形”元件，如图2-72所示。
图2-71 “页面”面板
图2-72 工作区显示
11 单击工具栏中的“预览”按钮，打开浏览器预览广告轮播页面，可以发现图片和椭圆形的变化是对应的，如图2-73所示。
图2-73 效果预览
2.4.5 使用中继器
中继器元件是一款高级元件，是一个存放数据集的容器，通常使用中继器来显示商品列表、联系人信息列表和数据表等。
中继器元件是由中继器数据集中的数据项填充的，数据项可以是文本、图片或页面链接。将中继器元件拖入Axure RP9页面编辑区内，如图2-74所示。
选中后双击“中继器”元件，就会进入“中继器”面板，如图2-75所示，在这里可以对中继器进行编辑和设置。
同时也可以选中“中继器”元件，样式面板将如图2-76所示，在其中可以进行行数、列数、行中内容等设置。
图2-74 “中继器”元件
图2-75 编辑页面
图2-76 “样式”面板
实战练习03 使用“中继器”元件展示商品
视频：资源包\视频\第2章\2-4-5.mp4
源文件：资源包\视频第2章\2-4-5.rp
● 案例分析
本案例是设计制作展示商品的页面，案例效果是通过中继器元件配合“样式”面板中的数据栏目，对四个商品进行特定的展示，展示内容包括商品名称、收藏数量、销售数量和商品价格等，如图2-77所示。
图2-77 商品的展示效果
● 制作步骤
01 新建文件，拖动中继器元件到工作区中，为其命名如图2-78所示。双击“中继器”元件进入编辑状态，调整中继器的大小，如图2-79所示。
图2-78 添加中继器
图2-79 编辑中继器
02 在中继器中添加图片元件、文本标签元件和椭圆形元件，并为各个元件重新命名，如图2-80所示。
图2-80 添加元件
03 在“样式”面板中，设置数据栏中的表格参数，让各行名称与元件名称保持相同。设置完成后，在“CoolImage”列中单击鼠标右键，弹出列表，选择“导入图片”选项，逐一导入图片，如图2-81所示。
图2-81 设置参数
04 设置完成后，来到“交互”面板，单击“每项加载时”事件，如图2-82所示。在打开的编辑对话框中，再次单击设置文本动作，在设置动作的栏目中，单击“fx”按钮，如图2-83所示。
图2-82 添加交互
图2-83 设置值
05 打开编辑器，单击“插入变量或函数”按钮，弹出变量和函数列表，选择选项如图2-84所示。
图2-84 添加变量
06 选择完成后，单击“确定”按钮。回到交互编辑器中，可以看到动作设置的参数，如图2-85所示。
图2-85 动作参数
07 使用之前的方法，完成其余收藏数量、已购人数和单价等动作的参数设置，如图2-86所示。
图2-86 设置参数
08 继续添加“设置图片”动作，设置“CoolImage”的值为“[[Item.CoolImage]]”，如图2-87所示。设置完成后，“交互”面板如图2-88所示。
图2-87 设置动作参数
图2-88 “交互”面板
09 在“样式”面板中，设置中继器的边距、间距和布局的各项参数，如图2-89所示。完成后，工作区内的中继器如图2-90所示。
图2-89 “样式”面板
图2-90 工作区中的中继器
10 单击工具栏中的“预览”按钮，可以在打开的浏览器中看到刚刚设置好的商品展示页面，如图2-91所示。
图2-91 效果预览
2.4.6 下载和导入元件库
Axure RP9为用户提供了很多元件，同时还允许用户载入第三方元件库，互联网上可以找到很多第三方元件库，如图2-92所示。
图2-92 扩展元件
● 下载元件库
Axure官方网站上也有很多实用的第三方元件库。在浏览器地址栏中输入如下地址：http://www.axure.com/community/widget-libraries，或者在“元件库”面板右上角单击，打开扩展菜单，选择“获取元件库”选项，如图2-93所示。浏览器效果如图2-94所示。
提示
Axure RP官方网站的大部分第三方元件库，都是需要付费才可以下载的。需要大家仔细辨认网站的真实性，以免造成不必要的钱财损失。
图2-93 获取元件库
图2-94 浏览器效果
大家也可以在浏览器中搜索获得元件库的下载地址，下载后的元件库文件格式为“.rplib”，如图2-95所示。
图2-95 元件库文件格式
● 导入元件库
下载元件库后，在“元件库”面板的面板名称下方，选择“添加元件库”选项，如图2-96所示。在弹出的“打开”对话框中选择下载的元件库文件，如图2-97所示。单击“打开”按钮，导入第三方元件库。
图2-96 添加元件库
图2-97 选择元件库
打开第三方元件，“元件库”面板效果如图2-98所示。第三方元件的使用方法同系统自带元件的使用方法相同，即将元件拖到页面中，效果如图2-99所示。
图2-98 元件展示
图2-99 使用元件