主題行——如何進行電子郵件設計
已發表: 2022-03-11很大一部分消費者( 99% )每天都會查看他們的電子郵件。 包括千禧一代在內的一些人口統計數據更喜歡來自公司的電子郵件通信,而不是其他形式的通信,例如電話或短信。 全球有超過 50 億個活躍的電子郵件帳戶,電子郵件是任何數字產品戰略的重要組成部分。
雖然有數以千計的電子郵件模板設計可供營銷人員使用,但電子郵件設計是網頁設計師的重要專業領域。 對於那些想要與大品牌、創意公司和其他迴避模板的人合作的人來說尤其如此。
設計師在設計電子郵件時應牢記幾件事,從大多數電子郵件平台的限制(對最大的之一——Gmail 中的網絡字體等內容的支持有限),以及消費者在打開電子郵件時的期望他們可能已經與之有業務往來的公司。
移動電子郵件設計的重要性
現在至少有一半的電子郵件是在移動設備上打開和閱讀的,設計師忽視適合移動設備的電子郵件設計是不負責任的。 尤其是考慮到移動電子郵件的轉化率往往明顯高於台式機的轉化率。
PiperJaffray 的這種移動電子郵件設計使事情變得簡單而優雅。 它很容易在移動設備上閱讀,鏈接清晰,品牌微妙。 它將用戶的需求放在首位,改善了公司的整體用戶體驗和感知。
Dribbble 將他們的“熱門鏡頭”電子郵件保持在重點,完全專注於內容。 這種重點使電子郵件易於在移動設備上導航。 雖然專注於內容的簡單佈局對於許多類型的電子郵件來說都是一個好主意,但它特別適用於移動電子郵件,這樣可以更輕鬆地使用內容並與之交互。
專注於內容
作為最佳實踐,無論是設計電子郵件還是其他數字產品,設計師都應該始終關注內容。 一些電子郵件設計通過以內容為設計的極簡設計,將這種最佳實踐發揮到了極致。
在處理大多數電子郵件設計時,設計師會受益於在深入設計之前先創建內容。 但是,特別是在極簡設計中,更重要的是要預先知道內容是什麼。
Marvel 採用極簡設計將重點直接放在其內容上。 白色背景和只支持頁面文字的圖片,讓內容真正脫穎而出。
Unsplash 的所有電子郵件都直接關注他們正在推廣的圖像。 圖片底部的“查看收藏”按鈕和淡入淡出可以增加網站的點擊率,因為它讓人們想要查看更多內容。
強化品牌
當訪問者到達網站時,它(理想情況下)是一種身臨其境的品牌體驗。 一切都在網站設計師的控制之下。 但是電子郵件設計不同。 用戶正在另一個應用程序中查看電子郵件,並且並非所有電子郵件應用程序都平等地呈現所有電子郵件。
因此,電子郵件設計中的品牌化對於為閱讀電子郵件的用戶創造正確的體驗至關重要。 但是,品牌通常需要保持簡單,以便在各種設備和電子郵件客戶端上有效地呈現給最高比例的用戶。
電子郵件頂部的簡單徽標,在多個圖像中使用相同的標題圖像,並與品牌的其他數字產品保持盡可能多的元素一致,這對於支持和加強品牌對消費者的認知大有幫助。
Everlane 的品牌在他們的電子郵件和網站上天生就很簡單。 他們的標誌在這封電子郵件的頂部突出顯示,強化了這個品牌。
中指項目在所有電子郵件中使用一致的標題圖像,以及明亮的紫色強調色。 這使得任何訂閱的人都能立即識別出他們的電子郵件,並且在網站上繼續進行品牌推廣。
用顏色吸引註意力
顏色對人的思維有很大的影響,能夠影響情緒、感知甚至行為。 在電子郵件中有效地使用顏色可以提高點擊率和轉化率。 在某些測試中,按鈕顏色的差異會導致轉化率的差異超過 20%。
但從使用顏色中受益的不僅僅是號召性用語。 創建色彩豐富的電子郵件可能會偏離預期,並會在一個人的收件箱中創建與其他電子郵件完全不同的外觀和感覺。
用鮮紅色吸引註意力的銷售橫幅讓人想起現實生活中的銷售標誌,這些標誌通常也採用相同的顏色。 讀者的眼睛立即被紅色吸引。
斯堪的納維亞家具電子商務網站 Article 採用柔和的紅色和綠色配色方案,紅色將注意力吸引到最重要的部分——銷售號召性用語按鈕。
雖然一些電子郵件設計使用顏色來吸引對內容特定部分的注意,但休斯頓動物園的這封電子郵件使用明亮的顏色來創造有趣和充滿活力的設計。 明亮的橙色和粉紅色的配色方案立即引人注目,並吸引了讀者。
使用令人驚嘆的圖像
人類是視覺動物,令人驚嘆的圖像可以提升電子郵件並吸引讀者的注意力。 圖片還可以強化電子郵件的信息和公司的品牌。
電視節目似乎在“令人驚嘆的圖像”類別中具有優勢,這封 Netflix 電子郵件使用了來自Stranger Things的充滿活力但神秘的靜止圖像。 從用戶體驗的角度來看,將引人注目的圖像與緊隨其下方的“播放”號召性用語相結合是有意義的,因為它使讀者可以輕鬆地立即觀看宣傳的節目。
令人驚嘆的圖像不僅限於照片。 WePresent 在電子郵件中使用的卡通或插圖就像照片一樣引人注目,可以幫助吸引讀者進入內容。

這封最致命的捕獲電子郵件,宣傳探索頻道紀錄片系列,顯示了一個令人驚嘆的標題圖像,它融合到它下面的內容中。 這是一種有用的技術,可以鼓勵觀眾繼續閱讀。
嘗試非常規佈局
許多電子郵件設計都有一個非常標準的格式:頂部的標題,單列內容,頂部和底部附近的行動號召。 但是沒有規定說設計師必須遵循這種特定的模式。
非常規的佈局是吸引讀者註意力並讓他們想要閱讀內容的好方法。 有多種方法可以創建不尋常的設計。 一種流行的方法是使用圖像來創建不一定與許多電子郵件平台兼容的電子郵件佈局。
非傳統的佈局不一定需要脫離牆壁。 這一款來自 Mailchimp,採用兩列設計,其中一列由色塊佔據。 使它令人難忘的是它在視覺上具有吸引力和出乎意料。
使用圖像可以實現更多意想不到的電子郵件佈局,例如 KLM 的這種佈局。 設計師只需要記住,一些電子郵件客戶端仍然會阻止圖像自動加載,因此有必要使用仍然能夠傳達信息要點的後備文本。
使用字體
大多數流行的電子郵件客戶端都支持網絡字體,但不幸的是,並非所有客戶端都支持——Gmail 是最顯著的例外(儘管 Gmail 確實支持 Roboto 和 Google Sans 作為 Gmail 界面的一部分)。 但是,只要設計師記住大量電子郵件客戶端將使用備用字體,他們仍然可以使用網絡字體。
當然,使用網絡字體的替代方法是使用包含字體的圖像。 這就是許多電子郵件設計師選擇做的事情,尤其是在備用字體可能看起來不合適的標題中。
這份 FabFitFun 時事通訊使用有趣的腳本字體來吸引人們對內容的關注,同時將其與高度易讀的無襯線字體配對。 在電子郵件設計中嘗試字體組合是一個好主意,甚至可以在更改網站字體或在其他品牌材料中使用它們之前用作試運行。
Sickbubble 在他們的電子郵件設計中使用了多種字體,這可能很棘手。 但是在這種情況下,因為他們將每個部分分開,所以它起作用了。 標題中的顯示字體具有非常前衛的感覺,而主體文本是易於閱讀的無襯線字體。 產品促銷部分中的手寫字體有效,因為它偏離了電子郵件的正文。
玩轉動畫
動畫為電子郵件增添了額外的視覺趣味,並立即吸引了讀者的眼球。 動畫 GIF 是向電子郵件添加動作的流行選擇,並且受到大多數電子郵件客戶端的支持。
設計師在嵌入任何動畫時應確保牢記文件大小,因為有很多人在移動設備上閱讀電子郵件。 他們還應該確保動畫支持內容,而不僅僅是填充。
使用動畫 GIF 來驅動要點或更好地說明以有趣的方式呈現的內容是電子郵件設計的絕佳補充,就像 Product Hunt 的這個電子郵件示例一樣。
Hustle 在他們的電子郵件中使用動畫 GIF 來說明信息的重點,並為原本極簡的電子郵件設計增加視覺趣味。
行動呼籲
號召性用語可以說是公司發送的幾乎所有電子郵件中最重要的部分。 大多數電子郵件都會發送到提示操作,無論該操作是閱讀文章、購買產品還是執行某些其他行為。
設計師可以密切關注其號召性用語的設計,並對它們進行 A/B 測試,以確保它們針對性能進行了優化。
正如 Litmus 在這裡所做的那樣,在號召性用語中使用明亮的顏色,使其從其他內容中脫穎而出。 設計師應該考慮嘗試不同的顏色,通過在發送電子郵件活動時使用 A/B 測試來查看哪些顏色最適合他們的受眾。
在號召性用語中使用與電子郵件的其餘內容完全不同的顏色使其脫穎而出。 因為 Campaign Monitor 電子郵件中的檸檬綠是構成背景的紫色的分裂補色,所以它在不衝突的情況下脫穎而出。
注意電子郵件設計最佳實踐
雖然電子郵件設計中有足夠的創意和實驗空間,但設計師還需要牢記媒體的最佳實踐和限制。
電子郵件設計中最重要的步驟之一是在發送電子郵件之前在各種電子郵件平台中對其進行測試。 雖然它們之間可能存在細微差異,並且總是有人會使用不太常見的平台以不同的方式呈現設計,但確保電子郵件能夠為大多數用戶接受是明智的。
設計人員可以使用多種電子郵件測試服務來查看他們的電子郵件在各種電子郵件平台上的外觀。 Litmus 是最受歡迎的選項之一,但 Mailgun、Acid 上的電子郵件、Mailtrap 和 Preview My Email 等其他選項也值得一試,看看哪一個最能滿足每個項目的需求。
除此之外,由於移動設備上打開的電子郵件數量眾多,因此請記住圖像大小和帶寬使用情況至關重要。 出於同樣的原因,響應式設計實際上是必不可少的。
最好的電子郵件設計將易於人們在任何設備上閱讀,並且——最重要的是——將提示他們點擊電子郵件中的行動號召(或以其他方式執行請求的任何操作)。 遵循這些電子郵件設計最佳實踐讓網頁設計師在創建有效執行此操作的電子郵件方面具有優勢。
• • •
進一步閱讀 Toptal 設計博客:
- 體驗就是一切——終極用戶體驗指南
- 所有的趨勢都值得嗎? 設計師犯的 5 個最常見的 UX 錯誤
- UI 與 UX——探索核心差異 [信息圖]
- 移動用戶體驗設計原則和最佳實踐
- 移動可用性基本指南