本文將會(huì)詳細(xì)為你分析彈出框在如今UI/UX設(shè)計(jì)當(dāng)中的真實(shí)情況，并且提供一些可供參考的最佳實(shí)踐。enjoy~

網(wǎng)站對(duì)于每個(gè)企業(yè)而言是展現(xiàn)品牌的重要渠道。

當(dāng)你在為你的用戶設(shè)計(jì)網(wǎng)站的時(shí)候，一定要控制好網(wǎng)站的內(nèi)容量。用戶并沒(méi)有必要在塞滿屏幕的大量信息當(dāng)中，費(fèi)勁巴拉地去找自己想要的那一條。極簡(jiǎn)主義風(fēng)格的流行并不是沒(méi)有道理的。

有針對(duì)性地呈現(xiàn)內(nèi)容，為品牌進(jìn)行合理的適配，提供清晰且扣人心弦的視覺(jué)設(shè)計(jì)，這樣的網(wǎng)站是令人印象深刻的。

極簡(jiǎn)的設(shè)計(jì)并不意味著你無(wú)法和用戶進(jìn)行更多的溝通，也許你覺(jué)得當(dāng)前的設(shè)計(jì)還不足以滿足你的品牌和用戶進(jìn)行溝通的需求，好在還有許多方法和技巧幫你做到這一點(diǎn)。

彈出框就是為此而出現(xiàn)的。在幾年前，這種設(shè)計(jì)被作為一種不影響當(dāng)前網(wǎng)站內(nèi)容的信息呈現(xiàn)方式而廣泛應(yīng)用，隨后又因?yàn)榇罅康?、無(wú)節(jié)制且毫無(wú)美感的濫用，被設(shè)計(jì)師和用戶廣泛吐槽。Google 認(rèn)為彈出框?qū)τ谟脩趔w驗(yàn)造成了明顯的干擾，同時(shí)，需要借助彈出框提升信息交互的設(shè)計(jì)師和開(kāi)發(fā)者因此也困擾不已。

那么，這是不是意味著彈出框已經(jīng)被淘汰了？并非如此。今天我們將會(huì)詳細(xì)為你分析彈出框在如今UI/UX設(shè)計(jì)當(dāng)中的真實(shí)情況，并且提供一些可供參考的最佳實(shí)踐。

彈出框的設(shè)計(jì)現(xiàn)狀

首先我們應(yīng)該聊聊彈出框的類(lèi)型，正確用法。

彈出框的類(lèi)型

彈出框遵循著一系列模式而存在。它會(huì)在打開(kāi)網(wǎng)頁(yè)的時(shí)候彈出，滑入網(wǎng)頁(yè)，或者干脆就在網(wǎng)頁(yè)加載的時(shí)候就直接加載進(jìn)去了。雖然有的網(wǎng)頁(yè)會(huì)將它置于頁(yè)面的正中間，不過(guò)也有許多設(shè)計(jì)師將它置于頁(yè)面的底部或者角落。

插頁(yè)式和覆蓋式的彈出框會(huì)覆蓋住整個(gè)屏幕，通常會(huì)出現(xiàn)在一打開(kāi)網(wǎng)頁(yè)的時(shí)候，

另外一種是通知欄式的彈出框，它會(huì)緊貼在頁(yè)面的頂部或者底部，甚至是常駐式的存在。

使用彈出框的5個(gè)原因

彈出框有的時(shí)候確實(shí)令人頭疼，作為設(shè)計(jì)師你總想遠(yuǎn)離它。但是，它依然存在于許多網(wǎng)頁(yè)當(dāng)中，并且發(fā)揮著巨大的作用。下面的5個(gè)理由，讓設(shè)計(jì)師真正離不開(kāi)它：

1. 彈出框能夠讓人集中注意力

越來(lái)越多的用戶無(wú)法集中注意力閱讀，彈出框這種打斷式的信息呈現(xiàn)方式，非常抓人眼球，能夠快速直接地傳遞信息。

2. 讓用戶注意到最重要的信息

彈出框讓其中所呈現(xiàn)的信息擁有了額外的價(jià)值，當(dāng)彈出框出現(xiàn)的時(shí)候，其中所展現(xiàn)的信息擁有了超過(guò)其他信息的重要性，至少感覺(jué)上是這樣。

3. 彈出框是多用途的

如今的彈出框擁有多種多樣的玩法和呈現(xiàn)方式，不會(huì)將用戶推開(kāi)，也不再使用廣告讓用戶頭疼不已。彈出框的觸發(fā)機(jī)制也非常的多變：

• 在進(jìn)入時(shí)彈出
• 滾動(dòng)到特定的位置時(shí)彈出
• 通過(guò)特定操作觸發(fā)
• 在離開(kāi)時(shí)候觸發(fā)

4. 保持頁(yè)面干凈整潔

正如我之前所提到的，極簡(jiǎn)主義的設(shè)計(jì)讓網(wǎng)站足夠美觀，但是想要順暢地傳遞信息，彈出框能夠作為不錯(cuò)的載體，確保不會(huì)占用頁(yè)面位置，影響整體風(fēng)格。

5. 提升轉(zhuǎn)化率

根據(jù) Sumo 的研究，彈出框和轉(zhuǎn)化率之間有著清晰的關(guān)系。他們發(fā)現(xiàn)，彈出框讓轉(zhuǎn)化率的平均轉(zhuǎn)化速度提升了大概3%，而設(shè)計(jì)得好的彈出框能夠?qū)⑥D(zhuǎn)化率提升到9%，對(duì)于許多網(wǎng)站而言，這個(gè)轉(zhuǎn)化率的意義是非同凡響的。

彈出框提升了網(wǎng)站的參與度。

移動(dòng)端UI中的彈出框

值得一提的是，Google 在分析報(bào)告中并不反感移動(dòng)端的彈出框，而是建議讓設(shè)計(jì)師和開(kāi)發(fā)者盡可能巧妙地進(jìn)行移動(dòng)端彈出框的設(shè)計(jì)，降低彈出框?qū)τ谟脩趔w驗(yàn)的損害，而是盡量去提升用戶體驗(yàn)。

因此，Google 將會(huì)對(duì)采用下面3種彈出框的網(wǎng)站予以處罰：

• 當(dāng)用戶一打開(kāi)首頁(yè)就彈出的彈出框
• 彈出框蓋住了幾乎全部頁(yè)面
• 彈出框廣告

明白了吧？現(xiàn)在，我們要聊聊彈出框的設(shè)計(jì)技巧了。

18個(gè)彈出框設(shè)計(jì)的最佳實(shí)踐

不要為了跟隨某個(gè)趨勢(shì)，展現(xiàn)某種設(shè)計(jì)元素而使用彈出框，它一定要是功能性的，不要浪費(fèi)用戶的時(shí)間，這樣會(huì)降低用戶對(duì)你的信任。

彈出框的設(shè)計(jì)應(yīng)該和網(wǎng)站本身保持一致，無(wú)論是風(fēng)格還是素質(zhì)上。

確保彈出框是可交互，有響應(yīng)的。

確保彈出框中的文案是簡(jiǎn)短而重點(diǎn)突出的。

不要使用被動(dòng)的或者過(guò)于生硬的「是/否」式的行為召喚文案，除非你的品牌個(gè)性本就如此。如果彈出框中包含兩個(gè) CTA，請(qǐng)盡量采用積極的方式來(lái)展現(xiàn)。

如果你在搜集用戶的聯(lián)系信息，最好只讓他們提供電子郵件地址。

確保彈出框的內(nèi)容和對(duì)應(yīng)的頁(yè)面保持一致。

如果可以，盡量避免在首頁(yè)上就使用彈出框。盡量讓用戶先適應(yīng)所處的頁(yè)面環(huán)境。這是 Google 所允許的彈出框設(shè)計(jì)之一。

遵循 Google 對(duì)于移動(dòng)端網(wǎng)頁(yè)的設(shè)計(jì)規(guī)則：不要有插頁(yè)式的廣告，不要設(shè)置首頁(yè)彈出框。

不要讓移動(dòng)端彈出框和桌面端的完全一樣，有針對(duì)性地進(jìn)行設(shè)計(jì)。

總是使用簡(jiǎn)單統(tǒng)一的方式來(lái)關(guān)閉彈出框，即在右上角設(shè)置一個(gè)X關(guān)閉按鈕。

讓所有的彈出框都在恰當(dāng)?shù)臅r(shí)候才彈出，比如關(guān)閉頁(yè)面的時(shí)候。

設(shè)置頻率規(guī)則，確保訪客不會(huì)在每個(gè)頁(yè)面或者每次訪問(wèn)的時(shí)候都會(huì)碰到彈出框。

將彈出框設(shè)置在正確的位置，根據(jù)網(wǎng)站的狀況和體驗(yàn)的度量來(lái)進(jìn)行判斷。

如果你想讓彈出框醒目，盡量讓它出現(xiàn)在屏幕的正中心。

如果你想推送優(yōu)惠信息，可以使用頂部懸浮式的彈出框。

如果你想在用戶瀏覽的時(shí)候推送信息，彈出框盡量出現(xiàn)在屏幕的一側(cè)。

根據(jù)用戶類(lèi)型細(xì)分來(lái)自定義彈出框信息。

結(jié)語(yǔ)

如果你真的希望用戶知悉一些關(guān)鍵的、重要的信息，不要吝嗇使用彈出框，你可以盡量讓彈出框體驗(yàn)更好，提供更加有用的、他們需要的內(nèi)容。不要害怕 A/B測(cè)試，這樣的方法會(huì)讓彈出框更加優(yōu)秀。一個(gè)優(yōu)質(zhì)的彈出框需要你考慮很多因素，包括整體的設(shè)計(jì)，文案、位置、CTA等等。

原文作者 :?SUZANNE SCACCA?

編輯 :?陳子木

譯文地址：https://www.uisdc.com/website-pop-ups-18-rules

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels，基于 CC0 協(xié)議