动态面板是Axure原型制作中使用非常频繁的一个元件 ， 它主要用于实现动态的交互效果 ， 它由一个或多个状态组成 ， 每个状态就是一个页面 ， 可以通过事件来控制动态面板的状态 。动态面板的属性中有个功能 ， 叫“固定到浏览器” ， 这个功能也可以在动态面板的右键菜单中选择 。如果我们希望页面上的某个部分 ， 在页面滚动时保持在原位不动 ， 就需要用到“固定到浏览器”的这个功能 。本文小编来教大家如何用axure动态面板制作返回顶部按钮 。
文章插图
固定位置的返回顶部按钮
首先 ， 我们需要先从电脑中打开axure软件 ， 完成固定按钮位置 。
1、我们需要先在画布中搭建一个简易的页面 ， 放入一个矩形 ， 改成箭头样式 ， 并“转为动态面板“ ， 命名为”back“ 。
2、接着用鼠标点击动态面板属性中的“固定到浏览器“选项 ， 弹出设置界面 。
3、在弹出的设置界面中勾选“固定到浏览器窗口“的复选框 ， 开启设置选项 。
4、水平固定中选择“右“ ， 并设置边距为”100“px；
5、水平固定中选择“底部“ ， 并设置边距为”10“px 。
6、添加“返回顶部“按钮【鼠标单击时】事件的用例动作；因为当前动态面板中只有一个元件 ， 所以【鼠标单击时】的事件可以用矩形也可以用动态面板 。
7、接着我们需要用一个元件在顶部进行位置定位 ， 滚动时滚动到这个元件的位置上 。页面中 ， 有一个文字为“顶部导航“的占位符元件 ， 它的y轴坐标为”0“ ， 就是在顶部的位置 ， 我们就用它进行顶部位置的定位 。
8、我们为“顶部导航“这个元件命名为“top” ， 并在用例编辑界面中选择“滚动到元件”的动作 。
9、制作完成 。
【如何用axure动态面板制作返回顶部按钮？制作步骤有哪些？】以上就是关于如何用axure动态面板制作返回顶部按钮的操作方法和步骤 ， 我们在学习软件的时候需要多掌握一些交互设计的操作方法 ， 以熟练运用为原型添加交互效果的操作 。
推荐阅读
- Axure如何实现鼠标移入移出的交互设计？实现方法是什么？
- 如何用Axure快速绘制图标？?如何绘制流程图？
- 如何使用动态面板实现三级菜单？制作步骤有哪些？
- InDesign如何创建等间距的参考线？
- InDesign如何设置文档网格？有哪些设置内容？
- InDesign如何调整文本间距？调整方法有什么？
- InDesign如何创建包含出血的 PDF文档？操作步骤有哪些？
- InDesign如何设置打印出血？设置步骤有什么？
- InDesign如何为 PDF 添加交互元素？都有哪些方式？
- InDesign如何制作复古文本效果？操作方法是什么？