《Axure RP 9网站与App产品交互设计实践》课件 9.中继器高阶 - 淘宝列表+ 新闻列表.pptx

Axure中继器技术型文科人才系列课程主讲人：文学与传媒学院交互设计

回顾：夸父网首页“新闻快递news”板块，2条推荐新闻制作方法？抢答1.每条新闻各包含哪些元件？2.你的制作步骤是怎样的？3.如果新闻有几十条怎么办？

网页或APP等页面中，一些列表类的内容，如商品列表信息、联系人信息、用户信息等，可以用中继器元件来设计。列表的各项目有相同的元件，格式。中继器元件可用来显示重复的文本、图片、链接。

中继器的使用方法1?中继器内部编辑区2?中继器数据集3?中继器交互

任务分析1组：中继器的内部编辑区2组：中继器的数据集3组：中继器的交互设置翻转分组

中继器的内部编辑区任务一制作淘宝商品列表的项目其他同学请在学习通的“群聊”中实时提出问题。（提出问题、分析问题、给出建议和建议皆可，每次+1’）

小组1总结反思

请为第1小组评分（+1‘）评分标准讲解思维清晰，是否听懂？(50分)操作演示流畅，是否看懂？(50分)

教师小结制作新闻列表中继器内部编辑器元件水平线图片标题、文本标签、文本段落样式线型图片尺寸125*95字体颜色、大小

2组：制作淘宝商品列表的数据集其他同学请在学习通的“群聊”中实时提出问题。（提出问题、分析问题、给出建议和建议皆可，每次+1’）翻转任务

小组2总结反思

请为第2小组评分（+1‘）评分标准讲解思维清晰，是否听懂？(50分)操作演示流畅，是否看懂？(50分)

教师小结添加新闻列表的数据集数据集列每列是一个字段命名不能用中文行每行就是一条信息图片-右键导入图片文字-直接双击单元格后编辑可以从excel表中复制文字内容

?中继器数据集中继器数据集有点像数据库的表，数据集列名可以进行重新命名，但要注意一点，不可以使用中文，如果命名为中文，它会提示列名是无效的。数据集功能条操作包括新增行、删除行、上移行、下移行、新增列、删除列、左移列、右移列等操作，对中继器数据集进行管理。(中继器的项)中继器数据集里面有几行数据，中继器就会显示几个重复的布局。

3组：绑定数据集其他同学请在学习通的“群聊”中实时提出问题。（提出问题、分析问题、给出建议和建议皆可，每次+1’）翻转任务

小组3总结反思

请为第3小组评分（+1‘）评分标准讲解思维清晰，是否听懂？(50分)操作演示流畅，是否看懂？(50分)

教师小结绑定新闻列表的数据数据绑定（交互）事件每项加载时动作绑定图片-设置图片绑定文本-设置文字打开新闻页面（交互）事件点击（标题）时动作打开链接在新窗口/标签

中继器的交互（数据绑定）

小结 本章主要学习Axure中继器模拟数据库操作，应当做到以下几点。

（1）学会什么是中继器以及中继器内部编辑器和中继器数据集。

（2）学会将中继器数据集里的数据绑定到中继器元件上，显示出来。

参考读物中继器/axure-rp/reference/repeaters/

作业用中继器模拟电商网站商品列表或新闻列表页面。参考效果：

后续任务

谢谢观赏技术型文科人才系列课程交互设计