Axure RP中文网站 > 热门推荐 > Axure怎么实现左右滑动 Axure怎么设置跳转交互
Axure怎么实现左右滑动 Axure怎么设置跳转交互
发布时间:2025/02/24 14:28:47

品牌型号:联想ThinkBook

系统:Windows 11

软件版本:Axure RP 9

Axure作为一款强大的原型设计软件,能够让抽象的产品概念具象化,逐渐成为众多产品经理以及设计师们不可或缺的工作助手。在Axure丰富的交互设计功能里,左右滑动和跳转交互这两个交互效果虽然很基础但却很关键。页面切换以及页面跳转都离不开这两个功能。今天的文章就来给大家介绍Axure怎么实现左右滑动以及Axure怎么设置跳转交互的相关内容。

 

一、Axure怎么实现左右滑动

Axure实现左右滑动可以通过动态面板以及交互功能来实现,例如我们想要左右滑动两张图片,可以按照步骤操作。

1、从元件库中找到“动态面板”元件,并拖至画布中,可以设置“动态面板”的大小来适应待会要添加的内容。

添加动态面板
图片1:添加动态面板

2、双击“动态面板”进入编辑状态,并添加State,例如我们想左右滑动两张图,State就是2个,以此类推去添加对应的状态即可。

添加State
图片2:添加State

3、将提前准备好的图片添加到动态面板中,放置到蓝色虚线框中。

插入图片
图片3:插入图片

4、选中动态面板,在右侧的“交互”面板中,点击“新建交互”,选择“拖动时”事件,交互动作选择“移动”。

设置交互事件
图片4:设置交互事件

5、在移动动作设置中目标选择当前动态面板,可以设置一个“线性”动画效果,让滑动效果更自然。在最下方可以设置左右方向的边界值。例如,若动态面板宽度为 500px,页面共有2个,那么右边界值可设置为 - 500px(-500px * 1),这样就能确保动态面板在规定范围内左右滑动。

设置交互动作
图片5:设置交互动作

二、Axure怎么设置跳转交互

除了滑动的交互动作,Axure还可以设置跳转交互,例如我们想要点击一个按钮跳转到其他页面可以按照下面的步骤来操作。

1、创建跳转元件。从元件库中拖拽一个“按钮”元件至画布中,并根据需要设置按钮的样式。

添加跳转元件
图片6:添加跳转元件

2、选中刚刚创建的按钮,在交互面板中新建交互选择 “单击时”。当然你也可以根据实际设计应用需求选择其他触发事件,如鼠标移入等。

添加交互事件
图片7:添加交互事件

3、在 “单击时” 的交互设置中,添加 “打开链接”的动作。选择要跳转到的目标页面。可以是当前项目中的其他页面,也可以是外部链接。如果是跳转到当前项目中的页面,直接在列表中选择相应页面即可;若是外部链接,则需要手动输入链接地址。

选择跳转页面
图片8:选择跳转页面

4、还可以设置跳转的方式,如“当前窗口”或者“新窗口/新标签”打开等,根据实际需求进行选择 。

设置打开窗口
图片9:设置打开窗口

以上就是关于Axure怎么实现左右滑动以及Axure怎么设置跳转交互的全部介绍。通过以上详细的步骤,我们就可以在 Axure 中轻松实现左右滑动和跳转交互效果,为原型设计增添更多的交互性和实用性,更好地模拟真实产品的操作体验。无论是初学者还是有一定经验的 Axure 使用者,都可以按照这些步骤进行实践,不断提升自己的原型设计能力。

 

读者也访问过这里:
135 2431 0251