AxureRP产品原型设计课件 第8章 中继器

本章介绍：在AxureRP中，中继器是处理动态数据的“利器”，它允许设计师通过动态生成内容来展示列表、表格及其他重复性布局。本章对AxureRP中继器的组成、数据集的操作以及项目列表的操作进行系统讲解。通过对本章的学习，读者可以对AxureRP的中继器有一个全面的认识，并快速掌握中继器的使用技巧以及AI辅助数据驱动的技巧。第8章中继器知识目标熟悉并理解AxureRP的中继器熟悉并理解AxureRP中继器的数据集熟悉并理解AxureRP中继器的项目列表能力目标具备使用AxureRP中继器的能力具备操作AxureRP数据集和项目列表的能力掌握AI辅助数据驱动的方法素质目标培养使用AxureRP中继器的良好习惯培养锐意进取、精益求精的工匠精神培养一定的设计创新能力和艺术审美能力8.1认识中继器“中继器”元件是一种高级元件，可以实现连续、重复的内容，每次重复都可以不同，差异由输入中继器表格形式的数据集中的数据控制。因为中继器是数据驱动的，所以它们可以动态显示排序和筛选结果。需要演示动态排序或筛选设计（如产品列表）时可以使用中继器。但是，制作中继器会花费很多工作时间。课堂案例——制作家具电商App分类页的高保真原型数据集项目交互样式设置8.1.1课堂案例——制作家具电商App分类页的高保真原型使用“中继器”元件制作动态排序效果，使用“打开交互编辑器”按钮为元件添加交互动效。效果图8.1.2数据集数据集是一个数据表，数据集可以包含多行多列，单击“添加行”或“添加列”即可完成行或列的添加，单击上方的各类按钮即可完成添加、删除等操作。双击列名可以对其进行编辑，需要注意的是，列名只能由字母、数字和“_”组成，且不能以数字开头。8.1.3项目交互项目交互主要用于将数据集中的数据传递给产品原型中的元件并显示出来，或根据数据集中的数据执行相应的动作。8.1.4样式设置选中画布上的“中继器”元件，即可在“样式”面板中设置其样式。除了可以设置与其他元件相同的“FILL”（填充）“线段”“圆角”以及“边距”样式，还能设置其特有的“间距”“布局”“背景”以及“分页”样式。8.2数据集的操作数据集不仅可以执行添加、删除和修改数据等操作，还能够实时呈现操作效果。同时中继器还具有筛选功能，能够让数据按照不同的条件排列，从而使产品原型的效果更加真实。课堂案例——为家具电商平台商品列表添加分页设置分页与数量课堂案例——为旅游出行App设置酒店排序添加和移除排序课堂案例——为家具电商平台添加商品筛选功能添加和移除筛选添加和删除中继器的项目8.2.1课堂案例——为家具电商平台商品列表添加分页使用“中继器”元件设置分页与数量，使用“打开交互编辑器”按钮设置“中继器”元件默认显示的数据页。效果图8.2.2设置分页与数量创建“中继器”元件，通过“样式”面板设置分页可以令填充中继器的数据进行分页显示。8.2.3课堂案例——为旅游出行App设置酒店排序使用“打开交互编辑器”按钮为元件添加交互样式，使用中继器动作中的“添加排序”动作完成数据排序。效果图8.2.4添加和移除排序使用中继器动作中的“添加排序”动作可以对数据集中的数据项进行排序。8.2.5课堂案例——为家具电商平台添加商品筛选功能使用中继器动作中的“添加筛选”动作对数据项进行筛选，使用“移除筛选”动作把已添加的筛选移除。效果图8.2.6添加和移除筛选使用中继器动作中的“添加筛选”动作，可以对数据集中的数据项进行筛选。8.2.7添加和删除中继器的项目中继器动作中的添加和删除动作共包含添加行、标记行、取消标记、更新行和删除行5种。在生成的HTML产品原型中，可以添加和删除中继器的项目，但是要删除特定的行，必须先标记行。8.3项目列表的操作中继器中的项目列表通常按照输入数据的顺序进行显示。通过添加交互，可以实现更加丰富的显示效果，如显示当前页码和总页码。8.4课堂练习——制作职业教育管理系统课程列表的高保真原型使用“中继器”元件制作数据集，使用“打开交互编辑器”按钮为元件添加项目交互。效果图8.5课后习题——为美食外卖App设置商家排序使用“样式”面板设置元件样式，使用中继器动作中的“添加排序”动作完成数据排序，使用“打开交互编辑器”按钮为元件添加交互样式。效果图8.6AI扩展——GemDesign制作教务管理系统学生列表的高