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個頁簽時,“移動面板”的位置往左移動一個頁簽寬度的距離(通過局部變量,獲取當前頁簽的寬度為[[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協議。
老師這一篇講的也特別好,受教了,真的好強!佩服佩服!
附上永久鏈接~
鏈接: https://pan.baidu.com/s/1zgzcDJob1EutF58DYyKfbw 提取碼: evpg 復制這段內容后打開百度網盤手機App,操作更方便哦
太厲害了,感謝
你好,能否發下原型資源,分享鏈接過期了,謝謝。郵箱935612434@qq.com
鏈接發到評論里啦
多謝
分享鏈接過期了,能否更新一下
鏈接發到評論里啦
你好,能否發下原型資源,分享鏈接過期了,謝謝。郵箱874131935@qq.com
鏈接發到評論里啦
受教了
請問怎么才能像你一樣優秀!我現在非??释M步??! ??
學習了~~
慕名而來!朋友一直推薦我來學習一下!受益匪淺?。。?/p>
你朋友很有眼光啊hiahiahia
請問怎么才能像你一樣優秀!我現在非??释M步?。?/p>
多加班??!
真是一句營養均衡的告誡?。∠M隳懿煌5剡M步!
我覺得我進步的夠多了!你得抓緊??!