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

一、頁面布局

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

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

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

二、添加交互

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

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

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

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

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

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

三、交互細節(jié)調(diào)整

（1）按住shift鍵，選中兩個導航按鈕，鼠標右鍵，選中【設置選項組】。主要為了實現(xiàn)，點擊選中【頁面1】按鈕選中時，【頁面2】按鈕則自動變?yōu)椴贿x中。

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

四、預覽效果

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

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

效果：

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

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議