观看记录
  • 我的观影记录
登录
测试首页Axure标签页设计方法

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.jpgb7003af33a87e950f80944001f385343fbf2b444.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

“Axure标签页设计方法”关联的文章

切换深色外观
留言
视频编辑修改
回到顶部
首页
手机数码
医疗健康
金融管理
社交情感
无名