Axure设计之文章目录动态定位导航教程

博客类型的内容网站，文章目录能很好的提升用户体验，通过目录可以清除整体结构，还可以通过目录进行导航，定位要浏览内容所在位置。下面通过Axure工具使用简单的元件实现文章目录导航的效果。

一、案例效果

1、页面左侧为文章目录，内容滚动时左侧文章目录随之联动，案例中通过颜色变化定位浏览位置；

2、当点击左侧文章目录任一项时，右侧文章内容会导航定位到具体位置，这里设置了线性滚动的效果。

预览地址：https://1wizik.axshare.com

二、设计思路

1、页面布局规划：左侧为文章目录显示区域、右侧为文章内容显示区域；

2、右侧内容可垂直滚动，但是左侧文章目录位置固定，需要使用动态面板固定位置；

3、左侧动态面板中拖入文本标签，将文章各个章节作为目录依次排列，并设置选中时的样式，目录第一个默认选中；

4、上下滚动时通过浏览器窗口垂直方向的高度进行定位，根据文章内容章节元件的Y轴位置定位，给整个窗口添加滚动时交互动作，通过情形条件判断，控制文章目录的选中状态；

5、给文章目录文本标签添加单击事件，添加单击时页面滚动到元件的动作；

三、重点步骤

1、第一步先规划好整体布局，案例布局主要分左右两块，分布拖入两个矩形，左侧作为文章目录占位，右侧为文章内容，文章目录通过动态面板设置固定浏览器位置，在动态面板中拖入多个文本标签，列好文章目录章节，并且设置文本标签的交互样式，选中时字体变化，我这里选中时设置字色为#F59A23粗体，默认第一个目录文章标题为选中状态。

 2、第二步就是文章内容，没什么好说的（我这里以之前发表的一篇博客为例）。

 

3、第三步添加整个窗口滚动时的交互，需要根据文章内容各章节元件的Y轴坐标来设置情形条件。

例如章节“一、案例效果”，Y轴坐标是243，那可以设置当窗口滚动的高度大于200时，设置文章目录“一、案例效果”为选中状态。

 4、最后一步很简单，就是给目录的各个章节添加单击时交互，单击某个章节时让窗口滚动到具体元件的位置，可以设置滚动的效果。

 

 

好了，其实通过上面的方式实现文章目录的功能是不是很简单，如果你有更好的方法欢迎评论区留言。

原型下载地址：https://download.csdn.net/download/u010709330/87999508

~~如果觉得本文还不错，对你有帮助，请帮忙点个赞吧！~~