郵件營銷仍是觸達用戶最高 ROI 的渠道之一。但多數長郵件要么排版混亂，要么視覺單調。本教程用 Sketch 從零構建一款「單欄引導 + 三欄彈性」的高轉化長郵件，覆蓋佈局系統、組件化設計、響應式思維全流程。

前置準備與設計原則

• 字體策略： 首選 Helvetica Neue，備選 Helvetica / Arial，保證跨平台渲染一致性
• 圖層命名規範： Module/Component_State_Variant（如 Hero/CTA_Primary_Hover），團隊協作零溝通成本
• 畫板尺寸： 寬度 620px（郵件通用安全寬度），高度 3000px 預留長內容

佈局系統構建：參考線與模組化網格

採用「單欄主流 + 三欄輔助」混合佈局：單欄引導閱讀節奏，三欄承載功能塊，兼顧桌面端閱讀體驗與移動端優雅降級。

核心模組逐步構建

模組 1：Preheader 預覽文本（首屏關鍵）

文字：「Problems viewing this email? View it online」
樣式：11px / #8FA6B3，「View it online」#FF736D + 下劃線，距頂 30px

模組 2：Hero 區 —— 背景圖案 + Logo + Slogan + 主 CTA

1. 背景容器： 620×500px 矩形，填充 #F5F7F8，無描邊
2. 裝飾圖案： 引入 SVG 圖標素材，置於組底層，超出畫板自動遮罩（Sketch 畫板特性）
3. 遮罩技巧： 選中矩形 + 圖標組 → 右鍵「Mask」→ 僅顯示矩形內區域，外層圖層不受影響
4. Logo 放置： 90×31px，置中偏上 (X=265, Y=100)
5. Slogan： 560px 寬文本框，「Your place to discover real world skills」，48px 粗體 / #424242 / 行高 45 / 置中，「real」斜體強調
6. 主 CTA 按鈕： 220×45px 圓角矩形 (R=30) / #D92B2B，文本「Join us from $10/month」15px 白粗體，距 Slogan 50px
7. 組件化： 文字+矩形群組 → 右鍵「Create Symbol」→ 紫色資料夾圖標標識，全局復用一鍵更新

模組 3：課程卡片三欄佈局（Symbol 實例化）

利用 Symbol 的「Override」功能，同一組件注入不同圖片、標題、描述、CTA 文本，保持視覺一致性的同時高效產出內容區塊。

響應式思維在郵件設計中的落地

• 所有寬度單位基於 620px 畫板，導出 HTML 時對應 width="100%" max-width="620px"
• 三欄區塊在移動端通過 CSS display: block 自然堆疊為單欄
• 圖片標註 style="width:100%; height:auto;" 自適應容器
• CTA 按鈕最小觸控區域 44×44px，符合無障礙標準

交付清單

1. Sketch 源文件（含 Symbols 頁、Styles 頁）
2. 切圖標註：@1x/@2x/@3x PNG，SVG 圖標
3. 樣式指南：色值、字體階層、間距系統、組件狀態表
4. HTML 結構建議文檔（含內聯樣式兼容性註釋）

這套工作流讓設計師從「畫圖」進化為「設計系統建設者」，郵件迭代效率提升 80% 以上。下次面對長郵件需求，請先搭好佈局骨架、定義好 Symbol 庫，再行注入內容 —— 這才是專業的節奏。