Axure 7.0教程:制作具有切換效果的Tab菜單
在Axure 7.0中,制作一個擁有相互切換效果的Tab菜單功能可以讓頁面更加動態(tài)和吸引人。本教程將教你如何創(chuàng)建這樣一個功能,主要包括點擊按鈕實現(xiàn)文本切換的效果。首先,從部件庫中拖動一個矩形部件到工作
在Axure 7.0中,制作一個擁有相互切換效果的Tab菜單功能可以讓頁面更加動態(tài)和吸引人。本教程將教你如何創(chuàng)建這樣一個功能,主要包括點擊按鈕實現(xiàn)文本切換的效果。首先,從部件庫中拖動一個矩形部件到工作區(qū),并調(diào)整大小和位置。
1. 設(shè)置按鈕的名稱為“按鈕一”,雙擊輸入該部件的文本為“按鈕一”。
2. 在該部件上右鍵點擊,選擇“交互樣式”,在彈出的設(shè)置交互樣式框中選中“切卡”,填充顏色為灰色后點擊確定按鈕,即可設(shè)置按鈕選中后的樣式。
制作按鈕組合和文本框
接下來,復(fù)制并命名按鈕以及創(chuàng)建顯示文本的動態(tài)面板。
1. 點擊but1部件,按住Ctrl鍵復(fù)制其所有樣式和屬性,命名為but2,設(shè)置文本為“按鈕二”。
2. 同樣的方法制作but3,設(shè)置文本為“按鈕三”,然后對齊選中這三個部件,右鍵選擇“Group”,將它們組合在一起。
創(chuàng)建動態(tài)面板與文本內(nèi)容
再次從部件庫中拖入一個矩形部件到工作區(qū),輸入文本內(nèi)容并轉(zhuǎn)換為動態(tài)面板形式的控件。
1. 輸入文本為“我是文本一”,右鍵點擊部件選擇“轉(zhuǎn)換為動態(tài)面板”。
設(shè)定動態(tài)面板狀態(tài)
雙擊動態(tài)面板控件,在彈出的“動態(tài)面板狀態(tài)管理”框中點擊“ ”號添加兩個動態(tài),命名為“文本”,將三個狀態(tài)分別命名為“文本一”、“文本二”、“文本三”。
復(fù)制“文本一”的內(nèi)容到“文本二”和“文本三”,修改文本內(nèi)容為對應(yīng)的內(nèi)容。
設(shè)置交互效果
點擊but1,在下拉列表中選擇“選中”,將but1的初始狀態(tài)設(shè)置為選中狀態(tài)。
設(shè)置but1的交互效果,當(dāng)點擊but1時,but1為選中狀態(tài),同時文本動態(tài)面板的狀態(tài)為“文本一”。
同樣方式設(shè)置but2和but3的選中狀態(tài)對應(yīng)的動態(tài)面板狀態(tài)。
按F5查看瀏覽效果,體驗Tab菜單之間的切換效果。
通過本教程,你可以輕松學(xué)會在Axure 7.0中制作具有切換效果的Tab菜單,讓用戶能夠方便地瀏覽不同內(nèi)容,提升頁面的交互性和吸引力。希望以上內(nèi)容對你有所幫助,快來嘗試制作屬于自己的Tab菜單吧!