【原创】分享Axure实现侧边栏圆点导航功能

在Axure里实现侧边栏圆点导航功能其实还挺有趣的。首先，你要在侧边栏的位置拖入圆形的元件，可以是圆形的矩形或者直接使用Axure自带的圆形元件。然后给这些圆形元件设置交互样式，比如鼠标悬停时的颜色变化，让用户能有交互反馈。接着，为每个圆点设置一个点击事件，点击后可以跳转到对应的页面或者板块内容。在设置跳转的时候，要注意准确地定位到目标位置，可以使用Axure中的动态面板来进行页面内容的切换，并且将每个页面内容与对应的圆点关联起来。还有，要考虑到导航的选中状态，比如当某个页面被打开时，对应的圆点要显示为已选中的样式，这就需要通过设置变量或者条件判断来实现啦。这样基本就能实现侧边栏圆点导航功能啦。

哟，Axure的侧边栏圆点导航呀。咱先在元件库里找适合的元件来制作圆点，如果没有特别合适的就自己画一个圆形咯。制作好圆点后，把它们放在侧边栏的合适位置。接下来就是关键的交互设置啦。你可以为每个圆点添加一个鼠标单击时的交互动作。这个动作可以是在当前页面内显示相关内容，那就要用到Axure的内联框架或者动态面板。例如，将不同的内容页面放在内联框架中，点击圆点就切换内联框架的源。如果是要跳转到其他页面，那就简单地设置超链接就好啦。而且为了让导航看起来更清晰，还可以给圆点添加一些提示信息，比如鼠标悬停时显示这个圆点对应的板块名称等。

嗨，要在Axure中实现侧边栏圆点导航功能的话。第一步是确定圆点的布局，是垂直排列还是水平排列在侧边栏。确定好后就可以创建这些圆点了。创建时注意给它们命名，方便后续的交互设置。然后就是交互部分啦，在Axure中有专门的交互构建器。对于每个圆点，我们可以设置鼠标点击事件。如果是用于网页导航，点击圆点后可能是跳转到不同的页面板块，那就要设置好页面的超链接。要是在APP原型中，可能是切换到不同的视图或者内容区域。这时候可以借助Axure的母版或者自定义部件功能来提高效率。另外，为了增强用户体验，还可以设置圆点的动画效果，像是点击时的淡入淡出或者缩放效果等。

现在的网站很常见到一个页面占满一屏，鼠标滚动一下即是一屏，同时右下角也有一个侧边栏圆点导航，随页面滑动，切换选中不同的圆点，点击圆点也可跳转到某个位置。
这给人非常大气的感觉，我比较喜欢这种风格，正好最近也在研究Axure，于是打算使用Axure来模拟这种效果。
先放个动图：
本文将分成两个部分来讲解： 1、页面绘制 2、交互设置
首先，根据需要实现页面跳转的部分划分好板块。此例按照4个导航划分为4个板块，如下图：
使用Axure基础元件制作出4个实心圆点和1个箭头圆点，前者对应4个板块，后者表示“回到顶部”。
形状绘制比较简单，分别是由一个空心外圆加一个实心圆点/箭头组合而成的形状，具体过程就不在这里赘述啦~
我们还要设置下圆点被选中时的样式。
先选中外圆，点击“选中”交互样式设置，设置“线段颜色”为橙色（#FF9900）； 再选中内圆，点击“选中”交互样式设置，设置“填充颜色”为橙色（#FF9900）； 如果内圆有设置边框就将线段颜色也修改为同色值。
设置好外圆和内圆的样式后，再将这两个元件进行组合（快捷键ctrl+g），这样就配置完成了一个圆点的交互样式。其他3个圆点和箭头，都可以通过复制这个圆点来快速制作。
为了方便管理，也为了后面的1个关键步骤（先埋个伏笔），此处我们也把这5个圆点转换为“动态面板”吧！（此处省略操作过程10个字）
OK，侧边栏圆点导航就这样搞定啦~~~
需要注意，还有一个关键点，会让我们的设计过程事半功倍。
由于4个圆点对应4个板块，同一时间只会有一个板块被选中，所以对应同一时间也只有一个圆点会被选中。
一般情况下我们需要在某个圆点的“鼠标单击时”事件中， 设置当前元件被选中、设置其他3个元件取消选中 ；如此这般地需要重复4次操作，太繁琐了！
其实有一种更简单的方式，就是“设置选项组”。选项组就类似于Radio控件，具有互斥性——同一时间只能选中一个。
选中4个圆点之后，点击“属性”面板下，找到Group下的“设置选项组名称”，输入后回车即可。
设置鼠标单击时事件：
点击确认，效果如下：
其他3个圆点和箭头的“鼠标单击时”事件，可以通过复制这个圆点的Case1事件，再作粘贴即可。
将各板块都转化为动态面板，并分别命好名。其实不转化为动态面板也是可以的，但是做成动态面板对于页面元件比较多的时候会更好管理板块，跳转定位时也更方便一些。
选择好板块内的所有元件，右键点击“转换为动态面板”就可以了。
转换前：
转换后（已命好名，看起来是不是清爽多了）：
好了，准备工作到此就基本完成了。 下面我们开始重点部分的讲解——交互设置。
我们需要实现的效果主要有两点： 1）点击侧边竖滑动条的圆点时，能跳转定位到对应的板块区域；点击箭头圆点时回到顶部； 2）滚动屏幕时，浏览到某个板块时，侧边栏圆点导航的圆点也会相应被选中；
我们先来实现第一个效果。
选中第一个圆点，双击Case1用例，如下图添加动作“滚动到元件<锚连接>”，元件选择1-panel（由于前面有命好名，在这里就很方便可以找到了）
同理，为其他3个圆点添加同样动作，元件分别设置为跳转到对应板块的动态面板。
到目前为止，我们可以按F5预览一下效果了，点击圆点是不是能够跳转到对应的板块了呢？恭喜恭喜…哈哈…
咦~好像不对，是不是跳转了一下，发现侧边栏圆点导航不见了？
这是因为侧边栏圆点导航是固定在页面的，跳转时页面滚动自然它就不见了。
这时我们需要实现在前面埋下伏笔的关键一步啦——我们在前面提到，要将侧边栏圆点导航转换为动态面板，因为只有动态面板会有一个犇的功能：“固定到浏览器”，可以实现浮动的效果。
位置可以自由设定，这里我设置为固定在右下角。
到这里，已经完成了第一个效果的制作：
下面我们开始第二个效果：页面滚动到某一板块时，对应的圆点会被选中。
这里我们需要思考一下，圆点被选中是一个动作，必须要由一个事件来触发，那这个事件应该是什么？应该是页面滚动事件吧？嗯，对的。我们需要监控到当前是滚动到哪个板块，才能够触发事件。那么关键的问题来了，我们应该怎样监控页面的滚动？
答案就是：建立热区。
在页面合适位置添加一个热区元件，将作为事件触发的一个条件。
有2点需要注意：
我们先单击页面空白处，可以看到有“ 窗口滚动时 ”的事件，
我们先添加一个用例。我们是要实现圆点被选中，所以添加一个动作“设置选中”（强烈建议对圆点命名，便于查找）
这时就要使用到上面建立的热区来监控到达哪个板块——只有当板块到达热区区域时，才会触发事件。在Axure中，是通过给事件用例添加触发条件来实现的。
设置完选中状态后，需要添加一个条件：
其他3个板块也是同样操作，添加1个新用例，添加条件，设置圆点的选中状态。
Demo到此就制作完成啦！
最后……是不是有童鞋发现似乎漏了一个地方——“回到顶部”的功能没有实现呢，哈哈，这是留给大家练练手的啦~
注： 第一次发文，如有地方写得不明白，欢迎拍砖、共同探讨 有需要源文件的童鞋，可以跟我私联 ：-）

哇，Axure做侧边栏圆点导航呀。先从创建圆点开始吧，你可以利用Axure的形状工具绘制出大小合适的圆形。之后，为了让它们看起来更美观，可以调整颜色、边框等样式。对于导航功能的实现，我们要利用交互功能。在Axure里，针对每个圆点创建一个交互用例。当点击圆点时，你可能需要创建一个新的页面或者在现有的页面里展示特定的内容。如果是切换页面，那要设置好页面之间的链接关系。要是在同一页面内展示不同内容，就可以用动态面板啦。把不同的内容放在动态面板的不同状态里，然后让圆点的点击事件来切换动态面板的状态。同时，别忘了设置默认选中的圆点，这可以通过设置初始变量来搞定。

嗨呀，说到Axure实现侧边栏圆点导航功能。首先得设计好侧边栏的整体样式，让圆点能够很好地融入其中。创建圆点的时候，除了考虑形状和颜色，还可以添加一些小图标在圆点心里面，让导航更直观。然后在Axure的交互区域设置交互事件。对于每个圆点，设置点击事件来触发导航动作。如果是有多层级的导航内容，可以通过动态面板的嵌套来实现。比如说，点击一个圆点展开下一级的导航内容，这就需要精心设计动态面板的状态切换逻辑。同时，要注意导航的连贯性，当用户在不同页面或者板块之间切换时，侧边栏圆点的选中状态要准确更新，这就需要合理设置变量和条件判断语句啦。