您需要了解的 12 個彈出窗口設計最佳實踐（適用於移動設備和桌面設備）
已發表: 2021-08-26🤫 噓！ 如果您想通過簡單的策略每個月產生 20% 的額外銷售額，請查看此內容。 »
儘管普遍認為，今天的人們非常樂意與彈出窗口互動。
當然，如果您將好的彈出窗口放在一起。
相信我們——我們親眼目睹了他們在提高轉化率和擴大訂閱者名單方面的效果。
但品牌需要知道是什麼將時尚、引人注目的彈出窗口與會惹惱訪客並拒絕他們的東西區分開來。 這就是我們可以提供幫助的地方。
在本指南中，您將學習：
- 構成“好”桌面或移動彈出窗口的因素（有 13 個示例）
- 三個主要錯誤可能會降低原本有希望的彈出窗口的性能
- 五個額外的彈出式設計示例來增加您的電子郵件列表
有了這個，讓我們開始吧！
您想創建與訪問者產生共鳴的有效彈出窗口嗎？ 下載我們的彈出消息清單，將您的彈出消息轉換率提高 3 倍！
桌面彈出設計最佳實踐
如果您的目標是直接從您的網站獲得更多訂閱者，則電子郵件彈出窗口可以解決問題。
以下是一些提高彈出窗口在桌面上的轉化率的原則。 （另外，他們也與移動訪問者合作。）
1. 用令人瞠目結舌的顏色組合吸引訪問者的注意力
迷人的配色方案是讓您的彈出窗口不容錯過的最簡單方法。
一些明亮的或不尋常的東西可以阻止遊客的腳步。 例如，這個來自 Visme.co 的全屏彈出式設計明亮、大膽，並讓他們的信息脫穎而出。
您的彈出顏色不一定需要明亮甚至“響亮”。 簡單的明暗對比可以幫助你彈出窗口，嗯，流行。
例如，來自 Thredup.com 的這種白色和黑色配色方案簡單而時尚且引人注目。
2. 通過加粗您的關鍵利益短語來吸引訪問者
讓我們面對現實吧：購物者的注意力持續時間越來越短。
因此，最好是您的營銷信息可以立即被理解。
請指出：
- 保持彈出窗口簡短：認為“少即是多”並避免文字牆。
- 用“免費”、“現在”或“節省”等強硬的短語撰寫強有力的標題，以立即突出您的優惠的好處。
- 將您的彈出文本分成清晰的部分（想想：標題→正文→號召性用語（CTA）按鈕）以引導您的讀者選擇加入。
以下是 Trade Coffee 提供的一個很棒的示例，它遵循上述彈出式設計最佳實踐。
3. 將您的彈出窗口顯示為個性化優惠（提示：不是廣告）
理想情況下，您的彈出窗口不應像廣告。
我們明白了：很多消費者對彈出窗口並不十分興奮。 年復一年的煩人廣告讓彈出窗口的口碑不佳。
與您的網站訪問者消除緊張和建立信任的訣竅？ 只需將您的彈出窗口顯示為可以幫助客戶的東西，而不是賣給他們。
考慮詢問訪問者的意見和願望的報價。
基於偏好的彈出窗口非常適合提高轉化率。 鑑於57% 的消費者樂於分享個人信息以換取個性化優惠。
例如，這個來自 Vuori 的電子郵件註冊彈出窗口允許選擇接收基於個人的個人性別識別偏好的個性化電子郵件。
這種類型的消息不僅讓訂閱者覺得他們得到了一筆交易，而且還意味著您將來更有可能發送相關的報價。
這是優衣庫的另一個例子。 請注意消息如何將自己構建為幫助之手（“幫助我們為您定制消息”）：
像這樣的個性化消息是鼓勵訪問者在您的網站上花費更多時間並與您的品牌互動的一種方式。 這類似於遊戲化彈出窗口。
在現場多花幾秒鐘可能看起來不多，但它們代表了與新潛在客戶建立聯繫的寶貴時間。
4. 通過對話文案與潛在客戶建立聯繫
建立信任是您的彈出窗口的成敗。
這就是為什麼在您的彈出式副本中傳達友好和積極的語氣如此重要的原因。
默認情況下，網站彈出窗口不應悶熱或銷售。 像朋友而不是銷售目標一樣與您的潛在客戶交談。
Quip 的這個彈出窗口是我們正在談論的一個很好的例子。 友好而熱情，沒有任何行話或“商業用語”。
5. 邀請訪問者點擊而不中斷用戶體驗
彈出窗口不必完全在你的臉上才能有效。
事實上，有時，微妙之處對建立你的清單大有幫助。
看看旁邊消息和粘條的流行就可以了。
這些彈出式格式不會在訪問者瀏覽您的網站時冒著打擾他們的風險，而是作為一個小小的推動和邀請來查看您的報價。
查看下面來自 Free People 的示例：
從這些類型的彈出窗口中選擇加入的訪問者這樣做沒有壓力，這意味著他們更有可能對您提供的內容充滿熱情。
此外，這些彈出窗口不太可能破壞您網站的流程或美觀。
6.確保您的彈出窗口在正確的時間到達人們
當涉及到您的報價幕後發生的事情時，這是最重要的彈出窗口最佳實踐之一。
您的彈出窗口不應隨機觸發。 我們建議在向訪問者顯示任何類型的彈出窗口之前等待幾秒鐘（至少五秒鐘）。
您可以通過 OptiMonk 輕鬆編輯和自定義彈出窗口的時間控件。 即時更改和測試彈出時間的能力可以幫助您確定最適合訪問者的方法。
控件還可以更輕鬆地堅持退出意圖彈出最佳實踐，並防止您可能丟失的流量反彈。
移動彈出窗口設計最佳實踐以贏得移動用戶
驚人的 63% 的電子商務流量來自移動設備。 這意味著您根本無法忽視來自智能手機的訂閱者。
以下是彈出窗口最佳實踐的細分，可幫助您提高移動轉化率。
7. 通過簡短的文案來鼓勵訪問者快速行動
用你的話經濟是彈出窗口的安全賭注。
當您試圖吸引使用較小屏幕的訪問者時，這一點尤其重要。
如果您需要包含免責聲明，請確保它不會分散您的信息內容。 所以不要吝嗇的話。
例如，這個來自 Casetify 的電子郵件訂閱彈出窗口直截了當。
在下面查看 Skullcandy 的彈出窗口。 明亮、大膽的標語不言自明，不需要為選擇加入的訪客進行大量澄清。
8. 使您的彈出窗口盡可能易於點擊
對於移動用戶來說，與您的彈出窗口互動應該很簡單。
也就是說，您會驚訝地發現有多少移動彈出窗口是一場噩夢。
可以挖掘的地方太多了。 混亂的顏色。 無需滾動。 名單還在繼續。
儘管移動優惠通常是極簡的，但您仍然需要注意一些最佳技術。 這包括：
- 定義的按鈕（如有必要，用於選擇加入和退出）
- 清晰的標題和清晰的副本，非常適合單頁（無需滾動）
- 將彈出窗口的各種元素分開的顏色
這解釋了勾選上面方框的全屏移動彈出窗口的流行。
例如，Skechers 的這項優惠清晰易懂，無論某人是否感興趣。
Pura Vida 的這個移動彈出窗口也是如此：
9.讓您的報價毫不費力，需要更少的表單字段
這篇文章中的所有移動彈出窗口示例都只需要一個電子郵件地址來訂閱，這絕非巧合。
單個字段意味著更少的工作量和更少的站點訪問者分心。 這最終使選擇過程變得快速而輕鬆。
用更少的字段節省幾秒鐘的寶貴時間可能是新訂閱者和反彈訪問者之間的區別。
10. 選擇一個強大的 CTA（號召性用語）來吸引您的訪問者
CTA 短語是轉化優化的關鍵部分。
您的 CTA 越引人注目，您獲得選擇加入的可能性就越大。
Nectar Sleep 的 CTA（“節省 399 美元”）承諾節省大量資金，並使他們的報價感覺更有價值。
簡單地要求網站訪問者“點擊這裡”是浪費了強調好處的機會。
11. 盡快使用數字突出顯著節省
您也可以搭載上面的示例。 數字很流行散佈在彈出窗口中，既展示節省又傳達即時價值。
我們的大腦處理數字比閱讀文本更容易。 請注意有多少移動彈出窗口依賴“$ 10 OFF”或“SAVE 10%”作為他們報價的核心？
這是一個基於數字的標題，鼓勵人們訂閱來自北極狐的時事通訊。 還要注意引人注目的設計：
12. 仔細檢查您的彈出窗口是否對 Google 友好
儘管彈出窗口不會直接影響您的網站在 Google 中的地位，但搜索引擎對“侵入性”內容採取了立場。
您的彈出窗口不應妨礙您的用戶體驗或以其他方式阻止他們訪問您網站上的內容。
這說明了為什麼您應該注意全屏彈出窗口，只有在訪問者有機會瀏覽後才顯示它們。
想像一下，有人第一次通過移動設備訪問您的網站。 您不想將您的網站標記為垃圾郵件或立即將新訪問者拒之門外，對嗎？ 這樣做對您的跳出率來說可能是個壞消息。
“品牌應該避免的最大彈出錯誤是什麼？”
好問題！ 有時，堅持最重要的彈出窗口最佳實踐的最佳方法是知道不該做什麼。
讓我們看看可能會影響彈出窗口性能的最大錯誤。
1. 傳達不相關或不必要的內容
“忙碌”的彈出窗口可能會很刺耳。 確保限制您的文本並避免多條消息。 堅持使用一個或兩個具有單一主題的句子。 它不太可能壓倒網站訪問者。
2. 提出令人印象深刻的報價
問問自己：您為潛在訂閱者提供什麼價值以換取他們的電子郵件地址？ 大幅折扣、免費送貨和首次購買者獎勵通常是給購物者留下印象並促使他們訂閱的必要條件。
獲得超越基本更新或 5% 折扣的創意和頭腦風暴獎勵。
3. 依賴老式的垃圾彈窗設計
在 OptiMonk，我們正在反對糟糕的彈出窗口。
忙碌的。 垃圾郵件。 銷售。 你知道我們正在談論的那些。
好消息？ 借助 OptiMonk 之類的工具，任何品牌都可以構建時尚、值得點擊的彈出窗口。
5 個額外的彈出式設計示例來增加您的電子郵件列表
在彈出式設計方面，一點靈感可以大大有助於創造出令人敬畏的優惠。
這裡有五個很棒的彈出式設計示例，有助於增加您的電子郵件列表（以及他們做得好的細分）。
1. 藤樹
來自 Tentree 的這條邊消息是非侵入式彈出窗口的一個光輝例子。
請注意優惠的 CTA 按鈕如何從網站的其他配色方案中脫穎而出？ 雖然側面消息的微妙之處讓人感覺它實際上是主頁的一部分。
2. 黑體和粗體
恰如其分，這個提議是一個大膽的提議，帶有一個不容錯過的直接標題。
在飲料選項之間進行選擇的能力也突出瞭如何使用個性化和偏好來與首次訪問者達成交易。
3. 拜利
有時保持簡單是值得的。 這個來自 Bailly 的電子郵件彈出窗口證明了彈出窗口設計不一定是火箭科學。
以直接的方式換取訪問者的電子郵件始終是公平的遊戲。
4. 搶綠色家園
這是另一個簡單但有效的彈出窗口示例，有助於增加您的電子郵件列表。
對話語言（“想要在您的第一個訂單上獲得特別優惠？”）和 CTA（“是的，請”）展示了基本的文案選擇如何說服訪問者提供他們的信息。
5.魔術勺
理想情況下，您的彈出式優惠應該能夠自己說話。 Magic Spoon 的這則廣告承諾有機會贏得一個月的免費麥片，使用清晰的語言和有力的詞語（“免費”、“贏”）來發表聲明。
就這樣，我們總結了我們的指南！
您是否堅持使用這些彈出式最佳做法？
當談到製作一個“好”的彈出窗口時，有大量的移動部件需要管理。
希望我們的清單能夠幫助您了解您需要關注的內容。 無論您是優化當前的廣告系列還是完全從頭開始，這些提示都可以引導您獲得更多訂閱者和轉化。
要了解有關創建高轉化率彈出窗口的更多信息，請查看我們的彈出窗口終極指南。
