【Axure教程】:Tab欄切換不同頁面

3 評論 12568 瀏覽 27 收藏 4 分鐘

導(dǎo)讀:我們在制作產(chǎn)品原型時,時常會遇到一些切換tab欄進行切換頁面的功能,產(chǎn)品小白很容易挨個制作tab欄導(dǎo)致繪制時間長效率慢等缺點,本篇將詳細為大家介紹如何快速制作tab欄。

一、Tab欄切換在Axure制作中的優(yōu)點

1、維護成本低:tab切換便于修改,可以使用最簡單的方法實現(xiàn)某一需求的的效果,比如產(chǎn)品中常見的母版的使用,極大的提高了操作的便捷性。

2、復(fù)用性高:便于批量操作,使得不同的tab對應(yīng)的功能不同,多次利用互不影響。

話不多說,下面開始為大家詳細介紹如何快速繪制tab欄。

演示效果:https://hycjv2.axshare.com

二、Tab欄切換繪制教程

首先我們先拉取三個矩形作為tab欄,分別標(biāo)注tab1、tab2、tab3作為備用,實際可根據(jù)需要標(biāo)注。

選中三個矩形,點擊右鍵選擇【選項組】,設(shè)置為同一選項組

選中三個矩形,點擊右鍵選擇【交互樣式】,設(shè)置矩形的交互樣式,在這里我只設(shè)置了一種樣式:線段顏色,實際可根據(jù)需要進行設(shè)置。

接著拉去一個動態(tài)面板放置tab欄下方,用于點擊tab欄進行切換

分別復(fù)制動態(tài)面板1、2、3,放置相關(guān)功能信息

選擇tab1,點擊右鍵進行選中

接著對tab1進行設(shè)置交互,點擊元件,設(shè)置【單擊時】-【設(shè)置選中】-【當(dāng)前元件】

再次設(shè)置交互,設(shè)置【單擊時】-【設(shè)置面板狀態(tài)】-【tab1】

分別對tab2和tab3進行交互設(shè)置,設(shè)置完成后查看預(yù)覽

本篇tab欄的教程就到這里,如果可以幫助你們是我的榮幸,我們一起在產(chǎn)品的路上學(xué)習(xí)進步。

 

本文由 @畫圖仔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Pexels,基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 棒棒噠

    來自廣東 回復(fù)
  2. 嗯…對于初學(xué)者挺友好的哈哈哈,挺簡潔明了的

    回復(fù)
    1. 手機上能畫圖嗎

      回復(fù)