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

作者&投稿:藤姣 (若有异议请与网页底部的电邮联系)

图片旋转原型经常应用于各大应用的首页,包括文章分享应用、阅读应用、商城应用等。图像旋转、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购物车交互案例教程



~

Axure设计图片轮番播放效果的网页原型的教程
答:axure是一个非常实用的原型制作工具,产品经理、产品助理、交互设计师经常用到它,那怎么使用axure实现广告轮播图效果呢?1、创建两个动态面板,一个用于轮播图片,命名为【背景图片】,一个用于图片中的小圆点,命名为【圆点】2、然后再对应的【背景图片】动态图中添加3个动态,并每个动态设置对应添加图片...

如何用axure制作图片滚动的效果
答:1、元件库拖入一个动态面板。2、动态面板设置状态,每个状态中添加一张图片,这里以三张图片轮播为例。3、动态面板设置交互动作载入时选择设置动态面板状态,选择要设置的动态面板,选择状态NEXT,循环,循环间隔2000毫秒,进入时动画(向右滑动),退出时动画(向右滑动),设置用时2000毫秒。

在axure中如何设置图片自动轮番播放 急急 求大神 最好带图片回答
答:axure是没有自动循环的功能用例的 不过有个变通的办法,就是用重置页面来实现 1、新建一个动态面板,把每一张要轮播的图片都放到不同的面板状态里。2、在下方“页面交互”里,按下图所示设置页面的交互用例即可。(是假设有四幅需要轮播的图片)...

Axure怎么制作轮播图动效效果?
答:4.设置主界面(动态面板)载入时进行轮播,这里的转动时间和交互动画随自己的喜好来慢慢调整既可。5.设置左右手工翻动轮播图,点击“>”,朝右翻动图片,朝左,同理。6.全设置完后,会是这样 7.点击预览,轮播图效果就完成啦!以上就是关于“Axure怎么制作轮播图动效效果?”的全部内容分享了,希望...

Axure8.0怎么制作滑动翻转效果?
答:拖动一个【动态面板】元件,命名为轮播,分别制作四张图片。2.选择按钮 制作四个圆点,分别命名为圆点1、圆点2、圆点3、圆点4。二、交互设置点击”轮播图”动态面板,进行“状态改变时”事件、“向左拖动结束时”事件以及“向右拖动结束时”事件设置。以上就是羽兔为大家分享的“Axure8.0怎么制作滑动...

怎样使用axure8.0制作banner轮播图
答:拖动一个矩形,将矩形设置为动态面板。(当然用图片也行,这个举例说的清楚些);给动态面板新增状态,这里我用了三个状态,给矩形设置不同颜色的填充。(为了更方便看出效果);回到主页,点击矩形。给矩形添加交互。选择载入时。选择设置面板状态,选中矩形动态模板,选择状态下一步。将下面两个勾选上。

交互轮播图怎么做
答:交互轮播图的做法如下:1、打开AXURE软件,在基本元件中选择“动态面板”-对动态面板命名为“banner轮播”-设置动态面板大小为“W:1200 H:450”。2、双击打开动态面板,弹出动态面板属性框,设置三层,每层里面设置一张图片,提示:图片不能超出蓝色边框线,否则会显示不全。3、选中动态面板,在属性面板-...

怎样使用axure 7.0制作banner轮播图
答:1.首先,打开pc端的已经汉化完的Axure7.0版本软件。2.其次,拖动左边部件库里的图片元件到右面的编辑区域。并调整好所有制作的banner图片的大小,更改上方的长和宽数值。3.再次,点击图片单击鼠标右键 在弹出来的列表选项中选择转化为动态面板选项,会在右下角的部件管理中看到新增的动态面板。4.点击右...

怎么用Axure实现轮播图效果
答:然后双击这个面板,增加多个,有几个图增加几个:然后把每个图按顺序放到每个state里。怎么放?可以一次全部打开每个state然后把每个图粘进去,或者每次打开一个,放进去。。。然后设定事件,例如自动轮播,或者点击轮播或者其他。。。如果是打开自动轮播,则在非选定情况下,添加页面载入时的交互 如果是其他...

怎样使用axure 7.0制作banner轮播图
答:拖动一个矩形,将矩形设置为动态面板。(当然用图片也行,这个举例说的清楚些);给动态面板新增状态,这里我用了三个状态,给矩形设置不同颜色的填充。(为了更方便看出效果);回到主页,点击矩形。给矩形添加交互。选择 载入时。选择设置面板状态,选中矩形动态模板,选择状态下一步。将下面两个勾选上...