學會這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條排版，讓受眾讀懂你的廣告

您的項目需求