在使用Axure RP制作網站原型的過程中,很多時候會遇到彈出窗口的情況,一般情況下這種彈出的窗口叫做Modal,在RP中是利用動態面板來實現該功能。在使用RP工具的過程中,我們該如何實現這種效果呢?本文就這個問題分享經驗如下。
1、我日常工作中使用的是Axure RP8.0,并且已經安裝了漢化包,詳細版本信息如下 截圖,在使用的過程中如果版本不一樣,菜單會有些差異,但是操作步驟基本上是可以借鑒的。
2、正常打開Axure RP8.0工具,如下圖,創建一個新的RP文件 。
3、在空白頁面上從元件庫中拉出一個矩形框和一個按鈕,矩形框是為了展示主頁的內容,按鈕是為了點擊后彈出對話框的效果,界面設計如下截圖,使用過程中根據自己項目的實際需求擺放具體內容。
4、從左邊元件庫中拉出一個動態面板,放在頁面上,擺放位置可以根據需要進行擺放,也可以通過設置,使其在頁面上居中顯示,具體這個設置步驟請查看步驟十說明。
5、雙擊動態面板,將彈出如下對話框,先為動態面板定義一個名稱 ,這個名稱等會在設置顯隱的時候需要用到。然后再單擊"state1"會彈出另一個新的子頁面,就可以在該頁面中增加彈出框的具體內容了,詳細步驟請查看截圖2.
6、在上述步驟過后,主頁index的頁面效果將如下所示,鼠標右鍵點擊動態面板,把動態面板設置成隱藏,具體操作如下截圖2。
7、為頁面上的按鈕增加事件。選中按鈕,在右邊的設置面板中,雙擊“鼠標單擊時”按鍵,如下截圖1,頁面將會彈出新的用例編輯窗口,選擇元件的“顯示/隱藏”,找到剛剛的動態面板,并將其設置為顯示,具體操作如下截圖2中標紅的位置。這步的設置非常重要, 只有正確設置了這步,才能正確的彈出窗口。
新聞熱點
疑難解答
圖片精選