玩转Axure:导航栏吸附进阶之模块切换

7 评论 5073 浏览 30 收藏 7 分钟

如何用Axure做出导航栏吸附同时可在不同的Tab模块之间切换的效果呢?本篇文章将为我们演示这一进阶玩法。

前段时间写了一篇如何制作导航栏吸附效果的文章,意犹未尽,正好自己也在做运动类型知识付费课程的产品,其中一些部分也用到这个效果,借着这个思路再分享一篇进阶的玩法,导航栏吸附同时可在不同的Tab模块之间切换。

效果如下:

玩转Axure:导航栏吸附进阶之模块切换

与上篇文章中一样(传送门),顶部的导航栏显示与隐藏用相同的方式实现,通过页面滚动到相应位置时的条件判断显示和隐藏导航栏。

既然显示了导航栏,就要发挥导航栏的作用,通过导航栏做进一步的操作,一般都是切换不同的模块,在有些产品中也可以是筛选栏,具体就看产品类型,接下来就讲解下悬浮后的导航栏如何与其它部分进行联动。

以效果动画中的案例为例,思路如下:

根据产品需求,导航栏对应控制三个部分的内容,分别是:课程介绍、课程列表、用户评价:

  • 当页面滚动到设定条件判断的位置是,显示/隐藏导航栏;
  • 显示导航栏后,点击不同的分类,切换到不同内容模块;
  • 顶部的导航栏隐藏后,在页面中还可以继续通过分类Tab控制内容模块。

01

玩转Axure:导航栏吸附进阶之模块切换

  • 根据思路,我们先准备各部分对应的内容,由于元件太多,我就不一一列出了,首先在元件库区域中拖入一个【动态面板】命名为“内容框架”;
  • 在属性中找到「滚动条」选项,选择为“自动显示滚动条”;
  • 双击该动态面板,进入“State1”状态。

玩转Axure:导航栏吸附进阶之模块切换

如上图所示,为动态面板添加以上元件,主要分为三部分:固定内容区、Tab、内容模块

02

玩转Axure:导航栏吸附进阶之模块切换

  • 双击动态面板“Tab”,新建三个状态,分别命名为:课程介绍、课程列表、用户评价;
  • 为三个状态中增加如上图所示元件,并设置好样式,用以区分不同的状态。

玩转Axure:导航栏吸附进阶之模块切换

  • 双击动态面板“内容模块”,创建三个状态并分别命名为:课程介绍、课程列表、用户评价
  • 如上图所示增加所需要的元件;
  • 动态面板“内容模块”属性中的「滚动条」选项选择为“自动显示滚动条”。

03

玩转Axure:导航栏吸附进阶之模块切换

复制一个动态面板“Tab”到主页面,并修改命名为“悬浮Tab”,同时置于动态面板“内容框架”的上层。

玩转Axure:导航栏吸附进阶之模块切换

玩转Axure:导航栏吸附进阶之模块切换

玩转Axure:导航栏吸附进阶之模块切换

  • 双击“悬浮Tab”,先进入第一个状态‘课程介绍’,进入后为「课程列表」设置鼠标单击时的交互用例,设置动态面板”悬浮Tab“和”Tab“的状态为‘课程列表’,同时设置动态面板”内容模版“的面板状态也为‘课程列表’;
  • 同样的为元件【用户评价】也设置对应单击时的用例动作;
  • 随后为“悬浮Tab”动态面板中的第二个状态‘课程列表’中的三个分类元件设置同样的单击时用例;
  • 最后为“悬浮Tab”动态面板中的第三个状态‘用户评价’中的分类元件设置单击时用例,规则与前两个一样。

04

玩转Axure:导航栏吸附进阶之模块切换

双击动态面板“内容框架”,随后再双击动态面板“Tab”,分别为三个状态中的分类元件设置跟动态面板“悬浮Tab”完全一样的交互用例,即可完成所有的设置。

具体的动作设置在第03部分中已展示,关于悬浮导航栏的设置方法已经在上篇文章中说明,可以参考后进行实践,如有问题欢迎在评论区或者后台留言。

End

(收藏文章,不怕找不到?)

 

作者:杰森,公众号:十八般产品

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

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 作者您的公众号多少呢,唉我要卡死在这里了,谁来教教我

    来自广东 回复
  2. 公众号没了吗?

    来自广东 回复
  3. 吸附

    回复
  4. 右边的滚动条如何隐藏呢?

    回复
    1. 转换为动态面板,然后属性中有一个滚动条的设置

      回复
  5. 这个元件可以分享一下嘛

    回复
    1. 我公众号:十八般产品,回复关键词:190219

      回复