数极客首页

Axure教程:腾讯新闻按钮,如何一键上天?

在一些新闻网页上,到第二屏时,会有返回顶部的按钮,那么这样的原型效果,如何利用Axure实现呢?

Axure教程:腾讯新闻按钮,如何一键上天?

当我们浏览腾讯新闻网页滚动到第二屏时,这时网页的右下角会出现返回顶部按钮,点击按钮页面迅速回到第一屏位置。

那么这样的原型效果,如何利用Axure实现呢?下面将为大家详细讲解制作步骤。

Axure教程:腾讯新闻按钮,如何一键上天?

一、准备好元件素材

首先我们需要搭建一个页面,这里我们摆放七个矩形框用来表达网页的内容栏目,多摆放几个矩形,使得整体网页的长度保持在两屏以上。拖入一个向上的箭头(Axure8.0中已提供)和矩形,选中箭头和矩形将其转化为动态面板,命名为返回顶部。

Axure教程:腾讯新闻按钮,如何一键上天?

右击动态面板设置为固定到浏览器,水平固定位置沿用默认边距即可,垂直固定设置为向下边距80,勾选始终保持顶层和固定到浏览器窗口,动态面板默认设置为隐藏。

Axure教程:腾讯新闻按钮,如何一键上天?

设置固定位置

通过观察我们不难看出,返回顶部按钮有三个交互效果:

  1. 页面向下滚动一段距离,显示按钮;
  2. 页面回滚一段距离,按钮消失;
  3. 点击按钮,页面返回第一屏位置。

二、设置窗口滚动时用例

case1:页面窗口滚动距离超过300时,显示返回顶部动态面板,对应的函数表达式为[[Window.scrollY]]>300。动作配置中,动画效果设置为逐渐显示,动画时间为500毫秒,并勾选置于顶层。

相关配置请参照下方截图:

Axure教程:腾讯新闻按钮,如何一键上天?

页面向下滚动设置

case2:如果窗口的高度小于等于800时,隐藏返回顶部动态面板,对应的函数表达式为[[Window.height]]≤800。隐藏动作中,动画效果设置为逐渐隐藏,动画时间为500毫秒。

相关配置请参照下方截图:

Axure教程:腾讯新闻按钮,如何一键上天?

页面向上滚动设置

三、按钮设置鼠标单击用例

添加动作滚动到元件<锚链接>,这时候我们要为按钮找到一个锚点位置,假设上图中的栏目一位我们需要达到的锚点。在配置动作中选中栏目一矩形,选择仅垂直移动,动画效果选择线性动画,动画时间设置500毫秒。

Axure教程:腾讯新闻按钮,如何一键上天?

为按钮设置锚点链接

至此,所有的用例设置完毕,点击预览原型,坐稳了,准备送你上天。

最后为大家奉上源文件链接:https://pan.baidu.com/s/1jJTwyz0 密码:runm

 

本文由 @kevin 原创发布。未经许可,禁止转载

题图来自Unsplash,基于CCO协议

新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是数据分析软件领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

评论已关闭。

相关文章