Question

Axure怎么制作移动端图片轮播原型?

Answer 1

图片旋转原型经常应用于各大应用的首页，包括文章分享应用、阅读应用、商城应用等。图像旋转、gif、短视频的呈现都能吸引用户的注意力，通过动画效果，保持用户浏览的热情。那么，我们如何使用Axure原型软件创建一个移动端图片轮播原型呢?下面就来教你如何制作!学会Axure，人人都是产品经理！这句话，想必对于准备自学Axure或者正在自学Axure的小伙伴们来说并不陌生！而想要完全掌握Axure成为产品经理，可能也并非容易，入门简单，但是交互原理可并不简单！因此提供了系列的Axure自学视频课，可以全面的学习Axure软件基础以及交互原型案例实操~

点击观看视频教程

Axure制作移动端图片轮播原型方法：

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怎么制作移动端图片轮播原型?”的全部内容精彩分享了，希望能够帮助到你！更多Axure精彩分享，尽在Axure相关文章~如果你此时正在犹豫Axure去哪学、怎么学的话，那我不妨建议你直接学习体验一下我们的Axure自学自学课，专业讲师授课，可以从基础的知识点开始学起，逐步深入掌握哦~

热门课程推荐

AxureRP原型图零基础入门到快速精通Sketch+Axure手机支付宝APP设计实战教程AxureAPP唯一选中交互设计教程Axure电商APP购物车交互案例教程