Axure中继器教程：制作直播视频的卡片列表

2021-05-2809:52:08原型设计Comments1,991 views字数 1518阅读模式

中继器制作卡片列表，本教程以直播视频卡片为案例，学习完成之后，你们也可以根据实际的需要，制作商品、课程、视频等的卡片列表；另外，使用中继器制作的卡片，也方便我们维护，只需要在表格中导入图片和填写文字，自动生成交互效果，所以强烈推荐给大家使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

原型预览地址：https://9qtbbc.axshare.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

一、材料准备

中继器——将其余材料如图所示摆放中继器内部。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

矩形1（推荐文字）——作为直播的分类标签，例如大神推荐、职业选手、人气美女等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

矩形2（画质文字）——作为画质的分类表脸，例如高清、超清、蓝光4M、蓝光8M等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

矩形3（灰色背景）——默认隐藏，不同明度为50%，后面会用于制作鼠标移入时的交互效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

矩形4（白色背景）——默认有阴影。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

播放按钮——默认隐藏，后面会用于制作鼠标移入时的交互效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

文字1——标题文字（设置选中时变成蓝色的文字样式，后面制作动态交互）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

文字2——主播名字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

文字3——人气值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

图片1——直播图片（需要转为动态面板并取消动态面板自动调整尺寸，后面制作动态交互）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

图片2——主播头像（圆角调满）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

人气图标——为了更加美观，非必要。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

二、中继器表格设置

picture列：这里对应图片1（直播图片），我们右键导入本地图片即可，如果是网络图片就填写图片url地址。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

biaoti列：对应文字1（标题文字），直接输入或者在excel复制过来即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

photo列：对应图片1（主播头像），也是右键导入图片或者填写图片的网络地址即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

name列：对应文字2（主播名字），直接输入或者在excel复制过来即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

number列：对应文字3（人气值），具体数值直接输入或者在excel复制过来即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

huazhi列：对应矩形2（画质文字），直接输入或者在excel复制过来即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

tuijian列：对应矩形1（推荐文字），直接输入或者在excel复制过来即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

三、交互设置

1. 中继器每项加载时

设置文本（将中继器内存放的文本设置到对应的元件中）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

主播名字==item.name；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

人气值==item.number，因为这里的单位是万，所以碎了表格number列的值后面加了wan的单位。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

标题文字==item.biaoti文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

画质文字==item.huazhi文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

推荐文字==item.tuijain文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

设置图片（将中继器内存放的图片设置到对应的图片元件中）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

设置图片1（直播图片）的值==item.picture文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

设置图片2（主播头像）的值==item.photo文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

2. 鼠标移入时的动态交互设置

首先我们把中继器内部所有元件组合。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

选中标题文字——因为我们在准备材料时设置了标题文字选中时的样式为蓝色，所以鼠标移入时，我们设置标题文字选中，这样就有个变色的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

显示——这里把默认隐藏的播放按钮和灰色背景显示出来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

设置尺寸——这里做一个移入放大图片的效果，所以我们将直播图片放大为原来的1.1倍；target.width就是对象的宽度，target.height就是对象的高度，这里对象是直播图片，所以相当于将直播图片的宽和高放大1.1倍。设置完之后加个线性的动画效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21461.html