现在的网站很常见到一个页面占满一屏，鼠标滚动一下即是一屏，同时右下角也有一个侧边栏圆点导航，随页面滑动，切换选中不同的圆点，点击圆点也可跳转到某个位置。

这给人非常大气的感觉，我比较喜欢这种风格，正好最近也在研究Axure，于是打算使用Axure来模拟这种效果。

先放个动图：

我是Demo

本文将分成两个部分来讲解：
1、页面绘制
2、交互设置

一、页面绘制

1. 画出页面板块

首先，根据需要实现页面跳转的部分划分好板块。此例按照4个导航划分为4个板块，如下图：

整体效果图

2. 制作侧边栏圆点导航

使用Axure基础元件制作出4个实心圆点和1个箭头圆点，前者对应4个板块，后者表示“回到顶部”。

形状绘制比较简单，分别是由一个空心外圆加一个实心圆点/箭头组合而成的形状，具体过程就不在这里赘述啦~

侧边栏圆点导航效果图

我们还要设置下圆点被选中时的样式。

先选中外圆，点击“选中”交互样式设置，设置“线段颜色”为橙色（#FF9900）；
再选中内圆，点击“选中”交互样式设置，设置“填充颜色”为橙色（#FF9900）；
如果内圆有设置边框就将线段颜色也修改为同色值。

设置外圆样式 设置外圆样式 设置内圆样式

设置好外圆和内圆的样式后，再将这两个元件进行组合（快捷键ctrl+g），这样就配置完成了一个圆点的交互样式。其他3个圆点和箭头，都可以通过复制这个圆点来快速制作。

为了方便管理，也为了后面的1个关键步骤（先埋个伏笔），此处我们也把这5个圆点转换为“动态面板”吧！（此处省略操作过程10个字）

OK，侧边栏圆点导航就这样搞定啦~~~

需要注意，还有一个关键点，会让我们的设计过程事半功倍。

由于4个圆点对应4个板块，同一时间只会有一个板块被选中，所以对应同一时间也只有一个圆点会被选中。

一般情况下我们需要在某个圆点的“鼠标单击时”事件中，设置当前元件被选中、设置其他3个元件取消选中；如此这般地需要重复4次操作，太繁琐了！

其实有一种更简单的方式，就是“设置选项组”。选项组就类似于Radio控件，具有互斥性——同一时间只能选中一个。

选中4个圆点之后，点击“属性”面板下，找到Group下的“设置选项组名称”，输入后回车即可。

设置侧边栏导航为选项组

设置鼠标单击时事件：

添加动作-设置选中状态

点击确认，效果如下：

添加鼠标单击事件

其他3个圆点和箭头的“鼠标单击时”事件，可以通过复制这个圆点的Case1事件，再作粘贴即可。

3. 制作板块跳转

将各板块都转化为动态面板，并分别命好名。其实不转化为动态面板也是可以的，但是做成动态面板对于页面元件比较多的时候会更好管理板块，跳转定位时也更方便一些。

选择好板块内的所有元件，右键点击“转换为动态面板”就可以了。

操作-转换为动态面板

转换前：

页面元件界面-转换前

转换后（已命好名，看起来是不是清爽多了）：

页面元件界面-转换后

二、交互设置

好了，准备工作到此就基本完成了。
下面我们开始重点部分的讲解——交互设置。

我们需要实现的效果主要有两点：
1）点击侧边竖滑动条的圆点时，能跳转定位到对应的板块区域；点击箭头圆点时回到顶部；
2）滚动屏幕时，浏览到某个板块时，侧边栏圆点导航的圆点也会相应被选中；

1. 侧边栏导航的点击跳转效果

我们先来实现第一个效果。

选中第一个圆点，双击Case1用例，如下图添加动作“滚动到元件<锚连接>”，元件选择1-panel（由于前面有命好名，在这里就很方便可以找到了）

设置滚动效果

同理，为其他3个圆点添加同样动作，元件分别设置为跳转到对应板块的动态面板。

到目前为止，我们可以按F5预览一下效果了，点击圆点是不是能够跳转到对应的板块了呢？恭喜恭喜…哈哈…

咦~好像不对，是不是跳转了一下，发现侧边栏圆点导航不见了？

这是因为侧边栏圆点导航是固定在页面的，跳转时页面滚动自然它就不见了。

这时我们需要实现在前面埋下伏笔的关键一步啦——我们在前面提到，要将侧边栏圆点导航转换为动态面板，因为只有动态面板会有一个犇的功能：“固定到浏览器”，可以实现浮动的效果。

设置侧边栏固定位置

位置可以自由设定，这里我设置为固定在右下角。

设置-固定到浏览器

到这里，已经完成了第一个效果的制作：

整体效果

2. 页面滚动效果制作

下面我们开始第二个效果：页面滚动到某一板块时，对应的圆点会被选中。

这里我们需要思考一下，圆点被选中是一个动作，必须要由一个事件来触发，那这个事件应该是什么？应该是页面滚动事件吧？嗯，对的。我们需要监控到当前是滚动到哪个板块，才能够触发事件。那么关键的问题来了，我们应该怎样监控页面的滚动？

答案就是：建立热区。

在页面合适位置添加一个热区元件，将作为事件触发的一个条件。

添加一个热区作为触发条件

有2点需要注意：

1. 与竖滑动条类似，热区也是需要固定在浏览器的某个位置，不可以由于页面滚动而消失，因此也需要转换为一个动态面板。
2. 热区位置，与板块区域的高度有关。如果放在浏览器顶部区域，而板块高度不高无法接触到热区，则无法触发事件。

我们先单击页面空白处，可以看到有“窗口滚动时”的事件，

为页面添加动作-窗口滚动时

我们先添加一个用例。我们是要实现圆点被选中，所以添加一个动作“设置选中”（强烈建议对圆点命名，便于查找）

添加用例-设置选中

这时就要使用到上面建立的热区来监控到达哪个板块——只有当板块到达热区区域时，才会触发事件。在Axure中，是通过给事件用例添加触发条件来实现的。

设置完选中状态后，需要添加一个条件：

为用例添加条件

其他3个板块也是同样操作，添加1个新用例，添加条件，设置圆点的选中状态。

“窗口滚动时”事件的用例设置

Demo到此就制作完成啦！

最后……是不是有童鞋发现似乎漏了一个地方——“回到顶部”的功能没有实现呢，哈哈，这是留给大家练练手的啦~

---

注：
第一次发文，如有地方写得不明白，欢迎拍砖、共同探讨
有需要源文件的童鞋，可以跟我私联 ：-）