Axure RP 原型之Tab选项卡

目的

本文是对Axure原型设计之Tab选项卡设计的总结，效果如下：

 

step1 空间区拖入rectangle

 

step2 rectangle区域拖入dynamic panel

step3 动态面板再添加两个状态，加上默认的一个，分别命名为Tab1、Tab2、 Tab3(这里只以3个选项卡为例)

step4 打开Tab1（tab2与tab3一样的操作步骤），拖入rectangle,调整大小作为Tab的头部，输入文字Tab1,鼠标右键调整上部成半角形

setp5 按照step4再做出另两个选项卡头部

 

step6 拖入rectangle，作为选项卡的content部分，一次输入每个tab页需要显示的内容

step7 对每个Tab添加onClick事件。选择Tab1,选择set panel state to state,select the state 中选中Tab1(其他两个一样的操作步骤)

step8 按照step的步骤给另两个添加onClick事件，然后依处理Tab2和Tab3

step9 处理一些细节。看到没，当我们点击每一个Tab标签的时候，标签头部的线条都没变化，我们得让被点击的Tab标签头部的线“压”下去。处理的方式是选择被点

击的Tab标签头部，右击Order->brint to front

step10 给你的Tab标签添加颜色，让他们动起来。选择标签头部，颜色填充区选择线性渐变。选择什么颜色，随心所欲吧