電子郵件設計技巧和需要注意的常見錯誤

眾所周知，人們傾向於首先關注視覺元素，這往往使他們更喜歡形式而不是內容。 電子郵件營銷也不例外。 電子郵件的結構、插圖、文本格式、調色板和移動優化通常決定用戶是否會閱讀完您的電子郵件並完成所需的操作。

電子郵件設計不僅會影響讀者的看法，還會影響發件人的聲譽。 郵箱提供商經常將佈局和設計錯誤的電子郵件標記為垃圾郵件，這就是您應該關心電子郵件模板設計的一個很好的理由。

在本文中，我們將為您提供一些有關如何使您的電子郵件具有視覺吸引力和整體效果的電子郵件設計技巧。 我們還將討論最常見的設計錯誤，並展示來自不同品牌的精心設計的電子郵件示例。

電子郵件模板設計技巧

模板是每封電子郵件的基礎。 它定義了您未來電子郵件的佈局和視覺外觀，影響您的營銷活動的整體結果。

在您的電子郵件模板設計中，您應該遵循用於公司網站、社交媒體和其他平台的相同視覺指南。 讓我們來看看一些常見的電子郵件設計錯誤和電子郵件設計技巧，您在創建模板時最好考慮一下。

要避免的錯誤

1. 不要太頻繁地更改電子郵件模板設計。 如果用戶每次都收到不同的電子郵件，他們將更難記住和認出您。

2. 不要用圖片代替文字，因為

• 圖像可能無法顯示；
• 每次要更改文本時，您都必須手動更改模板；
• 如果需要，任何放置在圖像上的促銷代碼將無法複製和粘貼；
• 郵箱提供商可能會將僅包含圖像的電子郵件標記為垃圾郵件。

3.如果過於大膽和明亮，請不要使用公司顏色作為電子郵件的主要顏色。

4.不要使用明亮或複雜的背景作為文本。

5. 如果您有這樣的機會，請不要猶豫，依靠專業電子郵件設計師的幫助。 設計不當的電子郵件可能會破壞公司的聲譽，或者只是被郵箱提供商標記為垃圾郵件。 同時，專業設計師將能夠創建持久的電子郵件模板設計，讓您的訂閱者保持興趣和參與度。

要遵循的最佳實踐

1. 始終根據公司的視覺指南設計電子郵件模板。 對您的數字外觀採取整體方法將提高品牌知名度並提高客戶忠誠度。

2. 如果您決定進行 A/B 測試，請測試單獨的元素而不是整個電子郵件。 通過這種方式，您將確定哪些細節或多或少有效，您的公司風格是否能被觀眾識別。

3. 為不同類型的電子郵件創建單獨的模板，並以類似的企業風格設計它們。 這將幫助您的訂閱者不僅將您的電子郵件與任何其他品牌的電子郵件區分開來，還可以根據類型將它們區分開來。

4. 將最重要的信息和 CTA 放在第一個滾動條上，並確保整個電子郵件看起來平衡。 如果您的標題和描述設計得井井有條，號召性用語按鈕引人注目，圖像質量高，那麼收件人將在整封電子郵件中順利引導至號召性用語。

5. 嘗試將您的電子郵件設置為 600 像素寬，以便它們可以在任何電子郵件客戶端中正確顯示。

6. 替代文本塊和圖像。 這不僅對可讀性很重要，而且對提高電子郵件的可傳遞性也很重要，特別是如果您不久前開始發送電子郵件。 一般情況下，我們建議您遵循 80:20 或 60:40 的文本圖像比例。

7. 請記住，對於明亮的背景，最好使用對比鮮明的暗淡佔位符。

8. 除非您可以依靠設計師的幫助，否則您可以使用拖放電子郵件編輯器自行設計電子郵件模板。

現在讓我們看一些演示這些最佳實踐的示例。

我們從 Behance 中獲取了前兩個示例。 這兩個模板，一個用於歡迎電子郵件，另一個用於每週“新靈感”電子郵件，遵循相似的設計原則，但看起來有點不同。 歡迎郵件有一個大而清晰的標題、高質量的圖片、破碎的網格佈局和易於閱讀的字體。 文本和圖像塊交替出現，這使電子郵件更易於閱讀。

至於每週電子郵件，它總體上更短，更強調圖像，在最頂部有一個大膽的 CTA 按鈕。

這是 Downshiftology 的另一個優秀電子郵件模板示例。 該公司可以吹噓用結構良好的網格發送簡約的電子郵件。 它們通常以標題和介紹開頭，然後是一些高質量的食物照片和食譜的超鏈接。 合理的對齊方式和淺色使電子郵件易於瀏覽和閱讀。

響應式電子郵件設計技巧

在考慮電子郵件的佈局和模板時，請始終記住它們在不同設備（包括移動設備）上的外觀。 以下是響應式電子郵件設計要避免的一些錯誤和要遵循的提示。

要避免的錯誤

1. 避免同時使用多個超鏈接，因為這可能會導致它們變得混亂。 收件人可能會意外點擊與他們想要點擊的鏈接太近的錯誤鏈接。

2. 不要讓你的 CTA 按鈕太小。 放大以單擊按鈕會使收件人非常沮喪。

3. 不要在電子郵件正文中使用小於 14 像素的字體，在電子郵件標題中使用小於 20 像素的字體，因為這會使您的電子郵件在小屏幕上難以閱讀。

要遵循的最佳實踐

1. 遵守響應郵件的規則。 例如，如果您的電子郵件模板由幾列組成，並且您希望它們適應移動屏幕，請插入一個特殊代碼並在表格中構建您的電子郵件。

2. 如果您不想弄亂代碼，請使用 SendPulse 中現成的自適應電子郵件模板或在我們的拖放構建器中創建您自己的模板。 它們已經針對桌面和移動設備進行了調整； 此外，您始終可以預覽兩台設備的電子郵件模板。

看看優衣庫的以下電子郵件，它在桌面和移動設備上都有很好的展示。 以下是桌面用戶看到的內容：

其移動版的佈局略有不同：

關於如何在電子郵件模板設計中使用文本的提示

如果看起來沒有吸引力或難以閱讀，即使是最吸引人的副本也不會引起注意。 相比之下，用戶幾乎不會忽視具有整潔佈局、短段落、醒目的標題和最重要信息的適當突出顯示的電子郵件。

要避免的錯誤

1. 不要在一封電子郵件中混用太多字體、樣式、顏色和字體大小，因為它們會使郵件看起來很草率。

2. 避免使用太小或太淡的字體——在這兩種情況下，您的電子郵件可能會變得難以閱讀。

3. 不要創建沒有段落、標題和突出顯示的關鍵點的基於文本的電子郵件。 即使您的文本實際上很有趣，它也很可能會讓您的讀者感到厭煩。

要遵循的最佳實踐

1. 為標題和正文選擇一種或兩種主要字體，而不是更多。

2. 使用大多數電子郵件客戶端（如 Gmail、Yahoo、Outlook 等）都能正確呈現的基本字體。 如果某項服務無法識別您的字體，它會將其替換為其他一些字體，這可能會嚴重影響整個電子郵件模板設計。 最安全的字體被認為是 Arial、Lucida Grande、Tahoma、Trebuchet、Verdana、Georgia、Palatino、Times New Roman、Courier New、Courier 和 Impact。

3. 隨意在橫幅和圖像上使用您自己的公司字體。 但是，請確保橫幅上的字體和電子郵件中的字體搭配得很好。

4. 使用標題和短段落將您的文本分成幾個部分。 結構良好的文本總是更容易閱讀。

5. 使您的字體不小於 14px。

一個好的文本佈局的例子是來自 DesignLab 的一封電子郵件。 它有一個粗體居中的標題，由三個短段落組成，後面是突出的 CTA，以橙色突出顯示。

在電子郵件模板設計中使用顏色的提示

顏色是一種強大的工具，可以營造電子郵件的氛圍並增強您的信息。 但是，選擇錯誤的顏色可能會使您的電子郵件變得乏味、分散注意力或混亂。

要避免的錯誤

1. 不要用一堆顏色淹沒你的讀者。 過多的紅色、黃色作為文本的背景，或者相互不匹配的顏色組合可能會破壞您試圖給人的印象，因為它們很可能會分散用戶對主要思想的注意力。

2. 避免過多的漸變。 如果使用不專業，它們會使您的電子郵件看起來馬虎或降低文本的可見性。

要遵循的最佳實踐

1. 僅使用大膽和明亮的顏色來強調單獨的元素或單詞，同時為您的背景選擇更平靜的顏色。

2. 在選擇顏色主題時考慮觀眾的喜好。 例如，Kissmetrics 報告稱，男性更喜歡對比色，而女性則選擇柔和的調色板。 要了解您的用戶最喜歡哪種顏色，請進行 A/B 測試並嘗試一次更改單個或幾個元素的顏色以準確測量結果。

3. 使用諸如 Adob​​e Color 之類的工具來選擇在視覺上看起來平衡的完美調色板。

例如，百安居使用他們的企業橙色作為熒光筆，並為其餘元素堅持更中性的色調。

電子郵件標題設計技巧

標題是放置在電子郵件最頂部的第一個塊。 它通常包含徽標、網站部分的鏈接、聯繫方式和其他一般信息。 電子郵件標題以及發件人姓名可幫助用戶識別發件人。

要避免的錯誤

1.不要試圖在標題中放入太多信息。 是的，例如，您可以提供指向您網站的鏈接，但如果您還將社交媒體鏈接、詳細聯繫信息和其他塊放在標題中，後者會變得太大並且很可能會造成混淆。

2. 不要在標題和電子郵件的其他任何地方使用劣質圖片，因為這會給人留下業餘設計的印象。

要遵循的最佳實踐

1.強調標題的主要信息，讓其他元素小一點或不那麼亮。

2. 在假期、銷售季節和其他特殊活動中使用特殊主題標題來設置心情。 您還可以為不同類型的電子郵件（例如摘要或交易電子郵件）更改標題。

看看來自 TheRealReal 的電子郵件中的簡約標題：

電子郵件頁腳設計技巧

電子郵件的最後一個但並非最不重要的塊是它的頁腳。 它通常包含電子郵件簽名、取消訂閱鏈接、公司聯繫方式和社交媒體鏈接。 儘管這個塊似乎是最容易設計的，但公司仍然經常犯一些錯誤。

要避免的錯誤

1. 不要用太多的一般信息淹沒你的頁腳，這樣它就不會看起來凌亂和混亂。

2. 永遠不要隱藏退訂鏈接，讓它太小或幾乎不可見。 如果用戶發現很難退訂，他們很可能會點擊“垃圾郵件”，這對您的發件人聲譽來說總是個壞消息。

要遵循的最佳實踐

1. 只包含那些對用戶真正重要的頁腳鍊接； 嘗試將相似的內容塊分組以提高可讀性。

2. 對你的觀眾誠實，讓你的退訂鏈接清晰可見。

3. 在您的頁腳添加一個創造性的電子郵件簽名，以友好的註釋完成您的電子郵件，讓收件人期待下次收到您的來信。

您可能會在下面看到來自 LinkedIn 的電子郵件的頁腳，它完全遵循了上述提示。 它包含電子郵件簽名、清晰的退訂按鈕和公司的聯繫方式，但沒有提供任何不必要的信息。

關於如何在電子郵件設計中使用圖像的提示

視覺效果在電子郵件設計中發揮著重要作用：明智地選擇圖像可以讓您的訂閱者立刻站穩腳跟，並確保他們與電子郵件的互動直到結束。

要避免的錯誤

1. 不要創建只包含圖片的電子郵件，因為 43% 的用戶在他們的電子郵件客戶端中關閉了圖片； 但是，請注意，即使圖像不可見，您的電子郵件內容也應保持清晰。

2. 不要讓圖片比推薦的大。 例如，如果建議您使用 300px 寬的圖片，則不要使用 1200px 寬的圖片。

要遵循的最佳實踐

1. 在將圖像添加到您的電子郵件之前對其進行優化。 帶有大量圖片的電子郵件將需要更長的時間來加載，尤其是在手機上。 最有可能的是，用戶不會等待圖像加載，而會簡單地關閉電子郵件。 要優化圖片，請使用 Squoosh 或 TinyPNG 等工具。

2. 為您的圖片添加替代文字，以便用戶了解圖片的全部內容，以防它們無法自動加載。

3. 將您的圖標放大 2 倍，以便在配備 Retina 屏幕的 iPhone 和 Macbook 設備上看起來更美觀。 例如，如果您需要使用 70×20 圖標，請將 140×40 版本上傳到服務器，然後使用以下屬性調整電子郵件中圖標的大小： width="70" 。

筆記！ 使用此方法時，您只更改圖像的大小，而不更改其重量。 這就是為什麼您應該首先優化圖像，然後將它們上傳到服務器。

4. 使圖像可點擊。 如果您查看電子郵件的點擊地圖，您會經常看到人們點擊圖片。 利用這一優勢引導人們訪問您的網站或社交媒體。

5. 使用自己拍攝或在圖片庫網站上找到的高質量圖片。

繼續看示例，您可能會看到 TheSill 記得添加替代文本，以闡明圖像上描繪的花朵類型。

與此同時，《紐約時報》雜誌使用高質量的圖片和獨特的插圖來照亮他們充滿文字的電子郵件。

CTA 設計技巧

電子郵件中的號召性用語是一個鏈接或按鈕，用於從用戶那裡獲得某種響應——註冊、購買或與經理聯繫。 明確的號召性用語及其正確的位置將幫助您提高點擊率，而 CTA 中的錯誤會使您的訂閱者執行所需操作的能力複雜化，從而使您的電子郵件變得毫無用處。

要避免的錯誤

1. 不要在電子郵件末尾甚至在第一個滾動條後面隱藏一個號召性用語按鈕。

2. 不要讓用戶猜測他們需要做什麼——而是給他們一個明確的電話。

3. 如果您使用超鏈接而不是 CTA 按鈕，請不要隱藏它們。 他們不應該迷失在電子郵件的其他元素中。 它們也不應該太小或不飽和。

要遵循的最佳實踐

1. 將主要 CTA 放在第一個滾動條上。 如果您的電子郵件很長，您可以在整個電子郵件中重複 CTA 幾次。

2. 確保您的主題行和您的 CTA 致力於同一主題。

3. 使您的 CTA 按鈕明亮可見。 它應該與電子郵件的背景、文本和其他元素形成對比。

例如，在他們的一封電子郵件中，LinkedIn 不僅重複了兩次他們的 CTA，而且還使其大膽和對比。

在 Neil Patel 的另一個示例中，您可能會看到電子郵件的主題行與 CTA 文本相關：

電子郵件設計技巧清單

為了幫助您在發送前輕鬆檢查電子郵件，我們收集了您應該記住的所有準則，並按類別對它們進行了分組。

我們相信，掌握了所有這些技巧，您將能夠構建響應式且設計良好的電子郵件，而沒有 SendPulse。 該服務還將幫助您對電子郵件的不同元素進行 A/B 測試，並為您的營銷活動選擇最佳選項。