Axure RP 原型之Tab选项卡

目的

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

Axure RP 原型之Tab选项卡_第1张图片Axure RP 原型之Tab选项卡_第2张图片Axure RP 原型之Tab选项卡_第3张图片

 

step1 空间区拖入rectangle

Axure RP 原型之Tab选项卡_第4张图片

 

step2 rectangle区域拖入dynamic panel

Axure RP 原型之Tab选项卡_第5张图片

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

Axure RP 原型之Tab选项卡_第6张图片

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

Axure RP 原型之Tab选项卡_第7张图片

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

Axure RP 原型之Tab选项卡_第8张图片

 

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

Axure RP 原型之Tab选项卡_第9张图片

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

Axure RP 原型之Tab选项卡_第10张图片

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

Axure RP 原型之Tab选项卡_第11张图片

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

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

Axure RP 原型之Tab选项卡_第12张图片

Axure RP 原型之Tab选项卡_第13张图片

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

Axure RP 原型之Tab选项卡_第14张图片

 

 

 

你可能感兴趣的:(Axure,原型设计,tab标签,tab标签,Web原型)