Axure入门案例系列——进阶轮播图.docx

Axure 入门案例系列——进阶轮播图 Axure 软件是一款功能强大且易于使用的原型设计工具。通过本教程，我们将学习如何使用 Axure 创建一个进阶轮播图，掌握基本的软件使用和元件交互事件。下面是教程的详细信息： 一、功能 1. 鼠标移入暂停轮播、鼠标移除继续轮播 2. 点击切换上一张轮播图、点击切换下一张轮播图 3. 轮播图与小标同步、小标点击跳转 二、制作方式 使用 Axure 8 作为示例，我们将制作一个进阶轮播图，主要用于 PC 端的操作。我们需要制作基础的轮播图，然后制作同等动态页面状态的轮播图小标。接着，我们将制作左右切换的按钮，并实现透明状态。 三、交互制作 1. 轮播图同步动起来 * 内容轮播图页面切换 + 右下部小标切换 * 在页面层级配置页面载入的动态面版的交互 * 选择两个动态面板模式：向后循环 * 勾选两个动态面本向后循环 * 勾选循环间隔时间 * 勾引首个状态延时 * 动画：缓解动态版本切换的生硬 2. 设置小标点击后跳转对应的页面 * 每个状态的小标中的按钮都需要添加交互事件 * 设置状态需同步 * 技巧：统一制作一个小标状态，然后进行复制，复制后对应的调整小标内容的排版布局 3. 设置左右按钮点击切换 * 设置按钮点击事件 * 点击后切换内容动态面板、小标为上一个 * 向前循环：勾选向前循环 4. 配置鼠标移除轮播图暂停、鼠标移出轮播图继续 * 鼠标移入，设置内容轮播图和小标轮播图状态为停止循环 * 鼠标移出，设置内容轮播图和小标轮播图状态为向后循环 四、总结 1. 注意交互的先后顺序，尤其在鼠标移入移出内容轮播图时 2. 遇到交互冲突，可以尝试添加触发条件进行避免冲突 3. 注意细节，尤其是小标动态面板的交互 4. 最后一点：老生常谈，注意命名 通过本教程，我们可以学习如何使用 Axure 创建一个进阶轮播图，掌握基本的软件使用和元件交互事件。这将帮助我们更好地设计和实现复杂的交互式原型。