Bản tin

Thiết kế newsletter: Các phương pháp hay nhất cho bố cục email hấp dẫn

Làm chủ thiết kế newsletter với các phương pháp hay nhất về bố cục, mẹo về kiểu chữ và chiến lược trực quan. Tạo newsletter email trông chuyên nghiệp và thúc đẩy tương tác.

Set Noa
Set Noa
Cập nhật
0 lượt truy cập · 7 ngày
newsletter design
Thiết kế newsletter?

Thiết kế newsletter nên ưu tiên khả năng đọc, khả năng phản hồi trên thiết bị di động và tính nhất quán trực quan. Hướng dẫn này bao gồm các chiến lược bố cục, kiểu chữ, sử dụng màu sắc, tối ưu hóa hình ảnh và công cụ thiết kế để tạo newsletter mà người đăng ký muốn đọc.

Tìm hiểu thêm

Thiết kế newsletter là kiến trúc vô hình quyết định liệu người đăng ký có đọc nội dung của bạn hay xóa nó. Một newsletter được thiết kế tốt hướng dẫn mắt người đọc tự nhiên từ tiêu đề đến nội dung đến hành động. Một newsletter được thiết kế kém tạo ra sự hỗn loạn trực quan khiến người đọc rời đi, bất kể nội dung có giá trị đến mức nào.

Tin tốt là: thiết kế newsletter hiệu quả không yêu cầu nhà thiết kế chuyên nghiệp. Nó đòi hỏi phải hiểu một số nguyên tắc cốt lõi và áp dụng chúng nhất quán. Hướng dẫn này bao gồm các chiến lược bố cục, quy tắc kiểu chữ và kỹ thuật trực quan giúp newsletter hấp dẫn và dễ đọc.

Bốn mẫu đang chạy

Mọi thứ bên dưới phần này đều là một khẳng định về bố cục, mà khẳng định về bố cục thì rẻ. Vậy nên đây là bốn bản tin, đang chạy.

Mỗi bản nằm trong khung có chiều rộng thật và hiển thị HTML của chính nó. Kéo chiều rộng xuống 375 px và xem cột nào xếp chồng, cột nào từ chối. Các khung theo đúng giao diện bạn đang đọc trang này: ở chế độ tối bạn thấy khối tối thật của từng mẫu, không phải bản gần đúng. Mã nguồn nằm dưới mỗi khung.

Mẫu Tajo

Bốn bố cục đang chạy

Mỗi khung bên dưới là HTML email thật của mẫu, đặt trong khung có chiều rộng thật. Kéo chiều rộng xuống 375 px và xem các cột xếp chồng lên nhau.

Theo giao diện bạn đang dùng — đổi ở phần đầu trang để xem giao diện còn lại.

Đọc HTML của The Letter 6 KB, không cần bước biên dịch 
<!DOCTYPE html>
<html lang="vi" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Câu trích bạn giữ trong ứng dụng ghi chú làm việc nhiều hơn cả lịch nội dung của bạn.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Ảnh đầu thư Meridian Press: những cung xanh đồng tâm bị cắt bởi một dải chéo" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Số 47</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">Kho lưu trữ chính là sản phẩm</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Ba tuần trước tôi đi tìm một bài viết năm 2019 và không tìm thấy. Không có trên trang, không có trong bản xuất, không có trong công cụ tìm kiếm của chính nền tảng. Một nghìn hai trăm số, và mục lục duy nhất còn hoạt động là trí nhớ của tôi.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Đó là phần không ai kể cho bạn về sáu năm làm bản tin. Gửi đi thì dễ. Giữ lại thì không.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Mọi thứ bạn xuất bản đều là một khoản gửi vào. Gần như không ai xây phần rút ra.</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Vì vậy tuần này tôi dựng lại các số cũ thành một kho lưu trữ thật sự, có thẻ, tìm kiếm toàn văn và địa chỉ vĩnh viễn. Mất chín ngày. Số người đăng ký không nhúc nhích. Thời gian ở lại trang tăng gấp ba.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Toàn bộ nằm bên dưới, kể cả những phần không thành công.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Đọc trọn số này &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Viết tay mỗi thứ Năm. Trả lời đi, tôi đọc hết.</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Hủy đăng ký</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Xem trong trình duyệt</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Chúng là của chúng tôi. Chúng tôi thiết kế cho bài này, kể cả phần đồ họa do một tập lệnh hình học tất định sinh ra, nằm trong cùng kho mã với trang này — không ảnh kho và không ảnh chụp thư viện mẫu của người khác. Sự phân biệt ấy nặng hơn vẻ ngoài của nó: một cẩm nang thiết kế email tự minh họa bằng email của người khác đang đòi bạn tin lời nó.

Bốn mẫu không phải bốn phong cách. Đó là bốn câu trả lời cho bốn công việc khác nhau:

  • The Letter dành cho người viết mà toàn bộ giá trị là phần chữ. Một hình ảnh, lề 88 px, một liên kết chữ thay cho nút. Nút bấm trong thư cá nhân đọc như quảng cáo.
  • The Digest dành cho bản tổng hợp được lướt. Hàng đánh số, thời gian đọc trước mỗi tiêu đề, và một lời kêu gọi hành động ở cuối thay vì sáu.
  • The Storefront dành cho đợt ra mắt. Đây là bố cục duy nhất mà mở đầu bằng hình ảnh là đúng, và nó vẫn được dựng sao cho hình ảnh có thể hỏng.
  • The Brief dành cho con số. Ba chỉ số đứng trên mọi thứ khác, và một biểu đồ cột làm bằng ô bảng thay vì PNG.

Điểm chung của chúng là phần đáng sao chép. Một cột 600 px. Chữ thân tối thiểu 16 px. Một màu nhấn, còn lại là mực. Mỗi hình đều mang văn bản thay thế, và mỗi bố cục vẫn có nghĩa khi hình bị chặn. Một lược đồ màu được khai báo cộng với một khối tối tường minh, bởi mặc định trong ứng dụng tối là email của bạn bị đảo màu bởi một thuật toán chưa từng thấy thương hiệu của bạn.

Chúng tôi làm sai một mẫu ngay lần đầu, và đó chính là mẫu đáng nêu tên. Ban đầu The Digest xếp chồng các hàng bài viết trên điện thoại — đúng như mọi cẩm nang email đáp ứng khuyên. Việc xếp chồng biến ba ảnh nhỏ 112 px thành ba hình trang trí chiếm trọn chiều rộng cao 335 px, và một bản tổng hợp sáu chủ đề trở thành một cuộn dài. Hàng đó nay là bố cục hai cột duy nhất trong bộ không xếp chồng. Các quy tắc về xếp chồng nói về cột nội dung. Ảnh nhỏ không phải là một cột nội dung.

Dựng một mẫu như vậy trong Brevo

Không mẫu nào trong bốn mẫu trên cần lập trình viên để lắp ráp. Mỗi màn hình bên dưới là cùng một mẫu trên khung kéo thả của Brevo, với một khối được chọn.

Hãy bắt đầu từ nút chính, vì đó là khối có nhiều thiết lập nhất:

Brevo

The Storefront trên khung dựng

Trình soạn email kéo thả của Brevo với mẫu The Storefront trên khung dựng, nút chính được chọn và các thiết lập nhãn, liên kết, màu, bo góc và khoảng đệm ở bảng bên phải
Cột trái: các khối bạn kéo vào. Cột phải: mọi thứ về khối đang chọn. Trên khung dựng là một email rộng 600 px nằm trong ứng dụng rộng 680 px — vì thế bố cục di động không hiện ra: đúng ở 600 px thì điểm ngắt của chính mẫu sẽ kích hoạt và bạn sẽ sửa bản điện thoại trong khi nút chuyển vẫn ghi Máy tính.

Mỗi khối ở cột trái ứng với một thứ trong các mẫu phía trên. Chữ, Hình ảnh, Nút, Đường phân cách và Khoảng trống cho cấu trúc. Sản phẩm cho một hàng cửa hàng. HTML cho mọi thứ trình soạn không mô hình hóa — và biểu đồ của The Brief được dựng đúng như vậy:

Brevo

Một biểu đồ không có lấy một hình ảnh

Trình soạn email của Brevo với mẫu The Brief trên khung dựng, biểu đồ cột được chọn và bảng bên phải cho thấy nó được dựng bằng ô bảng, không dùng hình ảnh
Biểu đồ xuất ra PNG sẽ mất các con số trước việc chặn ảnh, trước sự đảo màu của chế độ tối và trước mọi trình đọc màn hình. Bốn hàng bảng với một ô tô màu và một nhãn chữ thì không mất gì, và cũng chẳng nặng chút nào.

Kiểu chữ cũng hoạt động y hệt. Chọn một khối chữ và bảng thiết lập cho bạn phông, cỡ chữ, giãn dòng và khoảng đệm — đúng bằng toàn bộ đồ nghề mà The Letter cần:

Brevo

Câu trích là một khối chữ có đường kẻ bên cạnh

Trình soạn email của Brevo với mẫu The Letter trên khung dựng và câu trích được chọn: Georgia 19px trên 30px, in nghiêng, với đường kẻ trái 3px
Không có thành phần đặc biệt nào. Một khối chữ, một đường kẻ trái 3 px theo màu nhấn và 20 px khoảng đệm. Trong một bản tin tốt, gần như mọi thứ trông như thiết kế riêng đều là một khối tiêu chuẩn với hai thuộc tính được đổi.

Và hình ảnh có bảng riêng, nơi văn bản thay thế nằm trên cùng chứ không phải ở cuối một danh sách thiết lập:

Brevo

Văn bản thay thế là một trường, không phải điều nghĩ ra sau

Trình soạn email của Brevo với The Digest trên khung dựng và một ảnh nhỏ bài viết được chọn, hiển thị văn bản thay thế, kích thước hiển thị 112px, nguồn 480px và dung lượng 17 KB
Kích thước hiển thị 112 px, nguồn 480 px — chính tỷ lệ 2× đó giữ cho ảnh nhỏ sắc nét trên màn hình retina. Văn bản thay thế đứng đầu vì đó là phần của hình ảnh mà phần lớn người đăng ký thực sự nhận được.

Với các doanh nghiệp dùng Tajo, chính những phần này có thể được đổ dữ liệu động: gợi ý sản phẩm và nội dung cá nhân hóa dựa trên hành vi người đăng ký, kết xuất vào đúng những khối bạn đã sắp ở đây thay vì chọn tay cho từng lần gửi.

Nguyên tắc cơ bản về thiết kế newsletter

Thiết kế phục vụ nội dung

Nguyên tắc quan trọng nhất trong thiết kế newsletter: thiết kế nên làm cho nội dung dễ tiêu thụ hơn, không bao giờ khó hơn. Mọi quyết định thiết kế đều phải trả lời câu hỏi: điều này có giúp người đọc của tôi tìm và tiếp thu thông tin họ cần không?

Dấu hiệu của thiết kế newsletter tốt:

  • Người đọc có thể đọc lướt toàn bộ newsletter trong 10-15 giây
  • Nội dung quan trọng nhất hiển thị ngay lập tức
  • Mỗi phần có đầu và cuối rõ ràng
  • Lời kêu gọi hành động nổi bật mà không phô trương
  • Newsletter trông có chủ đích, không phải ngẫu nhiên

Dấu hiệu của thiết kế newsletter kém:

  • Người đọc không thể nhanh chóng tìm thấy nội dung chính
  • Nhiều phong cách thiết kế cạnh tranh thu hút sự chú ý
  • Văn bản khó đọc trên bất kỳ thiết bị nào
  • Bố cục bị vỡ trên màn hình điện thoại
  • Các khối văn bản dày đặc không có ngắt trực quan

Nguyên tắc phân cấp trực quan

Phân cấp trực quan kiểm soát thứ tự người đọc xử lý thông tin. Trong newsletter, thiết lập phân cấp thông qua:

Cấp độ phân cấpYếu tốXử lý thiết kế
ChínhTiêu đề chínhFont lớn nhất, đậm, vị trí trên cùng
PhụTiêu đề phầnFont vừa, màu tương phản
Bậc baNội dung thânFont tiêu chuẩn, cỡ dễ đọc
Hỗ trợSiêu dữ liệu (ngày, tác giả)Font nhỏ hơn, màu nhạt hơn
Hành độngNút/liên kết CTAMàu tương phản, kiểu nút

Các chiến lược bố cục

Bố cục một cột

Bố cục một cột là tiêu chuẩn vàng cho newsletter và là cách tiếp cận được đề xuất cho hầu hết các nhà xuất bản.

Ưu điểm:

  • Hiển thị hoàn hảo trên mọi thiết bị và kích thước màn hình
  • Tạo luồng đọc tự nhiên từ trên xuống dưới
  • Đơn giản hóa các quyết định thiết kế
  • Giảm các vấn đề hiển thị trên các ứng dụng email khác nhau
  • Phù hợp với cách mọi người đọc trên thiết bị di động (cuộn dọc)

Tốt nhất cho: Newsletter tập trung vào văn bản, newsletter cá nhân, nội dung giáo dục, phân tích dài hơi

Cấu trúc:

  1. Tiêu đề (logo, số phát hành, ngày)
  2. Giới thiệu hoặc ghi chú cá nhân
  3. Phần nội dung chính
  4. Các phần nội dung phụ (được phân tách bằng dấu phân cách)
  5. CTA hoặc lời nhắc tương tác
  6. Chân trang

Bố cục dựa trên thẻ

Tổ chức nội dung thành các thẻ trực quan riêng biệt, mỗi thẻ có đường viền, nền hoặc bóng riêng.

Ưu điểm:

  • Phân tách nội dung rõ ràng
  • Hoạt động tốt cho nội dung được tuyển chọn và tổng hợp liên kết
  • Mỗi thẻ có thể có hình ảnh và CTA riêng
  • Hấp dẫn về mặt trực quan mà không gây choáng ngợp

Tốt nhất cho: Tổng hợp nội dung, liên kết được tuyển chọn, trình bày sản phẩm, newsletter đa chủ đề

Mẹo thiết kế cho thẻ:

  • Sử dụng kích thước thẻ và khoảng cách nhất quán
  • Tối đa 2 thẻ mỗi hàng (xếp thành 1 trên thiết bị di động)
  • Bao gồm đường viền hoặc màu nền tinh tế để xác định thẻ
  • Duy trì khoảng đệm nhất quán bên trong mỗi thẻ

Bố cục kết hợp

Kết hợp cột nội dung chính với thanh bên hẹp hơn cho nội dung bổ sung.

Ưu điểm:

  • Chứa nhiều nội dung hơn mà không tăng độ dài email
  • Hoạt động cho newsletter có cả nội dung chính và phụ
  • Định dạng quen thuộc từ các ấn phẩm truyền thống

Hạn chế:

  • Phải thu gọn thành một cột trên thiết bị di động
  • Phức tạp hơn để xây dựng và duy trì
  • Có thể cảm thấy lộn xộn nếu không được tổ chức tốt

Tốt nhất cho: Newsletter công ty, ấn phẩm theo kiểu truyền thông, định dạng nặng về nội dung

Kiểu chữ cho newsletter

Kiểu chữ là yếu tố thiết kế có tác động lớn nhất trong bất kỳ email nào có nhiều văn bản. Chọn đúng font chữ, mọi thứ khác sẽ đâu vào đó.

Chọn font chữ

Các ứng dụng email có hỗ trợ font hạn chế. Sử dụng font an toàn cho web là lựa chọn chính:

FontPhong cáchTốt nhất cho
ArialSans-serif sạch, hiện đạiMục đích chung, kinh doanh
HelveticaSans-serif tinh tếThương hiệu cao cấp
GeorgiaSerif sang trọngBiên tập, dài hơi
Times New RomanSerif cổ điểnTruyền thống, trang trọng
VerdanaSans-serif rộng, dễ đọcVăn bản nhỏ, thiết bị di động
Trebuchet MSSans-serif hiện đạiSáng tạo, thông thường

Font web: Bạn có thể chỉ định font web (như Open Sans hoặc Lato) với font an toàn dự phòng. Chúng hiển thị trong Apple Mail, iOS Mail và một số ứng dụng Android, nhưng sẽ dùng lại font an toàn trong Outlook và Gmail cũ hơn.

Cỡ chữ

Yếu tốCỡ tối thiểuCỡ được đề xuất
Văn bản thân14px16px
Tiêu đề phần20px22-24px
Tiêu đề chính24px28-32px
Chú thích/siêu dữ liệu12px13-14px
Văn bản nút CTA14px16px
Văn bản preheader12px14px

Khoảng cách dòng và khả năng đọc

  • Chiều cao dòng: 1,4-1,6 cho văn bản thân (24-26px ở cỡ chữ 16px)
  • Khoảng cách đoạn: 16-24px giữa các đoạn
  • Độ dài dòng: 50-75 ký tự mỗi dòng (ngăn ngừa mỏi mắt)
  • Khoảng cách chữ: Mặc định cho văn bản thân, tăng nhẹ cho văn bản nhỏ

Định dạng văn bản

  • In đậm: Sử dụng cho các cụm từ chính và nhấn mạnh, không phải toàn bộ đoạn văn
  • In nghiêng: Sử dụng hạn chế cho trích dẫn, tiêu đề hoặc nhấn mạnh nhẹ
  • Gạch chân: Chỉ dành riêng cho liên kết (văn bản gạch chân không phải liên kết gây nhầm lẫn)
  • CHỮ HOA: Chỉ sử dụng cho nhãn ngắn hoặc nút, không bao giờ cho văn bản thân
  • Màu sắc: Sử dụng một màu nhấn cho liên kết, giữ văn bản thân màu xám đậm (#333) hoặc gần đen

Chiến lược màu sắc

Xây dựng bảng màu cho newsletter

Giới hạn newsletter của bạn ở 3-4 màu:

Vai trò màuCách sử dụngVí dụ
ChínhTiêu đề, nút CTA, điểm nhấnMàu xanh thương hiệu
Văn bảnNội dung thân, tiêu đề phụXám đậm (#333333)
NềnThân emailTrắng (#FFFFFF) hoặc xám nhạt (#F5F5F5)
NhấnLiên kết, điểm nổi bật, CTA phụMàu thứ cấp thương hiệu

Khả năng tiếp cận màu sắc

  • Duy trì tỷ lệ tương phản tối thiểu 4,5:1 giữa văn bản và nền
  • Không chỉ dựa vào màu sắc để truyền đạt thông tin
  • Kiểm tra bảng màu của bạn với trình mô phỏng mù màu
  • Đảm bảo liên kết phân biệt được với văn bản thông thường (sử dụng gạch chân, không chỉ màu sắc)

Cân nhắc về chế độ tối

Nhiều ứng dụng email hiện mặc định là chế độ tối. Thiết kế với chế độ tối trong tâm trí:

  • Tránh nền trắng thuần (#FFFFFF) — sử dụng trắng hơi ngoài (#FAFAFA)
  • Không sử dụng PNG trong suốt với các yếu tố tối (chúng biến mất trong chế độ tối)
  • Kiểm tra logo trên cả nền sáng và tối
  • Thêm thẻ meta để hỗ trợ bảng màu chế độ tối
  • Sử dụng đường viền hoặc phác thảo trên hình ảnh tối để chúng vẫn hiển thị

Sử dụng hình ảnh trong newsletter

Khi nào nên sử dụng hình ảnh

Hình ảnh nên thêm giá trị mà văn bản đơn thuần không thể cung cấp:

  • Ảnh sản phẩm: Hiển thị sản phẩm trong bối cảnh
  • Trực quan hóa dữ liệu: Biểu đồ, đồ thị và infographic
  • Ảnh chụp màn hình: Minh họa công cụ, tính năng hoặc quy trình
  • Ảnh đầu người: Xây dựng kết nối cá nhân với tác giả hoặc nhóm
  • Hình minh họa: Hỗ trợ cá tính và tông thương hiệu

Tối ưu hóa hình ảnh

Thông số kỹ thuậtKhuyến nghị
Định dạngJPEG cho ảnh, PNG cho đồ họa
Chiều rộngTiêu chuẩn 600px, 1200px cho retina
Kích thước fileDưới 200KB mỗi hình ảnh
Tổng kích thước emailDưới 100KB không bao gồm hình ảnh
Văn bản altMô tả, 125 ký tự hoặc ít hơn
Tỷ lệ khung hình2:1 cho hình ảnh hero, 1:1 cho hình thu nhỏ

Tỷ lệ hình ảnh/văn bản

Duy trì tỷ lệ văn bản/hình ảnh lành mạnh để tránh bộ lọc spam và đảm bảo khả năng đọc:

  • 60:40 văn bản so với hình ảnh là tỷ lệ được đề xuất
  • Email chủ yếu là hình ảnh (email chỉ có hình ảnh) có tỷ lệ spam cao hơn
  • Luôn bao gồm phiên bản văn bản của thông tin quan trọng, không chỉ trong hình ảnh
  • Thiết kế cho ứng dụng email có hình ảnh bị chặn: newsletter của bạn phải có ý nghĩa khi không có hình ảnh

Thiết kế newsletter ưu tiên thiết bị di động

Yêu cầu thiết kế di động

Với hơn 60% lượt mở newsletter trên thiết bị di động, thiết kế di động không phải là tùy chọn.

Quy tắc bố cục di động:

  • Chiều rộng nội dung tối đa: 600px (hiển thị tốt trên tất cả các thiết bị)
  • Mục tiêu nhấp tối thiểu: 44x44 pixel cho nút và liên kết
  • Cỡ chữ tối thiểu: 16px cho văn bản thân trên thiết bị di động
  • Bố cục một cột xếp tự nhiên
  • Nút CTA toàn chiều rộng trên thiết bị di động
  • Khoảng cách đầy đủ giữa các yếu tố có thể nhấp (ngăn nhấp nhầm)

Kỹ thuật thiết kế phản hồi

Kỹ thuậtMáy tính để bànThiết bị di động
Các phần nhiều cộtCạnh nhauXếp chồng dọc
Hình ảnhCó kích thước trong nội dungToàn chiều rộng, co lại
Liên kết điều hướngNằm ngangXếp chồng hoặc ẩn
Nút CTANội tuyến hoặc căn phảiToàn chiều rộng
Cỡ chữTiêu chuẩnHơi lớn hơn
Khoảng đệm20-40px15-20px

Kiểm tra hiển thị trên thiết bị di động

Kiểm tra thiết kế newsletter của bạn trên:

  • iPhone (Safari/Mail)
  • Android (ứng dụng Gmail)
  • iPad
  • Gmail (web)
  • Outlook (máy tính để bàn và web)
  • Apple Mail (máy tính để bàn)

Sử dụng các công cụ như Litmus hoặc Email on Acid để kiểm tra hiển thị tự động trên 90+ ứng dụng email.

Thiết kế các phần của newsletter

Tiêu đề

Tiêu đề của bạn thiết lập nhận dạng và đặt ra kỳ vọng:

  • Logo: Có kích thước phù hợp (không quá lớn, thường rộng 150-200px)
  • Mã nhận dạng phát hành: Số phát hành, ngày hoặc tên ấn bản
  • Liên kết xem trực tuyến: Cho người đăng ký gặp vấn đề hiển thị
  • Giữ gọn gàng: Tiêu đề không nên đẩy nội dung xuống dưới màn hình nhìn thấy đầu tiên

Dấu phân cách phần

Dấu phân cách rõ ràng giữa các phần nội dung giúp người đọc đọc lướt:

  • Đường kẻ ngang: Các đường đơn giản, mỏng (1-2px) với màu trung tính
  • Thay đổi màu nền: Xen kẽ giữa các phần trắng và xám nhạt
  • Khoảng cách thêm: 30-40px khoảng đệm giữa các phần
  • Tiêu đề phần: Văn bản đậm, lớn hơn với kiểu dáng nhất quán

Chân trang

Chân trang được thiết kế tốt hoàn thiện trải nghiệm:

  • Liên kết hủy đăng ký (bắt buộc theo pháp lý, dễ tìm)
  • Liên kết mạng xã hội
  • Địa chỉ thư tín thực tế (yêu cầu CAN-SPAM)
  • Liên kết xem trong trình duyệt
  • Tùy chọn chuyển tiếp cho bạn bè
  • Slogan thương hiệu ngắn gọn hoặc tuyên bố sứ mệnh

Công cụ thiết kế newsletter

Trình chỉnh sửa nền tảng

Hầu hết nền tảng newsletter đều bao gồm trình chỉnh sửa thiết kế tích hợp sẵn:

Nền tảngLoại trình chỉnh sửaTính linh hoạt thiết kếThư viện mẫu
BrevoKéo thảCao40+ mẫu
MailchimpKéo thảCao100+ mẫu
ConvertKitTrình chỉnh sửa đơn giảnVừa phảiHạn chế
SubstackTập trung vào văn bảnThấpTối thiểu

Trình chỉnh sửa kéo thả của Brevo giúp thiết kế newsletter chuyên nghiệp có thể thực hiện được mà không cần kiến thức lập trình. Đối với doanh nghiệp sử dụng Tajo, bạn có thể tự động điền vào các phần newsletter với đề xuất sản phẩm và nội dung được cá nhân hóa dựa trên hành vi của người đăng ký.

Tài nguyên thiết kế

  • Canva: Tạo hình ảnh tiêu đề newsletter, đồ họa mạng xã hội và hình minh họa
  • Unsplash/Pexels: Ảnh kho miễn phí
  • Really Good Emails: Thư viện cảm hứng của các email được thiết kế tốt
  • MJML: Khung email mã nguồn mở cho các thiết kế tùy chỉnh
  • Figma: Thiết kế mẫu newsletter tùy chỉnh với xuất plugin email

Danh sách kiểm tra thiết kế newsletter

Trước khi gửi bất kỳ newsletter nào, hãy xác minh:

Bố cục:

  • Bố cục một cột hoặc đa cột phản hồi đúng cách
  • Chiều rộng nội dung là 600px hoặc ít hơn
  • Phân cấp trực quan rõ ràng từ tiêu đề đến chân trang
  • Các phần được phân tách rõ ràng

Kiểu chữ:

  • Văn bản thân là 16px hoặc lớn hơn
  • Chiều cao dòng là 1,4-1,6
  • Tiêu đề tạo cấu trúc nội dung rõ ràng
  • Văn bản liên kết mô tả (không phải “nhấp vào đây”)

Hình ảnh:

  • Tất cả hình ảnh có văn bản alt
  • Hình ảnh được tối ưu hóa về kích thước file
  • Newsletter có thể đọc được mà không có hình ảnh
  • Hình ảnh retina được cung cấp cho màn hình độ phân giải cao

Thiết bị di động:

  • Đã kiểm tra trên iPhone và Android
  • Nút CTA có chiều rộng đầy đủ trên thiết bị di động
  • Cỡ chữ dễ đọc trên màn hình nhỏ
  • Mục tiêu nhấp tối thiểu 44px

Khả năng tiếp cận:

  • Tương phản màu sắc đạt tỷ lệ 4,5:1
  • Nội dung được cấu trúc với các tiêu đề phù hợp
  • Không có thông tin chỉ được truyền đạt bằng màu sắc
  • Tương thích với trình đọc màn hình

Thương hiệu:

  • Màu sắc khớp với bảng màu thương hiệu
  • Logo có kích thước và vị trí chính xác
  • Tông và giọng nhất quán với thương hiệu
  • Chân trang bao gồm tất cả các yếu tố pháp lý bắt buộc

Phát triển thiết kế newsletter của bạn

Thiết kế newsletter không phải là dự án một lần. Hãy phát triển thiết kế của bạn dựa trên dữ liệu hiệu suất và phản hồi của người đăng ký:

  • Theo dõi độ sâu cuộn: Người đọc có đến cuối newsletter của bạn không?
  • Theo dõi bản đồ nhấp: Phần nào nhận được nhiều lượt nhấp nhất? Quảng bá nội dung tương tự.
  • Khảo sát người đăng ký: Hỏi về sở thích thiết kế hàng năm
  • A/B test bố cục: So sánh bố cục thẻ với tuyến tính, vị trí hình ảnh và kiểu CTA
  • Xem xét đối thủ: Nghiên cứu những gì hoạt động trong các newsletter thành công trong lĩnh vực của bạn

Các thiết kế newsletter tốt nhất là vô hình. Người đăng ký không chú ý đến thiết kế — họ chú ý đến nội dung. Điều đó có nghĩa là thiết kế đang thực hiện công việc của nó hoàn hảo: loại bỏ ma sát, hướng dẫn sự chú ý và làm cho trải nghiệm đọc trở nên dễ dàng.

Bắt đầu đơn giản, duy trì nhất quán và tinh chỉnh dựa trên dữ liệu. Thiết kế newsletter của bạn nên phát triển cùng với đối tượng của bạn, không phải đi trước họ.

Câu hỏi Thường gặp

Điều gì tạo nên thiết kế newsletter tốt?
Thiết kế newsletter tốt sử dụng hệ thống phân cấp trực quan rõ ràng, thương hiệu nhất quán, kiểu chữ dễ đọc (tối thiểu 16px), bố cục một cột để tương thích với thiết bị di động và sử dụng khoảng trắng chiến lược. Nó hướng dẫn mắt người đọc từ tiêu đề đến nội dung đến lời kêu gọi hành động.
Newsletter nên có nhiều văn bản hay nhiều hình ảnh?
Sự cân bằng lý tưởng phụ thuộc vào loại nội dung của bạn, nhưng hầu hết newsletter hoạt động tốt nhất với tỷ lệ văn bản/hình ảnh là 60/40. Thiết kế ưu tiên văn bản đảm bảo khả năng đọc khi hình ảnh bị chặn và cải thiện khả năng giao nhận. Sử dụng hình ảnh để hỗ trợ nội dung, không phải thay thế nó.
Bố cục newsletter tốt nhất là gì?
Bố cục một cột hiệu quả nhất cho newsletter vì nó hoạt động trên tất cả các thiết bị, dễ đọc lướt và hướng sự chú ý theo luồng tuyến tính. Sử dụng dấu phân cách phần rõ ràng và định dạng nhất quán để tổ chức nội dung trong một cột duy nhất.
Chia sẻ bài viết này:
Quay lại tất cả bài viết

Đăng ký quyền truy cập sớm

Nhập tên của bạn cùng email hoặc số điện thoại. Chúng tôi sẽ liên hệ và gửi thông tin truy cập Tajo.

tự động nhận diện
Nhận Brevo