email template

作者：[email protected]

电邮模板设计大师A Email Template Design Master

V1.0.4

电邮模板设计大师

序言　　本《电邮模板设计大师》为中邮通|Mailbus资深设计师Lerry在长期从事电邮设计工作中

的经验总结，涉及到了电邮模板策划中相关的设计理念、制作经验、评估标准等，所采用第三

方素材，均由《认证电邮营销师|Certificated eMail Marketer》电子报订阅用户推荐，中邮

通|Mailbus随即做了可公开性审慎调查和个人隐私审查，所做点评由中邮通|Mailbus资深设

计师Lerry担当，只限于学术研究范围以提高国内电邮设计水平为目的，并无侵害关联权益人

的动机，任何人有任何疑议欢迎主动批评指正。

　　Lerry毕业于中央美院，有深厚的线上互动体验设计经验，亲自设计或指导团队设计过的

电邮模板超过1000个，在2009年8月举办的客户见面会上，被某500强客户代表尊称为—模

板王—称号。

　　本《电邮模板设计大师》于2010年5月24日出版，不定期升级

　　想要获得最新版，请直接联系　[email protected]

　　或直接登录http://www.mailbus.net/download.htm下载


读者来信

　　《电邮模板设计大师》出版两周，下载量突破3500次，很多热心读者

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

家！

　　经过了来信人许可，我把一部分读者来信登在这里：

　　"你好，我是一家电子商务企业做EDM的，之前一直是自己在摸索这方

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

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

很多新的东西，实在太感谢了"

　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-28 南京

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

习惯抄袭别人的模板，现在我也打算自己来创意，但某些元素的借用是否

算抄袭，我还搞不明白，但似乎快找到答案了。真希望有机会当面请教。"

　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-27 成都

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

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

有勇气把虚无缥缈的设计进行量化，您是第一个。佩服！"

　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-27 北京

　　"果然是模板王，理论水平高，点评语简短但很到位。"

　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-27 北京

　　"不知在大学可否开一门专门课程讲EDM设计和经济指标之间的关系？"

　　　　　　　　　　　　　　　　　　　　　　　　　2010-5-26 天津

　　"我拜读过您的大作《电邮模板设计大师》后，对您非常崇拜，模板王的

称号实至名归！希望成为您的学生。"

　　　　　　　　　　　　　　　　　　　　　　　　　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-26 香港


1 基础知识　1.1 电邮营销行业发展状况　··························································································································第6-7页

　1.2 电邮模板在电邮营销中的地位　··············································································································第8页

2 电邮模板的设计理念　2.1 商业品牌效应设计与坚持、色彩选择　····························································································第10页

　2.2 最优宽度与高度　············································································································································第11页

　2.3 创意，高质量的图片/图形　·············································································································第12-13页

　2.4 商业区与第一视点　······································································································································第14页

　2.5 模板要素与布局　···········································································································································第15页

　2.6 文字意境表达　················································································································································第16页

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

　2.8 规避SPAM要素　···········································································································································第18页

3 电邮模板的制作经验　3.1 模板编码语言选择　·····································································································································第20页

　3.2 不要使用div，是用最简单的嵌套table定位　···········································································第21页

　3.3 图片与文本链接规则　································································································································第22页

　3.4 css样式编写　···················································································································································第22页

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

　3.6 模板html标签规则　···································································································································第25页

　3.7 动画与互动元素的处理　·························································································································第25页

　3.8 使用所见即所得工具，最好在制作完成后手动优化代码　··············································第25页

　3.9 邮件附件夹带　···············································································································································第25页

4 素材目录　4.1 退订　····································································································································································第27页

　4.2 网络查看方式　··············································································································································第28页

　4.3 转发　···································································································································································第29页

　4.4 标题　···································································································································································第30页

　4.5 Banner图片　·················································································································································第31页

　4.6 内容模块　·················································································································································第32-33页

　4.7 商业区　······························································································································································第34页

　4.8 商业转化点　············································································································································第35-36页

　4.9 品牌传递　·················································································································································第37-38页

　4.10 版权信息　····················································································································································第39页

　4.11 栏目名称　····················································································································································第40页

5 电邮模板评估　················································································································第41-59页


基础知识

电邮模板的设计理念

电邮模板的制作

素材目录

电邮模板评估

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

1.1 电邮营销行业发展状况

　　电子邮件作为最传统有最先进的一个营销工具，一直受到非专业营销人

士的误解，也一直受到专业营销人士的追捧。早在2005年，banner广告市

场份额最大的时候，电子邮件广告作为banner广告的一个补充而存在，同

时，市场呼声很高的SEM连电子邮件广告也不如屈居第三位。这反映一个什

么问题呢？笔者认为，主要是认识问题，认识问题是有惯性的。当掌握话语

权但知识老旧营销高管们没有充分了解互联网的互动、精确、高效等核心价

值之前，确实有个预热的过程。

　　时间过了2、3年，恰逢全球反垃圾邮件工作成效最卓著的时代，全社会对

电子邮件的负面认知水平有所下降，电子邮件营销市场随即开始快速增长。

　　另外，在05年到08年期间，源于DM和Call-center的直复营销理念开始在

全球流行，开信跟踪技术和收信行为数据统计平台纷纷出现，电子邮件逐渐PK

掉了Banner广告成为霸主。随之角色也有改变，由电子邮件广告转变为电子邮

件营销。

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

　　09年，邮件行业又有了一些新的变化，出现了2个趋势，一个是电子邮件

媒体，一个是电子邮件商务。电子邮件媒体，主要预示着电子邮件对传统文

字和图片出版的替代，在时效性、表现力、渗透率等诸多方面显示出巨大优

势。中邮通|MailBus服务过的一个传统媒介客户从06年开始做电子报，一开

始只拥有不到8万邮件地址，2年后，活跃邮件地址已经达到30万，其中完整

身份信息的不少于12万，而其产生的直接收益09年全年已经超过2500万人民

币。直接收益包含：banner广告、频道/栏目冠名、软文推送、企业市场调

查、新产品体验活动、会议观众招募等。其背后的推动力，主要是品牌数字

化理论推动下的邮件地址列表分级管理手段有利于先进。

　　举个例子，中邮通|MailBus的一个VIP客户把邮件列表的级别分的非常细

，包含高度信任列表、信任列表、开信列表、候选列表、新列表A、新列表B

、新列表C、绝对退信列表、相对退信列表，并设计了一个算法在自己的

CRM系统中自动操作这些列表。中邮通|MailBus曾经帮这个客户做过一个

ROI分析报告，该自动算法等效100个坐席的Call-Center，而其长期成本却

只有不到5个Call-Center席位。

　　电子邮件商务，其推动力主要来自于对传统直复营销的静态身份分类理

论的突破，取代它的是动态行为数据挖掘，特别是与宿主站结合起来的，靠

A/B Test经验积累起来的，可挖掘受众动机的高级指标理论的出现。来自权威

机构的监测数据，最近1年来，中国电子商务行业使用电子邮件的规模至少增

长了20倍。

　　总结一下，如今的电子邮件行业，正在呈现出百花齐放的格局，价值链

异常复杂。

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

1.2 电邮模板在电邮营销中的地位

　　电邮模板设计是一个新领域，它主要解决2个原则：

　　1）无信任基础情况下开信后1.8秒内不产生反感；

　　2）有信任基础情况下模板本身有不断微调空间来抵消动态内容同质化可

能带来的审美疲劳。

　　现实情况下，由于电邮模板设计的直接操作者的背景问题，对上述2个原

则根本不了解，而闹出不少笑话。比如：

　　传统的DM设计人员出身的电邮模板设计人员，他们习惯把电邮模板等同

于EDM，全部采用大红大紫的方式来体现，殊不知，EDM仅仅是电邮模板的

一个子类，“大红大紫”是最容易招致反感的。　　电邮模板的角色非常特殊，和一般人的理解大不相同，笔者认为，它的

价值主要体现在统一思路上，统一的是像我这样的外包公司和企业客户之间

的认识，统一的是企业客户内部高层和执行层之间的认识。下面是笔者的一

个工作记录：


基础知识



素材目录

电邮模板评估

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

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

一个成熟的品牌，必然会有代表自己品牌特点的标准AI设计；

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

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

　　模板中色彩数量越少越好，但是,对于“变化式banner”

和“正文中图片”, 并不限制, 只要求框架配色可以和他们协调,

适当的对比是可以的。

　　对于品牌邮件模板设计，同

样要建立一套深埋用户心里的品

牌AI，这套AI标准以企业品牌已

经宣传的色彩、logo、宣传品布

局方式及亮点为基础制定。

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

2.2 最优宽度与高度

　　邮件模板宽度最佳区间是600px~650px。

　　在大多数邮件客户端或web邮件浏览器中，邮件都不会默认是全屏显

示，如果邮件模板过宽，会造成部分内容被遮盖住，浏览者需要拉动横向

滚动条来浏览，造成浏览上的不便。

　　经验告诉我们，600px~650px是比较理想的邮件模板宽度。

　　邮件模板高度最好是2屏幕为好,

最大3屏, 最小1.5屏。

　　页面过短，传递给用户的信息量

必然小，大部分时候很难依靠简短的

描述让用户产生信任感；

　　页面过长，内容过多，会让用户

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

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

没有出现横向滚动条，

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

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

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

2.3 创意，高质量的图片/图形

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

　　精妙的创意，新奇的思路，可以令模板可观赏性显著增加，能够

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

Apple的邮件创意：

　　美观清晰的图片，代表性、指导性强的图形，能够提升模板被浏

览的时间和下一次收到类似邮件的打开率。

图片的精美清晰程度，

直接影响用户的第一观感：

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

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

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

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

直接被邮件服务商拒之门外。

　　图片的比例最好不要过大，即使不是图片, 文字底色过重，

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

完全图片切割的邮件，有直接被邮件服务商拒之门外的危险：

文字的底色过重，感觉上就像一整张图片

2.4 商业区与第一视点

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

　　商业区是edm产生利润点的最关键部分，商业区的规划直接影响

邮件营销的成败。

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

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

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

商业转化点设计在第一视点附近，

商业区与第一视点不重合

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

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

尾的失败。

通篇都是商业区，会直接被定义为垃圾邮件

2.5 模板要素与布局

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

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

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

可以体现在标题的固定部分和发件人,位置,

标题的固定部分,比如 “[Mailbus:] XXXXX ” 中的“Mailbus:”；

头本身一般不变,但,随着标题变化,构图不变但点缀和基础配色可能会变。

头：

体要包含眼睛（这里是标题），标题创意和头本身要协调，这里同时包含

配色、文字创意等；

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

起来了；

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

体：

边的作用就是、转（严重刺激认知情

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

转化点一般是个按钮）

边：

主要是版权信息等

脚：

（边干主功能要有起（借口）、承（吸引要

素如软文等非商业要素）、转（严重刺激认

知情绪的一个图像类创意点）、合（商业转

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

2.6 文字意境表达

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

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

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

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

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

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

意境美的追求最主要的是对含蓄美的追求。

　　所谓含蓄，就是意思含而不露、耐人寻

味。作为艺术的形式语言，它是指在不损害

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

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

有回味的意境表达方式。

“对于上班族来说，这是最轻

松的充电方式，只要5分钟，

学到的是最实用的英语对话”

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

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

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

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

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

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

片中；

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

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

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

设计假的播放按钮，

很不错的方式：

奇形怪状的图形链接

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

2.8 规避SPAM要素

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

垃圾邮件有着各种明显的特点，如：

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

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

完全图片切割，文本内容非常少或没有任何文本内容

(此类邮件甚至有直接被邮件运营商封杀，用户根本接收不到的风险)；

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

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


基础知识



素材目录

电邮模板评估

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

3.1 模板编码语言选择

　　模板编码设定与使用的发送软件有关，一般来说，utf-8为较常用

的选择，错误的编码会造成用户浏览的时候出现乱码；

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

Mailbus开发的LightSpeed系统，

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

　　但是使用比较专业的发送软件/系统，如Mailbus的

LightSpeed，可有多种选择。

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

3.2 不要使用div，使用最简单的嵌套table定位

　　Div+css是近几年新兴的web2.0定位方式，这种方式不适合在

邮件模板切割中使用，不同邮件客户端或在线浏览器对css模型解释

不尽相同，会造成错位或布局混乱等问题。

　　同时也不要使用单一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>

<table> <tr> <td colspan="2"> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> <td> </td> </tr> <tr> <td colspan="2"> </td> <td colspan="2"> </td> </tr></table>

这里出现错位

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

使用嵌套表格布局，建议使用

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

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

不要使用外部样式表引用，将样式表写入模板内部，如：

如果模板有完全相同样式的列表型文本（如新闻列表等），可

以吧样式表写在页面内<style></style>中引用，但缺点是在邮

件转发过程中经过web编辑器或邮件客户端的编辑，

<style></style>被去掉，导致此列表样式变形。

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

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

模板中所有链接，都必须使用绝对路径；

链接长度不能超过255个字符，不能存在空格，也不能有中文字

符，否则可能会导致连接无法追踪；

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

垃圾邮件，甚至被邮件运营商直接屏蔽。

模板中文本文字不能使用过大的字体，否则可能会被邮件客户

端判定为垃圾邮件。

<td style="padding:6px">

<a href="#" style="font-size: 14px;color:#0c6485">

<b>邮件模板</b>

</a>

</td>

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

3.5 图片样式与背景图片颜色使用

模板尽量不要使用背景图片。

背景图片在某些邮件客户端或或web界面(如

Gmail)中默认不显示。

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

否则会不显示；每张图都要指定alt属性，可

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

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

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

取而被打乱布局。

使用背景图片作banner，

导致Gmail中不显示

图片没有设定alt属性，

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

不知道图片的主题

此邮件正常显示示例：

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

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属性，这种邮件一旦图片被拦截，

即使设定了“网络查看方式”又有几个用户会点击呢？

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

3.6 模板html标签规则

尽量不要使用提交表单；

padding和margin标签：table中，某些邮件客户端或web界面（如Gmail），

对浮动的标签(padding、margin等)支持很差，所以尽量不要使用；

float浮动标签：某些邮件客户端不支持浮动属性，尽量避免使用。

在页面内调用<style></style>的情况下，尽量不要使用<h2>、<ul>、<li>、<p>

、<ol>等有默认样式的标签，防止<style></style>被隔离时页面布局混乱。

3.9 邮件附件夹带

邮件一定不要夹带附件，发送大量附件会占用大量珍贵的网络带宽，切大部分附件

用户根本不会打开，这部分占用的带宽基本都是浪费的。

带有附件的邮件有很大可能被用户认为是病毒，对品牌产生不良影响。

在模板上设置下载按钮，链接到网站上下载页面，还可以给网站带来一部分流量，

何乐而不为。3.7 动画与互动元素的处理

可以使用简单的gif动画来表达某些需要明显突出的要素，但要控制gif文件的大

小，不要影响整封邮件的下载浏览速度；

不要使用flash动画或JavaScript Active等，前些年邮件病毒泛滥，大部分邮件

运营商都已经屏蔽了这些元素。

3.8 使用所见即所得工具，在制作完成后手动优化代码

使用主流所见即所得工具可以节省大量时间、提高工作效率，但所见即所得工

具生成的代码会有许多垃圾代码掺杂其中，最好在制作完成后手动优化。

设计假的播放按钮，

很不错的处理方式


基础知识



素材目录

电邮模板评估

4.1 退订

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

　　我们在这里讨论的模板，都是属于群发型邮件，我们虽说可以对收件人作出

行为分析、或者在用户注册的时候收集到收件人的相关信息，但是我们并不了解

收件人看到邮件时的浏览环境，所以这类的邮件需要带有一些必要的附加要素，

如：退订邮件、网络浏览方式、转发退订：

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

规定：

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

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

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

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

式在30日内有效。

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

对垃圾邮件的定义：

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

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

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

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

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

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

4.2 网络查看方式

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

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

4.3 转发

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

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

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

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

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

式。

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

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

员注册。

4.4 标题

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

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

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

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

4.5 Banner图片

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

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

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

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

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

望甚至直接点击。

4.6 内容模块

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

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

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

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

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

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

4.6 内容模块

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

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

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

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

4.7 商业区

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

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

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

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

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

的距离。

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

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

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

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

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

4.8 商业转化点

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

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

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

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

业转化点，

失败的设计……

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

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

点击哪里？

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

能直接失去转化机会

4.8 商业转化点

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

4.9 品牌传递

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

apple

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

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

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

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

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

凡客诚品

4.9 品牌传递

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

21cdh

DELL

4.10 版权信息

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

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

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

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

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

不受重视。

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

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

4.11 栏目名称

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

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

邮件主题内容或总结

上周要闻回顾

一周要闻

每周热点

经典热销产品

本周主打

本周关注

近期活动

本周头条

本周要闻

本周焦点

每周观察

本周特辑

一周动态

封面故事

本期主题

今日头条

热辣头条

推荐与促销类

XXX推荐

数码热点

专享特惠

会员专享

XX亮相

独家

XX节特选好礼

XXX推荐礼物

热卖推荐

热卖品牌

XX推荐

XXX公告

本期专题

热点专栏

新闻头条

XX聚焦

热点主题

今日推荐

导购直通车

优惠区

明折明扣

让利促销

低价狂潮

精彩XX

特别推荐

资讯类

行情快递

行业观察

视界

资讯

观点

成长

分享

行业快讯

市场分析

经济与信用

热门文章

热点文章推荐

服务介绍

精彩日志

知识库

新闻中心

藏珠阁

新闻排行榜

XX聚焦

时事点评

环球热点

编辑推荐

厂商专栏

特色内容

原创文章精选

资讯精华

牛气哄哄

资源与产品类

产品与数据

新品直击

新品

数据

电脑产品

家用电器

手机数码

日用百货

技术资源

实用资源

研究报告

观点与人物类

讲师简介

本周创业人物

主编推荐

讲师介绍

主要师资

本周人气专家

专家博客

观点

最新会员

推荐会员

本期MVP推荐

闪耀之星

活动与课程召集类

活动预告

历届培训专题

近期公开课安排

近期课程安排

往日活动

往期回顾

活动预告

课程预告

活动视频

视频/在线阅读

热点视频

活动及培训预告

介绍与背景类

公司介绍

活动介绍

活动注意

雄厚背景

活动背景

案例展示

什么是“XXX”

XX案例

学院名录

XX联谊会

课程介绍

创业学院

资本钱经

课程内容简介

XX吧

XX邦

进阶培训

课程安排

课程内容

课程收益

课程设置

会议信息

会议议程

进阶培训

课程预告

商学院

会展信息

组织结构

论坛议题

交互观点类

业内精英观点

专辑推荐

XX交流

市场数据

专家观点

热门问答

热门投票

热门群组话题

每周社区精选

网上主题研讨会

XX百家讲坛

XXX评选

XX电子知识竞赛

本周热门调查

热门XX测评推荐

XX经验分享

热点话题

主编推荐

推荐专栏

编者的话

专家专栏

互动中心

商务合作名录类

参会企业

支持媒体

奖项设置

商务合作

学院名录

XX联谊会


基础知识



素材目录

电邮模板评估

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

5 电邮模板评估

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

配色简洁度：HIGH

图文分布匀称度：MID

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

布局协调性：HIGH

商业区占比：HIGH

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

语境连贯性：MID

创意冲击性：LOW

受众SPAM感觉：HIGH

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




配色简洁度：MID

图文分布匀称度：LOW

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

布局协调性：LOW


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

语境连贯性：HIGH

创意冲击性：MID


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

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

典型的垃圾邮件。




配色简洁度：LOW









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

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





图文分布匀称度：HIGH



商业区占比：MID




受众SPAM感觉：MID

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

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

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

片效果更佳。



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




布局协调性：MID

商业区占比：LOW

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



受众SPAM感觉：LOW

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

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

次展开阅读习惯。






头体边脚四要素完整度：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



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

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

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













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

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

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



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






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




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

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

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

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

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

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

终归不灵!










语境连贯性：LOW



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

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













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

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

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

搭配形成的氛围。













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













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

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

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

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

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

75分！













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

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

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













模板简评：整封邮件全图片切割，没有任何明显商业点却正封邮件都

是点击区域；白洋淀、坝上草原、野山坡……这么多好地方，没有一

张相关图片，反而把文本内容都做成图片……典型垃圾邮件。0分！













模板简评：如果两个banner广告砍掉一个，色彩搭配的协调性就会提

高一个量级, 这还不是最严重的。更严重的问题是此模板所有模块几乎

全部为商业区，每个模块都想突出，导致视觉重心不突出，令人眼花

缭乱。很明显，这是把网站设计的思路硬搬到EDM上了。

感谢观看Thank Watch

联系地址：北京市朝阳区建国门外大街南郎家园甲1号大北写字楼510室

Mailbus网址：www.mailbus.net

联系电话：+86 10 58346126/58346123

E-mail:[email protected]

MSN：[email protected]

Blog：http://blog.sina.com.cn/lerrytiger

作者：Lerry Bian

（Mailbus首席设计师）

email template

Documents