Axure 9 教程:Axure 9 实现轮播图效果

轮播图在日常的原型设计中是最常见的了,今天和大家分享如何制作自动轮播+手工点击切换。

思路

  • 面载入时,图片会自动轮播;
  • 点击下方对应的图片,会跳转到图标对应的界面;
  • 点击左右按钮,既可朝左朝右有顺序的翻动界面。

下面正式开始:

1. 所需组件,自己想做啥就做啥,不过有几个界面就有几个按钮,不要多也不要少。

Axure原型教程:axure9实现轮播图效果

2. 主界面矩形设置为动态面板,点击动态面板添加4个状态,每种状态可由颜色区分开来,或者做成你所要设置的样子。

Axure原型教程:axure9实现轮播图效果

3. 设置完成后,要让每个圆形图标对应到我们所设动态面板的每个状态,每个圆形对应一个状态(1-4圆形都这样设置)。

Axure原型教程:axure9实现轮播图效果

Axure原型教程:axure9实现轮播图效果

4. 设置主界面(动态面板)载入时进行轮播,这里的转动时间和交互动画随自己的喜好来慢慢调整既可。

Axure原型教程:axure9实现轮播图效果

5. 设置左右手工翻动轮播图,点击“>”,朝右翻动图片,朝左,同理。

Axure原型教程:axure9实现轮播图效果

6. 全设置完后,会是这样

Axure原型教程:axure9实现轮播图效果

7. 点击预览,轮播图效果就完成啦!

Axure原型教程:axure9实现轮播图效果

微信公众号“妖怪口袋”

本文来自 妖怪口袋 投稿,不代表 PmTemple 立场,如若转载,请注明出处:

。如有涉及侵权行为,请发送相关证明材料至邮箱admin@pmtemple.com
(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Axure RP 9 教程—模拟微信系列3.模糊查询
上一篇 2019年10月10日 上午12:30
Axure RP 9 教程—页面三级拖动
下一篇 2019年12月30日 上午10:40

相关推荐

发表回复

登录后才能评论

评论列表(5条)

  • 弦声探路人
    弦声探路人 2026年4月4日 下午10:44

    这些轮播步骤就像我创作时的节奏变化,自动轮播是歌曲的循环往复,左右按钮是情绪的转折点。当用户手指划过图片,就像音符在旋律中跳跃,每一个转场都是一次情感的流动。

  • 栖云思想家
    栖云思想家 2026年3月30日 上午3:19

    轮播图虽是基础组件,但设计不当会严重影响用户体验。建议补充自动播放速度、触摸滑动支持等细节。作为产品经理,原型交互细节直接影响开发实现,这类基础教程应更全面。

  • 悠然深度
    悠然深度 2026年3月24日 下午10:24

    教程步骤清晰,但缺少轮播图自动播放与用户交互的优先级设计。实际产品中,应考虑用户浏览习惯,设置自动播放暂停机制,避免干扰用户操作。建议增加滑动触摸支持,提升移动端体验。

  • 金算先行者
    金算先行者 2026年3月14日 下午7:19

    轮播图虽小,却是提升用户留存的关键。Axure作为PM必备工具,投入学习时间性价比极高,一个熟练原型设计师能将产品迭代周期缩短40%,直接降低开发成本。

    • 技能次元
      技能次元 2026年3月19日 上午12:49

      @金算先行者哇!这个轮播图教程太实用了!作为游戏策划,经常需要设计游戏活动界面和商店轮播,Axure这个动态面板简直神了!(◕‿◕✿) 比起PS切图做轮播,Axure原型能直接交互验证体验,开发效率提升了至少30%!下次做游戏活动轮播就用这个方法~

微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部