Email template

A Email Template Design Master

电邮模板设计大师
V1.0.4

作者：Lerry@mailbus.net

序言
　　本《电邮模板设计大师》为中邮通|Mailbus资深设计师Lerry在长期从事电邮设计工作中
的经验总结，涉及到了电邮模板策划中相关的设计理念、制作经验、评估标准等，所采用第三
方素材，均由《认证电邮营销师|Certificated eMail Marketer》电子报订阅用户推荐，中邮
通|Mailbus随即做了可公开性审慎调查和个人隐私审查，所做点评由中邮通|Mailbus资深设
计师Lerry担当，只限于学术研究范围以提高国内电邮设计水平为目的，并无侵害关联权益人
的动机，任何人有任何疑议欢迎主动批评指正。

　　Lerry毕业于中央美院，有深厚的线上互动体验设计经验，亲自设计或指导团队设计过的
电邮模板超过1000个，在2009年8月举办的客户见面会上，被某500强客户代表尊称为—模
板王—称号。

　　本《电邮模板设计大师》于2010年5月24日出版，不定期升级
　　想要获得最新版，请直接联系　Lerry@mailbus.net
　　或直接登录http://www.mailbus.net/download.htm下载


读者来信
　　"我一直是《认证电邮营销师|CEMM》的忠实读者，最近很关注您主持

的模板评测，但我决策那些指标是非常有道理的，我也是平面设计出身，但

　　《电邮模板设计大师》出版两周，下载量突破3500次，很多热心读者有勇气把虚无缥缈的设计进行量化，您是第一个。佩服！"

发mail支持我，读者的支持是我继续更新下去的源动力，真的非常感谢大　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-27 北京

家！

　　经过了来信人许可，我把一部分读者来信登在这里：　　"果然是模板王，理论水平高，点评语简短但很到位。"

　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-27 北京

　　"你好，我是一家电子商务企业做EDM的，之前一直是自己在摸索这方　　"不知在大学可否开一门专门课程讲EDM设计和经济指标之间的关系？"

面的知识，研究各邮箱对邮件的CSS处理情况，以保证用户能看到我们希望　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-26 天津

的效果。现在看到你写的这个pdf文档，简直省却了一大堆工作，还能学到

很多新的东西，实在太感谢了" 　　"我拜读过您的大作《电邮模板设计大师》后，对您非常崇拜，模板王的

　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-28 南京称号实至名归！希望成为您的学生。"

　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-26 上海

　　"拜读了大作，我深深理解了电子邮件对塑造企业品牌的价值。以往我

习惯抄袭别人的模板，现在我也打算自己来创意，但某些元素的借用是否　　"My Friend TONY WONG shared ur ebook, COOL! This is the first

算抄袭，我还搞不明白，但似乎快找到答案了。真希望有机会当面请教。" book focusing email design for ROI evaluation. Thanks u, Lerry!"

　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-27 成都　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-26 香港


目录
1 基础知识　3.5 图片样式与背景图片颜色使用　···································································································第23-24页

　3.6 模板html标签规则　···································································································································第25页
　1.1 电邮营销行业发展状况　··························································································································第6-7页
　3.7 动画与互动元素的处理　·························································································································第25页
　1.2 电邮模板在电邮营销中的地位　··············································································································第8页
　3.8 使用所见即所得工具，最好在制作完成后手动优化代码　··············································第25页

2 电邮模板的设计理念　3.9 邮件附件夹带　···············································································································································第25页

　2.1 商业品牌效应设计与坚持、色彩选择　····························································································第10页

　2.2 最优宽度与高度　············································································································································第11页
4 素材目录
　4.1 退订　····································································································································································第27页
　2.3 创意，高质量的图片/图形　·············································································································第12-13页
　4.2 网络查看方式　··············································································································································第28页
　2.4 商业区与第一视点　······································································································································第14页
　4.3 转发　···································································································································································第29页
　2.5 模板要素与布局　···········································································································································第15页
　4.4 标题　···································································································································································第30页
　2.6 文字意境表达　················································································································································第16页
　4.5 Banner图片　·················································································································································第31页
　2.7 设计时考虑切割制作模板需要规避的难点　···············································································第17页
　4.6 内容模块　·················································································································································第32-33页
　2.8 规避SPAM要素　···········································································································································第18页
　4.7 商业区　······························································································································································第34页

3 电邮模板的制作经验　4.8 商业转化点　············································································································································第35-36页

　4.9 品牌传递　·················································································································································第37-38页
　3.1 模板编码语言选择　·····································································································································第20页
　4.10 版权信息　····················································································································································第39页
　3.2 不要使用div，是用最简单的嵌套table定位　···········································································第21页
　4.11 栏目名称　····················································································································································第40页
　3.3 图片与文本链接规则　································································································································第22页

　3.4 css样式编写　···················································································································································第22页
5 电邮模板评估　················································································································第41-59页


基础知识

电邮模板的设计理念

电邮模板的制作

素材目录

电邮模板评估


1.1 电邮营销行业发展状况　　时间过了2、3年，恰逢全球反垃圾邮件工作成效最卓著的时代，全社会对
电子邮件的负面认知水平有所下降，电子邮件营销市场随即开始快速增长。
　　电子邮件作为最传统有最先进的一个营销工具，一直受到非专业营销人
士的误解，也一直受到专业营销人士的追捧。早在2005年，banner广告市
场份额最大的时候，电子邮件广告作为banner广告的一个补充而存在，同
时，市场呼声很高的SEM连电子邮件广告也不如屈居第三位。这反映一个什
么问题呢？笔者认为，主要是认识问题，认识问题是有惯性的。当掌握话语
权但知识老旧营销高管们没有充分了解互联网的互动、精确、高效等核心价
值之前，确实有个预热的过程。

　　另外，在05年到08年期间，源于DM和Call-center的直复营销理念开始在
全球流行，开信跟踪技术和收信行为数据统计平台纷纷出现，电子邮件逐渐PK
掉了Banner广告成为霸主。随之角色也有改变，由电子邮件广告转变为电子邮
件营销。

P6 . 电邮营销行业发展状况电邮模板设计大师

09年，邮件行业又有了一些新的变化，出现了2个趋势，一个是电子邮件　　电子邮件商务，其推动力主要来自于对传统直复营销的静态身份分类理
媒体，一个是电子邮件商务。电子邮件媒体，主要预示着电子邮件对传统文论的突破，取代它的是动态行为数据挖掘，特别是与宿主站结合起来的，靠
字和图片出版的替代，在时效性、表现力、渗透率等诸多方面显示出巨大优 A/B Test经验积累起来的，可挖掘受众动机的高级指标理论的出现。来自权威
势。中邮通|MailBus服务过的一个传统媒介客户从06年开始做电子报，一开机构的监测数据，最近1年来，中国电子商务行业使用电子邮件的规模至少增
始只拥有不到8万邮件地址，2年后，活跃邮件地址已经达到30万，其中完整长了20倍。
身份信息的不少于12万，而其产生的直接收益09年全年已经超过2500万人民
币。直接收益包含：banner广告、频道/栏目冠名、软文推送、企业市场调
查、新产品体验活动、会议观众招募等。其背后的推动力，主要是品牌数字
化理论推动下的邮件地址列表分级管理手段有利于先进。
　　举个例子，中邮通|MailBus的一个VIP客户把邮件列表的级别分的非常细
，包含高度信任列表、信任列表、开信列表、候选列表、新列表A、新列表B
、新列表C、绝对退信列表、相对退信列表，并设计了一个算法在自己的
CRM系统中自动操作这些列表。中邮通|MailBus曾经帮这个客户做过一个　　总结一下，如今的电子邮件行业，正在呈现出百花齐放的格局，价值链
ROI分析报告，该自动算法等效100个坐席的Call-Center，而其长期成本却异常复杂。
只有不到5个Call-Center席位。

P7 . 电邮营销行业发展状况电邮模板设计大师

1.2 电邮模板在电邮营销中的地位
　　电邮模板设计是一个新领域，它主要解决2个原则：
　　1）无信任基础情况下开信后1.8秒内不产生反感；
　　2）有信任基础情况下模板本身有不断微调空间来抵消动态内容同质化可
能带来的审美疲劳。

　　现实情况下，由于电邮模板设计的直接操作者的背景问题，对上述2个原
则根本不了解，而闹出不少笑话。比如：
　　传统的DM设计人员出身的电邮模板设计人员，他们习惯把电邮模板等同
于EDM，全部采用大红大紫的方式来体现，殊不知，EDM仅仅是电邮模板的
一个子类，“大红大紫”是最容易招致反感的。
　　电邮模板的角色非常特殊，和一般人的理解大不相同，笔者认为，它的
价值主要体现在统一思路上，统一的是像我这样的外包公司和企业客户之间
的认识，统一的是企业客户内部高层和执行层之间的认识。下面是笔者的一
个工作记录：

P8 . 电邮模板在电邮营销中的地位电邮模板设计大师

2.1 商业品牌效应设计与坚持、色彩选择　　模板中色彩数量越少越好，但是,对于“变化式banner”
和“正文中图片”, 并不限制, 只要求框架配色可以和他们协调,
一个成熟的品牌，必然会有代表自己品牌特点的标准AI设计；适当的对比是可以的。

FT中文网网站与邮件模板对比：

雅诗兰黛网站与邮件模板对比：

　　对于品牌邮件模板设计，同
样要建立一套深埋用户心里的品
牌AI，这套AI标准以企业品牌已
经宣传的色彩、logo、宣传品布
局方式及亮点为基础制定。

P10 . 商业品牌效应设计与坚持、色彩选择电邮模板设计大师

2.2 最优宽度与高度　　邮件模板高度最好是2屏幕为好,

　　邮件模板宽度最佳区间是600px~650px。最大3屏, 最小1.5屏。

　　在大多数邮件客户端或web邮件浏览器中，邮件都不会默认是全屏显　　页面过短，传递给用户的信息量

示，如果邮件模板过宽，会造成部分内容被遮盖住，浏览者需要拉动横向必然小，大部分时候很难依靠简短的

滚动条来浏览，造成浏览上的不便。描述让用户产生信任感；

　　经验告诉我们，600px~650px是比较理想的邮件模板宽度。　　页面过长，内容过多，会让用户

产生厌烦感，很多时候就不会仔细观

看我们想传达给用户的重要信息。

没有出现横向滚动条，

浏览只需要拖动纵向滚动条

页面过宽出现了横向滚动条，

浏览需要拖动横向纵向两个滚动条
过长的邮件，容易让用户产生厌烦感：

P11 . 最优宽度与高度电邮模板设计大师

2.3 创意，高质量的图片/图形　　美观清晰的图片，代表性、指导性强的图形，能够提升模板被浏

　　精妙的创意，新奇的思路，可以令模板可观赏性显著增加，能够览的时间和下一次收到类似邮件的打开率。

非常显著的吸引用户眼球，显著提升用户反馈几率。

图片的精美清晰程度，

Apple的邮件创意：直接影响用户的第一观感：

P12 . 创意，高质量的图片/图形电邮模板设计大师

完全图片切割的邮件，有直接被邮件服务商拒之门外的危险：　　图片的比例最好不要过大，即使不是图片, 文字底色过重，

面积过大, 在感觉上也属于图片比例太大。

　　图片的处理一定要细致，让用户看到作者对待模板的认

真程度。但是不要让图片占去过多的篇幅，甚至整个模板都

用图片拼接，这会严重的触犯垃圾邮件规则，有很大可能性

直接被邮件服务商拒之门外。
文字的底色过重，感觉上就像一整张图片

P13 . 创意，高质量的图片/图形电邮模板设计大师

2.4 商业区与第一视点
通篇都是商业区，会直接被定义为垃圾邮件
　　商业区是edm产生利润点的最关键部分，商业区的规划直接影响

邮件营销的成败。

　　对于有信任商业邮件，商业区所占模板比例不应超过1/3；

　　对于无信任商业邮件，商业区所占比例更应小于1/5。

　　商业区应该设计在第一视点旁边，最好不要完全重合。

　　通篇都是商业区，没有用户希望看到或可以留下深刻印象的内容的邮件模板，直

接会被用户定位为垃圾邮件，甚至直接被邮件服务商屏蔽，在策划与设计上是彻头彻

尾的失败。
商业转化点设计在第一视点附近，

商业区与第一视点不重合

P14 . 商业区与第一视点电邮模板设计大师

2.5 模板要素与布局
边：
边的作用就是、转（严重刺激认知情

头：绪的一个图像类创意点）和合（商业

头一般是最上面,和正文之间有明确的分隔, 是用来传达品牌的,很少变化；转化点一般是个按钮）

头所表达的知觉和信仰层次的心里过程, 除了图形外,文字也很重要,

可以体现在标题的固定部分和发件人,位置,
（边干主功能要有起（借口）、承（吸引要
标题的固定部分,比如 “[Mailbus:] XXXXX ” 中的“Mailbus:”；
素如软文等非商业要素）、转（严重刺激认
头本身一般不变,但,随着标题变化,构图不变但点缀和基础配色可能会变。
知情绪的一个图像类创意点）、合（商业转

化点一般是个按钮）四要素。）

体：
体要包含眼睛（这里是标题），标题创意和头本身要协调，这里同时包含脚：
主要是版权信息等
配色、文字创意等；

标题一般和正文中的关键点是一致的,后面叫第一视点,这样,头和体就串联

起来了；

因此, 有必要把标题来源的某个文字特殊显示,这样用户才能快速找到。

P15 . 模板要素与布局电邮模板设计大师

2.6 文字意境表达　　意境美是中华民族审美理想的结晶。文

字的意境美亦是广告审美的重要一环。但意

境美是“只可意会，不可言传”的，它没有

固定的标准。那么edm对文字意境美的追求

主要体现在哪些方而呢？细细品来，edm对

意境美的追求最主要的是对含蓄美的追求。
“对于上班族来说，这是最轻

松的充电方式，只要5分钟，
　　所谓含蓄，就是意思含而不露、耐人寻
学到的是最实用的英语对话”
味。作为艺术的形式语言，它是指在不损害

揭示客观事物的本质，不减少形象感染力的

要求下，所体现的一种更简洁、更概括、更

有回味的意境表达方式。

P16 . 文字意境表达电邮模板设计大师

2.7 设计时考虑切割制作模板需要规避的难点

　　Edm以网络为传播媒介的交流形式，注定了它在设计的时候有一

些与传统dm广告设计不同的要求：

尽量不要出现奇形怪状的图形连接(需要使用<map>来实现的)；

尽量不使用渐变色，更不要使用大面积斜方向的渐变色，除非此色彩体现在图

片中；

文本内容不要使用web不能浏览的字体或需要用户另外安装的字体；

奇形怪状的图形链接
尽量不要设计需要用动画或脚本展现的内容，为了安全原因，大部分实现动画

的方式（如Flash JavaScript Active等）都不能在邮件中传播

特殊的字体，只好用
图片切割表现出来

设计假的播放按钮，

很不错的方式：

P17 . 设计时考虑切割制作模板需要规避的难点电邮模板设计大师

2.8 规避SPAM要素完全图片切割，文本内容非常少或没有任何文本内容

(此类邮件甚至有直接被邮件运营商封杀，用户根本接收不到的风险)；
垃圾邮件有着各种明显的特点，如：

大面积红黄等刺激色，已经成为垃圾邮件的一个标志；

没有实质性的、用户感兴趣的文本内容，通篇广告；

完全没有设计，直接发送word或其他文档软件制作的邮件内容

(美观度极低，没有丝毫专业性可信性)。

P18 . 规避SPAM要素电邮模板设计大师

3.1 模板编码语言选择
　　但是使用比较专业的发送软件/系统，如Mailbus的
LightSpeed，可有多种选择。
　　模板编码设定与使用的发送软件有关，一般来说，utf-8为较常用
的选择，错误的编码会造成用户浏览的时候出现乱码；

Mailbus开发的LightSpeed系统，

可以选用不同的编码语言。

编码正确，邮件正常显示编码错误，邮件出现乱码

P20 . 模板编码语言选择电邮模板设计大师

3.2 不要使用div，使用最简单的嵌套table定位　　同时也不要使用单一table重复多次colspan，可能会被邮件客

户端判断为结构过于复杂，归类为垃圾邮件；同时也容易被打乱布
　　Div+css是近几年新兴的web2.0定位方式，这种方式不适合在
局而影响用户浏览。
邮件模板切割中使用，不同邮件客户端或在线浏览器对css模型解释

不尽相同，会造成错位或布局混乱等问题。 <table>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
这里出现错位 <td> </td>
</tr>
<tr>
</tr>
</table>

多次重复使用colspan，建议不要使用

<table>
<tr>
<td><table>
<tr>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
使用嵌套表格布局，建议使用

P21 . 不要使用div，使用最简单的嵌套table定位电邮模板设计大师

3.3 图片与文本链接规则 3.4 css样式编写

模板中所有链接，都必须使用绝对路径；不要使用外部样式表引用，将样式表写入模板内部，如：

<td style="padding:6px">
链接长度不能超过255个字符，不能存在空格，也不能有中文字
<a href="#" style="font-size: 14px;color:#0c6485">
符，否则可能会导致连接无法追踪； <b>邮件模板</b>

</a>

</td>
图片链接不要使用<map>标签，否则可能被邮件客户端判定为

垃圾邮件，甚至被邮件运营商直接屏蔽。
如果模板有完全相同样式的列表型文本（如新闻列表等），可

以吧样式表写在页面内<style></style>中引用，但缺点是在邮
模板中文本文字不能使用过大的字体，否则可能会被邮件客户
件转发过程中经过web编辑器或邮件客户端的编辑，
端判定为垃圾邮件。
<style></style>被去掉，导致此列表样式变形。

这种页面内引用的方式却能节省大量代码，使代码与内容比降

低，同时也缩减了模板文件大小，有利于模板评分。

P22 . 图片与文本链接规则 css样式编写电邮模板设计大师

3.5 图片样式与背景图片颜色使用
使用背景图片作banner，
模板尽量不要使用背景图片。
导致Gmail中不显示
背景图片在某些邮件客户端或或web界面(如

Gmail)中默认不显示。

模板中每张图的地址都一定要用绝对地址，

否则会不显示；每张图都要指定alt属性，可此邮件正常显示示例：

以在图片被拦截的时候显示图片的内容；每

张图都要指定width宽度、height高度，在

图片被拦截的时候，不会因图片大小无法读

取而被打乱布局。

图片没有设定alt属性，

导致图片被拦截的时候用户

不知道图片的主题

P23 . 图片样式与背景图片颜色使用电邮模板设计大师

body中不要设定背景色，不然在转发邮件的时候，转发人写的信息背景色都会变

为被转发邮件的背景色，影响浏览。

如果一定要给邮件模板设定整体背景色，请在模板文件最外面加一个table，设定

此table的背景色。

<body>

<table width="100%" border="0" cellspacing="0"

cellpadding="0">

<tr>

<td style="background-color: #520000;"> </td>

</tr>

</table>

</body>

在切割模板的时候，要注意限制图片的大小和数量，不要为了效果使图片过大，

会使邮件接收者打开过于缓慢，甚至直接关闭邮件。

更不要完全把模板切为图片形式，那样会在图片被拦截的时候使用户看不到内

容，并且很可能会直接被邮件运营商或邮件客户端认定为垃圾邮件。
令人完全不知是什么的全图片邮件(Gmail真实截图)
邮件中图片完全没有alt属性，这种邮件一旦图片被拦截，
即使设定了“网络查看方式”又有几个用户会点击呢？

完整邮件

P24 . 图片样式与背景图片颜色使用电邮模板设计大师

3.6 模板html标签规则 3.8 使用所见即所得工具，在制作完成后手动优化代码

尽量不要使用提交表单；使用主流所见即所得工具可以节省大量时间、提高工作效率，但所见即所得工
具生成的代码会有许多垃圾代码掺杂其中，最好在制作完成后手动优化。
padding和margin标签：table中，某些邮件客户端或web界面（如Gmail），
对浮动的标签(padding、margin等)支持很差，所以尽量不要使用；
3.9 邮件附件夹带
float浮动标签：某些邮件客户端不支持浮动属性，尽量避免使用。
邮件一定不要夹带附件，发送大量附件会占用大量珍贵的网络带宽，切大部分附件

在页面内调用<style></style>的情况下，尽量不要使用<h2>、<ul>、<li>、<p> 用户根本不会打开，这部分占用的带宽基本都是浪费的。

、<ol>等有默认样式的标签，防止<style></style>被隔离时页面布局混乱。
带有附件的邮件有很大可能被用户认为是病毒，对品牌产生不良影响。

在模板上设置下载按钮，链接到网站上下载页面，还可以给网站带来一部分流量，
3.7 动画与互动元素的处理何乐而不为。

可以使用简单的gif动画来表达某些需要明显突出的要素，但要控制gif文件的大
小，不要影响整封邮件的下载浏览速度；

不要使用flash动画或JavaScript Active等，前些年邮件病毒泛滥，大部分邮件
运营商都已经屏蔽了这些元素。

设计假的播放按钮，
很不错的处理方式

P25 . 模板html标签规则动画与互动元素的处理优化代码邮件附件夹带电邮模板设计大师

我们在这里讨论的模板，都是属于群发型邮件，我们虽说可以对收件人作出
行为分析、或者在用户注册的时候收集到收件人的相关信息，但是我们并不了解
收件人看到邮件时的浏览环境，所以这类的邮件需要带有一些必要的附加要素，
如：退订邮件、网络浏览方式、转发
退订：

4.1 退订《互联网电子邮件服务管理办法》第十四条

规定：

　　互联网电子邮件服务发送者发送包含商

业广告内容的互联网电子邮件，应当向接收

者提供拒绝继续接收的联系方式，包括发送

者的电子邮件地址，并保证所提供的联系方

式在30日内有效。

《网络交易平台服务规范》第一章第二条中

对垃圾邮件的定义：

　　垃圾邮件——未经请求的邮件及非法邮

件，指未经收件人同意大量发送的电子邮件

，且所发送的邮件不具有退订功能或者收件

人无法拒绝接收的，或在收件人向发件人提

出退订请求或者拒绝接受其所发送的邮件后

，发件人仍然发送的电子邮件。

P27 . 素材目录退订电邮模板设计大师

4.2 网络查看方式
用户无法在邮件环境中浏览的时候，提供“网络查看方式”，一般是直接打开一个宿主上的页面，这个页面的内容就是邮件发送的模板。

P28 . 素材目录网络查看方式电邮模板设计大师

4.3 转发
“转发”提供用户给朋友或家人转发当前邮件样本的方式，这里所说的转发并不是直接通过用户浏览器进行直接转发，

而是把用户想要转发的邮件地址提交给邮件发送方，发送方直接给此地址发送此邮件样本。

举办有奖励的或有强烈吸引推荐性的“转发”“推荐

”的活动，是邮件发送方快速积累新会员的最直接的方

式。

只要活动的奖励足够吸引人，或活动主题内容具备非

常强的吸引力，就可以用很低的成本快速大量的吸引会

员注册。

P29 . 素材目录转发电邮模板设计大师

4.4 标题
“标题”是整个模板的“眼睛”，是第一时间吸引用户阅读的集中模板精华内容的表现。

“醒目”是标题设计是否合理的第一要素，其次是“语言精练、连贯、概括性强”

一个好的标题，能够让用户在打开模板后的最短时间内对邮件内容产生兴趣。

P30 . 素材目录标题电邮模板设计大师

4.5 Banner图片
“Banner图片”是体现整个模板视觉重心的重中之重，是体现整个模板创意和向用户表现发送者意图的最直接表现。

制作精良，设计精美，并且富含创意的

banner图片，首先会让人眼前一亮，然

后产生图片的联想，让人产生浏览的欲

望甚至直接点击。

P31 . 素材目录 Banner图片电邮模板设计大师

4.6 内容模块
“内容模块”是模板中文本内容的载体，“内容模块”的规划，影响着模板内容是否排布合理清晰可读。

“内容模块”排版的精心程度，会严重影响用户阅读的兴趣。

清晰的模块规划，合理的线条或色块分割，适当的

文本宽度，能够极大的方便用户阅读，这是吸引用

户浏览的一个需要精心设计的关键点

P32 . 素材目录内容模块电邮模板设计大师

4.6 内容模块
与清晰合理的模块布局相对应的，混乱复杂、没有条理的布局，会让用户产生厌烦的心理。

超过肉眼承受能力的横向文本排布宽度，用户浏览时会造成眼睛疲劳，

且过长的文本宽度，眼睛换行都有可能不准确，不很容易阅读。

P33 . 素材目录内容模块电邮模板设计大师

4.7 商业区
　　“商业区”，提起“商业”有些邮件发送企业就觉得很敏感，认为EDM要么就是纯商业广

告；要么就是纯信息类提，升用户黏着度的电子报。

　　其实不然，EDM的成本对比传统DM，所说成本低，但苍蝇也是肉……付出一定要得到回

报，商场上就是这么实际。

　　说到这里，我们先看下面的案例：

　　举例模板的共通点：都是信息类、电子报类模板，都在显著位置有明

显的“商业区”，发布与模板总体内容相关的广告，吸引用户点击交互。

　　这个“商业区”完全不影响用户浏览感兴趣的内容，同时还能暗示“

这封邮件的内容随时都可以与我有关，我可以参与进去”……拉近与用户

的距离。

P34 . 素材目录商业区电邮模板设计大师

4.8 商业转化点
“商业转化点”，商业邮件中，明显的一个按钮或者图片，称之为商业转化点。

最大特点就是“明显”，同时要“明确转化目的”。

P35 . 素材目录商业转化点电邮模板设计大师

4.8 商业转化点

标题的明显程度明显超过了商

业转化点，

失败的设计……

这么多的“明显”点击位，究竟是希

望用户从哪里开始交互？最希望用户

点击哪里？

目的不明确，造成用户的迷茫，很可

能直接失去转化机会

P36 . 素材目录商业转化点电邮模板设计大师

4.9 品牌传递
　　“品牌传递”，涵盖两层含义：

　　首先是“继承”，继承公司一贯的形象，AI、Logo、网站风格、印刷品风

格等等，包括形象色彩与公司理念的整合；

　　然后是“发扬”，在一贯的公司，品牌基础上提升品牌形象，在电邮营销活

动中形成更深层次的用户“印象”，加大黏着度和信任。

凡客诚品
apple

P37 . 素材目录品牌传递电邮模板设计大师

4.9 品牌传递

DELL
21cdh

P38 . 素材目录品牌传递电邮模板设计大师

4.10 版权信息
　　“版权信息”，正规模板不可缺少的组成部分，一般位于模板最底部，与正文有明显的色

块或线条分割，也可以在这里添加联系信息。

　　有的设计师不是很重视版权信息，认为无关紧要。其

实不然，版权信息完整与否、设计精心程度，很大程度上

体现设计者的专业度和对模板倾注的心血。EDM本身特点

是一对一的交互，虎头蛇尾的模板会让接收者心理上觉得

不受重视。

P39 . 素材目录版权信息电邮模板设计大师

4.11 栏目名称
“栏目名称”，简单说就是电邮模板中各个内容板块的名字，我把它们分为八类列在这里，便于大家参考。

邮件主题内容或总结推荐与促销类资讯类资源与产品类观点与人物类活动与课程召集类介绍与背景类交互观点类商务合作名录类

上周要闻回顾 XXX推荐行情快递产品与数据讲师简介活动预告公司介绍业内精英观点参会企业
一周要闻数码热点行业观察新品直击本周创业人物历届培训专题活动介绍专辑推荐支持媒体
每周热点专享特惠视界新品主编推荐近期公开课安排活动注意 XX交流奖项设置
经典热销产品会员专享资讯数据讲师介绍近期课程安排雄厚背景市场数据商务合作
本周主打 XX亮相观点电脑产品主要师资往日活动活动背景专家观点学院名录
本周关注独家成长家用电器本周人气专家往期回顾案例展示热门问答 XX联谊会
近期活动 XX节特选好礼分享手机数码专家博客活动预告什么是“XXX” 热门投票
本周头条 XXX推荐礼物行业快讯日用百货观点课程预告 XX案例热门群组话题
本周要闻热卖推荐市场分析技术资源最新会员活动视频学院名录每周社区精选
本周焦点热卖品牌经济与信用实用资源推荐会员视频/在线阅读 XX联谊会网上主题研讨会
每周观察 XX推荐热门文章研究报告本期MVP推荐热点视频课程介绍 XX百家讲坛
本周特辑 XXX公告热点文章推荐闪耀之星活动及培训预告创业学院 XXX评选
一周动态本期专题服务介绍资本钱经 XX电子知识竞赛
封面故事热点专栏精彩日志课程内容简介本周热门调查
本期主题新闻头条知识库 XX吧热门XX测评推荐
今日头条 XX聚焦新闻中心 XX邦 XX经验分享
热辣头条热点主题藏珠阁进阶培训热点话题
今日推荐新闻排行榜课程安排主编推荐
导购直通车 XX聚焦课程内容推荐专栏
优惠区时事点评课程收益编者的话
明折明扣环球热点课程设置专家专栏
让利促销编辑推荐会议信息互动中心
低价狂潮厂商专栏会议议程
精彩XX 特色内容进阶培训
特别推荐原创文章精选课程预告
资讯精华商学院
牛气哄哄会展信息
组织结构
论坛议题

P40 . 素材目录栏目名称电邮模板设计大师

5 电邮模板评估

配色简洁度：HIGH

图文分布匀称度：MID

头体边脚四要素完整度：MID

布局协调性：HIGH

商业区占比：HIGH

第一视点和商业区关联度：LOW-LOW

语境连贯性：MID

创意冲击性：LOW

受众SPAM感觉：HIGH

模板简评：整体感觉比较理性和冷静，与所表达主题思想不匹配。

http://www.mailbus.net/a/mobanpingce/xinxitongzhilei/2010/0507/37.html

P42 . 电邮模板评估电邮模板设计大师


配色简洁度：MID

图文分布匀称度：LOW

头体边脚四要素完整度：LOW

布局协调性：LOW


第一视点和商业区关联度：HIGH-HIGH

语境连贯性：HIGH

创意冲击性：MID


模板简评：把传统DM的设计思路硬往EDM上套，开信后感觉

眼花缭乱，不可能在1秒内产生任何信任和期望的感觉，属于

典型的垃圾邮件。




配色简洁度：LOW









模板简评：色彩过于华丽，图片与主题关联甚小，第一印象会误认为

是节日庆典邮件，很难在头脑中产生酒店是休闲之地的的印象。





图文分布匀称度：HIGH



商业区占比：MID




受众SPAM感觉：MID

模板简评：不错的招生类样本设计，色彩、布局紧扣主题，无信任发

送不设置直接商业转化点显示出策划者高超的用户心态拿捏水准；主

要缺点在于图片的选择，此类样本用虚拟学员群体照片或老师群体照

片效果更佳。







布局协调性：MID

商业区占比：LOW

第一视点和商业区关联度：HIGH



受众SPAM感觉：LOW

模板简评：总体感觉属于上佳作品，但主要的毛病是：由于是

cold massive send，征信顺序处理欠妥，不符合中国人的渐

次展开阅读习惯。

http://www.mailbus.net/a/mobanpingce/zhijiefankuilei/2010/0507/69.html





头体边脚四要素完整度：HIGH







模板简评：标准的电子邮件媒体类模板，布局合理、页面元素完整，

但存在两个明显缺陷：1）没有明确的商业转化点，跟踪进入宿主站

后也未发现相关转化点，比较遗憾；2）全部采用过渡色系冲淡了邮

件正文的专业性主旨。













模板简评：整体感觉稳重明快，内容板块相对流畅,但缺乏明确的商业

目的,并且页面太长容易让人厌烦。

http://www.mailbus.net/a/mobanpingce/duofankuiyuxingweifenxilei/2010/0507/119.html










创意冲击性：HIGH


模板简评：以师父给徒弟的信的形式与用户交流，很不错的创意，商

业转化点设计的应该更突出。







布局协调性：LOW-LOW





受众SPAM感觉：HIGH-HIGH

模板简评：整体都是商业区，没有任何实质内容；色彩混乱、布局杂

乱无章，标准垃圾邮件。













模板简评：本来一本杂志应该会有它吸引读者群体的侧重内容，可是

此邮件完全没有体现。拿出杂志里一篇贴心的文章的重要部分来发送

，比这种空空的广告词强的多。













模板简评：很好的内容，可惜的是没有把握住重点，爱心捐助的是孩

子，而不是破烂的屋子。屋子里的学生在哪里？照一张学生们在这种

屋子里上课的照片，比这4张屋子+卡通人物要有说服力的多。













模板简评：过多的内容集中在第一视点附近，冲淡了用户点击远在下

方的商业转化点的欲望；把页面最下面的商业转化点移到右侧作一个

边栏，会比现在效果好得多。













模板简评：上佳作品，唯一缺点是布局稍显杂乱。







布局协调性：HIGH-HIGH






模板简评：标准期刊类样本，布局很好，商业转化点位置合理，缺陷

在于色彩稍显混乱。













模板简评：不愧是Apple,至少3个创意整合在一个视点上,再加上非常

高的设计水准，造就了这款精品模板；除了创意图片比例有些偏大以

外，几乎无可挑剔。













模板简评：信头图片的现场感很强, 拿着键盘球员的创意很牛确实可以

起到调动情绪的作用,信头图片与商业区之间的协调性也算巧妙, 最醒

目的按钮周边图文搭配的也很妙。整体上，属于上乘的纯广告邮件模

板。










语境连贯性：LOW


受众SPAM感觉：HIGH-HIGH

模板简评：典型盲目投放广告型邮件，漫无目的的进行发送，完全没

有针对用户行为进行分析规划；整个邮件大而乱、内容繁杂、页面冗

长令人烦躁。感觉像个大杂院。













模板简评：模板设计专业度很高，为什么? 色彩简洁、要素完整、创

意冲击力强, 缺乏明确的商业转化点，我猜想是属于激活信任类目的,

如果一定要打个分, 80分!









第一视点和商业区关联度：LOW




模板简评：看得出此模板制作者有一定的邮件营销经验，文本内容和

图片搭配、色彩都很不错，问题是文本内容只是流水账一样的一堆问

题、一个大目录，没有实质吸引人的内容。《制度第一，总裁第二》

多好的标题，简单解释一下有何不可？“免费试看四周”很大的优惠

啊，为何不把免费教程中的精彩点制作到邮件中直接发送？实现这两

点，营销效果一定更好。总之,电邮电邮,电光石火,生死立判,花拳秀腿,

终归不灵!

http://www.mailbus.net/a/mobanpingce/qitalei/2010/0507/73.html









语境连贯性：LOW



模板简评：配色明快、布局协调、四要素完整，缺点是商业转化点太

多，主要的商业转化点的地位被弱化了。













模板简评：暗色背景、初升太阳的banner图配合整体金色的色调，很

有视觉冲击力；邮件要素完整、布局协调、文法流畅，一看就是专业

设计出手；就是内容和图片有些过多，冲淡了banner图片与色块完美

搭配形成的氛围。













模板简评：色彩简洁、布局匀称、导引文字流畅。70分！













模板简评：红色这么刺激的颜色，在这个模板中使用的很好，布局很

舒服，内容与图片搭配很合理，体现出设计者的水平很高；如果去掉

“邀请函”模块中的“我要参会”商业转化点，弱化“下载邀请函”

商业点表现力；只突出左侧的商业区，就更好了。另外,logo配色红主

黑次, 按照模板是logo的放大的原则,很明显黑色少了,尤其是纯黑色。

75分！













模板简评：典型把dm设计思路生搬硬套到edm设计中来，不考虑邮

件的特殊性，全图片切割，没有任何文本内容，很容易在技术上被

ESP判定为垃圾邮件。60分。



Email template

Recommended

Recommended

More Related Content

Featured

Featured (20)

Email template