Axure教程:多頁簽可滾動的選項卡制作(附源文件下載)

19 評論 9454 瀏覽 26 收藏 11 分鐘

選項卡,就是用多個頁簽來切換展示不同的功能頁面,通過點擊相應頁簽來切換相應選項卡頁面的效果,相信大家在繪制原型中常常會遇到,并不陌生。但是如何優化選項卡的展示效果?以及如果選項卡過多,如何做到像真正系統或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個頁簽時,“移動面板”的位置往左移動一個頁簽寬度的距離(通過局部變量,獲取當前頁簽的寬度為[[This.width]]),即坐標分別為(-[[This.width]],0),(-[[This.width]]*2,0),(-[[This.width]]*3,0),(-[[This.width]]*4,0),(-[[This.width]]*5,0)

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

(2)至此,可滾動的多頁簽選項卡就基本完成啦,預覽一下效果:

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

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

歡迎大家交流!

原型獲?。涸椭邪ㄉ厦娴诙K制作的可滾動頁簽的選項卡,和一個類似的實例。

鏈接:https://pan.baidu.com/s/1XmlWetRfLHd-PZxaw_oK1Q
提取碼:3cwk

 

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

題圖來自 Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 老師這一篇講的也特別好,受教了,真的好強!佩服佩服!

    來自山東 回復
  2. 附上永久鏈接~
    鏈接: https://pan.baidu.com/s/1zgzcDJob1EutF58DYyKfbw 提取碼: evpg 復制這段內容后打開百度網盤手機App,操作更方便哦

    來自山東 回復
    1. 太厲害了,感謝

      來自福建 回復
  3. 你好,能否發下原型資源,分享鏈接過期了,謝謝。郵箱935612434@qq.com

    來自北京 回復
    1. 鏈接發到評論里啦

      來自山東 回復
    2. 多謝

      來自北京 回復
  4. 分享鏈接過期了,能否更新一下

    來自北京 回復
    1. 鏈接發到評論里啦

      來自山東 回復
  5. 你好,能否發下原型資源,分享鏈接過期了,謝謝。郵箱874131935@qq.com

    來自湖北 回復
    1. 鏈接發到評論里啦

      來自山東 回復
  6. 受教了

    來自北京 回復
  7. 請問怎么才能像你一樣優秀!我現在非??释M步??! ??

    來自山東 回復
  8. 學習了~~

    來自山東 回復
  9. 慕名而來!朋友一直推薦我來學習一下!受益匪淺?。。?/p>

    來自山東 回復
    1. 你朋友很有眼光啊hiahiahia

      來自山東 回復
    2. 請問怎么才能像你一樣優秀!我現在非??释M步?。?/p>

      來自山東 回復
    3. 多加班??!

      來自山東 回復
    4. 真是一句營養均衡的告誡?。∠M隳懿煌5剡M步!

      來自山東 回復
    5. 我覺得我進步的夠多了!你得抓緊??!

      來自山東 回復