# 別再迷失在黑暗中——如何優化 Email 在深色模式（dark mode）的設計呈現？ > 什麼是深色模式？ 深色模式（Dark Mode）是一種裝置設定，在手機、平板、電腦上，可以改變界面的顯示色調，讓你的背景從白色變成黑色，而文字變成白色，從 Apple 的操作系統到 Twitter、Slack 或 Facebook Messenger 等應用程式，現在都允許用戶切換到深色模式瀏覽。 「暗模式」功能在 2019 年陸續推出後，從一開始是熱門話題，到現在是許多人已經習慣的模式，人們偏好使用深色模式，可能是因為： * 眼睛更舒適， 深色背景上的淺色文字可以減少眼睛疲勞，尤其是在光線不足的情況下。 * 它會降低屏幕亮度，從而節省電池壽命。 * 他們可能只是覺得酷炫。 深色模式可能會讓你的讀者遺失重要資訊 你知道你的郵件可能在深色模式中，按鈕不明確、圖片不顯眼、logo 看不到嗎？ 身為 Email 行銷或是設計人員，要理解現階段電子郵件應用程式，深色模式在不同的載具上如何呈現。另外大家最想知道的：要怎麼讓我的 EDM 不管在什麼設定底下，都呈現一樣的設計？ 答案是：幾乎沒有辦法 **分類：** Email 行銷 **作者：** tin **發布日期：** 2023-04-28T03:48:00.000+08:00 ## 什麼是深色模式？ 深色模式（Dark Mode）是一種裝置設定，在手機、平板、電腦上，可以改變界面的顯示色調，讓你的背景從白色變成黑色，而文字變成白色，從 Apple 的操作系統到 Twitter、Slack 或 Facebook Messenger 等應用程式，現在都允許用戶切換到深色模式瀏覽。 「暗模式」功能在 2019 年陸續推出後，從一開始是熱門話題，到現在是許多人已經習慣的模式，人們偏好使用深色模式，可能是因為： - 眼睛更舒適， 深色背景上的淺色文字可以減少眼睛疲勞，尤其是在光線不足的情況下。 - 它會降低屏幕亮度，從而節省電池壽命。 - 他們可能只是覺得酷炫。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/darkmode2.gif) image from [Apple.com](https://support.apple.com/en-us/HT210332?ref=cms.newsleopard.com) ## 深色模式可能會讓你的讀者遺失重要資訊 你知道你的郵件可能在深色模式中，按鈕不明確、圖片不顯眼、logo 看不到嗎？ 身為 Email 行銷或是設計人員，要理解現階段電子郵件應用程式，深色模式在不同的載具上如何呈現。另外大家最想知道的：**要怎麼讓我的 EDM 不管在什麼設定底下，都呈現一樣的設計？** > 答案是：幾乎沒有辦法 那我們該怎麼應對？首先我們要先來了解 Email 深色模式是怎麼呈現的。 ## Email 的深色模式在不同的應用程式有不同的呈現 目前，在不同的收件端，至少存在三種不同類型的配色方案： ### **一、無顏色變化** 是的，你沒看錯。 一些電子郵件應用程式，即使你電腦（或是手機）系統設定為暗模式，但對你的 Email 的呈現方式沒有任何影響（背景顏色、文字顏色等等）。 無論設定為淺色模式還是深色模式，你的 EDM 看起來都完全一樣。 以下是這些應用程式的列表： - Apple Mail（附註） - Gmail Desktop - AOL  - Yahoo mail 附註：如果你沒有特別在你的 Email HTML 上方加上「此封郵件為暗模式」的程式語法，它便不會更動你的設計，如果你有加上，它會部分反轉你的顏色。下一篇將帶大家了解，程式人員在 Email HTML dark mode 可以做的設定。 ### **二、顏色部分**反轉 Partial Color Invert 它只偵測淺色背景的區域並反轉，使淺色背景變暗色、文字變亮色。如果你的郵件同時有深色、淺色的區塊，它通常會單獨保留深色背景的區域，只反轉淺色的設計，因而實現整體是深色的樣式。 目前所知，手機裝置 [Outlook](http://outlook.com/?ref=cms.newsleopard.com) (Android) 、電腦瀏覽器 Outlook 就是一個「部分反轉顏色」的例子，如以下截圖： ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-b-01.jpg) 部分反轉範例 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-01.jpg) 部分反轉範例 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-c-01.jpg) 部分反轉範例 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-d-01.jpg) 部分反轉範例 從範例可以看出，這個模式的缺點是：**你的背景維持是深色，但是按鈕顏色會被反轉**，因此在暗色模式，你的 CTA 按鈕將不會那麼顯眼。不過至少按鈕的文字顏色還是突出的。 ### **三、顏色全部反轉** Full Color Invert 它會把你所設定的淺色轉成深色、深色轉為顯色。所以如果你原本設計的是一個深色的背景，你的 EDM 將會被迫改成淺色背景，如果你是淺色背景，將會被改成深色。 是的，就是這麼奇怪。不幸的是，這是目前大部分的 Email App 選擇的方式，例如： - Gmail APP (手機 iOS) - Outlook 2021 (電腦 Windows) - Office 365 (電腦 Windows) ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-b-02-1.jpg) 全反轉範例 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-02-1.jpg) 全反轉範例 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-c-02.jpg) 全反轉範例 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-d-02-1.jpg) 全反轉範例 從範例可以看得出來，你的 Email 在按鈕與背景的對比問題，相較於上一種被改善了，但是可能的結果是：**使用者設定為深色模式，看到你的 Email 卻是白色的**（因為你的設計是深色、被反轉了）。 是不是很惱人呢？ ## 行銷、設計人員該如何應對深色模式的設計？ 目前所知的 Email 應用程式分成很多種，裝置：手機、平板、電腦、瀏覽器，底下又細分不同的廠商：Apple, Android, Windows, Outlook, OS, Chrome, Firefox… … 等等，不同年份的版本也會有所不同，這樣算起來總共或許有七七四十九種不同的版本呢！ 所以我們建議使用者，在設計有顏色背景 Email 的時候測試 2-3 種不同的裝置（Gmail / 原生的 Apple / 原生的 Outlook App），了解使用者在看到你的 EDM 時「大概」會是什麼樣子，基本上不超過上面列舉的三種形式，在可以接受的狀況下發佈你的 Email，但不能保證所有人看到的都是最完美的。 以下提供幾項檢查項目： - 圖片是否正常顯示 - 文字是否可以閱讀 - 整體色調是否看起來舒適（通常這點是最困難的） 分享一些設計過程中的小技巧， 建立屬於你的 EDM 安全區！ ### 一、主要的 banner 圖片使用 PNG 並且設定透明背景 有的時候想要幫圖片加上圓角或是不規則的圖形，因而設計背景的留白區域，這時候要請設計師產出透明的背景圖，才不至於造成畫面被切斷的感覺。 以下這個範例，使用透明背景的 PNG，夠讓你的 EDM 在暗模式不至於看起來太突兀。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-check-2.jpg) banner 主圖的背景顏色 ### 二、避免使用單純白色或是單純黑色的圖片 通常我們的社群軟體都會用圖片 icon 表示，如果單純使用白色或是黑色的話，在經過顏色反轉後，你的 icon 圖案很可能就被背景顏色吃掉了，因此建議圖片加上背景顏色會比較好。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-check2-2.jpg) icon 使用有背景顏色的圖片 ### 三、logo 加上白色邊框或是底色 雖然建議是不要將圖片加上背景顏色，以免中斷整體的設計，但是企業 logo 是整封 Email 很重要的一塊，建議加上適當的顏色背景、白色的框線，或是將你 Email logo 區塊設計成圖片，讓你的企業形象一致、正確的顯示。 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-check3-1.jpg) logo 加上背景顏色或是線框 ![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/03/dark-mode-check4.jpg) 左邊為沒有替 logo 加上線條，黑色被吃掉；右邊是 logo 設計成圖片 ## 總結 以上是一些重要的 Email 設計技巧，讓你更容易配合 dark mode 的使用者。現在還未有讓 Email 於亮色、暗色模式都完美呈現的方法，不過以上的技巧可以讓 EDM 在大部份應用正常顯示，重點是適當應用透明度、訂定好元件的顏色，避免背景與元素顏色相撞、在文字或是 logo 圖片善用白色背景、以及寄信前先進行手機及電腦測試。 [![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/07/customized-banner-1.png)](https://newsleopard.com/newsleopard/services/customized-design?ref=cms.newsleopard.com)