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

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

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

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

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

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

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

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

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

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

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

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

就此搞定

附上GIF动态图

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

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

要求：需要设计两个下拉框，第一个显示省份的名称，第二个根据选择的省份显示某省的城市。

如第一个中有浙江省、江苏省、福建省；第二个中有杭州市和宁波市、南京市和苏州市、福州市和厦门市；若选择江苏省，则第二个下拉框只能选择南京市和苏州市。

首先创建省份的下拉框，并设置三个省份

然后利用动态面板，设置三个state，分别对应这三个省份。

state1-浙江省；state2-江苏省；state3-福建省

然后在每个state中放入下拉框：

添加完成后，回到主页面，在省份的那个下拉框上设置交互：选项改变时的交互

点击 新增条件，这里需要先表示选择下拉框中选中浙江省，才能设置动态面板的状态为state1

同样处理状态2和3

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、预览效果

---