axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)

导语:今天,本文作者和大家分享一下如何通过Axure实现网站Tab导航栏切换内容页和返回顶部交互,希望看后对你能有所帮助。

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(1)

我们在使用知乎时,会发现向下滚动页面,网站Tab导航栏会发生内容切换;同时滚动超过一定距离,会出现回到顶部按钮,点击该按钮,即可返回页面顶部。

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(2)

一、实现逻辑
  1. 向下滑动页面,Tab导航栏由第一种状态切换成第二种状态;向上滑动页面,Tab导航栏由第二种状态切换成第一种状态;
  2. 页面滑动一定距离,显示回到顶部按钮,点击回到顶部按钮,页面向上滚动回到页面顶部。
二、页面构建元件准备

顶部栏两种状态及下滑页面准备,我是通过截图的方式准备的:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(3)

回到顶部按钮、鼠标移入按钮时所显示的浮窗,将该组合命名为“回到顶部-总”:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(4)

三、添加交互事件

将顶部栏的两种状态分别放入动态面板中的状态1与状态2中,将动态面板命名为statusBar;

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(5)

添加鼠标移入回到顶部按钮显示”回到顶部”气泡:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(6)

添加向下、向上滑动页面,顶部状态栏切换;

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(7)

其次,对窗口添加交互:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(8)

将“回到顶部-总”组合转为动态面板,将该动态面板命名为“回到顶部-总panel”,固定动态面板显示位置,并隐藏:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(9)

添加锚点元件,我们在此选择热区元件,因为热区具有透明的特性,将其命名为TopLocation:

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(10)

为“回到顶部”按钮增加交互,鼠标移入显示“回到顶部”气泡,移除隐藏“回到顶部”气泡;为“回到顶部”按钮添加【单击时】用例,设置动作【滚动到元件】,选择TopLocation,垂直线性滚动500毫秒。

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(11)

四、最终效果展示

axure实现左侧导航栏的展开与收缩(如何实现网站Tab导航栏切换内容页)(12)

五、补充知识

在上面交互的应用中,我们会用到Window.scrollY函数,该函数为窗口函数;窗口函数一共包括以下四种:

  1. Windows.width:获取浏览器的当前宽度。
  2. Windows.height:获取浏览器的当前高度。
  3. Windows.scrollX:获取浏览器的水平滚动距离。
  4. Windows.scrollY:获取浏览器的垂直滚动距离。

本文由 @小青 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。