Axure RP怎么設(shè)計(jì)彈出窗口的效果?

發(fā)布時間：2017-03-27 11:18:09 作者：佚名

Axure RP怎么設(shè)計(jì)彈出窗口的效果？Axure RP在設(shè)計(jì)網(wǎng)頁原型的時候，需要制作一個彈出的窗口，該怎么設(shè)置呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下

在使用Axure RP制作網(wǎng)站原型的過程中，很多時候會遇到彈出窗口的情況，一般情況下這種彈出的窗口叫做Modal，在RP中是利用動態(tài)面板來實(shí)現(xiàn)該功能。在使用RP工具的過程中，我們該如何實(shí)現(xiàn)這種效果呢？本文就這個問題分享經(jīng)驗(yàn)如下。

快速產(chǎn)品原型設(shè)計(jì)工具 Axure RP Pro v7.0.0.3174 漢化綠色版

類型：應(yīng)用其它
大?。?/span>8.97MB
語言：簡體中文
時間：2014-12-22

查看詳情

1、我日常工作中使用的是Axure RP8.0,并且已經(jīng)安裝了漢化包，詳細(xì)版本信息如下截圖，在使用的過程中如果版本不一樣，菜單會有些差異，但是操作步驟基本上是可以借鑒的。

2、正常打開Axure RP8.0工具，如下圖，創(chuàng)建一個新的RP文件 。

3、在空白頁面上從元件庫中拉出一個矩形框和一個按鈕，矩形框是為了展示主頁的內(nèi)容，按鈕是為了點(diǎn)擊后彈出對話框的效果，界面設(shè)計(jì)如下截圖，使用過程中根據(jù)自己項(xiàng)目的實(shí)際需求擺放具體內(nèi)容。

4、從左邊元件庫中拉出一個動態(tài)面板，放在頁面上，擺放位置可以根據(jù)需要進(jìn)行擺放，也可以通過設(shè)置，使其在頁面上居中顯示，具體這個設(shè)置步驟請查看步驟十說明。

5、雙擊動態(tài)面板，將彈出如下對話框，先為動態(tài)面板定義一個名稱 ，這個名稱等會在設(shè)置顯隱的時候需要用到。然后再單擊"state1"會彈出另一個新的子頁面，就可以在該頁面中增加彈出框的具體內(nèi)容了，詳細(xì)步驟請查看截圖2.

6、在上述步驟過后，主頁index的頁面效果將如下所示，鼠標(biāo)右鍵點(diǎn)擊動態(tài)面板，把動態(tài)面板設(shè)置成隱藏，具體操作如下截圖2。

7、為頁面上的按鈕增加事件。選中按鈕，在右邊的設(shè)置面板中，雙擊“鼠標(biāo)單擊時”按鍵，如下截圖1，頁面將會彈出新的用例編輯窗口，選擇元件的“顯示/隱藏”，找到剛剛的動態(tài)面板，并將其設(shè)置為顯示，具體操作如下截圖2中標(biāo)紅的位置。這步的設(shè)置非常重要，只有正確設(shè)置了這步，才能正確的彈出窗口。

8、在第五步中增加的動態(tài)面板，也有放置一個按鈕，該按鈕的作用就是點(diǎn)擊后自動關(guān)閉彈出框，設(shè)置步驟和步驟7類似，只是將“顯示”改成了“隱藏”，具體操作如下截圖中標(biāo)紅的位置。

9、配置完后，點(diǎn)擊預(yù)覽，在瀏覽器上點(diǎn)擊“打開新窗口”按鈕，頁面將彈出新的對話框如下截圖，點(diǎn)擊“關(guān)閉窗口”將關(guān)閉該頁面。

10、在第八步之后，已經(jīng)完成了新窗口彈出的配置功能，這一步將分享如何美化頁面。在第九步中展示的效果是設(shè)計(jì)人員在頁面上將對話框放置在什么位置，彈出時就在什么位置，為了美觀，我們經(jīng)常需要將彈出框在頁面中居中顯示，要實(shí)現(xiàn)該功能也很簡單，只要完成如下步驟就可以了。

11、在主頁上，鼠標(biāo)右鍵點(diǎn)擊動態(tài)面板，在彈出的選擇項(xiàng)中選擇“固定到瀏覽器”并單擊它。在彈出的對話框中按照如下截圖2進(jìn)行配置就可以了。