本文給大家講講如何利用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協議