Axure如何实现标签切换功能

相信大家在日常的原型绘制工作中，经常会遇到实现标签切换的功能，比如app的底部菜单切换

再比如，顶部的标签页切换，如下图

那么如何实现以上效果呢，首先毋庸置疑，当然是使用axure中万能的动态面板来实现不同页面内容的切换（当然不建议大家使用跳转不同页面或者点击不同按钮控制不同内容的显示和隐藏），以下方法是建立在使用动态面板的前提下进行绘制的，好了，废话不多说，直接上干货

步骤一、添加标签

拖入矩形，将矩形的外边框去掉，这个的目的是为了后续有一个好看的展示效果，毕竟正常的标签页切换都是没有外层边框的

 步骤二、编辑标签的选中效果

这里以选中时，文字底部展示下划线为例，首先编辑该矩形的选中效果，设置为选中时，展示底部边框

 步骤三、设置标签的选中交互事件

即当点击该标签时，选中当前标签

  步骤四、复制改标签，并组件选项组

为什么先把前三步操作完了再复制，目的就是由于他们的选中效果和交互时间都是一样的，所以这样做会节省时间

 选中所有的标签，右击后选择设置选项组，将这三个标签归为一个选项组，因为这类标签都是单选的，故通过选项组直接就可以实现只选择其中一个，而不用去设置选中第一个，第二个和第三个取消选中类似的交互。同时记得把标签一设置为默认选中的效果，这样查看原型时，标签一就是默认选中的效果。

 步骤五、拖入动态面板

 拖入动态面板后，双击进行动态面板的编辑，新建3个状态，分别在各个状态中绘制对应的内容

 

 步骤六、编辑标签的交互效果

选中标签一、编辑点击标签时设置动态面板的状态为对应的标签一状态

同样选中标签二，编辑点击标签时设置动态面板的状态为对应的标签二的状态

 选中标签三，编辑点击标签时设置动态面板的状态为对应的标签三的状态

 

到这里咱们的功能就已经实现了，来大家可以看一下效果 

 

  更多精彩分享内容请访问我的官网：文拾沐译产品经理导航