Axure 中關(guān)于彈窗的制作方法匯總

時(shí)間：2023-07-06 13:30:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-06 13:30:02 來源：網(wǎng)站運(yùn)營

Axure 中關(guān)于彈窗的制作方法匯總：彈窗是一個(gè)為激起用戶的回應(yīng)而被設(shè)計(jì)、需要用戶去與之交互的浮層。它可以告知用戶關(guān)鍵的信息，要求用戶去做決定，抑或是涉及到多個(gè)操作。

彈窗越來越廣泛地被應(yīng)用于軟件、網(wǎng)頁、以及移動(dòng)設(shè)備中，它可以在不把用戶從當(dāng)前頁面帶走的情況下，指引用戶去完成一個(gè)特定的操作。在使用Axure制作原型的時(shí)候，涉及到彈窗的應(yīng)該如何做呢？通過本文，大家一起來看看有什么方法可以制作彈窗。







比如網(wǎng)站的登錄窗口，在點(diǎn)擊登錄按鈕的時(shí)候會(huì)顯示出來，提示用戶進(jìn)行登錄。通過這個(gè)案例給大家介紹幾種不同的制作方法。







一、顯示登錄窗口組件




1、最開始自然是要將原型的元素準(zhǔn)備好（這里方便演示，我們直接使用截圖的方式）。網(wǎng)站頁面、登錄窗口。




2、制作“登錄”按鈕。因?yàn)槲覀冇玫氖菆D片，所以需要制作一個(gè)登錄按鈕。可以直接在“登錄”上層使用熱區(qū)部件或者其他部件，覆蓋住“登錄”所在的位置。并將這個(gè)部件命名為“登錄”。




3、設(shè)置登錄窗口初始狀態(tài)。窗口最初是看不到的，所以我們使用將窗口的初始狀態(tài)設(shè)置為隱藏。




4、設(shè)置交互。注意看這個(gè)彈窗的特點(diǎn)，彈窗是高亮顯示的。在這里可以有一種方法是，在網(wǎng)站頁面和彈窗的中間放置一個(gè)矩形，調(diào)整它的透明度，設(shè)置為隱藏。在點(diǎn)擊“登錄”的時(shí)候，再將矩形以及登錄窗口一起顯示出來。




這種方法大家有興趣的話可以去試著做一下，這里給大家介紹的另外一種設(shè)置方法，不需要再使用矩形進(jìn)行輔助。設(shè)置“登錄”的鼠標(biāo)單擊事件，直接設(shè)置顯示動(dòng)作。在“顯示”動(dòng)作的更多選項(xiàng)設(shè)置中，選擇“燈箱效果”，可直接達(dá)到我們要完成的效果。







再設(shè)置顏色和透明度就可以了。這跟前面說的利用矩形做輔助，在效果上看是一樣的，大家有興趣可以都做做看，看看兩種方法具體有什么不同，使用場景有什么區(qū)別。







二、更改登錄窗口的層級(jí)順序




前面的兩個(gè)步驟與顯示那種方法一樣。從第三步開始有所區(qū)別。

3、在網(wǎng)站頁面和彈窗的中間放置一個(gè)矩形，調(diào)整它的透明度。將矩形和彈窗組合起來。




4、可以不將組合隱藏，而是將它的層級(jí)調(diào)整，置于底層即可。因?yàn)槲覀兡康氖强床坏竭@個(gè)彈窗，將它隱藏，或者將它放置到其他部件下方遮擋住，都能達(dá)到我們的效果。




5、設(shè)置“登錄”的鼠標(biāo)單擊時(shí)事件，直接設(shè)置“置于頂層”動(dòng)作。勾選剛才的組合即可。










三、使用彈出窗口




1、這種方法與前面方法的不同在于彈窗是在另外一個(gè)頁面中。




2、設(shè)置“登錄”的鼠標(biāo)單擊時(shí)事件，直接設(shè)置“彈出窗口”動(dòng)作。勾選彈窗頁面。




3、預(yù)覽結(jié)果。







這種方式的彈窗，在顯示方式上面與前面的兩種方式有比較大的區(qū)別。這種方式是一個(gè)瀏覽器的窗口頁面。在關(guān)閉的時(shí)候，直接關(guān)閉瀏覽器窗口就可以了。







四、使用內(nèi)部框架




1、這種方法一樣是將彈窗做在另一個(gè)頁面中。與前一種不同的是在主頁面創(chuàng)建一個(gè)內(nèi)部框架，將內(nèi)部框架的樣式根據(jù)需要進(jìn)行一下調(diào)整，置于底層。




2、設(shè)置“登錄”的鼠標(biāo)單擊時(shí)事件，首先將內(nèi)部框架置于頂層顯示出來，然后在內(nèi)部框架中打開彈窗頁面即可。




3、看一下預(yù)覽效果。







這幾種不同的方式，預(yù)覽效果已經(jīng)比較明顯地體現(xiàn)出差別了。大家可以根據(jù)自己的需要，采用不同的方法。

大家有什么其他制作彈窗的方法，也歡迎一起來交流。