彈出式設計：趁熱抓住它

使用電子郵件訂閱表格是獲得更多訂閱者的最有效方法之一。 在本文中，我們將重點介紹彈出式電子郵件訂閱表單； 特別是，我們將解釋如何增強您的彈出窗口設計並展示一些很棒的彈出窗口示例來激發您的靈感。

彈出式表單在電子郵件營銷中的作用

彈出窗口是出現在網站內容前台並鼓勵用戶註冊接收電子郵件的形式。 它們通常由標題、簡短描述、填寫您的電子郵件地址、姓名和其他詳細信息的字段以及 CTA 按鈕組成。

彈出窗口通常會提供吸引人的信息，例如折扣、免費電子書、網絡研討會錄音、活動門票和其他免費贈品。 例如，在其中一個彈出窗口中，Kate Spade 為所有新電子郵件訂閱者提供 15% 的折扣。

但是，如果我們中的許多人認為彈出窗口很煩人，彈出窗口如何帶來潛在客戶？ 對此有一個簡單的科學解釋。

作家兼廣告和品牌專家 Martin Lindstrom 在他的書“Buyology: Truth and Lies About Why We Buy”中分享了一項為期 3 年的大型神經營銷研究的一些有趣結果。 總而言之，他證明了 90% 的人的購買行為是無意識的，而且用戶所做的很多行為都與他們聲稱的信仰相衝突。因此，儘管對彈出窗口有爭議，但它們仍然有效：我們可以聲稱被彈出窗口惹惱，但我們仍然對它們做出反應並繼續註冊。

現在讓我們來看看正在運行的彈出窗口。 Sumo 在兩年內分析了近 20 億個彈出窗口，並找出了哪些元素使它們成為整體電子郵件營銷結果的重要貢獻者。

在本次實驗中，彈出窗口的平均轉化率為 3.09%。 排名前 10% 的表現最好的彈出窗口的平均轉化率為 9.28%，其中一些高達 50.2%。

相撲注意到彈出轉化率的以下趨勢：

1. 放置在適當上下文中的彈出窗口達到了 40% 以上的轉化率。 通過適當的上下文，我們的意思是彈出窗口的主題與其出現的網站頁面的主題相匹配。
2. 由於電子書頁面延遲 15 秒，彈出窗口的時間完全取決於上下文，帶來了 38.4% 的轉化率。 像 Google Analytics 這樣的工具有助於解決每個案例中最合適時機背後的謎團。
3. 通過考慮上下文和時間，創建與上下文相匹配的 CTA，嘗試清晰並帶來價值，Sumo 成功地達到了 60% 的轉化率。

如您所見，如果您深入了解彈出表單的每個方面並逐一測試詳細信息，您可以顯著提高轉化率。

彈出窗口設計提示和技巧

在推動轉化和吸引更多潛在客戶方面，設計是一個不容忽視的方面。 根據上文提到的《Buyology》一書，消費者通常最多花費 2 秒鐘來做出購買決定。 人們首先看到的是設計元素和顏色，然後他們才開始閱讀內容。 因此，您實際上只有幾秒鐘的時間來吸引註意力、解釋您的觀點並鼓勵用戶在您的表單中留下他們的電子郵件地址。

讓我們繼續研究一些漂亮的彈出窗口示例的詳細信息，以找出您可以在自己的訂閱表單中使用哪些彈出窗口設計策略。

使您的彈出窗口符合公司準則

首先，您在任何類型的媒體（無論是網站、電子郵件還是社交媒體）中使用的所有設計資產都應該符合您公司的公司準則，因為這些資產會形成對您作為品牌的印象。 這就是為什麼堅持公司的顏色、字體、形狀和其他設計元素很重要。

看看關於我們的全鯨頁面。 您可以看到調色板由白色和灰色色調組成，並輔以淺藍色和深藍色色調。 有很多負空間，整個網站都使用無襯線字體。

現在看看他們的彈出式設計，它與他們的網站設計完美匹配，因為表單中應用了相同的顏色和字體。 更重要的是，一張情緒化的照片被用來將更多的注意力吸引到彈出窗口上。 左側文字部分和右側圖片部分完全對稱。

Whole Whale 提供三種對非營利組織有用的不同產品，其中之一是 Lighthouse，旨在提高捐贈頁面的有效性。 請注意該產品的彈出式設計如何與其公司設計準則相匹配，從而產生更大的整體影響。

您的彈出式設計不必像 Whole Whale 使用的那樣中性。 隨意添加更多字符，特別是如果您有個人博客或網站。

例如，Wait But Why 網站與 Whole Whale 自己的網站非常不同。 它既有趣又明亮，並且有很多類似素描的插圖。

他們的彈出窗口也不例外——它也很有趣和個性化。 開玩笑說彈出窗口的煩人本質，該公司只鼓勵用戶註冊。

將視覺感知理論付諸實踐

有幾種既定的視覺感知理論已經在設計中使用了很長時間，直到今天。 我們將討論黃金比例規則和格式塔理論，這是兩個最重要的設計理論。

黃金比例法則

黃金比例大約是自然界中的 1:1.61 比例，用於創建視覺平衡的圖像，突出圖片的某些部分。

你如何在實踐中使用它？ 例如，這些比例可以幫助您將圖像劃分為平衡的部分，將重點放在設計中最重要的元素上，或者以最具視覺吸引力的方式裁剪圖片。

下圖是使用黃金比例原則裁剪的。 注意圖片中最重要的部分，手機，是如何放置的——在螺旋的中心，人的眼睛自然地被吸引到那裡。

當您進行彈出式設計時，您可以將 CTA 按鈕放置在螺旋的中心，圖像位於螺旋的開頭，佔據其最大的部分。 在這種情況下，彈出窗口的基本佈局如下所示：

格式塔理論

格式塔的意思是“統一的整體”，是整個理論的精髓，它解釋了人類如何根據物體在二維空間中的位置來感知物體。

格式塔有6個共同的原則：

1. 相似性。 相似的對像被視為一個模式或一組。
2. 繼續。 放置在單一路徑上的物體被視為一組，人的眼睛由這些視覺線引導。
3. 關閉。 如果一個對象缺少某些部分，我們仍然將其視為一個整體。 想想帶有熊貓的 WWF 標誌，你就會明白這個原則。
4. 接近。 彼此靠近放置的對像被視為一個組。
5. 圖/地。 人們將元素與背景分開，因此其中較大的將被視為地面，而較小的將被視為物體或圖形。 這個原則在埃舍爾的作品中經常使用。
6. 對稱和秩序。 當人們看到對稱的設計時，他們會感到更安全、更平靜。

您不必牢記所有這些原則。 但是，對它們的一些基本知識將幫助您理解為什麼非對稱設計可能看起來更動感，對稱設計更穩定、更安全，以及為什麼用戶的注意力會被拖到最大或最亮的物體上，從其他物體中脫穎而出。

例如，讓我們看看 SheSimplyShops 的彈出式設計示例。 該公司為用戶提供旋轉輪子以獲得贏得折扣的機會。 彈出窗口出現在屏幕的左側並且是不對稱的：左側部分似乎比右側部分“重”。 滾輪佔據了彈出窗口的整個左側部分，而文本和 CTA 按鈕則位於右側，並被負空間包圍。 所有這些都在彈出窗口周圍營造出一種充滿活力和活力的氛圍。

相比之下，Leia 的彈出式窗體是完全對稱的，因此看起來比前面的示例要平靜很多。 所有元素都居中，視覺上通向一個點——CTA 按鈕。

注意可讀性

如果您希望您的彈出窗口傳達正確的信息，它們應該易於理解。 當談到可讀性時，您處理文本和排版的能力至關重要。

建立視覺層次結構，其中標題、描述和按鈕等元素在視覺上分開——通過使用互補字體、不同的大小和粗細以及間距。 行間的行距和字距調整（字母之間的空格）應引導讀者瀏覽您的表單。 最重要的信息應該總是最突出的。

要創建更大的對比度，您可以混合使用單個字體以及襯線和無襯線的不同粗細。 但是，盡量堅持使用不超過兩種字體，這樣表格就不會顯得凌亂。

Tim Ferris 博客上的彈出式表單是良好排版的一個很好的例子。 您可以清楚地看到標識、標題、副標題、作者姓名和兩個按鈕之間的區別，其中更突出的是所需的 CTA。

由於背景和文本之間的對比，標題吸引了最多的注意力。 之後，您的眼睛會直接移到 CTA 按鈕上。 然後，您返回閱讀詳細信息 - 副標題和作者姓名。

反過來，社交觸發器提供了一種基於粗體字體的更輕巧的彈出式表單。 首先，您會以問題的形式看到有趣的標題，您的眼睛立即移到 Bight CTA 按鈕上。 描述用分隔線在視覺上分開，並以較小的字體書寫。

注意你的顏色選擇

顏色是一種強大的工具，可用於完全改變彈出表單的情緒。 柔和的色調會帶來更多浪漫和輕鬆的心情，而響亮而充滿活力的色彩可以讓您的彈出窗口更加奢華。

要選擇能夠很好地結合在一起的顏色，請使用 Adob​​e Color 等工具。 它是免費的，允許您從頭開始創建獨特的調色板，從圖像中提取它們，或者只是探索顏色和趨勢以尋找靈感。

Tommy Hilfiger 快閃店的一個例子展示了紅色、藍色和白色之間的強烈對比。 標題以粗體大寫字母書寫，其中最重要的部分用紅色突出顯示。 您的注意力會立即從標題拖到註冊按鈕上。

如果您發現簡約的設計選擇更有吸引力，您可以為背景使用單一的原色，為文本和其他元素使用次要顏色。

例如，Horizn Studios 不怕引入全黑形式，因為他們使用白色文本和按鈕來對比單色背景。 這種對比以及網站褪色的背景使這種形式非常明顯。

Elvie&Leo，反之亦然，使用帶有黑色文本的全白形式。 由於為主要消息和黑色按鈕選擇了襯線字體，這與表單的其餘部分形成鮮明對比，因此它既簡單又優雅。

My Deal 網站提供了另一種帶有流行色彩的簡約選項。 一個紅色的紙飛機指向右邊——那是一個紅色的註冊按鈕所在的位置。 請注意如何使用排版來突出表單的主要信息。

嘗試形狀和交互性

為您的彈出窗口添加更多樂趣以提高參與度。 例如，Jackpot Candles 為您提供參與旋轉中獎的彩票。

當您旋轉輪盤時，您可能會贏得四項獎品中的一項。 這就是激活時彈出窗口的樣子：

使用形狀可以讓您將更多注意力拖到彈出窗口上。 例如，電子郵件星期一採用了不尋常的訂閱表格形狀——一個圓圈。 將它與顯示網站創始人照片的較小圓圈相結合，該品牌可能有機會獲得更多潛在客戶。

輪到你了

為了讓您的訂閱表單引人注目，請記住這些簡單的彈出式設計原則：

• 確保您的彈出表單是按照貴公司的企業風格設計的；
• 在放置設計元素和使用表單排版時，請記住黃金比例和格式塔理論；
• 確保彈出窗口的文本易於閱讀；
• 明智地使用顏色來突出彈出窗口最重要的部分；
• 添加交互性並玩轉不同的形狀，讓您的彈出窗口對用戶來說既有趣又非凡。

準備好使用 SendPulse 免費創建您的第一個彈出表單了嗎？