标簽頁是一種選項卡切換組件，分隔内容上有關聯但屬于不同類别的數據集合，提供平級的區域将大塊内容進行收納和展現，保持界面整潔。各選項卡下面的内容從物理上都從屬于一個頁面的大容器當中，他們都對應同一個頁面訪問地址。

table标簽頁的應用場景非常廣泛，無論是将複雜的信息進行分類處理，還是不同類别的功能進行分類設計，都可以使用标簽頁組件。如果我們細心觀察，會發現很多互聯網産品都使用了标簽頁設計，無論是傳統的PC網頁還是移動端的界面設計都在使用标簽設計。頭條号的PC後台和知乎App的首頁都使用标簽頁的設計方式。

演示地址：AxureShop原型演示

點擊上方鍊接，打開頁面後從左側目錄找到“标簽頁Tabs”頁面

在制作table标簽切換效果之前，我們先來觀察标簽頁切換過程中的交互效果，點擊選項卡後，有以下3個交互效果：

1. 選項卡被選中，選中的選項卡呈現出不同的視覺效果，一般為選項卡顔色發生改變，也有一些大小發生變化的
2. 選項卡下方的直線水平移動到選中項的下方
3. 切換頁面内容，切換頁面時會有一些動畫效果

線框圖的繪制和準備工作假設我們已經都做好了（線框圖效果如下圖所示），這裡就不再贅述，下面重點講解利用Axure制作交互的思路與方法。剛才，我們已經分析了切換過程中的的交互效果，下面就需要思考如何分别實現這3個效果。

效果1：我們可以将這一組選項設置為同一個組，并且為這一組的幾個選項設置相同的選中樣式，這裡我們設置選中後文字的顔色都變為藍色。為第一個選項添加鼠标單擊事件，添加“設置選中”動作，将當前的選項進行選中。将第一個選項的鼠标單擊事件複制到其他兩個選項。

選中樣式

“選中”動作配置

效果2：為選項一的鼠标單擊事件添加動作“移動”，移動直線到達選項一左側的某一個位置，這裡我們設置距離選項一左側23像素的位置，垂直方向上保持不變。水平方向上的位置可靈活調整，隻要保持這條直線和選項内容保持水平居中對齊即可。如果直線的寬度與選項的寬度相等，那麼這裡的水平位置可以設置成選項的橫坐标。以我們現在做的案例說明，動作配置上選擇到達（[[This.x-23]]，[[Target.y]]），動畫效果選擇線性，動畫時間設置為200毫秒。将這個移動的動作配置，複制到另外兩個選項當中。

“移動”動作配置

效果3：利用動态面闆的多狀态特征，來分别放置選項卡對應的幾個頁面。

為選項一的鼠标單擊事件添加動作“設置面闆狀态”，将動态面闆的狀态切換到選項一對應的頁面。進入動畫和退出動畫設置為向右滑動，動畫時間均設置為200毫秒。注意這裡的動畫時間和效果2當中的直線移動的時間保持一緻，否則會造成不同步，視覺上感覺突兀。

選項一切換面闆

為選項二的鼠标單擊事件添加動作“設置面闆狀态”，添加動作之前我們需要分析下，用戶操作的動作軌迹。用戶既可以從選項一切換到選項二，也可以從選項三切換到選項二。這兩種情況下，切換頁面時的動畫效果是不同的，從不同的方向滑動切換。所以，在添加動作之前，首先要添加假設條件，假設在此之前選項一處于選中狀态，添加動作“設置面闆狀态”，切換至選項二對應頁面的狀态，進入和退出動畫效果為向左滑動，動畫時間均為200毫秒。為選項2添加第二個情形用例，将之前的交互配置再複制一遍，修改假設條件為選項三處于選中狀态，切換動态面闆狀态的動畫效果設置為向右滑動，“選中”和“移動”這兩個動作的配置保持不變。（選項二的配置如下圖所示）

選項二切換面闆

為選項三的鼠标單擊事件添加動作“設置面闆狀态”，将動态面闆的狀态切換到選項三對應的頁面。進入動畫和退出動畫設置為向右滑動，動畫時間均設置為200毫秒。

選項三切換面闆

好了，到這裡所有的交互配置都已經完成了，最後我們再檢查一遍所有的交互設置，為了方便大家檢查，我們将三個選項的完整交互配置進行了截圖，如下所示：

選項一交互配置

選項二交互配置

選項三交互配置

大家可以預覽原型，驗證我們的交互制作效果。

在制作table切換頁面的動畫效果時，我們還可以設置成逐漸切換或者上下滑動切換，可以根據自己的需要進行靈活設置。在文末給大家留一個思考題，如果标簽選項是在頁面的下方或者頁面的左右兩側，那麼該如何制作标簽頁的切換效果呢？利用Axure制作常見的交互其實很簡單，隻要大家平時學好Axure原型設計的基礎知識，平時多思考多練習，或者借助老司機的點撥與提醒，相信每個人都有成為交互高手的潛力，充分挖掘Axure在交互原型領域的潛力。

關注并轉發後，可私信關鍵字“标簽切換”可獲取本節課案例的源文件。

【Axure原型設計】專注分享Axure基礎教程、交互案例以及經驗技巧，并不定期贈送各種資源福利，包含：系統組件庫、頁面模闆、實戰案例等。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!