![b79287962c1c7fd98c54cf4952c0acf3.png](https://i-blog.csdnimg.cn/blog_migrate/f1ce20462b9bdd77d2cd692f30f93a32.jpeg)
中继器可以说是axure里面非常重要的一个元件,那么中继器到底有什么作用呢?我们为什么要使用中继器来制作原型呢?下面作者会以移动中继器内容列表的应用案例,和大家分享中继器的作用,以及如何使用中继器。
原型预览及下载地址
https://axhub.im/ax9/02531f7ebaf622bf
1、中继器内容列表的应用案例
其实,在我们常用的app里,有很多内容都是中继器制作的,只是大家未能及时发现,其中包括投资产品、文章、视频、应用、商品、好友、音乐、游戏、图书、账单等列表,大家可以在下面的地址预览效果。
1.1投资产品类中继器列表
![76c7edb1838388856fc8181df2d92aff.png](https://i-blog.csdnimg.cn/blog_migrate/f185f697949ee1eba48e2c1d78302a92.jpeg)
1.2文章类列表
![5a9e8207e2acc25363991a06a313bd3a.png](https://i-blog.csdnimg.cn/blog_migrate/6bfefe45834e044b618d0b0e705972a3.jpeg)
1.3视频类列表
![daaec78f62b6e4ed7b39844ec618c58e.png](https://i-blog.csdnimg.cn/blog_migrate/7efccd5feac4f99303d5bdb7302d651b.jpeg)
![d11851e5946fae3dbd10240d978cb640.png](https://i-blog.csdnimg.cn/blog_migrate/45ff627837be357d501c19e984cc97b7.jpeg)
1.4服务应用类列表
![4191a40d5df1ee1441b24cbbcaa9a461.png](https://i-blog.csdnimg.cn/blog_migrate/cbf52edc90762b6c68f70a1a5e4e0c7b.jpeg)
1.5商品商品类列表
![653ae109e4164d898e82412aa447693a.png](https://i-blog.csdnimg.cn/blog_migrate/8119a3f01a6adfebef56e2f230d95596.jpeg)
![7e87f290ad55c41ee9ba25342050f3f3.png](https://i-blog.csdnimg.cn/blog_migrate/3a515d1043ac5da6c3d5857d06cde0ee.jpeg)
1.6消息好友类列表
![8944993ef0e072ae9eef7eace43ef349.png](https://i-blog.csdnimg.cn/blog_migrate/6ac32ed134c6ca716f98597f4fb64104.jpeg)
1.7音乐类列表
![c66f5645ae9088206d1a99715469508d.png](https://i-blog.csdnimg.cn/blog_migrate/5b61e6312aca7db2c0aef7d7a26b310b.jpeg)
1.8其他列表
![5486030761ea3b8385bb16f90b1a9ef2.png](https://i-blog.csdnimg.cn/blog_migrate/fb5037f7dd88714c5d4382d24312bce0.jpeg)
2、中继器的作用
有的同学可能会问,不适用中继器制作不行吗?答案是可以的,但是如果不使用中继器的话就需要很多重复性的工作,例如有十个游戏资料,那你就要话10个图,而且当中的交互也要设置10次。如果使用中继器制作就不一样了,我只需要设置好一次,就制作完成中继器了。而且中继器维护简单,只需要像填写excel表格那样,填写中继器表格导入图片即可。交互自动实现,复用性高,维护成本低,以后项目也可以用到。
所以简单来说,中继器的是用来快捷的处理重复性工作的,减少我们绘制原型的时间。那么接下来我会以游戏列表为案例进行制作教学。
![e05d21b006ae6a1ba8dca828bf4ddef9.png](https://i-blog.csdnimg.cn/blog_migrate/1aecac145cc4f6673ac8a735e600582b.jpeg)
3、中继器制作的材料
图片原件1个(游戏logo图片),按钮原件一个,文本原件两个(分别命名为游戏名称和游戏介绍),如下图所示摆放。
![037b09c49d7384387827a1ca029e07df.png](https://i-blog.csdnimg.cn/blog_migrate/4ecc671449086bad129dfa1b5cbbe85b.png)
4、中继器表格的设置
我们需要制作3列,并填入对应的游戏名称、游戏介绍以及导入游戏logo
picture:游戏图片,你们可以右键导入游戏图片或者ctrl+v复制图片即可
name:游戏名称
introduce:游戏介绍
![cd08dd735548e78355fb9fe2da9e193f.png](https://i-blog.csdnimg.cn/blog_migrate/40f97d6b0f639d4a0836382f15453853.jpeg)
5、中继器内的交互事件
我们在中继器内最常用到的交互分为是设置文本和设置图片
设置文本:
每项加载时,设置‘’游戏名称‘’文本值=item.name;‘’游戏介绍‘’文本值=item.introduce
![c27355a18a9611194fbec32e3d2bee00.png](https://i-blog.csdnimg.cn/blog_migrate/2a6721ba27fd18e414eeca766d64ba3d.jpeg)
设置图片:
每项加载时,设置游戏logo图片的值=item.picture
![c27355a18a9611194fbec32e3d2bee00.png](https://i-blog.csdnimg.cn/blog_migrate/2a6721ba27fd18e414eeca766d64ba3d.jpeg)
这样,我们就制作完成了,以后我们需要添加新游戏的时候,只需要在中继器内导入图片、填写游戏名称和介绍即可,省去了排版和写交互的时间,是不是非常方便呢?
以上就是本期关于移动端中继器内容列表原型设计的全部内容了,主要是基于我个人在实际工作中需要用到的原型,而设计出来的Axure组件。大家在设计原型的时候,可以根据实际情况需要选择使用。
如果大家有所收获,希望可以点下关注哈,也欢迎大家交流,谢谢。