axure rp8轮播图制作教程(rp9轮播图制作教程)
axure rp8轮播图制作教程(rp9轮播图制作教程)接下来,我们看到界面右侧那里有页面和大纲的两个切换卡,点击大纲。创建动态面板首先打开Axure rp软件,会直接进入到page1,就是一个新的文件页面。Axure rp初始化界面现在开始我们的正文了,我们先简单拉一个矩形,然后选中点击右键出现选项卡,选择创建动态面板。
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。
Axure rp的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理 。
Axure rp9
接下来我们来讲一下如何使用这个软件做出原型轮播图,方法包括以下几步:
步骤一:创建动态面板首先打开Axure rp软件,会直接进入到page1,就是一个新的文件页面。
Axure rp初始化界面
现在开始我们的正文了,我们先简单拉一个矩形,然后选中点击右键出现选项卡,选择创建动态面板。
创建动态面板
步骤二:给动态面板添加四个状态接下来,我们看到界面右侧那里有页面和大纲的两个切换卡,点击大纲。
界面右侧
然后找到动态面板那一层,鼠标悬停在状态1,会出现一个小图标,这个小图标是复制动态按钮,点击就能直接复制出一个状态了。
大纲
我们复制多两个看看,效果如下图所示。
三个状态
步骤三:在四个状态里设置元件内容上图看到了,每个状态下都已经含有一个矩形了,当然你要删除也没事,如果不删除,你要添加元件进去的时候,把它覆盖掉也可以。
当然我这里先不删除,先给大家试试轮播效果,可以分别选中每个矩形,把颜色填充换一下。
换颜色
颜色换好以后我们开始下一步,选中动态面板,选择第三个横向滚动,当然你想纵向也可以。
设置滚动
步骤四:选中动态面板新建交互设置滚动之后还不可以轮播,我们还需要选中动态面板设置交互,也是重点步骤,我们在右侧就可以找到设置交互的选项栏:
新建交互
(1)点击新建交互,下拉找到载入时选项,当然也可以直接搜索载入时。
点击载入时
(2)选择了载入时后会直接跳出事件选项卡,在里面找到设置面板状态。
点击设置面板状态
(3)选择设置面板状态后,进行最后的动画添加处理,目标元件选择(动态面板),状态选择下一个,设置从最后一个到第一个自动循环,设置动画效果,这个想怎么滑动按个人发挥,循环间隔看自己的设定,我这里设置1000毫秒。之后就完成了所有的设置了。
设置动画效果
接下来我们点击右上角绿色的图标,点击跳转浏览器查看预览效果。
预览按钮
这是我设的三个矩形,如果你们想要图片轮播,可以直接在动态面板的每个状态里加图片,我这里直接用矩形演示。
轮播a
轮播b
轮播c
下一篇Axure rp9轮播图制作教程(2)
关于轮播图的讲解先到这里,下一篇我再讲更多,让这个轮播图更完整。