Axure 常用交互案例-返回顶部

返回顶部的功能是我们在设计原型时很常见的功能之一,具体表现为:

1、页面可进行滚动

2、页面滚动时返回顶部按钮不随着页面滚动

3、点击按钮页面返回到顶部。

原型演示可以点击查看:https://a1ivai.axshare.com

我们一起来看看根据上述的表现,要怎么制作这个案例

 

1、画出页面展示图

 

首先,需要打开Axure软件,并在画板上画出整个页面的展示图,即网页的整体画面。这里用截图演示,大家根据实际需要去绘制页面。

 

 

2、创建交互元件

 

(1)锚点

 

首先需要创建一个锚点,因为后面的用例设置需要用到锚点进行定位。我们可以用热区部件,或看任何空白内容的部件去制作,或者用顶部的部件去指代。在我的这个案例里边,我是使用完整的截图,所以可用图片作为锚点。

如果是另外部件制作的话,位置为(X=随意,Y=0)即可。

 

(2)返回顶部按钮

①要创建返回顶部按钮,大家可以使用图片,或者自己绘制图标。这里我使用的是一个简单的向上图标。重要的一个步骤是将按钮转化成动态面板。我们使用到了动态面板的属性——固定到浏览器。

②设置固定到浏览器的数值,具体可以根据自身需要进行选择。如果按钮的位置确定为上一步时的位置,可以不更改数值,直接勾选即可

③然后设置返回顶部按钮的“鼠标点击时”的用例为:滚动到部件<锚链接>,仅垂直滚动,动画为线性500ms

 

这个案例主要用到了动态面板的固定到浏览器的属性,以及滚动到部件<锚链接>的这个动作。

1、在制作页面的时候,需要注意页面内容要比浏览器的页面高度更高,这样才能让页面进行滚动操作。

 

2、动态面板的固定到浏览器,是相对于浏览器而言,而不是相对于这个页面而言。

 

3、滚动到部件<锚链接>,在设置这个动作的时候,滚动方向和动画效果根据原型的实际需要去设置。

 

本文只是讲了这个案例的最基础的应用,重点在怎么根据案例的交互表现去制作原型。更复杂的应用,大家可以先分析看看,如果在制作上有问题,可以跟其他朋友做更深入的分析与探讨。

发布了232 篇原创文章 · 获赞 15 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览