Axure9教学之TAB切换面板

  • 今天我们来学习一下如何使用Axure9制作TAB切换面板
  • 我们首先来看一下效果图

     
    Axure9教学之TAB切换面板_第1张图片
    tab切换.gif
  • 接下来我们来具体说明制作过程
  • 第一步,新建一个矩形tab1(大小自己调),如图

     
    Axure9教学之TAB切换面板_第2张图片
    tab1.png
  • 第二步,加效果,右键-交互样式-禁用-填充颜色(改为红色)
    Axure9教学之TAB切换面板_第3张图片
    交互样式.png
  • 给矩形加事件,新建交互-选中-设置选中
    Axure9教学之TAB切换面板_第4张图片
    选中.png
  • 复制矩形两个,其名为tab2、tab3,并右键选择选项组
    Axure9教学之TAB切换面板_第5张图片
    选项组.png
  • 第三部,拖动一个动态面板,并双击添加两个状态

     
    Axure9教学之TAB切换面板_第6张图片
    状态面板.png
  • 双击进入State1面板,编辑tab1的内容,同样做法另外两个面板
    Axure9教学之TAB切换面板_第7张图片
    State1面板.png
  • 第四部,给tab1添加事件,新建交互-单击时-设置面板状态,tab2、tab3同样做法
    Axure9教学之TAB切换面板_第8张图片
    State1面板.png
     
    Axure9教学之TAB切换面板_第9张图片
    State2面板.png
     
    Axure9教学之TAB切换面板_第10张图片
    State3面板.png
  • 大功告成,点击预览按钮,便可在浏览器中预览效果

     
    Axure9教学之TAB切换面板_第11张图片
    预览.png
     

    好了,今天的分享就到这里了!
    愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。

     
    7861972-c15692bc3ce6fc3a.jpg
    小晴天

你可能感兴趣的:(Axure,交互,ui,css3,html5)