Axure教程:(初級)導(dǎo)航中的頁面切換
本文給大家講講如何利用Axure進(jìn)行導(dǎo)航中的頁面切換,一起來看看~
一、頁面布局
(1)從左側(cè)元件庫拉入兩個(gè)矩形作為導(dǎo)航按鈕,分別命名為:頁面1、頁面2。
(2)從左側(cè)元件庫拉入一個(gè)動(dòng)態(tài)面板作為頁面內(nèi)容展示,命名為頁面內(nèi)容。
(3)雙擊動(dòng)態(tài)面板,點(diǎn)擊“+”,添加狀態(tài)2;再分別點(diǎn)擊對應(yīng)的狀態(tài),往里面添加任意頁面內(nèi)容。
二、添加交互
(1)按住shift鍵,選中兩個(gè)導(dǎo)航按鈕,鼠標(biāo)右鍵,選中【交互樣式】。
(2)設(shè)置選中樣式:字體顏色為白色,填充色為藍(lán)色。
(3)選中導(dǎo)航按鈕【頁面1】;雙擊右側(cè)“屬性”欄中的【鼠標(biāo)點(diǎn)擊時(shí)】。
(4)選擇【設(shè)置面板狀態(tài)】->勾選【頁面內(nèi)容動(dòng)態(tài)面板】->選擇【狀態(tài)1】。
再點(diǎn)擊【設(shè)置選中】-》勾選導(dǎo)航組中的【頁面1】按鈕。
(5)選中導(dǎo)航按鈕【頁面2】;雙擊右側(cè)“屬性”欄中的【鼠標(biāo)點(diǎn)擊時(shí)】,重復(fù)上面步驟;選擇【設(shè)置面板狀態(tài)】-》勾選【頁面內(nèi)容動(dòng)態(tài)面板】-選擇【狀態(tài)2】;再點(diǎn)擊【設(shè)置選中】-》勾選導(dǎo)航組中的【頁面2】按鈕。
三、交互細(xì)節(jié)調(diào)整
(1)按住shift鍵,選中兩個(gè)導(dǎo)航按鈕,鼠標(biāo)右鍵,選中【設(shè)置選項(xiàng)組】。主要為了實(shí)現(xiàn),點(diǎn)擊選中【頁面1】按鈕選中時(shí),【頁面2】按鈕則自動(dòng)變?yōu)椴贿x中。
(2)頁面剛加載時(shí),先展示頁面1,所以,導(dǎo)航按鈕【頁面1】的初始狀態(tài)應(yīng)該為選中;因此,選中導(dǎo)航按鈕【頁面1】,點(diǎn)擊右側(cè)屬性欄,勾選【選中】。
四、預(yù)覽效果
歡迎大家留言評論,也可以留下你期待看到的交互效果。
示例:https://pan.baidu.com/s/1PpBz_JqIDlnSKWeE4q4BcQ
效果:
作者:火星人~艾斯,微信公眾號(hào):艾斯的Axure峽谷
本文由 @火星人~艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
這個(gè)交互不夠抽象。選項(xiàng)卡使用中繼器,通過讀取中繼器索引讀取切換至指定序號(hào)的動(dòng)態(tài)面板。優(yōu)點(diǎn),擴(kuò)展任意個(gè)選項(xiàng)時(shí),不需要任何交互事件調(diào)整
我錯(cuò)了 不能切換不是組合的事 都怪我自己看不仔細(xì) ??
?? 沒看到文章里說要把頁面1和2弄一個(gè)組合搞的我弄了半天就是不能切換 還是下載你發(fā)的案例然后百度怎么創(chuàng)建組合才做出來了
看了這么多axure教程就你這個(gè)學(xué)會(huì)了。。。
哈哈,因?yàn)槲乙矎男“仔逕掃^來的
按照您的教程成功實(shí)現(xiàn)了導(dǎo)航切換,但是導(dǎo)航的選中狀態(tài),第一次默認(rèn)顯示正常為藍(lán)底白字,但是切換到頁面二的時(shí)候,就不是藍(lán)底白字,再切換回頁面一,也不是藍(lán)底白字了。。求助
你應(yīng)該少設(shè)置了一個(gè)交互樣式:選中;點(diǎn)擊時(shí),除了切換狀態(tài)面板,還需要設(shè)置按鈕為選中狀態(tài)。
Axure8 設(shè)置選項(xiàng)目之后 按鈕無法實(shí)現(xiàn)切換選中 是什么原因呢
首先,檢查是否有給按鈕添加鼠標(biāo)點(diǎn)擊,【設(shè)置選中】按鈕的交互事件?其次,檢查有沒有全選所有按鈕,右鍵,選擇彈窗中的【設(shè)置選項(xiàng)組】,這樣才可以切換選中。
終于看到個(gè)簡單的了 ??
哈哈,理解萬歲