1.正常打開Axure RP8.0工具,如下圖,創(chuàng)建一個新的RP文件 。
2.在空白頁面上從元件庫中拉出一個矩形框和一個按鈕,矩形框是為了展示主頁的內(nèi)容,按鈕是為了點(diǎn)擊后彈出對話框的效果,界面設(shè)計如下截圖,使用過程中根據(jù)自己項目的實際需求擺放具體內(nèi)容。
3.從左邊元件庫中拉出一個動態(tài)面板,放在頁面上,擺放位置可以根據(jù)需要進(jìn)行擺放,也可以通過設(shè)置,使其在頁面上居中顯示,具體這個設(shè)置步驟請查看步驟十說明。
4.雙擊動態(tài)面板,將彈出如下對話框,先為動態(tài)面板定義一個名稱 ,這個名稱等會在設(shè)置顯隱的時候需要用到。然后再單擊"state1"會彈出另一個新的子頁面,就可以在該頁面中增加彈出框的具體內(nèi)容了,詳細(xì)步驟請查看截圖2.
5.在上述步驟過后,主頁index的頁面效果將如下所示,鼠標(biāo)右鍵點(diǎn)擊動態(tài)面板,把動態(tài)面板設(shè)置成隱藏,具體操作如下截圖2。
6.為頁面上的按鈕增加事件。選中按鈕,在右邊的設(shè)置面板中,雙擊“鼠標(biāo)單擊時”按鍵,如下截圖1,頁面將會彈出新的用例編輯窗口,選擇元件的“顯示/隱藏”,找到剛剛的動態(tài)面板,并將其設(shè)置為顯示,具體操作如下截圖2中標(biāo)紅的位置。這步的設(shè)置非常重要, 只有正確設(shè)置了這步,才能正確的彈出窗口。
7.在第五步中增加的動態(tài)面板,也有放置一個按鈕,該按鈕的作用就是點(diǎn)擊后自動關(guān)閉彈出框,設(shè)置步驟和步驟7類似,只是將“顯示”改成了“隱藏”,具體操作如下截圖中標(biāo)紅的位置。
8.配置完后,點(diǎn)擊預(yù)覽,在瀏覽器上點(diǎn)擊“打開新窗口”按鈕,頁面將彈出新的對話框如下截圖,點(diǎn)擊“關(guān)閉窗口”將關(guān)閉該頁面。
9.在第八步之后 ,已經(jīng)完成了新窗口彈出的配置功能,這一步將分享如何美化頁面。在第九步中展示的效果是設(shè)計人員在頁面上將對話框放置在什么位置,彈出時就在什么位置,為了美觀,我們經(jīng)常需要將彈出框在頁面中居中顯示,要實現(xiàn)該功能也很簡單,只要完成如下步驟就可以了。
10.在主頁上,鼠標(biāo)右鍵點(diǎn)擊動態(tài)面板,在彈出的選擇項中選擇“固定到瀏覽器”并單擊它。在彈出的對話框中按照如下截圖2進(jìn)行配置就可以了。
11.這時候預(yù)覽頁面效果,就如下截圖所示,彈出框?qū)⒃陧撁嫔暇又姓故尽?/div>