Axure教程：多頁籤可滾動的選項卡製作

選項卡，就是用多個頁籤來切換展示不同的功能頁面，通過點擊相應頁籤來切換相應選項卡頁面的效果，相信大家在繪製原型中常常會遇到，並不陌生。但是如何優化選項卡的展示效果？以及如果選項卡過多，如何做到像真正系統或APP中一樣可手動滾動頁籤，做到效果美觀、高保真？

這就是我下面要分享給大家的內容啦：

首先為大家回顧傳統選項卡的製作過程，再展示可滾動頁籤的選項卡製作過程。

一、最常見的傳統選項卡

最常見的選項卡，一般有三四個頁籤，分別對應各自頁面，通過鼠標點擊頁籤，來切換到相應的頁面。

幾個關鍵步驟如下：

1. 準備元素

準備幾個矩形（作為頁籤）和一個動態面板（狀態數與矩形數相同）。

2. 設置選項組

全選所有矩形，在鼠標右鍵的“設置選項組”菜單中或頁面右側屬性欄中鍵入選項組名稱。設置為同一個選項組的元素，一次只能選中一個。

3. 為頁籤設置“鼠標單擊時”事件

單獨為每個矩形設置鼠標單擊時事件：

①選中當前元件；②設置動態面板的狀態為對應的狀態頁

4. 優化樣式

為動態面板中每個狀態下添加一些示意文字作為區分。

至此預覽原型，已經達到了點擊選項卡頁籤切換選項卡的效果。為了樣式更美觀，全選所有頁籤矩形，為其添加選中效果（添加懸停和按下效果後原型會更生動）；為動態面板添加

5. 預覽效果

二、可滾動頁籤的選項卡

當頁籤的個數過多時（如10個），可能頁面樣式不允許我們把所有頁籤都平鋪開展示，這時需要將後面的頁籤隱藏，需要點擊時再讓其展示。

由於頁籤處需要做出滾動效果，故在上述步驟中的頁籤選中效果和事件需要做出一些變化。

幾個關鍵步驟如下：

1. 微調樣式並新增元素

修改上面為頁籤設置的選中效果，主要是把邊框樣式去掉了。取而代之的是增加了一個小矩形藍條，與頁籤同寬，高度3px，默認先擺放在第一個頁籤的下邊框處對齊。

這個小藍條是為了之後在進行頁籤的滾動時，達到同步滑動至所選頁籤的效果。

2. 創建移動面板

將動態面板的狀態增加為10個，並將選項卡的頁籤增加為10個。

全選所有頁籤和小藍條，右鍵點擊“轉換為動態面板”，將該動態面板命名為“移動面板”，並選擇“自動調整為內容尺寸”。

此時“移動面板”內部包含10個頁籤和1個小藍條：

3. 創建外部面板

右鍵“移動面板”，將該動態面板再轉換為動態面板，並命名為“外部面板”，不勾選“自動調整為內容尺寸”，將尺寸調整為和下方動態面板同寬。

此時“外部面板”內部包含“移動面板”：

4. 設置“小藍條”移動的關鍵事件

（1）選中第一個選項卡頁籤，雙擊打開其鼠標單擊時事件窗口

在左側找到“移動”，在右側輸入框中輸入“小藍條”（之前已經將小矩形命名為“小藍條”），在下方勾選“小藍條”。

（2）在下方的移動下拉框處選擇“絕對位置”，點擊x座標的“fx”標識，打開編輯值窗口

在上面的變量或函數輸入區域中，輸入值為[[This.x]]。y座標與x座標同理設置，輸入值為[[This.y+This.height-3]]。在下方的動畫下拉框處選擇“線性”，250毫秒。

上述設置的含義為：點擊某個頁籤時，移動小藍條到絕對位置：x座標=該頁籤的x座標；y座標=該頁籤的y座標+該頁籤的高度-3。

這裡減3是因為小藍條的高度為3px，為了後期通用也可以通過局部變量獲取小藍條的高度，替換這裡的“3”。

5. 設置“移動面板”自動水平移動的關鍵事件

（1）接下來需要做的就是當點擊頁籤時，跟隨所點擊的頁籤自動水平左右移動“移動面板”，達到可以來回切換10個頁籤的效果

通過分析可知，這裡頁籤默認展示的是5個，則：

①我們讓其點擊第1、2、3個頁籤時，“移動面板”的位置在當前位置，即座標為(0,0)；

②當點擊第4、5、6、7、8個頁籤時，“移動面板”的位置往左移動

③當點擊第9、10個頁籤時，“移動面板”保持在(-[[This.width]]*5,0)。按上述規則為每個頁籤添加鼠標點擊事件，移動“移動面板”。

（2）至此，可滾動的多頁籤選項卡就基本完成啦，預覽一下效果：

可以發現點擊每個頁籤時，都可以保證所點擊頁籤的前後幾個頁籤都能一起展示，方便美觀。

下面是我在APP原型中應用上述方法做的一個搜索首頁，下方的文檔選項卡可以鼠標拖動上滑加載，還可以點擊右側的小“+”號進行頁籤的增刪。（具體增刪效果未做全，僅示意使用）

歡迎大家交流！

原型獲取：原型中包括上面第二模塊製作的可滾動頁籤的選項卡，和一個類似的實例。

提取碼：3cwk

作者：醉貓，軟件設計師，3年系統、產品設計經驗，曾參與多個系統、產品的設計開發工作。

題圖來自 Unsplash，基於CC0協議。

閱讀更多 人人都是產品經理 的文章

關鍵字: Axure 選項卡 職場