Axure設置Tab切換

一、製作Tab頁面

1、 拖入一個矩形

去掉3個邊,只留下下單邊,如果你用的我的《快速原型組件庫》,可以直接拖入“下單邊矩形”,設置一下尺寸爲100×40(尺寸這種東西,可以按自己需求來,下同),起個名字Tab1(給原件起名字這個習慣一定要養成,方便自己,也方便別人)

 

2、 交互樣式設置

設置了鼠標懸停樣式及選定樣式,此處可根據你的需求自行調整樣式

 

3、設置選項組名稱

選項組的功能,一般用在表單的單選框上,相同的選項組,可以聯動單選,此處,我們可以將普通元件編組,同樣讓其具有單選框的效果

 

4、添加基本交互動作

【動作】

“鼠標點擊時”

設置“選中狀態”,當前元件(This),設置選中狀態爲“值”、true

 

5、複製多個Tab標籤

複製多個Tab標籤,一字排開,分別改下名稱,便於識別,Tab1、Tab2、Tab3;把Tab1的選中勾上 ,Tab2和Tab3的選中都去掉。

做完這一步,就可以看到初步的效果了

 

二、製作Tab頁面

1、 拖入一個矩形

設置一下尺寸300x191(根據你的需求來可以),簡單調下演示,輸入文字,便於效果區別

 

2、 將矩形轉換爲動態面板

給動態面板起個名字,便於識別Tab-box

 

3、 複製動態面板狀態

通過複製狀態,一共三個狀態State1 – State3

4、 編輯狀態內容

簡單編輯下各狀態內容,演示的時候,效果更好

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章