快捷搜索:  汽车  科技

axure rp8轮播图制作教程(rp9轮播图制作教程)

axure rp8轮播图制作教程(rp9轮播图制作教程)接下来,我们看到界面右侧那里有页面和大纲的两个切换卡,点击大纲。创建动态面板首先打开Axure rp软件,会直接进入到page1,就是一个新的文件页面。Axure rp初始化界面现在开始我们的正文了,我们先简单拉一个矩形,然后选中点击右键出现选项卡,选择创建动态面板。

Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档

Axure rp的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理 。

axure rp8轮播图制作教程(rp9轮播图制作教程)(1)

Axure rp9

接下来我们来讲一下如何使用这个软件做出原型轮播图,方法包括以下几步:

步骤一:创建动态面板

首先打开Axure rp软件,会直接进入到page1,就是一个新的文件页面。

axure rp8轮播图制作教程(rp9轮播图制作教程)(2)

Axure rp初始化界面

现在开始我们的正文了,我们先简单拉一个矩形,然后选中点击右键出现选项卡,选择创建动态面板。

axure rp8轮播图制作教程(rp9轮播图制作教程)(3)

创建动态面板

步骤二:给动态面板添加四个状态

接下来,我们看到界面右侧那里有页面和大纲的两个切换卡,点击大纲

axure rp8轮播图制作教程(rp9轮播图制作教程)(4)

界面右侧

然后找到动态面板那一层,鼠标悬停在状态1,会出现一个小图标,这个小图标是复制动态按钮,点击就能直接复制出一个状态了。

axure rp8轮播图制作教程(rp9轮播图制作教程)(5)

大纲

我们复制多两个看看,效果如下图所示。

axure rp8轮播图制作教程(rp9轮播图制作教程)(6)

三个状态

步骤三:在四个状态里设置元件内容

上图看到了,每个状态下都已经含有一个矩形了,当然你要删除也没事,如果不删除,你要添加元件进去的时候,把它覆盖掉也可以。

当然我这里先不删除,先给大家试试轮播效果,可以分别选中每个矩形,把颜色填充换一下。

axure rp8轮播图制作教程(rp9轮播图制作教程)(7)

换颜色

颜色换好以后我们开始下一步,选中动态面板,选择第三个横向滚动,当然你想纵向也可以。

axure rp8轮播图制作教程(rp9轮播图制作教程)(8)

设置滚动

步骤四:选中动态面板新建交互

设置滚动之后还不可以轮播,我们还需要选中动态面板设置交互,也是重点步骤,我们在右侧就可以找到设置交互的选项栏:

axure rp8轮播图制作教程(rp9轮播图制作教程)(9)

新建交互

(1)点击新建交互,下拉找到载入时选项,当然也可以直接搜索载入时

axure rp8轮播图制作教程(rp9轮播图制作教程)(10)

点击载入时

(2)选择了载入时后会直接跳出事件选项卡,在里面找到设置面板状态。

axure rp8轮播图制作教程(rp9轮播图制作教程)(11)

点击设置面板状态

(3)选择设置面板状态后,进行最后的动画添加处理,目标元件选择(动态面板),状态选择下一个,设置从最后一个到第一个自动循环,设置动画效果,这个想怎么滑动按个人发挥,循环间隔看自己的设定,我这里设置1000毫秒。之后就完成了所有的设置了。

axure rp8轮播图制作教程(rp9轮播图制作教程)(12)

设置动画效果


接下来我们点击右上角绿色的图标,点击跳转浏览器查看预览效果。

axure rp8轮播图制作教程(rp9轮播图制作教程)(13)

预览按钮

这是我设的三个矩形,如果你们想要图片轮播,可以直接在动态面板的每个状态里加图片,我这里直接用矩形演示。

axure rp8轮播图制作教程(rp9轮播图制作教程)(14)

轮播a

axure rp8轮播图制作教程(rp9轮播图制作教程)(15)

轮播b

axure rp8轮播图制作教程(rp9轮播图制作教程)(16)

轮播c


下一篇Axure rp9轮播图制作教程(2)

关于轮播图的讲解先到这里,下一篇我再讲更多,让这个轮播图更完整。

猜您喜欢: