当前所在位置: 首页 > 生活常识 > 正文

Axure轮播图怎么做(axurerp9轮播图怎么做)

2022-11-10 能源信息网 【 字体:

Axure轮播图怎么做(axurerp9轮播图怎么做),本文通过数据整理汇集了Axure轮播图怎么做(axurerp9轮播图怎么做)相关信息,下面一起看看。

如何制作axure轮播图(如何制作axure9轮播图)玩法Axure:轮播图* * *技巧图片轮播大小很多电商、知识付费、体育类产品的首页都会通过轮播图展示重点推荐内容,方便用户最快到达信息,对产品数据增长有重要作用。接下来,解释如何使用Axure来呈现这个原型。

先看效果:

我们先来梳理一下整个过程:

一个

拖动到动态面板部件中,并将其命名为“背景”。

双击动态面板添加两个状态,分别命名为图1、图2和图3。

拖入一个矩形元素,调整大小为W: 10 h: 2,命名为“block1”,复制其中两个,分别命名为“Block 2”和“Block 2”“Block 3”,选中时将交互样式设置为白色。

这里需要注意的是,要同时选择三个矩形,并设置“选项组名”。选项组的作用是当同一个选项组的一部分被选中时,其他部分会自动取消选中。

在动态面板的背景中分别进入三种状态,在每种状态下拖动一个占位符放到指定位置,在占位符中标记对应的图片1、图片2、图片3。

这里我用的是“占位符”,可以直接拖到实际* * *里的图片元素里。

以上是准备工作,图中带壳的手机外框是另一个准备好的组件库,如有需要可在微信官方账号获取。

2

第二部分向准备好的组件添加交互式用例。

要为“背景”动态面板添加“当状态改变时”用例,您需要首先添加一个条件判断。

当动态面板的状态为图1时,将所选状态设置为block1。

与图1所示的状态一样,添加两个条件来确定所选的状态,如图1所示:

为“后台”状态面板增加一个“加载时”用例,增加的动作之一是“选择时”,选择“Block 1”;添加第二个动作“设置面板状态”,选择状态“下一步”并选中“循环后退”和“循环间隔”,设置动画模式并调整秒数。(秒可根据不同情况配置)

至此,可以实现文章开头动画中的自动轮播效果,但无法实现手势拖动效果。

接下来,我们* * *手势拖动时的交互效果。

进入动态面板背景下的三个状态,选择状态中的所有内容,右键转换为动态面板,将新转换的动态面板命名为“drag1”、“dara2”、“drag3”

分别为三个动态面板添加拖动时的用例动作,如下图所示:

以上就是所有的步骤,最后的效果就是文章开头所展示的。在这个过程中,有三个技巧。一个是状态面板的循环效果;另一个是动态面板可以根据不同的状态链接组件;而第三个是动态面板内部的状态可以再次转化为动态面板,可以作为拖拽手势的连接器。

希望你能尝试多练习几次,理解重点。也希望你能养成练习前整理任务流程的习惯,这样对理解逻辑更有帮助。如果你有任何问题,请留言。

作者:Jason,微信微信官方账号:十八品

本文由@ Jason原创发布。每个人都是产品经理。未经许可,禁止复制。

题目来自PEPEPELS,基于CC0协议。

Axure旋转木马图片* * *教程视频axure ***旋转木马图片教程

更多Axure轮播图怎么做(axurerp9轮播图怎么做)相关信息请关注本站,本文仅仅做为展示!

阅读全文
友情链接