动态面板是Axure原型制作中使用非常频繁的一个元件,它主要用于实现动态的交互效果,它由一个或多个状态组成,每个状态就是一个页面,可以通过事件来控制动态面板的状态。动态面板的属性中有个功能,叫“固定到浏览器”,这个功能也可以在动态面板的右键菜单中选择。如果我们希望页面上的某个部分,在页面滚动时保持在原位不动,就需要用到“固定到浏览器”的这个功能。本文小编来教大家如何用axure动态面板制作返回顶部按钮。

固定位置的返回顶部按钮
首先,我们需要先从电脑中打开axure软件,完成固定按钮位置。
1、我们需要先在画布中搭建一个简易的页面,放入一个矩形,改成箭头样式,并“转为动态面板“,命名为”back“。
2、接着用鼠标点击动态面板属性中的“固定到浏览器“选项,弹出设置界面。
3、在弹出的设置界面中勾选“固定到浏览器窗口“的复选框,开启设置选项。
4、水平固定中选择“右“,并设置边距为”100“px;
5、水平固定中选择“底部“,并设置边距为”10“px。
6、添加“返回顶部“按钮【鼠标单击时】事件的用例动作;因为当前动态面板中只有一个元件,所以【鼠标单击时】的事件可以用矩形也可以用动态面板。
7、接着我们需要用一个元件在顶部进行位置定位,滚动时滚动到这个元件的位置上。页面中,有一个文字为“顶部导航“的占位符元件,它的y轴坐标为”0“,就是在顶部的位置,我们就用它进行顶部位置的定位。
8、我们为“顶部导航“这个元件命名为“top”,并在用例编辑界面中选择“滚动到元件”的动作。
9、制作完成。
以上就是关于如何用axure动态面板制作返回顶部按钮的操作方法和步骤,我们在学习软件的时候需要多掌握一些交互设计的操作方法,以熟练运用为原型添加交互效果的操作。