前言

轮播图在手机端和PC网页官网、H5页面是比较常见的组件，今天小编带领大家一步步实现基础轮播图的效果。同时进行轮播图相关的扩展进行说明。

准备

  • Axure 8（或Axure 9）软件已安装。

  • 掌握基本的软件使用。

    本教程知识点

  • 初级的动态面板使用。

  • 初级的页面交互事件、元件交互事件使用。

  • 图片元件、矩形等元件使用。

    详细教程—基础轮播图

    功能

  • 自动滚动：页面载入交互

  • 点击跳转：元件单击交互

    制作方式

    以三张轮播为例，使用Axure 8为例。

1、在元件库中拖入动态面板于绘图区域。
image.png
2、创建三个轮播图状态。（注意编辑时的命名）。
image.png
3、进行轮播图内容的配置，需要在三个轮播图状态中进行单独配置每个状态的内容。

  • 如果轮播图是已经处理好的图片，可以将每个状态的图片直接拖入动态面板对应的状态中。
  • 如果轮播图是单独采用Axure中元件进行制作，就需要每个状态进行对应的动态面板内容编辑。

image.png
4、进行轮播图交互配置

  • 轮播图动起来：在页面层级配置页面载入的动态面版的交互。
    • 选择动态面板模式：向后循环（Next）。
    • 勾选向后循环（若未勾选向后循环，动态面板只会切换一个状态）。
    • 勾选循环间隔时间（系统默认1000毫秒（1秒=1000毫秒），日常中基本设置为3000—5000之间）。
    • 勾引首个状态延时（勾选后，第一张轮播展示对应时间后，才会进行加载第二张；若不勾选，第一张会一闪而过）。
    • 动画：缓解动态版本切换的生硬。
      • 方向：根据实际效果选择（一般常用向左滑动）；
      • 时间：动画过渡时间，同样是缓解切换的生硬效果。

image.png

  • 配置轮播图跳转：对动态面版中每个状态进行跳转设置（常用交互为鼠标单击）。
    • 打开原型内部页面只需链接对应的页面即可。
    • 打开原型外部链接可以进行Url进行配置。

image.png

总结

基础的轮播图只需要以上步骤进行配置达到交互效果。以下为经验与注意事项。

  • 如果用预制图片，图片请保持尺寸一致（同时保证动态面板尺寸与图片一致，这样能够达到更好的效果）。
  • 间隔时间结合所需进行设置，一般建议3s—5s之间。
  • 动态面板状态的顺序是预览是轮播开始的顺序，可以调整动态面板状态的先后，展示对应的顺序（注：面板状态的顺序可以通过拖动调整先后顺序）。
  • 注意元件和动态面板、动态面板状态的名称备注（方便后期快速检索）。

负坐标网出品。
负坐标网是一个拥有高质量原型模版、组件库的交易平台。
网址：www.fuzuobiao.com