Axure标签页设计方法

在设计移动或后台不免碰到需要设计近似于如下图分隔内容上有联系关系但属于分歧类此外数据调集,及tag标签页,这里的设计一般是操纵动态面板,以下为设计方式。

东西/原料

  • Axure 9

方式/步调

  1. 1

    以三个标签为例,拖动三个矩形框作为标签1、标签2、标签3

    设置悬停结果字体为浅蓝色

    选中结果为字体为浅蓝色,线段为浅蓝色

    f31fbe096b63f624d3098c6f8844ebf81a4ca302.jpg
  2. 2

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

    f603918fa0ec08faf160a7cb56ee3d6d55fbda7e.jpg
  3. 3

    接着将其转换当作动态面板

    d8f9d72a6059252d15b7a9683b9b033b5bb5b93e.jpg
  4. 4

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

    9a504fc2d56285351274664d9fef76c6a6ef63c2.jpg
  5. 5

    别离进入标签2、标签3的状况,为其状况设计要显示的工具,这里举例为标签2、标签3如图

    023b5bb5c9ea15cef1b85765b9003af33a87b20c.jpg b7003af33a87e950f80944001f385343fbf2b444.jpg
  6. 6

    退出动态面板并将动态面板设置为埋没

    b58f8c5494eef01f3ea1afa9effe9925bc317d20.jpg
  7. 7

    设置交互事务,以标签1为例,单击时显示动态面板,状况为标签1,矩形为选中状况

    标签2、标签3同理,单击时显示动态面板,状况为对应状况,对应矩形为选中状况

    2cf5e0fe9925bc315409b7f451df8db1cb137001.jpg
  8. 8

    点击预览,标签页的选择结果出来了,可是呈现了选中时,其他标签没变为不选中状况,所以还需操纵选项组功能

    c83d70cf3bc79f3dd6ca555cb5a1cd11728b29b6.jpg
  9. 9

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

    8718367adab44aed52a10f88bc1c8701a08bfbeb.jpg
  10. 10

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

    8435e5dde71190ef813923b3c11b9d16fcfa6098.jpg
  11. 11

    此时再点击预览,就不会呈现选中多个的环境了

    6159252dd42a28348bfe866754b5c9ea15cebf06.jpg
  • 发表于 2019-12-19 23:06
  • 阅读 ( 791 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

0 篇文章

作家榜 »

  1. xiaonan123 189 文章
  2. 汤依妹儿 97 文章
  3. luogf229 46 文章
  4. jy02406749 45 文章
  5. 小凡 34 文章
  6. Daisy萌 32 文章
  7. 我的QQ3117863681 24 文章
  8. 华志健 23 文章

联系我们:uytrv@hotmail.com 问答工具