Icon 在 EDM 設計中的四大核心作用
在電子報（EDM）的有限空間與短暫注意力窗口中，Icon 是提升傳達效率的關鍵視覺元素。它們的核心作用在於：第一，節省珍貴的版面空間，以單一圖示傳達複雜概念；第二，引導視覺動線，自然地將收件者的目光從標題帶向內文，再導向行動呼籲（CTA）；第三，強化 CTA，在按鈕旁搭配方向性或提示性圖示，能有效提升點擊意願；第四，提升內容的掃描效率，讓收件者在快速瀏覽時能迅速理解段落重點或列表項目。這些功能共同作用，能讓 EDM 的資訊結構更清晰，進而支持行銷目標的達成。
從 UI/UX 設計的角度來看，這些作用並非隨意添加。例如，當使用者快速掃描郵件時，人眼會被圖像吸引，Icon 因此成為天然的視覺錨點。在佈局中，一系列風格統一的列表 Icon 可以立即建立內容的層級與邏輯，減少閱讀負擔。這也是為什麼在規劃 EDM 模板時，需將 Icon 納入整體設計系統中考量。
EDM Icon 的尺寸規格與縮放指南
EDM 中的 Icon 尺寸並無唯一標準，但基於實務經驗與裝置相容性，存在一個廣泛適用的建議範圍。作為 CTA 按鈕旁的引導性圖示，建議高度維持在 **24 至 32 像素**之間，確保在行動裝置上清晰可觸及。用於內容段落小標題或清單項目的 Icon，尺寸可與當段文字大小匹配，約為 **16 至 20 像素**。關鍵在於與周圍元素（文字、留白）保持協調的視覺比例。
除了絕對尺寸，還需注意與 EDM 整體寬度的相對比例。一個寬度 600px 的 EDM，其 Icon 不應過大而破壞版面平衡。對於高解析度螢幕（如 Retina），設計時應提供 @2x 版本的 Icon 檔案（例如 48x48px 的圖檔用於顯示 24x24px 的區域），以確保縮放後邊緣依然銳利。務必避免使用過小的 Icon，以免在郵件客戶端壓縮或渲染時，細節模糊成一團色塊。
風格匹配：確保 Icon 與 EDM 品牌調性一致
Icon 的風格必須是品牌視覺語言的延伸，而非孤立元素。一致性體現在幾個層面：首先是**線條粗細**，若品牌主視覺採用統一筆觸的線條圖示，EDM 中的 Icon 也應維持相同磅數。其次是**色彩使用**，可採用品牌主色的單色版本，或在特殊活動時使用全綵，但必須與 EDM 整體配色和諧。最後是**風格語言**，選擇填充式（Filled）或線性（Linear）、圓角或直角，都應與品牌現有的 Icon 系統保持一致。
一個常見的錯誤是為了豐富版面而混用不同風格的 Icon（例如，信頭用線性，內文用填充），這會導致視覺混亂，削弱專業感。在實作時，可從既有的品牌資產中提取風格，或參考 如何建立 UI 設計系統？網頁設計師的元件庫與設計代幣實戰 中的原則，將 EDM Icon 視為設計系統的一個應用場景來規範。
實戰佈局：Icon 在 EDM 各區塊的放置策略
將 Icon 放在正確的位置能最大化其效益。在**信頭**區域，Logo 旁可搭配一個象徵品牌精神或當次活動的輔助圖示。**內容段落**中，Icon 最常用作小標題前的裝飾或清單項目前的符號，用以組織資訊結構。CTA 按鈕旁是放置引導性 Icon（如箭頭、購物車）的黃金位置，能直接暗示「點擊後會發生什麼」。最後，在**信尾**的社交媒體區塊，平臺專屬圖示是標準配置。
動線設計上，這些 Icon 形成了一個隱形的視覺路徑。例如，讀者的視線可能從信頭的活動 Icon 開始，沿著內容段落的列表 Icon 向下掃描，最後被 CTA 旁的箭頭 Icon 引導至按鈕。設計時應模擬這條路徑，確保 Icon 的放置順暢、不跳躍，自然地服務於從「接收資訊」到「採取行動」的整個過程。
技術規範：Icon 的格式選擇與相容性考量
EDM 的技術環境比網頁複雜得多，Icon 格式的選擇直接影響顯示穩定性。目前最通用的方案是**使用 PNG 格式並確保背景透明**。PNG 檔案相容性極高，幾乎能被所有郵件客戶端正確渲染。另一個選擇是**內嵌 SVG**，它可無損縮放且檔案較小，但務必注意：部分主流郵件軟體（如 Microsoft Outlook 的某些版本）對 SVG 的支援並不完整，可能導致圖示無法顯示。
絕對要避免依賴外部字體圖示（如 Font Awesome），因為收件者的郵件環境很可能沒有載入相應字型。在處理透明背景時需留意，某些郵件軟體（如 Outlook）會為圖片添加白色背景。因此，Icon 的設計應確保即使背景被填滿白色，其形狀與顏色仍清晰可辨。最終，無論選擇何種格式，都必須在 Gmail、Outlook、Apple Mail 等主流平臺上進行測試。
不可忽略的細節：Icon 的可及性 (Accessibility) 設計
可及性確保所有收件者，包括依賴螢幕閱讀器的用戶，都能理解 EDM 的內容。對於功能性 Icon（例如代表「下載」、「預約時鐘」或「重要提醒」），必須提供簡潔且具描述性的替代文字（alt text）。螢幕閱讀器會朗讀這段文字，讓視障使用者明白該 Icon 的用途。反之，純粹裝飾性的 Icon，其替代文字應留空，以免造成朗讀幹擾。
此外，Icon 與其背景之間需要有足夠的**色彩對比度**，確保低視力使用者也能清楚辨識。如果 EDM 同時提供純文字版本，則需規劃一個合理的回退方案：功能性 Icon 對應的文字描述應直接出現在純文字郵件中。這些細節看似微小，卻是包容性設計的重要體現，也是專業郵件設計的標誌。
為什麼 EDM 設計中需要使用 Icon？它和直接用圖片有什麼不同？
Icon 的主要作用是節省空間、快速引導視覺動線並強化關鍵行動（如 CTA）。相比大型裝飾圖片，它更輕量、功能指向性更強，能有效提升掃描效率，且風格更易與品牌系統統一。
EDM 中的 Icon 大小建議是多少像素？
需依放置位置而定。作為 CTA 旁的引導圖示，建議高度在 24-32 像素之間，以確保在手機上清晰可見；作為內容段落的列表圖示，則可與字型大小匹配，約 16-20 像素。關鍵是要與周圍元素保持視覺平衡。
如何選擇適合 EDM 的 Icon 風格，纔不會讓郵件看起來很亂？
核心原則是「風格統一」。應從品牌設計系統中提取現有的 Icon 風格（如線條粗細、端點形狀、填充方式）。若 EDM 有主色，Icon 可使用該色的單色版本，以保持整體調性一致，避免多種風格混雜。
使用 Icon 時，需要考慮什麼技術問題嗎？
需要。首要問題是郵件客戶端相容性。建議使用 PNG 格式並確保背景透明，因為某些郵件軟體（如 Outlook）對 SVG 的支援不佳。務必在多種郵件平臺（Gmail, Outlook, Apple Mail）進行測試，確認 Icon 顯示正常。
Icon 旁邊需要加文字說明嗎？什麼時候加？
如果 Icon 是功能性的（例如代表「下載」、「預約」），強烈建議加上簡短文字或確保其含義足夠普遍易懂。僅當 Icon 純粹為裝飾性時，纔可省略文字，但仍建議為其設置空的替代文字以維持郵件結構。
社交媒體圖示算是 EDM Icon 的一種嗎？該怎麼處理？
是的，信尾的社羣媒體圖示是典型的應用案例。應將其視為整體 Icon 系統的一部分，保持與其他 Icon 相同的風格與色彩。它們通常連結到品牌社交平臺，點擊區域需足夠大以方便手機用戶操作。
在設計系統或模板中，如何規範 EDM 的 Icon 使用？
建議在設計系統的文檔中明確：
1. 定義可使用的 Icon 風格與尺寸；
2. 規定在 EDM 各區塊（如信頭、內容、CTA）的預設放置位置與間距；
3. 提供常用功能 Icon（如箭頭、勾選、星號）的標準庫，確保所有 EDM 設計師能快速保持一致性。
如果我的品牌沒有現成的 Icon 設計規範，該如何開始？
可從現有的 EDM 模板或網站資產中分析出已使用的圖示風格作為基礎。優先建立一個小而精的「核心 Icon 集」（約10-15個），涵蓋 EDM 最常用功能（如：箭頭、勾號、下載、時鐘）。確保它們線條粗細、圓角、視覺重量一致，並以此作為擴展的基準。