Axure:用中繼器實現“絲滑”的Tab切換效果

2 評論 1352 瀏覽 1 收藏 7 分鐘

你是否有過這樣的困擾:每次畫原型遇到 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 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 文章介紹很詳細,組件能否發下:191347423@qq.com

    來自安徽 回復
    1. 組件已發送了哈,記得郵箱查收下

      來自福建 回復