平時我們在玩手機時，進入某一個APP，基本上都有選項卡切換功能，作為剛踏入產(chǎn)品行業(yè)的人或者是初級產(chǎn)品經(jīng)理來說，可能我們會不禁要問，咦~這個功能我怎么在我的原型圖上去實現(xiàn)呢？

別急，我們先來看看如下動圖，就是你需要的效果，實際操作自己繪制見以下詳細流程解讀。

選項卡切換制作詳細步驟解讀如下：

一、前期準備

1.拖拽三個大小一樣的矩形文本框，分別輸入文字及命名。

2.拖拽動態(tài)面板置手機模型中并命名，新建三個state，分別在三個state放入圖片并命名以此區(qū)分。

分析：選中每個選項卡，對應(yīng)有一個背景顏色及字體的變化，且選中選項卡同時要切換到對應(yīng)動態(tài)面板中的內(nèi)容。

二、步驟分解

1. 選中三個選項卡，右擊設(shè)置【交互樣式】，選中時改變背景顏色及字體；由于選中一個選項卡，其他兩個不能被選中，所以需要把三個選項卡設(shè)置為一個組且同時命名；當載入時第一個選項卡是被【選中】，故選中第一個選項卡，在右邊【屬性】菜單中【頁面引用】√上【選中】即可。

2. 切換選項卡的同時，需顯示對應(yīng)選卡的該顯示的內(nèi)容。

第一個選項卡：選中選項卡，設(shè)置【鼠標單擊時】事件，添加動作為【設(shè)置面板動態(tài)】，選擇狀態(tài)：value，狀態(tài)名稱或序號[[This.text]]，主要時為了獲取選項卡動態(tài)值；設(shè)置動畫：向右滑動，及動畫時間。

這還沒完哦，這是只是設(shè)置單擊時的一個狀態(tài)，單擊后就是需要選中當前的動態(tài)面板了，所以這里我們還需要設(shè)置【選中】元件是，勾選右邊【當前元件】，設(shè)置選中狀態(tài)的值為：Ture。

第二個選項卡：分析：第一步操作其實和第一個選項卡步驟一樣差不多，不一樣的是，第二個選項卡需要做判斷，因為它是處于第一個和第三個之間，若是單擊第三個選項卡時，那動態(tài)面板中的state圖片應(yīng)該是向滑動切換；若是單擊第一個選項卡時，動態(tài)面板中的state圖片應(yīng)該是左滑動切換。

步驟：選中選項卡，設(shè)置【鼠標單擊時】事件，編輯條件判斷，【選擇狀態(tài)】為第一個選項卡時，等于值為：Ture——》設(shè)置面板動態(tài)，勾選動態(tài)面板，選擇狀態(tài)：value，狀態(tài)名稱或序號[[This.text]]，動畫向左滑動——》設(shè)置【選中】元件，√選當前元件，值：Ture

第三個選項卡，實現(xiàn)流程和第一個選項卡步驟一樣，唯一的不同是，進入/退出動畫修改為：向左滑動即可。

以上就是整個動態(tài)選項卡切換的全部實現(xiàn)步驟，是不是很詳細啊，只要你動手做了，就肯定會。這只是最最最基礎(chǔ)的，若是想進階產(chǎn)品，還需要自己勤學苦練，勤于思考。

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

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