学会这12条排版，让受众读懂你的广告

知道是什么真正摧毁了你的ROI吗?

那就是没人能读你的广告，或者你的LP。

这是我看的affiliate广告活动中一个非常常见的问题，特别是affiliate新手。

就算你拥有世界上最好的、最有说服力的、最畅销的文案，如果你的潜在客户看不懂它，你将面临不可逆转的ROI灾难。

对很多人来说，排版很无聊。但你知道什么不无聊吗？赚大笔的钱！学习一些关于排版的知识可以帮助你达到这个目标。

让我们开始吧！

1 使用更大的字体

几乎每个人都选择了字体太小的网页。更大的字体其实可读性更强，且可以降低跳出率（我把字体从12 pt调整到 16 pt后，明显感受到权重网站的的跳出率下降了）这对于广告主来说很关键，因为我们的潜在客户并不会完全投入看我们说了什么，如果阅读的行为是困难的，他们就会停止。

Smashing Magazine认为16px字体是最低限度，我同意这个说法。事实上，就像我上面说的，我在过去只是通过简单改变字体大小来赚钱。如果你用的是72DPI的图像，那就是16pt的字体。

下面这个字体较小的广告，看起来怎么样？

然后下面是一个合适的文本大小:

我们在后一幅图中看到的小猪小姐的面积少了些，但显然是值得的。

16px是你的正文文本，这得是你的广告中最小的文本，标题还要更大一些。

另一种看待这个问题的方法，以及其他你应该考虑的事情，是看看你的着陆页每行的字符数。75个字符是最佳可读性的最大值，广告文案50个字符更好。为什么？因为研究表明，读者每次读完一行，都会在潜意识里得到一个小小的刺激，短行可以让你的读者保持专注和兴奋。

你可以使用诸如viewport大小排版之类的技术来固定大多数设备上每行的字符数。

2 反差才是王道

这是你应该遵循的另一个建议。

我认为在广告可读性方面最大的错误是没有使用足够大的反差显示。如果文本没有从背景中足够突出，它就无法被阅读。

这里有一个例子:

那么，我们能做些什么来提高它的可读性呢？

可读对比度的黄金标准是白色背景，而不是非常黑的文本。关于这一点已经做了很多很多的研究，而且每次它都是赢家——特别是，它显示出读者对白底黑字文本的理解比黑底白字文本多26%。

为什么不要全黑？因为电脑显示器上的纯黑色文字真的真的很黑，比印刷字体要黑得多。事实上，太黑会导致眼睛疲劳。再次，这使得我们的广告阅读起来不那么有趣。

所以，如果可能的话，在Photoshop (RGB)中使用白色背景和#444左右的字体。

如果你做不到这一点，那就尽量选择明暗对比最强烈的颜色。在文本后面放置一个半透明的黑色方框来增加可读性，或者使用一个透明度高的对比背景来突出文本都是不错的技巧，比如这张图片:

3 尽量使用HTML而不是图像文本

如果可能的话，你应该尝试确保用户的浏览器能呈现你的文本，而不是将其作为图像。30多年来，人们一直在研究如何使用亚像素采样等先进技术，在屏幕上尽可能清晰、易读地呈现文本。文本作为HTML文本总是比作为图像具有更好的可读性，如果简单地用一个等价的HTML替换你的单图来快速测试着陆页，你将在大多数情况下看到一个CTR提升。

这就是为什么很多人会使用“单一图像着陆页”作为一种快速测试着陆页的方法，不要在找到一个盈利点后继续使用它们，而是得把它们重新创建为一个HTML页面。

一张JPG图像为16pt，一个PNG图像7kb，小于500字节为文本。那是超过10倍的压缩！

4 如果必须使用图像文本，考虑PNG/GIF

显然，你通常不能上传HTML的banner。在这种情况下，应该认真考虑使用哪种图像格式。

JPG在渲染文本方面很糟糕。它们是为摄影图像而设计和优化的，同样的低层次“模糊化”使它们在这个角色上工作得很好，但在大多数文本图像上却表现很差。

PNG和GIF对于文本效果更好，干净利落，让文本更有吸引力，也更容易阅读。另外，它们还可以更好地压缩文本。PNG-8是一种特别有效的文本格式，通常比JPG文件小一半。

如果你的banner是基于文本的，特别是如果他们使用插图或图标而不是照片，测试GIF或PNG banner以及IPG，你将看到CTR蹭蹭上涨。

事实上，在我不久前做的一个测试中，即使是24位PNG作为移动广告也比IPG表现得更好。

5 行间距很重要

根据印刷商的说法，可读性的“四大”要素之一是行高——行之间的垂直间距。这个很容易忘记。

一般来说，你的行高至少应该设置为字体大小的1.5倍，可以一直尝试到2.5倍，看看什么是最好的。大多数程序，包括Photoshop和Default CSS，都把这个设置得太小了。

你可以使用CSS中的行高属性和Photoshop中的字符标签来改变它。

这是一个细微的调整，但是非常值得做。

6 尝试为着陆页使用系统字体

像谷歌字体和Typekit这样的Web字体非常棒，可以使站点看起来非常有吸引力，但是它们是以加载速度为代价的。

正如我之前所说的，加载速度与ROI直接相关。这是着陆页上你可以改变的唯一的变量，值得我们关注。

有人说这不利于页面加载速度。它们不一定会停止页面加载（尽管可以，尤其是在IE上），但它们确实会导致“无风格文本闪烁”，即屏幕上的文本突然生硬地改变，而且它们会耗尽带宽。下面是关于该问题的一个很好的概述。你可以深入地修复这些加载问题，但这也是比较困难、耗时的事情。

通常来说，除非你有充分的理由选择非标准字体，不然最好为你的着陆页使用系统字体。当你选择系统字体时，最好的选择是基于Helvetica，Georgia或Verdana的“字体堆栈”——最易读和通用的字体。

这些字体背后都经过了数十年的研究，使它们在网络上尽可能地可读。

你还应该注意确保系统字体具有备用选项。这就是所谓的“字体栈”，它既可以让你利用其他较少使用的系统字体，又意味着你的读者都不会看到难以理解的笨拙文本。

下面是三个好的字体堆栈：

? Georgia-based: Cambria, Georgia, serif;

? Verdana-based: Verdana, Geneva, sans-serif;

? Helvetica-based: "Helvetica Neue", Helvetica, Arial, sans-serif;

当然，对于广告，你可以忽略所有这些，并使用所需的任何字体，因为无论如何它们都将呈现为图像。

7 使标题尺寸成比例

另一个简单但有效的调整，即不要随机选择标题大小，最好使其与你的正文字体大小成比例。

这会让整体设计更美观，并使网站或广告看起来更专业、更可信赖。

作为一个非常简单的规则，请使用两倍于正文文本大小的标题。

最后，在标题中使用粗体文本，并确保标题使用着陆页中使用的最大字体。

8 在PS中使用正确的文本选项

即使在Photoshop中选择了正确的文件格式后，仍然应该使用许多其他设置来实现最佳文本渲染。

对于初学者，将文本工具设置为“ Crisp”，而不是“ Sharp”。 Sharp主要用于印刷或超大文本。

将字距调整为“Optical”（将使字母之间的间距均匀），并添加一些负跟踪，大约为-5到-10。这是在Photoshop的“Character”工具中设置的那些选项的屏幕截图：

9 不需要对齐文本

讲真，不要这样做。

当你从整体上看待设计时，对齐的文本可能看起来更规则，但会降低可读性。

10 文本色彩强调

这是我从同为STM mod Shishev（排版专家）那里得到的一个重要提示——在你的着陆页上使用色彩强调功能可以提高CTR。

你问我说的是什么意思？可以在常规背景上添加其他颜色的小矩形背景（比如“黄色高亮”效果），也可以仅更改关键字和词组的文本颜色。

他已经对此进行了成千上万次测试，并将该方法用于多个咨询客户，这是他最喜欢的CTR提升技术之一。

同样，更改font-weight的作用也差不多。在阅读cmdeal的帖子时，你是不是也注意到他经常加粗关键词和短语呢？是的，这就是原因，吸引眼球的好技巧。

11 不要使用太多字体

选择字体时，最容易犯的第一个错误就是：选择太多字体。

不要在单个页面上使用十几种字体。两种字体足够，一种字体就也挺好。

如果你选择两种字体，确保它们有强烈的对比。为标题保留“花哨的”字体——较小的文本应该总是超级易读的。

12 定制你的个性化字体

你选择的精确字体对着陆页或广告的效果有很大的影响。

电影制片人埃罗尔·莫里斯（Errol Morris）在《纽约时报》上进行了一次测试，证明了某些字体比其他字体更可信——字面上只改变了字体。

你选择的字体非常强大，但是它之所以强大，是因为它使读者相信你。

诸如“ Baskerville”之类的字体非常正式，并号称“权威”。（这是莫里斯发现的字体，使《纽约时报》的文章令人信服。）

相比之下，虽然莫里斯（Morris）找到了Comic Sans，大量降低了可信度，但我发现它在不太正式的场所（例如约会广告）非常有效。再次，从字面上看，仅更改字体就大大提高了我一些约会活动中的CVR和CTR。

明智和适当地选择，并考虑拆分测试字体，别无其他。

来看下常用的标签列表，后文会一一介绍：

<!DOCTYPE html>

<head>

</head>

基本标签

使用 HTML5 doctype，不区分大小写。

<!DOCTYPE html>

声明文档使用的字符编码

更加标准的 lang 属性写法 http://zhi.hu/XyIa

简体中文
<html lang="zh-cmn-Hans">
繁体中文
<html lang="zh-cmn-Hant">

很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

菠萝和鳳梨其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为黄梨。

优先使用 IE 最新版本和 Chrome

SEO 优化

页面描述

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。文档

页面关键词

定义页面标题

定义网页作者

定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。文档

可选标签

为移动设备添加 viewport

content 参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

添加到主屏后的标题（iOS 6 新增）

是否启用 WebApp 全屏模式

设置状态栏的背景颜色

content 参数：

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。

如果设置为 default 或 black ,网页内容从状态栏底部开始。

如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

iOS 图标

rel 参数：

apple-touch-icon 图片自动处理成圆角和高光等效果。

apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。

iPhone 和 iTouch，默认 57x57 像素，必须有

iPad，72x72 像素，可以没有，但推荐有

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

Retina iPad，144x144 像素，可以没有，但推荐有

iOS 启动画面

官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004（标准分辨率）

iPad 竖屏 1536x2008（Retina）

iPad 横屏 1024x748（标准分辨率）

iPad 横屏 2048x1496（Retina）

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

iPhone/iPod Touch 竖屏 640x960 (Retina)

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）文档

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Windows 8

Windows 8 磁贴颜色

Windows 8 磁贴图标

其他

添加 RSS 订阅

添加 favicon icon

禁止 Chrome 浏览器中自动提示翻译

日，切入口官网进行了小幅改版，增加了人物的视差效果，虽然动作幅度不是很大，但是相对之前静态的图片而言，体验也是提高了不只一点，看图

网址

http://www.qierukou.com

大家可以感受一下

视差效果由来已久，到现在也已经有非常成熟的解决方案—— jquery.parallax.js 可以简单、快速的实现视差效果。

演示

http://www.qietu.cn/html/parallax-master/

在线咨询

上一篇：装上这个 App，让你的手机多出 91.596% 存
下一篇：公开信，深喉爆料…为什么互联网圈都爱“内幕传播”？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

学会这12条排版，让受众读懂你的广告

您的项目需求