隨著互聯網的發展，各種網站技術以及網站的呈現技術層出不窮，網站的頁面展現已經從之前的頁面間跳轉到現在大行其道的單頁面應用，頁面內容的切換不再需要進行頁面的跳轉了，使用起來更加舒適。

功能在變化，技術在變遷，頁面展現的技術已經跟上了，作為產品經理的輸出產品-原型，怎么能不是對單頁面進行實現呢？

其實，要實現單頁面應用的效果，在原型設計軟件Axure中來說，最主要使用到的是動態面板以及鼠標的一些點擊或者懸停事件。下面將詳細介紹如何制作一個單頁面應用原型

首先，先新建一個rp文件

新建頁面文件

新建完后會生成多個默認的頁面

默認頁面文件

因為我們是進行單頁面應用的設計，所以只會使用到其中的一個頁面，所以只需保留index頁面就夠用了，刪除其他多余頁面。

首先在頁面區域內添加一個矩形框，作為應用的最大操作區域，并命名操作區域。

定義應用的操作區域

添加頁面頭部矩形框，在頭部矩形框中添加三個H2文字，代表三個不同頁面入口，在頭部欄下方添加一個動態面板，使兩個組件將操作區域完全填充，動態面板用于實現單頁面效果

頁面布局

雙擊動態面板，彈出動態面板的狀態管理框，分別添加首頁、資訊、我的三個面板狀態

面板狀態管理

在面板狀態管理中點擊編輯所有狀態即可打開所有狀態頁面的編輯頁

編輯所有狀態

在各個狀態的編輯頁中加入各自的內容

首頁內容

資訊頁

我的頁面

三個頁面都已經有了內容了，現在需要做的是頁面內容的切換。定位到index頁面，選中首頁，選擇屬性，添加鼠標點擊時的事件，選擇鼠標點擊時設置動態面板狀態，然后選中面板狀態，再選擇面板狀態。對于資訊、我的按鈕也同樣操作。

設置面板顯示與隱藏

經過一番操作，已經可以通過點擊按鈕選擇展現去的內容顯示了，點擊首頁將會顯示首頁內容，點擊資訊將會顯示資訊也內容，點擊我的將會顯示我的頁面內容。

為了添加選中效果，給頭部的菜單欄添加鼠標的懸停事件，當鼠標懸停到對應的菜單是，菜單的背景顏色將會變化。操作如圖，先選中菜單，找到屬性中的交互樣式設置，點擊鼠標懸停，在彈出窗口中找到填充顏色，選擇一個自己喜歡的顏色，點擊去確定即可。資訊、我的兩個菜單也如此操作即可成。

菜單交互樣式設置

效果預覽，點擊預覽將會在瀏覽器中展現頁面效果，可以進行相應的點擊操作來切換內容展現，實現單頁面顯示效果。

預覽操作

效果圖

至此，動態面板配合簡單的鼠標事件就已經將單頁面應用的簡單效果完成了。趕緊去試一下吧。

總結

以上是生活随笔為你收集整理的axure 鼠标样式,Axure8-动态面板+简单鼠标事件实现单页面应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。