Axure教程：（初級）導航中的頁面切換

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

本文給大家講講如何利用Axure進行導航中的頁面切換，一起來看看~

一、頁面布局

（1）從左側元件庫拉入兩個矩形作為導航按鈕，分別命名為：頁面1、頁面2。

（初級）導航中的頁面切換

（2）從左側元件庫拉入一個動態面板作為頁面內容展示，命名為頁面內容。

（初級）導航中的頁面切換

（3）雙擊動態面板，點擊“+”，添加狀態2；再分別點擊對應的狀態，往里面添加任意頁面內容。

（初級）導航中的頁面切換

（初級）導航中的頁面切換

二、添加交互

（1）按住shift鍵，選中兩個導航按鈕，鼠標右鍵，選中【交互樣式】。

（初級）導航中的頁面切換

（2）設置選中樣式：字體顏色為白色，填充色為藍色。

（初級）導航中的頁面切換

（3）選中導航按鈕【頁面1】；雙擊右側“屬性”欄中的【鼠標點擊時】。

（初級）導航中的頁面切換

（4）選擇【設置面板狀態】->勾選【頁面內容動態面板】->選擇【狀態1】。

（初級）導航中的頁面切換

再點擊【設置選中】-》勾選導航組中的【頁面1】按鈕。

（初級）導航中的頁面切換

（5）選中導航按鈕【頁面2】；雙擊右側“屬性”欄中的【鼠標點擊時】，重復上面步驟；選擇【設置面板狀態】-》勾選【頁面內容動態面板】-選擇【狀態2】；再點擊【設置選中】-》勾選導航組中的【頁面2】按鈕。

三、交互細節調整

（1）按住shift鍵，選中兩個導航按鈕，鼠標右鍵，選中【設置選項組】。主要為了實現，點擊選中【頁面1】按鈕選中時，【頁面2】按鈕則自動變為不選中。

（初級）導航中的頁面切換

（2）頁面剛加載時，先展示頁面1，所以，導航按鈕【頁面1】的初始狀態應該為選中；因此，選中導航按鈕【頁面1】，點擊右側屬性欄，勾選【選中】。

（初級）導航中的頁面切換

四、預覽效果

歡迎大家留言評論，也可以留下你期待看到的交互效果。

示例：https://pan.baidu.com/s/1PpBz_JqIDlnSKWeE4q4BcQ

效果：

 

作者：火星人~艾斯，微信公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
艾斯的Axure峽谷
歡迎關注個人公眾號：艾斯的Axure峽谷
32篇作品 237398總閱讀量
02-162215 瀏覽
《狂飆》、《三體》都這么熱了，為什么視頻網站還要收緊會員權益？
05-125847 瀏覽
1000億美金！OpenAI將成硅谷史上融資最多公司
02-153632 瀏覽
誰是下一個外賣市場的“頭號玩家”？
05-154968 瀏覽
如何從交互角度讀懂產品需求文檔
11-304502 瀏覽
2024年社群運營必備的10大類工具，效率翻倍！
評論
評論請登錄

  1. 這個交互不夠抽象。選項卡使用中繼器，通過讀取中繼器索引讀取切換至指定序號的動態面板。優點，擴展任意個選項時，不需要任何交互事件調整

    來自浙江 回復

  2. 我錯了 不能切換不是組合的事 都怪我自己看不仔細 ??

    來自廣東 回復

  3. ?? 沒看到文章里說要把頁面1和2弄一個組合搞的我弄了半天就是不能切換 還是下載你發的案例然后百度怎么創建組合才做出來了

    來自廣東 回復

  4. 看了這么多axure教程就你這個學會了。。。

    來自福建 回復

    1. 哈哈，因為我也從小白修煉過來的

      來自福建 回復

  5. 按照您的教程成功實現了導航切換，但是導航的選中狀態，第一次默認顯示正常為藍底白字，但是切換到頁面二的時候，就不是藍底白字，再切換回頁面一，也不是藍底白字了。。求助

    來自北京 回復

    1. 你應該少設置了一個交互樣式：選中；點擊時，除了切換狀態面板，還需要設置按鈕為選中狀態。

      來自福建 回復

  6. Axure8 設置選項目之后 按鈕無法實現切換選中 是什么原因呢

    來自北京 回復

    1. 首先，檢查是否有給按鈕添加鼠標點擊，【設置選中】按鈕的交互事件？其次，檢查有沒有全選所有按鈕，右鍵，選擇彈窗中的【設置選項組】，這樣才可以切換選中。

      來自福建 回復

  7. 終于看到個簡單的了 ??

    來自重慶 回復

    1. 哈哈，理解萬歲

      來自福建 回復