Axure RP 9互联网产品原型设计 课件 第9、10章 使用中继器、 团队合作与输出.pptx

Axure RP 9互联网产品原型设计（慕课版） 使用中继器 中继器的组成 “中继器”元件是Axure RP 9中的一款高级元件，是一个存放数据集的容器。通常使用中继器来显示商品列表、联系人信息列表和数据表等。“中继器”元件是由中继器数据集中的数据项填充的，数据项可以是文本、图片或页面链接。将“中继器”元件从“元件”面板中拖曳到页面中，效果如下图所示。 双击页面中的“中继器”元件，进入中继器编辑模式。用户可以在这种模式下对中继器进行编辑，编辑完成后单击右上角的“关闭”按钮，即可退出中继器编辑模式，返回页面编辑模式。 中继器的组成 默认情况下，“中继器”元件显示为1 列3 行，其显示数量与“样式”面板中的“数据”选项下的行一致。 中继器的组成 数据集就是一个数据表，位于“样式”面板中。数据集可以包含多行多列。单击“添加行”或“添加列”即可完成行或列的添加，也可以通过单击顶部的图标完成添加、删除等操作，编辑数据集的图标如下图所示。数据集 中继器的组成 数据集中的内容可以包含文本、图片和页面。在单元格上单击鼠标右键，在弹出的快捷菜单中选择“引用页面”命令，在弹出的“引用页面”对话框中选择要引用的页面后，即可完成页面的引用。数据集 中继器的组成 在单元格上单击鼠标右键，在弹出的快捷菜单中选择“导入图片”命令，在弹出的“打开”对话框中选择要打开的图片，即可完成图片的导入。数据集 中继器的组成 项目交互主要用于将数据集中的数据传递到产品原型中的元件并显示出来；或者根据数据集中的数据执行相应的动作。 单击“交互”面板上的“新建交互”按钮，即可看到项目交互事件，项目交互只有“载入时”“每项加载”“列表项尺寸改变”3 个触发事件。3 个触发事件中，比较常用的是“每项加载”事件。选中“中继器”元件，在“交互编辑器”对话框中可以看到添加“每项加载”事件的动作设置。项目交互 中继器的组成 选中“中继器”元件，用户可以在“样式”面板中设置其元件样式。用户除了可以对与其他元件相同的“填充”“线段”“圆角”“边距”样式进行设置以外，还能对“中继器”元件特有的“间距”“布局”“背景”“分页”样式进行设置。样式设置 中继器的组成 在“布局”选项下，默认情况下为“垂直”布局方式。选择“水平”方式，元件更改为水平布局。样式设置—布局 中继器的组成 用户通过勾选“交替颜色”复选框，可以分别设置“颜色”和“交替”颜色，实现中继器背景交替效果。样式设置—背景 中继器的组成 在“分页”选项下，用户可以设置“中继器”元件的分页显示功能。勾选“多页显示”复选框，用户可以在“每页项数量”文本框中输入每页项目的数量，在“起始页” 文本框中设置起始页码。样式设置—分页 课堂操作 新建一个Axure RP 9文件。将“中继器”元件从“元件”面板中拖曳到页面中。双击进入项目编辑页面，使用“图片”元件和“文本标签”元件完成下图所示的页面。使用中继器制作产品页面 课堂操作 分别为页面中的元件指定名称。返回page1页，在“样式”面板中输入各项产品的数据，在pic单元格中单击鼠标右键，选择“导入图片”选项，导入图片，完成效果如下图所示。使用中继器制作产品页面 课堂操作 在“样式”面板中“布局”选项下设置为“水平”，勾选“网格排布”复选框，设置每行项数量为2，行和列的间距都设置为10。页面排列效果如下图所示。使用中继器制作产品页面 课堂操作 在“交互编辑器”对话框中将“设置文本”动作下的设置删除，添加“name”元件为目标，单击“值”选项文本框右侧的按钮，设置“编辑文本”对话框如下图所示。单击“确定”按钮，设置动作如下图所示。使用中继器制作产品页面 课堂操作 使用相同的方法，分别为“JG”和“KC”设置动作。 　使用中继器制作产品页面 课堂操作 添加“设置图片”动作，添加“pic”为目标，在“设置默认图片”中选择“值”，单击右侧的按钮，设置“编辑值”对话框如下图所示。返回page1页面，页面效果如下图所示。使用中继器制作产品页面 数据集的操作 通过数据集填充了中继器的数据，如果希望这些数据能够分页显示，可以通过“样式”面板设置分页。然后，再通过“设置当前显示页面”动作，动态设置中继器元件默认显示的数据页。设置每页项目数量，允许改变当前可见页的数据项数量。设置分页与数