學(xué)會這12條排版，讓受眾讀懂你的廣告

知道是什么真正摧毀了你的ROI嗎?

那就是沒人能讀你的廣告，或者你的LP。

這是我看的affiliate廣告活動中一個非常常見的問題，特別是affiliate新手。

就算你擁有世界上最好的、最有說服力的、最暢銷的文案，如果你的潛在客戶看不懂它，你將面臨不可逆轉(zhuǎn)的ROI災(zāi)難。

對很多人來說，排版很無聊。但你知道什么不無聊嗎？賺大筆的錢！學(xué)習(xí)一些關(guān)于排版的知識可以幫助你達(dá)到這個目標(biāo)。

讓我們開始吧！

1 使用更大的字體

幾乎每個人都選擇了字體太小的網(wǎng)頁。更大的字體其實(shí)可讀性更強(qiáng)，且可以降低跳出率（我把字體從12 pt調(diào)整到 16 pt后，明顯感受到權(quán)重網(wǎng)站的的跳出率下降了）這對于廣告主來說很關(guān)鍵，因?yàn)槲覀兊臐撛诳蛻舨⒉粫耆度肟次覀冋f了什么，如果閱讀的行為是困難的，他們就會停止。

Smashing Magazine認(rèn)為16px字體是最低限度，我同意這個說法。事實(shí)上，就像我上面說的，我在過去只是通過簡單改變字體大小來賺錢。如果你用的是72DPI的圖像，那就是16pt的字體。

下面這個字體較小的廣告，看起來怎么樣？

然后下面是一個合適的文本大小:

我們在后一幅圖中看到的小豬小姐的面積少了些，但顯然是值得的。

16px是你的正文文本，這得是你的廣告中最小的文本，標(biāo)題還要更大一些。

另一種看待這個問題的方法，以及其他你應(yīng)該考慮的事情，是看看你的著陸頁每行的字符數(shù)。75個字符是最佳可讀性的最大值，廣告文案50個字符更好。為什么？因?yàn)檠芯勘砻鳎x者每次讀完一行，都會在潛意識里得到一個小小的刺激，短行可以讓你的讀者保持專注和興奮。

你可以使用諸如viewport大小排版之類的技術(shù)來固定大多數(shù)設(shè)備上每行的字符數(shù)。

2 反差才是王道

這是你應(yīng)該遵循的另一個建議。

我認(rèn)為在廣告可讀性方面最大的錯誤是沒有使用足夠大的反差顯示。如果文本沒有從背景中足夠突出，它就無法被閱讀。

這里有一個例子:

那么，我們能做些什么來提高它的可讀性呢？

可讀對比度的黃金標(biāo)準(zhǔn)是白色背景，而不是非常黑的文本。關(guān)于這一點(diǎn)已經(jīng)做了很多很多的研究，而且每次它都是贏家——特別是，它顯示出讀者對白底黑字文本的理解比黑底白字文本多26%。

為什么不要全黑？因?yàn)殡娔X顯示器上的純黑色文字真的真的很黑，比印刷字體要黑得多。事實(shí)上，太黑會導(dǎo)致眼睛疲勞。再次，這使得我們的廣告閱讀起來不那么有趣。

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

如果你做不到這一點(diǎn)，那就盡量選擇明暗對比最強(qiáng)烈的顏色。在文本后面放置一個半透明的黑色方框來增加可讀性，或者使用一個透明度高的對比背景來突出文本都是不錯的技巧，比如這張圖片:

3 盡量使用HTML而不是圖像文本

如果可能的話，你應(yīng)該嘗試確保用戶的瀏覽器能呈現(xiàn)你的文本，而不是將其作為圖像。30多年來，人們一直在研究如何使用亞像素采樣等先進(jìn)技術(shù)，在屏幕上盡可能清晰、易讀地呈現(xiàn)文本。文本作為HTML文本總是比作為圖像具有更好的可讀性，如果簡單地用一個等價的HTML替換你的單圖來快速測試著陸頁，你將在大多數(shù)情況下看到一個CTR提升。

這就是為什么很多人會使用“單一圖像著陸頁”作為一種快速測試著陸頁的方法，不要在找到一個盈利點(diǎn)后繼續(xù)使用它們，而是得把它們重新創(chuàng)建為一個HTML頁面。

一張JPG圖像為16pt，一個PNG圖像7kb，小于500字節(jié)為文本。那是超過10倍的壓縮！

4 如果必須使用圖像文本，考慮PNG/GIF

顯然，你通常不能上傳HTML的banner。在這種情況下，應(yīng)該認(rèn)真考慮使用哪種圖像格式。

JPG在渲染文本方面很糟糕。它們是為攝影圖像而設(shè)計和優(yōu)化的，同樣的低層次“模糊化”使它們在這個角色上工作得很好，但在大多數(shù)文本圖像上卻表現(xiàn)很差。

PNG和GIF對于文本效果更好，干凈利落，讓文本更有吸引力，也更容易閱讀。另外，它們還可以更好地壓縮文本。PNG-8是一種特別有效的文本格式，通常比JPG文件小一半。

如果你的banner是基于文本的，特別是如果他們使用插圖或圖標(biāo)而不是照片，測試GIF或PNG banner以及IPG，你將看到CTR蹭蹭上漲。

事實(shí)上，在我不久前做的一個測試中，即使是24位PNG作為移動廣告也比IPG表現(xiàn)得更好。

5 行間距很重要

根據(jù)印刷商的說法，可讀性的“四大”要素之一是行高——行之間的垂直間距。這個很容易忘記。

一般來說，你的行高至少應(yīng)該設(shè)置為字體大小的1.5倍，可以一直嘗試到2.5倍，看看什么是最好的。大多數(shù)程序，包括Photoshop和Default CSS，都把這個設(shè)置得太小了。

你可以使用CSS中的行高屬性和Photoshop中的字符標(biāo)簽來改變它。

這是一個細(xì)微的調(diào)整，但是非常值得做。

6 嘗試為著陸頁使用系統(tǒng)字體

像谷歌字體和Typekit這樣的Web字體非常棒，可以使站點(diǎn)看起來非常有吸引力，但是它們是以加載速度為代價的。

正如我之前所說的，加載速度與ROI直接相關(guān)。這是著陸頁上你可以改變的唯一的變量，值得我們關(guān)注。

有人說這不利于頁面加載速度。它們不一定會停止頁面加載（盡管可以，尤其是在IE上），但它們確實(shí)會導(dǎo)致“無風(fēng)格文本閃爍”，即屏幕上的文本突然生硬地改變，而且它們會耗盡帶寬。下面是關(guān)于該問題的一個很好的概述。你可以深入地修復(fù)這些加載問題，但這也是比較困難、耗時的事情。

通常來說，除非你有充分的理由選擇非標(biāo)準(zhǔn)字體，不然最好為你的著陸頁使用系統(tǒng)字體。當(dāng)你選擇系統(tǒng)字體時，最好的選擇是基于Helvetica，Georgia或Verdana的“字體堆棧”——最易讀和通用的字體。

這些字體背后都經(jīng)過了數(shù)十年的研究，使它們在網(wǎng)絡(luò)上盡可能地可讀。

你還應(yīng)該注意確保系統(tǒng)字體具有備用選項(xiàng)。這就是所謂的“字體棧”，它既可以讓你利用其他較少使用的系統(tǒng)字體，又意味著你的讀者都不會看到難以理解的笨拙文本。

下面是三個好的字體堆棧：

? Georgia-based: Cambria, Georgia, serif;

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

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

當(dāng)然，對于廣告，你可以忽略所有這些，并使用所需的任何字體，因?yàn)闊o論如何它們都將呈現(xiàn)為圖像。

7 使標(biāo)題尺寸成比例

另一個簡單但有效的調(diào)整，即不要隨機(jī)選擇標(biāo)題大小，最好使其與你的正文字體大小成比例。

這會讓整體設(shè)計更美觀，并使網(wǎng)站或廣告看起來更專業(yè)、更可信賴。

作為一個非常簡單的規(guī)則，請使用兩倍于正文文本大小的標(biāo)題。

最后，在標(biāo)題中使用粗體文本，并確保標(biāo)題使用著陸頁中使用的最大字體。

8 在PS中使用正確的文本選項(xiàng)

即使在Photoshop中選擇了正確的文件格式后，仍然應(yīng)該使用許多其他設(shè)置來實(shí)現(xiàn)最佳文本渲染。

對于初學(xué)者，將文本工具設(shè)置為“ Crisp”，而不是“ Sharp”。 Sharp主要用于印刷或超大文本。

將字距調(diào)整為“Optical”（將使字母之間的間距均勻），并添加一些負(fù)跟蹤，大約為-5到-10。這是在Photoshop的“Character”工具中設(shè)置的那些選項(xiàng)的屏幕截圖：

9 不需要對齊文本

講真，不要這樣做。

當(dāng)你從整體上看待設(shè)計時，對齊的文本可能看起來更規(guī)則，但會降低可讀性。

10 文本色彩強(qiáng)調(diào)

這是我從同為STM mod Shishev（排版專家）那里得到的一個重要提示——在你的著陸頁上使用色彩強(qiáng)調(diào)功能可以提高CTR。

你問我說的是什么意思？可以在常規(guī)背景上添加其他顏色的小矩形背景（比如“黃色高亮”效果），也可以僅更改關(guān)鍵字和詞組的文本顏色。

他已經(jīng)對此進(jìn)行了成千上萬次測試，并將該方法用于多個咨詢客戶，這是他最喜歡的CTR提升技術(shù)之一。

同樣，更改font-weight的作用也差不多。在閱讀cmdeal的帖子時，你是不是也注意到他經(jīng)常加粗關(guān)鍵詞和短語呢？是的，這就是原因，吸引眼球的好技巧。

11 不要使用太多字體

選擇字體時，最容易犯的第一個錯誤就是：選擇太多字體。

不要在單個頁面上使用十幾種字體。兩種字體足夠，一種字體就也挺好。

如果你選擇兩種字體，確保它們有強(qiáng)烈的對比。為標(biāo)題保留“花哨的”字體——較小的文本應(yīng)該總是超級易讀的。

12 定制你的個性化字體

你選擇的精確字體對著陸頁或廣告的效果有很大的影響。

電影制片人埃羅爾·莫里斯（Errol Morris）在《紐約時報》上進(jìn)行了一次測試，證明了某些字體比其他字體更可信——字面上只改變了字體。

你選擇的字體非常強(qiáng)大，但是它之所以強(qiáng)大，是因?yàn)樗棺x者相信你。

諸如“ Baskerville”之類的字體非常正式，并號稱“權(quán)威”。（這是莫里斯發(fā)現(xiàn)的字體，使《紐約時報》的文章令人信服。）

相比之下，雖然莫里斯（Morris）找到了Comic Sans，大量降低了可信度，但我發(fā)現(xiàn)它在不太正式的場所（例如約會廣告）非常有效。再次，從字面上看，僅更改字體就大大提高了我一些約會活動中的CVR和CTR。

明智和適當(dāng)?shù)剡x擇，并考慮拆分測試字體，別無其他。

來看下常用的標(biāo)簽列表，后文會一一介紹：

<!DOCTYPE html>

<head>

</head>

基本標(biāo)簽

使用 HTML5 doctype，不區(qū)分大小寫。

<!DOCTYPE html>

聲明文檔使用的字符編碼

更加標(biāo)準(zhǔn)的 lang 屬性寫法 http://zhi.hu/XyIa

簡體中文
<html lang="zh-cmn-Hans">
繁體中文
<html lang="zh-cmn-Hant">

很少情況才需要加地區(qū)代碼，通常是為了強(qiáng)調(diào)不同地區(qū)漢語使用差異，例如：

菠蘿和鳳梨其實(shí)是同一種水果。只是大陸和臺灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱之為黃梨。

優(yōu)先使用 IE 最新版本和 Chrome

SEO 優(yōu)化

頁面描述

每個網(wǎng)頁都應(yīng)有一個不超過 150 個字符且能準(zhǔn)確反映網(wǎng)頁內(nèi)容的描述標(biāo)簽。文檔

頁面關(guān)鍵詞

定義頁面標(biāo)題

定義網(wǎng)頁作者

定義網(wǎng)頁搜索引擎索引方式，robotterms是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。文檔

可選標(biāo)簽

為移動設(shè)備添加 viewport

content 參數(shù)：

width viewport 寬度(數(shù)值/device-width)
height viewport 高度(數(shù)值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除），可以在頁面加載時最小化上下狀態(tài)欄。這是一個布爾值，可以直接這樣寫：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 設(shè)備

添加到主屏后的標(biāo)題（iOS 6 新增）

是否啟用 WebApp 全屏模式

設(shè)置狀態(tài)欄的背景顏色

content 參數(shù)：

default 默認(rèn)值。
black 狀態(tài)欄背景是黑色。
black-translucent 狀態(tài)欄背景是黑色半透明。

如果設(shè)置為 default 或 black ,網(wǎng)頁內(nèi)容從狀態(tài)欄底部開始。

如果設(shè)置為 black-translucent ,網(wǎng)頁內(nèi)容充滿整個屏幕，頂部會被狀態(tài)欄遮擋。

禁止數(shù)字識自動別為電話號碼

iOS 圖標(biāo)

rel 參數(shù)：

apple-touch-icon 圖片自動處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統(tǒng)自動添加效果，直接顯示設(shè)計原圖。

iPhone 和 iTouch，默認(rèn) 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 的啟動畫面是不包括狀態(tài)欄區(qū)域的。

iPad 豎屏 768 x 1004（標(biāo)準(zhǔn)分辨率）

iPad 豎屏 1536x2008（Retina）

iPad 橫屏 1024x748（標(biāo)準(zhǔn)分辨率）

iPad 橫屏 2048x1496（Retina）

iPhone 和 iPod touch 的啟動畫面是包含狀態(tài)欄區(qū)域的。

iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率)

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 標(biāo)簽，用來控制選項(xiàng)卡顏色。

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

Windows 8

Windows 8 磁貼顏色

Windows 8 磁貼圖標(biāo)

其他

添加 RSS 訂閱

添加 favicon icon

禁止 Chrome 瀏覽器中自動提示翻譯

日，切入口官網(wǎng)進(jìn)行了小幅改版，增加了人物的視差效果，雖然動作幅度不是很大，但是相對之前靜態(tài)的圖片而言，體驗(yàn)也是提高了不只一點(diǎn)，看圖

網(wǎng)址

http://www.qierukou.com

大家可以感受一下

視差效果由來已久，到現(xiàn)在也已經(jīng)有非常成熟的解決方案—— jquery.parallax.js 可以簡單、快速的實(shí)現(xiàn)視差效果。

演示

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

在線咨詢

上一篇：裝上這個 App，讓你的手機(jī)多出 91.596% 存
下一篇：公開信，深喉爆料…為什么互聯(lián)網(wǎng)圈都愛“內(nèi)幕傳播”？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

學(xué)會這12條排版，讓受眾讀懂你的廣告

您的項(xiàng)目需求