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

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

首先分析下制作思路

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

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


具体步骤

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

形状工具
下拉框输入框

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




【工具篇】Axure工具制作下拉框选项跳转页面_第1张图片
下拉选项

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


【工具篇】Axure工具制作下拉框选项跳转页面_第2张图片
转换为动态面板


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


【工具篇】Axure工具制作下拉框选项跳转页面_第3张图片
显示隐藏下拉动态设置

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

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

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


【工具篇】Axure工具制作下拉框选项跳转页面_第4张图片
动态面板隐藏状态

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


【工具篇】Axure工具制作下拉框选项跳转页面_第5张图片
动态链接添加


就此搞定

附上GIF动态图


【工具篇】Axure工具制作下拉框选项跳转页面_第6张图片
GIF动态图


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

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

你可能感兴趣的:(【工具篇】Axure工具制作下拉框选项跳转页面)