Axure RP彈出窗口的效果怎么設(shè)計(jì)？一起來看看操作吧 。
1、我日常工作中使用的是Axure RP8.0 ， 在使用的過程中如果版本不一樣 ， 菜單會(huì)有些差異 ， 但是操作步驟基本上是可以借鑒的 。
2、正常打開Axure RP8.0工具 ， 如下圖 ， 創(chuàng)建一個(gè)新的RP文件。
3、在空白頁面上從元件庫中拉出一個(gè)矩形框和一個(gè)按鈕 ， 矩形框是為了展示主頁的內(nèi)容 ， 按鈕是為了點(diǎn)擊后彈出對(duì)話框的效果 ， 界面設(shè)計(jì)如下截圖 ， 使用過程中根據(jù)自己項(xiàng)目的實(shí)際需求擺放具體內(nèi)容 。
4、從左邊元件庫中拉出一個(gè)動(dòng)態(tài)面板 ， 放在頁面上 ， 擺放位置可以根據(jù)需要進(jìn)行擺放 ， 也可以通過設(shè)置 ， 使其在頁面上居中顯示 ， 具體這個(gè)設(shè)置步驟請(qǐng)查看步驟十說明 。
5、雙擊動(dòng)態(tài)面板 ， 將彈出如下對(duì)話框 ， 先為動(dòng)態(tài)面板定義一個(gè)名稱 ， 這個(gè)名稱等會(huì)在設(shè)置顯隱的時(shí)候需要用到 。然后再單擊"state1"會(huì)彈出另一個(gè)新的子頁面 ， 就可以在該頁面中增加彈出框的具體內(nèi)容了 ， 詳細(xì)步驟請(qǐng)查看截圖2.
6、在上述步驟過后 ， 主頁index的頁面效果將如下所示 ， 鼠標(biāo)右鍵點(diǎn)擊動(dòng)態(tài)面板 ， 把動(dòng)態(tài)面板設(shè)置成隱藏 ， 具體操作如下截圖2 。
7、為頁面上的按鈕增加事件 。選中按鈕 ， 在右邊的設(shè)置面板中 ， 雙擊“鼠標(biāo)單擊時(shí)”按鍵 ， 如下截圖1 ， 頁面將會(huì)彈出新的用例編輯窗口 ， 選擇元件的“顯示/隱藏” ， 找到剛剛的動(dòng)態(tài)面板 ， 并將其設(shè)置為顯示 ， 具體操作如下截圖2中標(biāo)紅的位置 。這步的設(shè)置非常重要 ， 只有正確設(shè)置了這步 ， 才能正確的彈出窗口 。
8、在第五步中增加的動(dòng)態(tài)面板 ， 也有放置一個(gè)按鈕 ， 該按鈕的作用就是點(diǎn)擊后自動(dòng)關(guān)閉彈出框 ， 設(shè)置步驟和步驟7類似 ， 只是將“顯示”改成了“隱藏” ， 具體操作如下截圖中標(biāo)紅的位置 。
9、配置完后 ， 點(diǎn)擊預(yù)覽 ， 在瀏覽器上點(diǎn)擊“打開新窗口”按鈕 ， 頁面將彈出新的對(duì)話框如下截圖 ， 點(diǎn)擊“關(guān)閉窗口”將關(guān)閉該頁面 。
10、在第八步之后 ， 已經(jīng)完成了新窗口彈出的配置功能 ， 這一步將分享如何美化頁面 。在第九步中展示的效果是設(shè)計(jì)人員在頁面上將對(duì)話框放置在什么位置 ， 彈出時(shí)就在什么位置 ， 為了美觀 ， 我們經(jīng)常需要將彈出框在頁面中居中顯示 ， 要實(shí)現(xiàn)該功能也很簡單 ， 只要完成如下步驟就可以了 。
11、在主頁上 ， 鼠標(biāo)右鍵點(diǎn)擊動(dòng)態(tài)面板 ， 在彈出的選擇項(xiàng)中選擇“固定到瀏覽器”并單擊它 。在彈出的對(duì)話框中按照如下截圖2進(jìn)行配置就可以了 。
推薦閱讀
- 微信視頻聊天怎么縮小窗口
- 徹底關(guān)閉電腦廣告彈窗的方法 電腦彈出廣告怎么徹底解決
- 縮短彈出框時(shí)間補(bǔ)丁的bug
- rp是什么軟件
- 蘋果電腦光驅(qū)如何彈出
- 蘋果電腦光驅(qū)怎么彈出啊
- 電腦上彈出低俗廣告怎么辦
- iPados分屏的方法 ipad怎么分屏多窗口
- 微信語音聊天窗口怎么隱藏
- 華為鴻蒙系統(tǒng)廣告關(guān)閉的方法 華為手機(jī)彈出廣告怎么徹底關(guān)閉