設計Email的UI/UX實務技巧：用途、尺寸、精選案例分析

在數位產品體驗中，有一項元素貫穿了帳號註冊、交易流程、行銷推播等各個環節，卻鮮少被人深入討論，那就是——電子郵件。對使用者來說，電子郵件是他們接收來自品牌重要訊息的工具，也是建立品牌印象的管道之一；對品牌來說，它則是傳達價值主張、經營顧客關係、還有創造行銷價值的關鍵橋樑。

在本文中，我們將從產品設計的視角出發，深入解析Email的應用場合、設計實務技巧。除此之外，文末也包含了真實企業的Email案例研究。一起來看看好的Email設計究竟應該如何做吧！

Email的種類與應用場合

Email可大致分爲「交易型電子郵件（Transactional Email）」與「行銷型電子郵件（Marketing Email）」兩種，前者涵蓋如註冊帳號、登入身份驗證、傳送交易收據等使用者使用服務時，所需知道的必要資訊；後者則涵蓋以行銷為主要目的的內容。

這樣的分類方式，主要是因應法規需求。例如，歐盟的《一般資料保護規則》（GDPR）就使用了這兩個名詞，規範企業在寄送郵件時所需遵守的規定[^1]。不過，法規並未就這兩種類型郵件的範疇給出明確定義。

使用者的Email體驗

根據litmus的2025年7月統計數據顯示[^2]，全球最多人使用的郵件軟體前五名為：Apple、Gmail、Outlook、Yahoo Mail還有Android，詳細的佔比如下。至於使用者運用電腦/手機版軟體開信的比率，則各佔一半左右，但不同年齡層的比率略有不同[^3]。

這些軟體的使用者介面如下。可以看到，即便是同一封信件，但是在不同的裝置、軟體間瀏覽時仍會有細微的差異。除此之外，如今已相當普及的深色介面模式也會影響使用者的Email體驗。

整體設計原則

1. Email的所有細節（標題、文案、圖片、編排、內容份量、檔案大小等）都需要謹慎規劃，避免任何可能被認為是詐騙/垃圾信件的設計，否則會觸發郵件軟體的過濾機制，導致信直接被送進垃圾郵件堆。一旦其中一封郵件被標記為垃圾信，該寄件地址後續所發出的所有郵件也很可能被自動列入黑名單。
2. 平時我們常看到的漂亮電子郵件，它的真身其實是由HTML/CSS所構成，所以可沿用所有網頁設計的邏輯。
3. 不同郵件軟體在渲染電子郵件的HTML時會有些微差異，導致信件外觀無法完全一致。建議在正式發送前，先用不同的郵件軟體檢視設計的呈現情況，確定可接受再送出。

設計風格

電子郵件作為「品牌/服務」與「使用者」間的溝通媒介，自然應該延續品牌的調性、採用相同的設計系統、文案口吻，讓使用者一眼就可辨識出這是來自某某品牌的信件。

區塊劃分

電子郵件的區塊可以按照順序由上到下切成「Preheader」、「內容」與「結尾」三大段。

畫布尺寸

設計電子郵件版面時，最保險的畫布寬度設定是600px。這個尺寸是根據多數郵件軟體的預設顯示範圍所訂定，能夠確保大多數使用者在不需左右滾動的情況下順利閱讀內容。不過，畫布的寬度沒有硬性規定，你想使用更寬的畫布也可以，但要注意不要讓信件寬到被介面截斷或出現滾動條，影響閱讀體驗。

至於高度部分，雖然同樣沒有硬性限制，但建議以「精準、清晰傳遞單一訊息」為前提，安排合理的內容份量。過於冗長的email只會讓使用者感到厭煩，未來不再願意閱讀你的信件。或者更慘一點，你的信未來會永遠地被自動送進「垃圾郵件」資料夾中。

版型與RWD

電子郵件的真身是一個獨立且輕量的HTML文件，所有版型設計皆以HTML/CSS建構。不過，電子郵件的CSS支援度相對有限，僅能使用較為基礎、相容性高的語法。舉例來說，像display: grid或 display: flex這類新語法的相容性就很差，因此排版通常會以<table>製作。

雖然能用的CSS有限，但好消息是，所有的網頁設計知識都可以沿用。在製作RWD電子郵件時，開發者同樣會使用@media query來因應不同裝置尺寸，確保內容在桌機與手機上皆能良好顯示。考量到畫布寬度限制與跨平台相容性，Email版型設計通常採用一欄或兩欄的垂直切割方式，再視情況調整為橫向並排或堆疊成單欄。若切割超過三欄以上，很容易導致內容過於擁擠或出現排版錯誤。

儘管同樣應用了RWD設計的概念，但實務上，電子郵件的電腦版、手機版版型差異通常不會相差太大以維持一致的閱讀體驗。常見的做法是以手機版為主體，再透過設定最大寬度（max-width）來讓內容在桌面端保持置中。

至於最關鍵的CTA按鈕設計，也可沿用手機介面的UI設計邏輯——Apple的Human Interface Guidelines建議按鈕至少爲44x44px、Material Design則建議至少為48x48px，以確保使用者能輕鬆地點擊到按鈕。

圖像尺寸

關於電子郵件中所使用的圖像，主要的設計考量在於控制其檔案大小，以避免拖累整封郵件的載入速度。考慮到畫布只有600px、版型又可能會切割為2欄顯示，使用1x～2x的圖像就已經足夠。

淺色與深色模式

隨著深色模式逐漸普及，電子郵件內容的設計也必須考量在深色模式下的顯示效果。

在設計網頁時，我們會透過@media (prefers-color-scheme)語法來根據使用者的顯示設定切換UI外觀。但遺憾的是，這個語法目前在大多數郵件軟體中的支援度仍非常差。因此，電子郵件內容在深色模式下的呈現，多仰賴郵件軟體的自動轉換。

更棘手的是，市面上百百種郵件軟體的深色模式轉換邏輯全都不一樣。有些會將內容的顏色全部反轉，有些則僅調整軟體介面本身，對郵件內容不作任何變動。在採用「反轉顏色」策略的郵件軟體上，會將純白色（#FFFFFF）轉換為純黑色（#000000），其他顏色依此類推。如果不想要顏色被反轉，就要使用inline CSS搭配!important加以限制。

另一個在深色模式下特別需要注意的項目是圖片。像是Logo等具識別性的圖形元素，建議使用PNG格式，以避免出現不自然的白色背景或邊角。若你的Logo為深色系設計，則建議使用帶有足夠邊距與背景色的圖片，以確保在雙模式下都有良好的可視性與美感。

Email檔案大小

檔案過大的Email會拖累信件載入速度、間接影響用戶開信的意願，還可能會被郵件軟體折疊。例如：Gmail會折疊超過102kb的信件，顯示「查看完整訊息」的按鈕，造成訊息傳遞效果大打折扣。為了避免上述窘境，最理想的Email檔案大小是不超過100kb。

以下因素都會影響Email檔案大小：

• 整封信的HTML/CSS以及其他Code的長度
• 內容的訊息量
• 圖片數量
• GIF（因為GIF的每一幀都是一張圖片）

案例分析

註冊與登入驗證類

在註冊或登入時向用戶傳送電子郵件是最經典的郵件應用情境。在這個情境中，使用者正在完成註冊或登入手續的途中，按著系統要求來收信，且計劃著收完信後要快速切回原先的系統。因此，設計上最好採用簡潔的設計與文案，突出使用者當下最需要的資訊。例如：完成信箱驗證的按鈕、驗證碼。

此外，若是用於登入驗證的郵件，通常也會附上「重設密碼」或其他資安相關的連結，方便帳戶遭到盜用的使用者迅速採取應對措施。

歡迎新用戶類

這類郵件通常會在新用戶完成註冊後立即或數日內寄出，內容多著重於介紹產品或服務的使用技巧，協助用戶快速上手並探索其功能亮點，提升整體體驗與黏著度。有時郵件中可能也會包含新用戶專屬的限時優惠、折扣碼，鼓勵使用者立即做出行動（例如：從免費版升級至付費方案）。

購物車放棄類

在具備購物功能的網站或服務中，「購物車」常被視為判斷使用者購買意願的重要指標。典型的購物流程包括：瀏覽商品、加入購物車、完成結帳。而那些已將商品加入購物車卻未結帳的用戶，往往具備購買意願，卻因各種原因仍在猶豫。

因此，企業常會針對這類用戶發送提醒郵件。這類郵件的目的一是提醒用戶購物車內仍有未結帳商品，二則是要把那些四處比價後忘記回來完成購買的用戶給「叫」回來。比較精明一點的企業，甚至會利用使用者這時的心理狀態，在郵件中加入小優惠、強調產品優勢的文字，說服使用者購買（但同時間也有更精明的使用者反向利用這點來索取優惠就是了）。

根據klaviyo的2024年度報告，購物車放棄類郵件具有$3.65美金的每位收件人收益（RPR）以及3.33%的轉換率（因為這封信而完成購買的使用者比率），成效相當驚人。

行銷類

以行銷為主要目的的郵件，直白地一點說，就是「廣告」。由於這類內容容易引起用戶反感，因此建議根據顧客的興趣與行為進行內容客製化，精準推送他們可能感興趣的主題，提升開信率與互動意願，進而達成行銷成效。

企業公告類

當服務的《服務條款》或《隱私權政策》等法律資訊有所變更時，服務提供者依法有義務主動通知使用者。這類郵件應簡明扼要地說明變更內容，包含：哪些條款有調整、變更的原因、生效日期，並附上連結供使用者查閱完整版本。此外，也應清楚告知用戶若不同意新條款，可採取的行動或選項，如停止使用服務或聯繫客服等，以維護使用者權益。

設計這類通知信件時，務必參考當地法律規範與平台政策，確保內容符合法規要求與資訊揭露義務。

服務使用類

隨著使用者使用服務所必須通知的事項。常見的內容包括：使用者變更了某項設定、訂閱項目即將到期、達成某種成就、建議使用者完成某項設定……等等。

總結

Email是企業傳遞資訊的重要管道，也是一項極具潛力的行銷工具，常讓行銷人員與產品經理「念念不忘」。然而，身為 UI/UX 設計師，我們應著重思考「使用者收信的前後正處在什麼流程當中？」、「使用者是否期望或需要收到這封信？」

唯有尊重使用者的接收意願與使用感受，才能建立良好的Email互動體驗。有了這一前提，才是時候來打磨信件主旨、內容、設計形式、CTA、寄送時機等其他細節。

參考資料

本文所提及的法規資訊僅供參考，並非法律建議。由於各地法規可能隨時更新，具體適用條件與解釋也會依實際情況而異，若您有合規相關需求，建議尋求專業法律顧問協助。