你是否有過這樣的困擾：每次畫原型遇到 Tab 類型的時候，都需要給每個 Tab 标簽按鈕設定點選效果後，才能使下方的動态面闆進行切換？這裡給你推薦一種方案，利用中繼器實作“絲滑”的 Tab 切換效果。
預覽位址：https://v4qyac.axshare.com
一、初步準備
先準備一個中繼器，将中繼器的布局改為水準（如圖）。
然後在中繼器的下方加入一個動态面闆。本次效果共需要3個狀态，可分别在每個動态面闆中增加一行文字（Tab_1、Tab_2、Tab_3）用于後續确認切換效果的完成度（如圖）。
在中繼器中，将預設列的名稱改為name，并增加 select、Tab_number 兩列。
中繼器内的資料根據下方截圖進行添加（如圖）。
name 為标簽頁的名稱、select 用于設定Tab項的選中狀态（預設首選項為選中狀态）、Tab_number 用于切換動态面闆。
二、互動設計
1. 點選效果的設定
輕按兩下中繼器，将中繼器中的矩形設定為100*32、去掉邊框、字型大小改為16、字型顔色改為灰色（用于跟選中效果進行區分），并為矩形增加元件選中的互動樣式，将字色設定為黑色（如圖）。
選擇的Tab項是否為選中狀态由中繼器中的 select 值判斷，是以在點選每個項時，都需要去更新修改select 的值：
- 為矩形添加單擊時，中繼器更新行的動作（屬性為：已标記、select 列、值為0），因為每次僅有一個Tab可以被選中，是以需要先将select 中的值清空；
- 重新為目前項的 select 指派，繼續增加中繼器更新行的動作（屬性為：目前、select 列、值為1）（如圖）；
做到這一步，就算是初步完成了點選時的效果了。當然，現在進行預覽還看不到實際效果。接下來我們繼續優化。
2. 将目前項設定為選中狀态
前面提到過，是否是選中的狀态，交由中繼器中的 select 值進行判斷，是以接下來就要設定中繼器的互動。
因為每項在加載時，我們就要了解該項是否為選中狀态，是以這裡要使用每項加載的事件：
先來設定選中的狀态，為每項加載事件增加一個情形：當 select 的值為1時，才執行的動作（如圖）。
這樣我們便得到了加載到 select 值為“1”時的項，接着為該項設定 标記行（目标：目前中繼器、行：目前）、設定文本内容為 [[Item.name]]、設定選中矩形為“真”（如圖）；
再來設定未選中的狀态，為每項加載事件再增加一個情形：當 select 值為“0”時，才執行的動作（如圖），當然，這次情形裡的條件也是可以不用設定的。
接着為值為“0”的項設定動作：标記行（目标：目前中繼器、行：目前）、設定文本内容為 [[Item.name]]、設定選中矩形為“假”（如圖）；
到這裡，便得到了一個跟随點選，可以切換點選效果的 Tab标簽了，但是我們可以看到下方的動态面闆還為進行切換，接下來繼續設定。
3. 動态面闆切換
動态面闆需要跟随每次的點選效果，進行狀态的切換。那麼回到矩形的單擊事件上，添加設定面闆狀态動作（目标：動态面闆、值：[[Item.Tab_number]]）（如圖）；
到此，我們就算是完成了利用中繼器實作Tab切換效果了。
将這種方案儲存為自己的元件庫，後續再遇到 Tab切換相關的原型設計時，可以修改下矩形的大小、項的數量、動态面闆的大小後便可以直接使用，再也不用為為按鈕設定點選切換動态面闆的工作啦！
示範的效果中，我增加了一個橫條跟随點選移動的效果。有想了解橫條移動效果的實作或者想下載下傳這個元件的，可以在文末進行留言。
本文由 @阿幸 原創釋出于人人都是産品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。