1. 部落格
  2. 電子報優化

給 UI/UX 產品設計師的 Email 設計攻略

Email 設計基本功:版型尺寸、Styleguide、圖片大小、文案設計

在產品設計的過程中,Email 總是常常被忽略、很少被討論的一環,但在使用者體驗上,Email 的地位已經越來越重要,在產品設計初期需要規劃有哪些「必要」發送的信件(例如:註冊成功、忘記密碼、訂單成立等等)並在後期開始規劃如何透過 Email 優化體驗、公布訊息等等增加使用者黏著度。

對 Email 行銷有興趣的可以參考這篇:EDM 行銷為什麼還是這麼夯?,本篇著重於設計上要注意的事項,以及靈感參考。

開始設計 Email 之前先了解 Email 的種類

理解兩種 Email 的差異,能協助你快速規劃出符合需求的設計。

  • 交易型郵件 (Transactional Emails):發送給單一收件人信件。通常會根據收件者的操作而觸發,例如:發票中獎、註冊成功、訂單成立、歡迎信。
  • 群發型郵件 (One-to-Many Emails):相對於單一收件者,此類就是想要廣發訊息給一大群人。例如:商品促銷、會議出席通知、新功能發布。

這兩種郵件的目的性完全不一樣,群發型郵件通常會需要追蹤後續點擊率、轉換率,而交易型郵件主要是要快速到達、資訊清楚。

舉產品會發的 Email 為例:

  • 訂單完成(交易型郵件)
  • 新的功能發布、韌體更新(群發型郵件)
  • 範例、教學(群發型郵件)
  • 折扣(群發型郵件,有時候會依照使用情境為交易型郵件)

該用何種方式製作 Email?

就像網頁一樣,製作 Email 必須工程師寫 HTML 與 CSS 製作,但是純手刻製作 Email 看似簡單,實際上門檻更高,因為必須考量到不同的收件端(像是電腦版的 outlook 就好比瀏覽器屆的 IE 但是更難搞),只能夠寫最基本的 HTML/CSS,但是又要支援 RWD 手機版。所以在設計上會盡量以版型安全、並且考量到手機版來設計。

假如是產品的通知信件,建議還是自己製作,因為需要放變數、模版格式要統一,且版型比較單純;如果是行銷信件,就建議使用模版工具製作,編輯大量的圖文、排版比較方便。

設計 Email 的準則

基本上在設計 Email 與設計網頁 UI 是差不多的,同樣需要考量在手機、平板、電腦版上的閱讀體驗,以及要呈現的資訊層級、要達到的目的(call-to-action),配色、用圖方面也是要符合品牌形象與設計guideline。比較需要注意的是因為 Email 的閱讀載具包含了古老的 outlook(大概與瀏覽器有微軟 ie 是一樣的意思)與各式的網頁版本與瀏覽器(想想看用頻果行動裝置的 safari 看 yahoo mail 會怎樣……),設計上必須比較規矩,才好實作出來,如果團隊沒有專門的工程師製作 Email 的話,建議使用拖拉版型工具來製作會比較保險。但是不管用什麼方式實作,我都還是會先出 UI 設計圖。

版型尺寸與建立 Styleguide

其實 Email 的版型尺寸並沒有一定的標準,就像是你打開 UI 設計軟體:Sketch (或是 Adobe XD, Figma 等等 UI 繪製軟體),他有建議的網頁 Artboard 尺寸,但是並沒有一個準則,可以依照需求來定。

通常,我會做個有基本收件端 UI(包含手機、電腦,例如:Gmail App, Mac Mail)的設計,開始設計通用的 Email 版型,確保版型在收件端 UI 上看起來順眼。

內容的區塊建議寬度在 600-800px 之間,電腦閱讀起來比較不會吃力。

電腦版,mac 內建的收件軟體

設計配色也要考量到深色版本的呈現,因為電子豹的 Logo 顏色比較深,在深色模式必定會被吃掉,所以要加上底色。

手機版,Gmail 收件軟體,亮色主題與深色主題

延伸閱讀:

確認通用的版型之後,接著再設計企業信件的其他排版。

電子豹的通用版型:有品牌 Logo,頁尾包含客服資訊與社群連結,主要內容第一行會是整封 Email 的主題(大標),按鈕顏色區分為主要藍、次要紫色,連結顏色為企業藍。

定調好版型之後接下來的設計就會根據 styleguide 走。

通知信件設計
各種情境的 Email 設計

業務、客服的名片資訊設計:

圖片大小

網頁設計師或是前端工程師的都知道,最害怕的就是直接把可以印刷的圖片直接放在網頁上,不僅會增加 client 端載入負擔,也會讓自己的網站太過肥大、也可能導致 Google 排名下降等等。

在 Email 也是一樣,滿版圖片必須控制在寬度 600-800px 之間,儲存成網頁版本,雙欄的則是要再更小。通常一般圖片我會依照顯示出來的尺寸出圖,但是企業 logo、social icon 我會出 1.5-2 倍的圖,以免在 retina 螢幕、手機上看起來模糊(通常在網頁上會使用 svg 向量圖檔,但是 Email 不支援)。

例如螢幕顯示 facebook icon 是 40x40px,我就會出 80x80px,並在 HTML 裡面定義好顯示 40px 的寬度。

Photoshop > File > Export > Save for Web,或是利用線上的圖片壓縮軟體

文案設計

文案設計其實可算是 UX 的一環,要怎麼讓信件看起來清楚、語調一致整齊,是產品設計專業的展現。

舉例電子豹交易型郵件的設計,統一會在第一行標題看到主要資訊,接著是詳細內容、Call To Action,最後會放上聯絡資訊,footer 會有小小的網站連結、社群媒體連結等等。

信件的寄件人、寄件信箱、以及信件主旨,也都要經過統一的設計。


設計靈感

要蒐集 Email 設計靈感,最大的網站就是 Really Good Emails,他蒐集了許多知名企業、新創所發送的 Email,比起仿間許多網站的設計參考常常文案是假字、圖片是免費圖庫、或是很舊的範例,在 really good emails 你可以找到現在各種不同類型的設計,並且可以針對同一間公司搜尋,例如:搜尋 netflix,即可觀察該公司的 Email 設計與部分的行銷手法。

netflix 整體設計,圖片來源:reallygoodemails

破格的 Email 設計

通常交易型郵件的設計著重於乾淨、資訊清楚,頂多加上企業識別的圖案或是顏色,像是歡迎信件、新產品發布等等,常常看到蠻多有趣的設計,分享給大家!不過 Email 的破格設計必須稍微對 HTML 有概念,不然容易做出難以用圖 + 文展現的設計(因為 Email 的 HTML 只能用 <table> 做,且把 Email 做成一大張圖片不僅檔案會太大,還在手機上不好閱讀,是最不好的做法),這點就需要設計經驗的累積囉。

圖片來源:invision 歡迎信
圖片來源:reallygoodemails
圖片來源:reallygoodemails