Axure教程:(初級)導(dǎo)航中的頁面切換

11 評論 16658 瀏覽 56 收藏 5 分鐘

本文給大家講講如何利用Axure進(jìn)行導(dǎo)航中的頁面切換,一起來看看~

一、頁面布局

(1)從左側(cè)元件庫拉入兩個(gè)矩形作為導(dǎo)航按鈕,分別命名為:頁面1、頁面2。

(初級)導(dǎo)航中的頁面切換

(2)從左側(cè)元件庫拉入一個(gè)動(dòng)態(tài)面板作為頁面內(nèi)容展示,命名為頁面內(nèi)容。

(初級)導(dǎo)航中的頁面切換

(3)雙擊動(dòng)態(tài)面板,點(diǎn)擊“+”,添加狀態(tài)2;再分別點(diǎn)擊對應(yīng)的狀態(tài),往里面添加任意頁面內(nèi)容。

(初級)導(dǎo)航中的頁面切換

(初級)導(dǎo)航中的頁面切換

二、添加交互

(1)按住shift鍵,選中兩個(gè)導(dǎo)航按鈕,鼠標(biāo)右鍵,選中【交互樣式】。

(初級)導(dǎo)航中的頁面切換

(2)設(shè)置選中樣式:字體顏色為白色,填充色為藍(lán)色。

(初級)導(dǎo)航中的頁面切換

(3)選中導(dǎo)航按鈕【頁面1】;雙擊右側(cè)“屬性”欄中的【鼠標(biāo)點(diǎn)擊時(shí)】。

(初級)導(dǎo)航中的頁面切換

(4)選擇【設(shè)置面板狀態(tài)】->勾選【頁面內(nèi)容動(dòng)態(tài)面板】->選擇【狀態(tài)1】。

(初級)導(dǎo)航中的頁面切換

再點(diǎn)擊【設(shè)置選中】-》勾選導(dǎo)航組中的【頁面1】按鈕。

(初級)導(dǎo)航中的頁面切換

(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中。

(初級)導(dǎo)航中的頁面切換

(2)頁面剛加載時(shí),先展示頁面1,所以,導(dǎo)航按鈕【頁面1】的初始狀態(tài)應(yīng)該為選中;因此,選中導(dǎo)航按鈕【頁面1】,點(diǎn)擊右側(cè)屬性欄,勾選【選中】。

(初級)導(dǎo)航中的頁面切換

四、預(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 這個(gè)交互不夠抽象。選項(xiàng)卡使用中繼器,通過讀取中繼器索引讀取切換至指定序號(hào)的動(dòng)態(tài)面板。優(yōu)點(diǎn),擴(kuò)展任意個(gè)選項(xiàng)時(shí),不需要任何交互事件調(diào)整

    來自浙江 回復(fù)
  2. 我錯(cuò)了 不能切換不是組合的事 都怪我自己看不仔細(xì) ??

    來自廣東 回復(fù)
  3. ?? 沒看到文章里說要把頁面1和2弄一個(gè)組合搞的我弄了半天就是不能切換 還是下載你發(fā)的案例然后百度怎么創(chuàng)建組合才做出來了

    來自廣東 回復(fù)
  4. 看了這么多axure教程就你這個(gè)學(xué)會(huì)了。。。

    來自福建 回復(fù)
    1. 哈哈,因?yàn)槲乙矎男“仔逕掃^來的

      來自福建 回復(fù)
  5. 按照您的教程成功實(shí)現(xiàn)了導(dǎo)航切換,但是導(dǎo)航的選中狀態(tài),第一次默認(rèn)顯示正常為藍(lán)底白字,但是切換到頁面二的時(shí)候,就不是藍(lán)底白字,再切換回頁面一,也不是藍(lán)底白字了。。求助

    來自北京 回復(fù)
    1. 你應(yīng)該少設(shè)置了一個(gè)交互樣式:選中;點(diǎn)擊時(shí),除了切換狀態(tài)面板,還需要設(shè)置按鈕為選中狀態(tài)。

      來自福建 回復(fù)
  6. Axure8 設(shè)置選項(xiàng)目之后 按鈕無法實(shí)現(xiàn)切換選中 是什么原因呢

    來自北京 回復(fù)
    1. 首先,檢查是否有給按鈕添加鼠標(biāo)點(diǎn)擊,【設(shè)置選中】按鈕的交互事件?其次,檢查有沒有全選所有按鈕,右鍵,選擇彈窗中的【設(shè)置選項(xiàng)組】,這樣才可以切換選中。

      來自福建 回復(fù)
  7. 終于看到個(gè)簡單的了 ??

    來自重慶 回復(fù)
    1. 哈哈,理解萬歲

      來自福建 回復(fù)