【Axure教程】锚点导航菜单

简介: 【Axure教程】锚点导航菜单

锚点导航菜单又沉锚点菜单或者锚链接菜单,当一个页面较长时,往往都需要使用锚点导航菜单,我们最常使用的锚点导航菜单,其实就是word里面的导航菜单,他能够快速帮我们找到对应的内容,提高我们的浏览效率。

所以本期就教大家如何在Axure里面制作一个高保真的锚点菜单。

一、制作完成后应具备以下效果

  1. 固定效果:锚点导航菜单固定在屏幕,无论页面在什么位置,都可以快速点击
  2. 锚点效果:点击锚点导航菜单,页面快熟滚动到对应的位置
  3. 回显效果:页面滚动到对应内容时,在锚点导航菜单中显示,可以清晰的知道阅读的位置。

640.gif

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/87f992dcedefa847/#g=1&id=pyby62&p=%E5%8F%B3%E4%BE%A7%E9%94%9A%E7%82%B9%E8%8F%9C%E5%8D%95

【原型下载】

方式2:https://weidian.com/item.html?itemID=3622372069

二、制作材料准备

1、菜单材料

菜单由多个文本标签和背景矩形制作而成

菜单标题——由多个文本标签制作而成,一个标签对应一个标题,设置选中样式为:填充颜色为蓝色,文字颜色为白色。设置为单选组,第一个标签默认选中,因为一开始是在页面的最顶端,然后一个个排列好即可。

背景矩形——作为背景使用,至于底层,填充颜色为白色,增加边线

动态面板——将上面所有标题的文本标签和背景矩形一起转为动态面板,转为动态面板后可以固定在浏览器,垂直方向规定在中部,水平方向固定在右侧

2、内容材料

内容材料主要由标题和对应的其他内容组成

内容标题——文本标签,同样是一个文本标签对应一个标题,这里标题的内容最好和上面菜单标题的内容一一对应,不然容易混淆。这里的标题可以说就是锚点了,后续会增加交互,鼠标点击菜单标题时,页面滑动到对应的标题。另外我们在标题前面也可以增加图标来美化。

其他内容——这里就是放你们标题对应要展示的内容,你们根据实际需要放置即可。

将上述内容摆放到对应位置就完成所有材料的准备了,完成后大致如下图所示:

640.png

三、交互设置

1、菜单标题交互设置

鼠标单击菜单标题时,我们通过滚动到元件(锚链接)的交互设置页面滚动到指定的位置,例如,点击菜单标题1时,就设置页面滚动到内容标题1的位置;点击菜单标题2时,就设置页面滚动到内容标题2的位置;点击菜单标题3时,就设置页面滚动到内容标题3的位置……以此内推,一一对应设置即可。这里注意的是滚动到元件交互设置时,滚动方向选择垂直,然后我们可以添加一个1秒的动画效果,这样滚动起来更加美观。

640.png

2、窗口滚动时交互设置

在窗口滚动时,我们要根据窗口滚动到不同的位置,选中对应的标题。

这里我们就需要用到函数来计算了,首先和大家介绍两个函数:

Window.scrollY——这个函数可以获取页面垂直滚动的距离

Window.height——这个函数可以获取窗口的高度

那么我们怎么知道什么时候该选中哪个标题呢?我们以标题2来举例说明:

如果Window.scrollY(页面垂直滑动的距离)大于内容标题2所在的y坐标值减去屏幕的一半,那就选中标题2。

640.png

为了大家更加容易理解,可以参考下图,红线的位置为屏幕一半的位置,如果内容标题文字2在红线上方,就表示标题文字2的内容超过屏幕的一半,所以我们选中标题02,如果在下方就表示不超过屏幕一半,主题内容还是在标题01上,所以我们就选中标题01。

当然了上面只是个别标题的分析,我们要从最后一个标题的位置来写交互,案例中为标题20,如果Window.scrollY(页面垂直滑动的距离)大于内容标题20所在的y坐标值减去屏幕的一半,那就选中标题20;如果这个条件不成立,我们在判断标题19,如果标题19不成立再判断标题18……直到成立为止,这里面交互都可以复制粘贴的,我们只需要写好第一个,后面的只是简单的修改目标元件即可。

640.png

这样我们就完成了整个原型了,其实基本上第一次做出来之后,以后使用只需要替换标题文字和中间的内容就可以了直接出交互效果了,所以使用起来也算方便。

以上就是高保真原型——锚点导航菜单,制作方法了,感兴趣的同学们可以动手试试,谢谢您的阅读。


作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载


目录
打赏
0
0
0
0
6
分享
相关文章
|
3月前
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
127 2
|
5月前
Axure 小技巧:翻滚吧页面
Axure 小技巧:翻滚吧页面
52 6
|
5月前
Axure 弹出框遮罩层灯箱效果
Axure 弹出框遮罩层灯箱效果
57 0
|
5月前
Axure 创建轮播图
Axure 创建轮播图
32 0
关于Axure隐藏滚动条
关于Axure隐藏滚动条
170 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等