Axure RP Pro 7.0怎么制作Tab標(biāo)簽效果?

發(fā)布時(shí)間：2016-08-14 16:40:39 作者：佚名

Axure RP Pro 7.0怎么制作Tab標(biāo)簽效果？Axure經(jīng)常用于網(wǎng)頁原型設(shè)計(jì)，今天我們就來看看使用Axure設(shè)置Tab標(biāo)簽效果的教程，需要的朋友可以參考下

Axure RP Pro 能幫助網(wǎng)站需求設(shè)計(jì)者，快捷而簡便的創(chuàng)建基于網(wǎng)站構(gòu)架圖的帶注釋頁面示意圖、操作流程圖、以及交互設(shè)計(jì)，并可自動(dòng)生成用于演示的網(wǎng)頁文件和規(guī)格文件，從而可以將產(chǎn)品人員的想法快速準(zhǔn)確的傳遞給開發(fā)人員。本文將分步向大家介紹如何使用 Axure RP Pro 7.0創(chuàng)建Tab標(biāo)簽效果。最終效果如下所示：

1、向頁面內(nèi)添加一個(gè)動(dòng)態(tài)面板，如圖：

2、右鍵單擊動(dòng)態(tài)面板 - 管理面板狀態(tài) - 管理面板狀態(tài)管理，給面板命名為主頁，并定義三種狀態(tài)，Tab1，如圖：

3、部件管理 - 主頁 - Tab1，右鍵“編輯”，在Tab1中添加兩個(gè)矩形，如圖:

4、調(diào)節(jié)矩形大小，使得小的矩形和大矩形在一起的部分重合，再右鍵“標(biāo)簽1” - 順序 - 置于頂層，設(shè)置小矩形置頂，大矩形置底；右鍵“標(biāo)簽1”- 選擇形狀 - 頂部矩形，如圖：

5、添加多個(gè)標(biāo)簽，復(fù)制“標(biāo)簽1”，重命名“標(biāo)簽2”，“標(biāo)簽3”，右鍵“標(biāo)簽2”- 選擇形狀 - 矩形，選中“標(biāo)簽2”填充顏色；“標(biāo)簽3”同樣，如圖：

6、添加交互動(dòng)作，此處以添加單擊為例，選中“標(biāo)簽1”，在“部件交互和注釋”- “交互” - 雙擊 “鼠標(biāo)單擊時(shí)”彈出窗口，在“動(dòng)態(tài)面板”- 單擊“設(shè)置面板狀態(tài)”，在“第四部：配置動(dòng)作”中勾選“主頁（動(dòng)態(tài)面板）”，如需調(diào)整標(biāo)簽在“選擇狀態(tài)”中選擇，此處我沒有添加多個(gè)標(biāo)簽，下一步詳細(xì)講解，如圖：

7、類似步驟2，在動(dòng)態(tài)面板編輯界面，右鍵單擊動(dòng)態(tài)面板 - 管理面板狀態(tài) - 管理面板狀態(tài)管理，單擊選中“Tab1”，點(diǎn)擊復(fù)制，然后重命名“Tab2”、“Tab3”；重復(fù)步驟4和步驟5，修改“標(biāo)簽2”，“標(biāo)簽3”，如圖：

8、重復(fù)步驟6，首先在狀態(tài)“Tab1”中，給“標(biāo)簽2”，“標(biāo)簽3”也添加動(dòng)作。重復(fù)此步驟在裝“Tab2”、“Tab3”中，也給“標(biāo)簽2”，“標(biāo)簽3”也添加動(dòng)作，在這里要提一下，接的修改“標(biāo)簽1”的動(dòng)作狀態(tài)調(diào)整到“Tab1”，到這一步就完成了。