Axure制作回到顶部的网页交互

2021-03-2219:25:48原型设计Comments2,030 views字数 400阅读模式
  1. 打开Axure软件，新建一个母版，母版名称命名为“回到顶部”

    Axure制作回到顶部的网页交互

  2. 向母版画布区拖入热区和自定义回到顶部控件，分别命名为 顶部热区 和 回到顶部。热区控件x,y坐标设置为0，0
  3. 将自定义回到顶部控件设置为 动态面板，命名为 顶部面板
  4. 双击顶部面板进入自定义回到顶部控件操作区，新增 鼠标单击事件，在弹出用例编辑窗口，添加动作选择 链接/滚动到元件<锚链接>，配置动作选择 顶部热区控件且仅垂直滚动设置，动画可根据实际需要自行选择，确认提交。

    Axure制作回到顶部的网页交互

  5. 设置 自定义回到顶部控件可见性为 隐藏
  6. 选择 母版画布 交互事件为 窗口滚动时，在弹出用例编辑窗口选择 编辑条件，在条件设立窗口设置条件，窗口滚动距离大于500，显示回到顶部控件

    Axure制作回到顶部的网页交互

  7. 同样操作，设置窗口滚动距离小等于500，隐藏回到顶部控件

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21089.html

Axure制作回到顶部的网页交互文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21089.html

8. 鼠标右键 顶部面板 选择 固定到浏览器项，根据实际需求设置回到顶部控件位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21089.html

Axure制作回到顶部的网页交互文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21089.html

9.将回到顶部母版拖到需求网页页面，完成网页回到顶部交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/21089.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/yuanxing/21089.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定