- App草图+流程图+交互原型设计教程
- 刘源
- 3152字
- 2024-10-29 17:02:58
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 使用元件