图片轮播原型常应用于各大app的首页，包括文章分享app、读书app、商城app等等。通过这篇文章，本文作者希望和大家分享一下图片轮播原型的作用、应用案例以及设计思路。
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/5b58a62a645c5ad8
【原型下载】
方式2：https://weidian.com/item.html?itemID=3817855061
【原型效果】
1. 顶端banner轮播图元件
这种是最常见最简单的轮播图了，一般会放在界面的顶端，或者有多个类别时，放在内容的最上面，将最精彩的内容，或者是广告推送给客户，一般应用于线上商城、外面平台、文章阅读平台等等。
这种图片轮播元件有两个交互，一各是自动轮播，间隔2-3秒自动切换下一张图；第二个是手动轮播，就是用户可以通过左右滑动切换图片。
2. 大小轮播图元件
大小图轮播元件其实就是在banner轮播元件的基础上加了图片放大缩小的效果，以及点击左右小图时移动的效果。
大小图轮播图更多的是应用于类似产品的选择上，比如同一款型号手机的不同颜色，这样能够让用户看到多种颜色，如果对某个颜色感兴趣，就可以直接点击查看大图。
另一种是相识产品的展示，例如不同款的手表、汽车等，让用户知道有多款产品可以查看。
当然了，根据需要还可以制作为横屏的大小图轮播元件。
3. 全屏轮播图元件
全屏轮播图元件一般用于软件启动的启动页，可以用于广告展示，告知用户新版信息及使用提示、介绍软件和公司的solgan和logo等等。
全屏轮播图元件和banner轮播元件基本一致，只不过改变了图片的大小，变成了全屏显示。
4. 上下滑动轮播图元件
上下滑动轮播图元件一般会应用于直播app、视频app等，不需要太多文字内容，让用户过目即可。如果用户手指停留在屏幕上时，停止滑动，松开继续滑动，用户也可以上下滑动查看内容。
5. 心形轮播图元件
心形轮播软件是就近很流行的图片动画，一般用于像珍爱网、世纪佳联、百合网等一些相亲app。
当然了在特殊节日如父亲节、母亲节、情人节也会用的上，该元件的交互主要是移动图片和放大缩小。
【制作教程】
1. 制作材料
图片轮播原型，我们选择使用中继器来制作，为什么使用中继器呢？
因为中继器制作完成之后，维护简单，只需要像填写excel表格那样，填写中继器表格导入图片即可。交互自动实现，复用性高，维护成本低，以后项目也可以用到。
中继器内原件及摆放：图片+文字（非必要），图片大小自己调整即可，如下图摆放：
2. 中继器表格
我们只需要设置3列：
- picture：需要显示的图片，鼠标右键导入，或者ctrl+v粘贴
- title：标题文字（非必填）
- number：数据（这个根据实际需要设置，非必填，例如文章内容可以显示阅读数，直播的话可以显示在线人数）
3. 主要交互
设置文本：中继器每项加载时，把title列和number列的文字设置到对应的标题和数据文本。
设置图片：中继器每项加载时：设置图片为item.picture。
滑动事件：我们用移动这个时间来做，移动的距离就是图片的宽度（如果是上下滑动就是高度）+两图之间的间距（间距可以为0）。
例如：往左滑动300，x就填-300；向右滑动300，x就填300；向上滑动300，y就填-300；向下滑动300,y就填300。
自动循环事件：自动循环我们用动态面板来做，动态面板新建state1和state2，载入时设置动态面板转台自动循环，间隔为3s（根据实际设置，这个是几秒换一张图），动态面板转态变更时触发上面的滑动事件即可。
以上就是本期关于移动端图片轮播原型设计的全部内容了，主要是基于我个人在实际工作中需要用到的原型，而设计出来的Axure组件。大家在设计原型的时候，可以根据实际情况需要选择使用。
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
