老司機(jī)告訴你，設(shè)計(jì)網(wǎng)站的彈出框也有門道 在這個(gè)浮躁的時(shí)代，很多人瀏覽網(wǎng)站是沒有耐心的，如果信息不能很快的被檢索到，大多會(huì)選擇關(guān)閉頁(yè)面。為了幫助用戶更快的了解產(chǎn)品信息，幫助潛在需求的用戶快速與商家溝通，彈出框應(yīng)運(yùn)而生。不過因?yàn)橛行┚W(wǎng)站運(yùn)用不當(dāng)，遭受廣大設(shè)計(jì)師和用戶的吐槽，谷歌甚至認(rèn)為彈窗對(duì)用戶體驗(yàn)會(huì)造成明顯的干擾。那么是否意味著彈出框沒有價(jià)值呢?并非如此，只要掌握了設(shè)計(jì)網(wǎng)站的彈出框門道，就可以很好的提升網(wǎng)站轉(zhuǎn)化率。 彈出框的類型 彈出框分為多種類型，用于滿足不同網(wǎng)站設(shè)計(jì)的需求。 1、插頁(yè)式和覆蓋式彈出框，一打開網(wǎng)頁(yè)就會(huì)覆蓋住整個(gè)屏幕。 2、通知欄式的彈出框，一般位于網(wǎng)頁(yè)頂部或底部，以常駐式的形式存在于網(wǎng)頁(yè)當(dāng)中。 3、滑入式，當(dāng)打開頁(yè)面的時(shí)候，會(huì)自動(dòng)滑入頁(yè)面，或者在網(wǎng)頁(yè)加載的過程中，直接加載進(jìn)網(wǎng)頁(yè)。一般位于網(wǎng)頁(yè)的正中間。但有的網(wǎng)頁(yè)設(shè)計(jì)師也會(huì)將它放置于頁(yè)面的底部或者頁(yè)面角落。 彈出框的作用 雖然經(jīng)常彈出的彈出框讓用戶吐槽，但它仍然在很多網(wǎng)頁(yè)中存在，是因?yàn)樗�具有很重要的原因，在我們網(wǎng)站建設(shè)時(shí)離不開它。 1、提升轉(zhuǎn)化率 企業(yè)搭建網(wǎng)站，無非兩個(gè)目的，一是品牌宣傳，二是營(yíng)銷轉(zhuǎn)化。而彈出框的出現(xiàn)，可以幫助網(wǎng)站更好的實(shí)現(xiàn)轉(zhuǎn)化。據(jù)數(shù)據(jù)顯示，帶有彈出框的網(wǎng)站，平均轉(zhuǎn)化速度比未帶有彈出框的網(wǎng)站高3%，而設(shè)計(jì)體驗(yàn)良好的彈出框，可以將這個(gè)轉(zhuǎn)化率提升至9%。 2、讓用戶集中注意力 在這個(gè)浮躁的時(shí)代，越來越多的用戶無法將注意力集中到閱讀上，通常是大概掃視一遍網(wǎng)站，沒有吸引到他們的地方，就關(guān)閉網(wǎng)站。但是借助彈出框這種打斷式的信息，可以快速抓住用戶的眼球，吸引讓們的注意力，直接的將信息呈現(xiàn)到用戶眼前。 3、展示重要信息 當(dāng)彈出框出現(xiàn)在用戶眼前，其展示的信息絕對(duì)遠(yuǎn)超其他信息。我們可以將重要的信息內(nèi)容盡可能縮減，放置到彈出框內(nèi)，方便用戶第一時(shí)間獲取信息。 4、增加用戶體驗(yàn) 雖然不斷彈出的彈出框令人煩不勝煩，影響到用戶體驗(yàn)。但是設(shè)計(jì)良好的彈出框，卻可以更好的幫助網(wǎng)站帶給用戶極致的用戶體驗(yàn)。現(xiàn)在流行極簡(jiǎn)主義的設(shè)計(jì)網(wǎng)站，但是過于簡(jiǎn)單的網(wǎng)站，內(nèi)容也不會(huì)呈現(xiàn)過多�？梢詫�彈出框作為信息的載體，又不會(huì)占用頁(yè)面過多的位置，影響整體的設(shè)計(jì)風(fēng)格，還可以增加用戶體驗(yàn)。 移動(dòng)端的彈出框 雖然谷歌指出彈出框的出現(xiàn)，會(huì)影響到用戶體驗(yàn)。但是在移動(dòng)端，谷歌并不反感網(wǎng)站UI設(shè)計(jì)帶有彈出框，反而建議網(wǎng)站建設(shè)人員盡可能巧妙地設(shè)計(jì)移動(dòng)端的彈出框，用于提高用戶體驗(yàn)。 當(dāng)然，對(duì)于“過分”的彈出框，谷歌也是有相應(yīng)的處罰： 1、彈出框廣告 2、彈出框覆蓋了幾乎所有的頁(yè)面 3、用戶一打開首頁(yè)就有彈出框 彈出框的設(shè)計(jì) 既然我們了解了彈出框?qū)�網(wǎng)站的重要性，接下來，祥云老司機(jī)告訴你，設(shè)計(jì)網(wǎng)站的彈出框有哪些門道： 1、盡量避免在首頁(yè)使用彈出框 2、設(shè)計(jì)的彈出框與網(wǎng)站整體風(fēng)格保持一致 3、確保設(shè)計(jì)的彈出框內(nèi)容與對(duì)應(yīng)頁(yè)面一致 4、不要隨意擺放彈出框，好根據(jù)網(wǎng)站情況，再結(jié)合用戶體驗(yàn)來設(shè)計(jì) 5、想要彈出框夠醒目，那就把它放在屏幕正中心位置吧 6、彈出框的內(nèi)容必須簡(jiǎn)短，有突出重點(diǎn) 7、確保彈出框可交互，有響應(yīng) 8、盡量減少“是”或“否”式的召喚文案，這會(huì)顯得彈出框過于生硬 9、如果希望借助彈出框搜集用戶信息，好只讓他們填寫郵件地址 10、移動(dòng)端和PC端的彈出框，設(shè)計(jì)的不要一樣 11、彈出框要有一個(gè)醒目的“X”關(guān)閉按鈕 12、減少?gòu)棾隹虻某霈F(xiàn)頻次，不要用戶每打開一個(gè)新頁(yè)面都會(huì)有彈出框出現(xiàn) 13、彈出框不要隨意彈出，好在恰當(dāng)?shù)臅r(shí)候，例如用戶要關(guān)閉頁(yè)面的時(shí)候彈出 14、想要展示優(yōu)惠信息，建議使用頂部懸浮式的彈出框 15、在用戶瀏覽推送信息時(shí)，彈出框盡量出現(xiàn)在屏幕的一側(cè)而非正中央 16、可根據(jù)用戶類型的細(xì)分，自定義設(shè)計(jì)彈出框信息 為了幫助我們的用戶盡快獲取重要的關(guān)鍵信息，在設(shè)計(jì)網(wǎng)站的時(shí)候不要吝嗇的使用彈出框。盡量將設(shè)計(jì)體驗(yàn)做得更好，更加有價(jià)值，就可以設(shè)計(jì)出更為優(yōu)秀的彈出框，幫助網(wǎng)站提高轉(zhuǎn)化率。