logo 原型设计工具Axure RP使用教程 我也要发布文档

入门教程(十二):滑动幻灯片教程


Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具, 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP


在本教程中,您将学习如何制作旋转木马,横幅或内容幻灯片,您可以通过在移动设备上左右滑动来浏览。

小部件设置

创建第一张幻灯片



  • 打开一个新的RP文件,然后在页面窗格中双击页面1以在画布上将其打开。
  • 从库窗格中将一个矩形小部件拖动到画布上,并使用样式窗格或样式工具栏中的填充颜色选择器将其填充颜色设置为蓝色。
  • 右键单击矩形,然后在上下文菜单中选择创建动态面板。


创建第二张幻灯片


  • 双击动态面板以编辑其状态。
  • 在画布顶部,单击state1。在出现的下拉列表的底部,单击添加状态,然后按Enter以创建状态2。



  • 将一个矩形小部件拖到state2画布上,将其放在(0,0)处,并将其填充颜色设置为红色。


创建第三张幻灯片



  • 重复步骤5和6,以使用其自己的矩形窗口小部件创建state3。将矩形小部件设为绿色。
  • 单击画布右上方的关闭,或按ESC退出状态编辑模式。


注意:创建自己的轮播时,您可以在动态面板的每个状态中包含所需的任何小部件。

添加向左滑动互动


  • 选择轮播动态面板,然后在交互窗格中单击新建交互。
  • 在出现的列表中选择向左滑动事件,然后选择设置面板状态操作。
  • 在目标下拉列表中选择此小部件。
  • 在[状态]下拉式选单中,选取[下一步],然后勾选[从上到下换行]方块。
  • 在动画输入下,选择向左滑动。请注意,动画输出部分会自动更改以匹配此选择。
  • 单击确定以保存操作。




添加向右滑动互动



  • 重复步骤2,向右滑动事件。 将动态面板的状态设置为Previous,而不是Next,然后为Animate In动画选择向右滑动。



预览互动

预览页面并左右滑动轮播以浏览其幻灯片。


要在移动设备上预览交互,请将RP文件上传到Axure Cloud,然后导航到移动设备上的共享链接。 您还可以使用Axure Cloud移动应用程序。



想要获得Axure RP更多资源、正版授权的伙伴,请咨询【慧都客服】了解

关注慧聚IT微信公众号???,了解产品的最新动态及最新资讯。

慧聚IT