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

Axure网页怎么制作标签页? Axure标签页设计方法,第1张

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

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

原型设计工具Axure RP Pro 8.1特别版 中文汉化特别版(附汉化包+注册码+安装教程)

  • 类型:辅助设计
  • 大小:90.5MB
  • 语言:简体中文
  • 时间:2018-05-24
查看详情

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐:

Axure网页怎么设置横向标签页效果?

axure怎么制作页面标签切换的效果?

Axure怎么制作点击即可删除Tag标签动效?

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/1348124.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-13
下一篇 2022-06-13

发表评论

登录后才能评论

评论列表(0条)

保存