【工具篇】Axure工具制作下拉框选项跳转页面

早上同事突然问到这个问题，就来简单写下这个。

思路一：运用axure原下拉控件，尝试后发现只能实现动态选项切换，不能实现页面跳转，因此弃用原控件。

思路二：自己制作下拉框，下拉选项设置为动态面板，以点击显示和隐藏动态面板来实现下拉框效果；然后对单独的下拉选项添加点击跳转页面动态效果。

1.制作下拉输入框——用形状工具制作

2.制作下拉选项——用形状工具制作

3.将下拉选项转换为动态面板

4.添加显示隐藏下拉选项动态 *** 作

5.将下拉选项动态面板设置为隐藏状态

这里可能有些人会问，为什么要设置为隐藏状态？那是因为我们在实际应用中，下拉选项是看不到的，只有点击输入框才会出现的。

勾选隐藏选项后，隐藏后就变成了下面这个样子。

6.给下拉选项添加页面跳转

就此搞定

附上GIF动态图

PS：Axure文件动态效果是挺强大的，但是对于低保真原型图，忌讳过于严密复杂的动态效果，防止在需求变更时，带来大量的工作量，导致整个团队合作不够高效。

如更多的是做移动端的原型，现在有大批量的软件出现，可以尝试，例如墨刀、pop、mockplus等

axure做出类似百度经验的左侧栏的效果，步骤：1、制作页面为了体现效果，需要做一个比较高）的页面，在Axure工作区中拖入4个矩形，分别为顶部标题、菜单、页面内容、底部。设置矩形宽度和高度，让其看起来像是一个页面布局；2、制作随页面滚动的标题为了让效果更加明显，将标题进行区别设置，设置矩形背景色为黄色，也可以通过设置其他属性来进行区别。将标题命名为“标题1”；3、制作固定的标题滚动中固定在顶部的标题并非页面上的标题，是单独制作的。复制“标题1”，将复制的标题命名为“标题2”，设置“标题2”x坐标等于“标题1”的x坐标，y坐标等于0。修改“标题2”背景色为蓝色；4、制作固定的标题右键单击“标题2”，点击“转换为动态面板”，将动态面板命名为“固定菜单”，在元件属性与样式中点击“固定到浏览器”勾选“固定到浏览器窗口”，完成后隐藏动态面板；5、制作固定锚点在工作区中拖入一个动态面板，设置其x和y坐标等于0，调整其宽度和高度分别为60和20，将动态面板命名为“固定锚点”，设置其固定到浏览器；6、制作滚动锚点在工作区中拖入一个热区，设置其x坐标等于0，y坐标等于“菜单1”的y坐标加上固定锚点的高度，设置其宽度等于固定锚点的宽度，高度直接拖动到页面底部，命名为“滚动锚点”；7、设置交互打开页面交互面板，双击“窗口滚动时”事件，添加条件“元件范围 滚动锚点 接触到 元件范围 固定锚点”，确定，设置动作为“显示 固定菜单”。继续在“窗口滚动时”事件上添加动作，添加条件“元件范围 滚动锚点 未接触 元件范围 固定锚点”，确定，设置动作为“隐藏 固定菜单”；8、预览效果

---