編輯導(dǎo)語(yǔ)：本文是針對(duì)AxureRP9，如何快速實(shí)現(xiàn)Tab選項(xiàng)卡切換設(shè)計(jì)的小白教程，實(shí)現(xiàn)Tab選項(xiàng)卡切換的關(guān)鍵點(diǎn)在于記得創(chuàng)建選項(xiàng)組，希望對(duì)大家有幫助，我們一起來(lái)看一下吧。

一、思路

1. 有幾個(gè)選項(xiàng)Tab，就設(shè)計(jì)幾個(gè)選項(xiàng)Tab。
2. 通過(guò)動(dòng)態(tài)面板設(shè)計(jì)實(shí)現(xiàn)內(nèi)容頁(yè)面切換。
3. 設(shè)計(jì)Tab按鈕的交互設(shè)計(jì)，綁定到對(duì)應(yīng)的動(dòng)態(tài)面板，實(shí)現(xiàn)動(dòng)態(tài)按鈕的狀態(tài)切換。
4. 設(shè)計(jì)Tab選項(xiàng)組，設(shè)置選中效果，實(shí)現(xiàn)Tab的選中切換效果。

二、步驟

1）在基本元件中找到“矩形”，拖動(dòng)矩形到頁(yè)面面板。

2）復(fù)制多兩個(gè)矩形，分別命名為“頁(yè)面1”、“頁(yè)面2”、“頁(yè)面3”，并設(shè)置成自己喜歡的樣式。

3）設(shè)置tab的交互樣式，為實(shí)現(xiàn)交互效果，可設(shè)計(jì)不同的“鼠標(biāo)懸停”、“鼠標(biāo)按下”以及“選中”的樣式。

鼠標(biāo)懸停：

鼠標(biāo)按下：

選中：

設(shè)計(jì)完之后，可以選擇頂部的“預(yù)覽”功能，以預(yù)覽自己設(shè)計(jì)的效果。

4）在基本元件中找到“動(dòng)態(tài)面板”，拖拽到頁(yè)面面板，設(shè)計(jì)適合的尺寸，并將其命名為“頁(yè)面內(nèi)容”。

5）雙擊動(dòng)態(tài)面板，進(jìn)入動(dòng)態(tài)的狀態(tài)管理頁(yè)面。

6）點(diǎn)擊“state1”，把其改成“狀態(tài)1”，并添加兩個(gè)狀態(tài)，分別命名為“狀態(tài)2”、“ 狀態(tài)3”。

7）點(diǎn)擊“狀態(tài)1”，并放置在點(diǎn)擊“頁(yè)面1 ”tab的時(shí)候想要呈現(xiàn)的內(nèi)容?！盃顟B(tài)2”和“狀態(tài)3”操作邏輯同樣。

狀態(tài)1：

狀態(tài)2：

狀態(tài)3：

8）設(shè)計(jì)好動(dòng)態(tài)面板的狀態(tài)后，點(diǎn)擊右上角“關(guān)閉”，退出動(dòng)態(tài)面板設(shè)計(jì)。

9）接下來(lái)是通過(guò)交互設(shè)計(jì)，把各個(gè)tab和動(dòng)態(tài)面板的對(duì)應(yīng)狀態(tài)關(guān)聯(lián)起來(lái)。

頁(yè)面1&狀態(tài)1：

選擇“頁(yè)面1”，點(diǎn)擊右邊的交互，再點(diǎn)擊“新建交互”。

選擇“單擊時(shí)”：

選擇元件動(dòng)作組里的“設(shè)置面板狀態(tài)”：

如下圖所示，把目標(biāo)面板選擇為“頁(yè)面內(nèi)容”，把state（狀態(tài)）選擇為“狀態(tài)1”，然后點(diǎn)擊右下角“確定”按鈕。

頁(yè)面2&狀態(tài)2：

頁(yè)面2操作一樣，把目標(biāo)面板選擇為“頁(yè)面內(nèi)容”，把state（狀態(tài)）選擇為“狀態(tài)2”，然后點(diǎn)擊右下角“確定”按鈕。

頁(yè)面3&狀態(tài)3：

頁(yè)面3操作一樣，把目標(biāo)面板選擇為“頁(yè)面內(nèi)容”，把state（狀態(tài)）選擇為“狀態(tài)3”，然后點(diǎn)擊右下角“確定”按鈕。

10）接下來(lái)設(shè)計(jì)頂部tab的選中效果，即選擇了對(duì)應(yīng)的頁(yè)面后，該頂部tab會(huì)一直呈現(xiàn)選中的效果，直到選擇另一個(gè)tab。同時(shí)，我們?cè)O(shè)置頁(yè)面1為默認(rèn)選中。

首先，選中三個(gè)頁(yè)面的矩形，右擊選擇“選項(xiàng)組”。

然后把組名稱設(shè)置為“切換Tab“,然后點(diǎn)擊確定。

然后設(shè)置每個(gè)頁(yè)面tab的選中效果。如下圖，點(diǎn)擊“頁(yè)面1”矩形，在“單擊時(shí)”的交互下點(diǎn)擊“+”號(hào)，繼續(xù)插入動(dòng)作。

插入動(dòng)作里，選擇“設(shè)置選中”。

把選中目標(biāo)選擇為“當(dāng)前元件”，并設(shè)置“值”到達(dá)“真”，然后點(diǎn)擊右下角“完成”。

頁(yè)面2和頁(yè)面3矩形的操作同上。

最后，我們?cè)O(shè)置頁(yè)面1為默認(rèn)頁(yè)面，頁(yè)面1的矩形設(shè)置為默認(rèn)選中。點(diǎn)擊“頁(yè)面1”矩形，雙擊打開(kāi)菜單欄，選擇“選中”。

到此，tab選項(xiàng)卡切換就實(shí)現(xiàn)了，我們可以點(diǎn)擊預(yù)覽可以看一下效果實(shí)現(xiàn)了沒(méi)，之后可以再美化一下導(dǎo)航按鈕。

本文由 @糖芽 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議