4、返回顶部按钮 —— Axure实用交互

axure商城

写在开头:

在设计网页原型时的你可能会遇到如下问题:

  • 如何制作返回顶部的TOP键
  • 怎么让它在往下滚动浏览时出现
  • 而又如何在返回顶部后消失

按照惯例,先上动画演示

 

原型展示:https://r7jdv2.axshare.com

 

开始原型设计

1、画出页面展示图

首先,需要打开Axure软件,并在画板上画出整个页面的展示图,即网页的整体画面。

2、创建交互元件(分为3个)

(1)动态面板1 —— 锚点

首先需要创建一个没有任何内容的动态面板,这个动态面板不需要添加任何用例,它的作用只是锚点,因为后面的用例设置需要用到锚点进行定位。

只需要设置上述动态面板的位置为(X=随意,Y=0),并把它命名为锚点

 

(2)TOP按钮

① 要创建TOP键按钮,先要导入按钮标志图片,并右键点击图片选择转换,把它转换为动态面板(因为只有在处于动态面板情况下,才能设置固定到浏览器的交互动作),并命名为TOP

② 设置固定到浏览器的数值,具体可以根据自身需要进行选择。

 

③ 然后设置top按钮的“鼠标点击时”的用例为滚动到元件对象为锚点,仅垂直滚动,动画为线性500ms

 

(3)动态面板2 —— 记录位置

①  跟第一个元件一样,首先需要创建一个没有任何内容的动态面板,位置和锚点动态面板一样并命名为记录位置。

②  设置该动态面板固定到浏览器,必须垂直固定为上。

 

③ 点击画板的空白处,设置页面“窗口滚动时”的用例

case 1

条件为:值 [[lvar1.y]] > 值 0 ,其中Fx为元件 记录位置

执行动作:显示TOP动态面板

 

case 2

条件为 Else If True (直接双击窗口滚动,则会直接创建case 2 。意义为:如果case 1 没实现则执行case 2

执行动作:隐藏TOP动态面板

最后一步就是隐藏TOP按钮,就可以点击F5进行页面预览了。

 

该教程主要用到的原理就是:动态面板固定到浏览器并不是传统意义上就保持不动了,而是它的移动与你鼠标或者滚轮移动相反,而实现保持一致的视觉。但是实际上它是进行移动的,所以用到了获取动态面板的目标位置从而记录位置并进行判断。

 


至此,返回顶部讲演结束,期待与您的交流沟通!

 

11

评论:

2 条评论,访客:2 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(100%)
  • 差评:(0%)

最新评论

  1. avatar
    U-Know发布于: 

    我用的axure7,怎么设置都无法达到效果,默认隐藏了top,页面滚动后,却并没有出现top,就像是“记录位置”这个动态面板不是固定在浏览器上,而是固定在页面上一样,也就是说,“记录位置”这个动态面板的Y坐标没有发生变化。
    很奇怪,检查了很久都没搞明白为什么?

  2. starzhang123
    starzhang123发布于: 
    评分:

    自己实际试验的时候需要加入一个载入中隐藏top原件的实例,不然会出现进入top默认还在的情况,当然也可以默认设置元件是隐藏的。

发表评论