中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：本文是針對AxureRP9，如何快速實現(xiàn)Tab選項卡切換設計的小白教程，實現(xiàn)Tab選項卡切換的關鍵點在于記得創(chuàng)建選項組，希望對大家有幫助，我們一起來看一下吧。

一、思路

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

二、步驟

1）在基本元件中找到“矩形”，拖動矩形到頁面面板。

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

3）設置tab的交互樣式，為實現(xiàn)交互效果，可設計不同的“鼠標懸?！?、“鼠標按下”以及“選中”的樣式。

鼠標懸停：

鼠標按下：

選中：

設計完之后，可以選擇頂部的“預覽”功能，以預覽自己設計的效果。

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

5）雙擊動態(tài)面板，進入動態(tài)的狀態(tài)管理頁面。

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

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

狀態(tài)1：

狀態(tài)2：

狀態(tài)3：

8）設計好動態(tài)面板的狀態(tài)后，點擊右上角“關閉”，退出動態(tài)面板設計。

9）接下來是通過交互設計，把各個tab和動態(tài)面板的對應狀態(tài)關聯(lián)起來。

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

選擇“頁面1”，點擊右邊的交互，再點擊“新建交互”。

選擇“單擊時”：

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

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

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

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

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

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

10）接下來設計頂部tab的選中效果，即選擇了對應的頁面后，該頂部tab會一直呈現(xiàn)選中的效果，直到選擇另一個tab。同時，我們設置頁面1為默認選中。

首先，選中三個頁面的矩形，右擊選擇“選項組”。

然后把組名稱設置為“切換Tab“,然后點擊確定。

然后設置每個頁面tab的選中效果。如下圖，點擊“頁面1”矩形，在“單擊時”的交互下點擊“+”號，繼續(xù)插入動作。

插入動作里，選擇“設置選中”。

把選中目標選擇為“當前元件”，并設置“值”到達“真”，然后點擊右下角“完成”。

頁面2和頁面3矩形的操作同上。

最后，我們設置頁面1為默認頁面，頁面1的矩形設置為默認選中。點擊“頁面1”矩形，雙擊打開菜單欄，選擇“選中”。

到此，tab選項卡切換就實現(xiàn)了，我們可以點擊預覽可以看一下效果實現(xiàn)了沒，之后可以再美化一下導航按鈕。

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

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