编辑导语:图片轮播原型经常应用于各大app的首页，包括文章分享app、读书app、商城app等等。本文作者希望通过本文与大家分享图片轮播原型的功能、应用案例和设计思路。

一、图片轮播原型的作用

对于用户来说，大部分用户都不喜欢死气沉沉的ui界面。随着5G的发展，软件界面的显示不再受网速的限制。

所以像轮播、gif、短视频这样的呈现方式更能吸引用户的注意力，通过动画的效果保持用户的浏览热情。

对于运营商来说，因为图片轮播可以吸引用户的注意力，所以也会以图片轮播的形式展示最重要的或者营销的内容。所以图片轮播可以说是每个软件不可或缺的组件。

我给大家分享一些常见的轮播图片案例:

二、图片轮播原型案例1. 顶端banner轮播图元件

这是最常见也是最简单的轮播图，一般放在界面顶部，或者有多个类别时放在内容顶部，向客户推送最精彩的内容或广告，一般用在网上商城、外部平台、文章阅读平台等。

这个图片轮播元素有两个交互，一个是自动轮播，每隔2-3秒自动切换下一张图片；第二种是手动轮播，即用户可以通过左右滑动来切换图片。

2. 大小轮播图元件

其实大小图轮播组件是在banner轮播组件的基础上，增加了图片放大缩小的效果，以及点击左右小图时移动的效果。

大小图轮播更多的应用在同类产品的选择上，比如同一款手机的不同颜色，让用户看到多种颜色。如果他们对某个颜色感兴趣，可以直接点击查看大图。

另一种是熟悉产品的展示，比如不同型号的手表、汽车，让用户知道有很多产品可以查看。

当然根据需要也可以做成横屏大小图的轮播元素。

3. 全屏轮播图元件

全屏轮播元素一般用于软件启动的启动页面，可以用于广告展示、通知用户新版本信息和使用提示、介绍软件和公司的solgan和logo等。

全屏轮播组件与横幅轮播组件基本相同，只是图片的大小改为全屏显示。

4. 上下滑动轮播图元件

滑动轮播元素一般应用于直播类app、视频类app等。，没有太多文字内容，让用户看一看。如果用户手指停留在屏幕上，停止滑动，松开并继续滑动，用户也可以上下滑动查看内容。

5. 心形轮播图元件

心形转盘软件是附近比较流行的图片动画，一般用在珍爱网、贾立安、百合网等一些交友类app上。

当然也可以用在父亲节、母亲节、情人节等特殊节日。这个组件的交互主要是移动图片和放大缩小。

三、设计思路1. 制作材料

我们选择使用中继器来制作旋转木马的原型。为什么要用复读机？

因为复读机制造出来后，维护简单，只需像excel表格一样填写复读机表格，导入图片即可。自动交互，复用性高，维护成本低，可用于以后的项目。

复读机中原厂零件及摆放:图片+文字(非必须)，图片大小可自行调整，如下图:

2. 中继器表格

我们只需要设置三列:

picture：需要显示的图片，鼠标右键导入，或者ctrl+v粘贴title：标题文字（非必填）number：数据（这个根据实际需要设置，非必填，例如文章内容可以显示阅读数，直播的话可以显示在线人数）

3. 主要交互

设置文本:当repeater加载每一项时，将title列和number列的文本设置为相应的标题和数据文本。

设置图片:加载repeater的每一项时:将图片设置为item.picture

滑动事件:我们用移动的时间，移动的距离就是图片的宽度(如果是上下滑动，就是高度)+两张图片的距离(距离可以是0)。

比如向左滑动300，X填-300；向右滑动300，X会填入300；向上滑动300，y会填入-300；向下滑动300，y会填入300。

自动循环事件:我们使用动态面板来进行自动循环。动态面板创建状态1和状态2。加载时设置动态面板转盘自动循环，间隔3s(根据实际设置，这是每隔几秒钟一张图片)。当动态面板改变状态时，触发上述滑动事件。

这就是本期关于移动轮播原型设计的全部内容，主要基于我个人在实际工作中需要用到的原型，以及设计的Axure组件。设计原型时，可以根据实际情况选择使用。

如果你有所收获，希望你能表扬鼓励，也欢迎交流。谢谢你。

本文由@秀原创发表于蜘蛛智慧链。未经许可，禁止转载。

图片来自Unsplash，基于CC0协议。