Axure网页怎么制作标签页? Axure标签页设计方法

在设计移动或后台难免遇到需要设计类似于如下图分隔内容上有关联但属于不同类别的数据集合,及tag标签页,这里的设计一般是利用动态面板,今天我们就来看看axure制作标签页的教程。

1、以三个标签为例,拖动三个矩形框作为标签1、标签2、标签3。设置悬停效果字体为浅蓝色,选中效果为字体为浅蓝色,线段为浅蓝色

Axure网页怎么制作标签页? Axure标签页设计方法

2、接着拖动一个矩形作为标签1要放置的内容承载,这里举例直接写标签1了。

Axure网页怎么制作标签页? Axure标签页设计方法

3、接着将其转换成动态面板

Axure网页怎么制作标签页? Axure标签页设计方法

4、双击动态面板,将状态1改为标签1,新增标签2、标签3

Axure网页怎么制作标签页? Axure标签页设计方法

5、分别进入标签2、标签3的状态,为其状态设计要显示的东西,这里举例为标签2、标签3如图

Axure网页怎么制作标签页? Axure标签页设计方法

Axure网页怎么制作标签页? Axure标签页设计方法

6、退出动态面板并将动态面板设置为隐藏

Axure网页怎么制作标签页? Axure标签页设计方法

7、设置交互事件,以标签1为例,单击时显示动态面板,状态为标签1,矩形为选中状态,标签2、标签3同理,单击时显示动态面板,状态为对应状态,对应矩形为选中状态

Axure网页怎么制作标签页? Axure标签页设计方法

8、点击预览,标签页的选择效果出来了,但是出现了选中时,其他标签没变为不选中状态,所以还需利用选项组功能

Axure网页怎么制作标签页? Axure标签页设计方法

9、将标签1、标签2、标签3全部选择,右键选择选项组

Axure网页怎么制作标签页? Axure标签页设计方法

10、然后新建选项组,命名后点击确定

Axure网页怎么制作标签页? Axure标签页设计方法

11、此时再点击预览,就不会出现选中多个的情况了

Axure网页怎么制作标签页? Axure标签页设计方法

以上就是axure制作标签页的教程,希望大家喜欢,请继续关注。