【Axure教程】:Tab欄切換不同頁面
導讀:我們在制作產品原型時,時常會遇到一些切換tab欄進行切換頁面的功能,產品小白很容易挨個制作tab欄導致繪制時間長效率慢等缺點,本篇將詳細為大家介紹如何快速制作tab欄。
一、Tab欄切換在Axure制作中的優點
1、維護成本低:tab切換便于修改,可以使用最簡單的方法實現某一需求的的效果,比如產品中常見的母版的使用,極大的提高了操作的便捷性。
2、復用性高:便于批量操作,使得不同的tab對應的功能不同,多次利用互不影響。
話不多說,下面開始為大家詳細介紹如何快速繪制tab欄。
演示效果:https://hycjv2.axshare.com
二、Tab欄切換繪制教程
首先我們先拉取三個矩形作為tab欄,分別標注tab1、tab2、tab3作為備用,實際可根據需要標注。
選中三個矩形,點擊右鍵選擇【選項組】,設置為同一選項組
選中三個矩形,點擊右鍵選擇【交互樣式】,設置矩形的交互樣式,在這里我只設置了一種樣式:線段顏色,實際可根據需要進行設置。
接著拉去一個動態面板放置tab欄下方,用于點擊tab欄進行切換
分別復制動態面板1、2、3,放置相關功能信息
選擇tab1,點擊右鍵進行選中
接著對tab1進行設置交互,點擊元件,設置【單擊時】-【設置選中】-【當前元件】
再次設置交互,設置【單擊時】-【設置面板狀態】-【tab1】
分別對tab2和tab3進行交互設置,設置完成后查看預覽
本篇tab欄的教程就到這里,如果可以幫助你們是我的榮幸,我們一起在產品的路上學習進步。
本文由 @畫圖仔 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Pexels,基于CC0協議。
評論
評論請登錄
棒棒噠
嗯…對于初學者挺友好的哈哈哈,挺簡潔明了的
手機上能畫圖嗎